Ik zie jullie al denken, oh nee, toch niet wéér een vraag over die div die 100% hoog moet worden? Nee, gelukkig niet maar het heeft er wel mee te maken.
Ik ben net begonnen met een site, en ik wil die graag een achtergrondplaatje geven. In dit geval een beetje een door photoshop bewerkte muur. A.u.b. geen vragen over het onderwerp van de website, dat komt t.z.t wel. In ieder geval, ik zit met een probleem.
Ik wil die achtergrond op vrijwel elke resolutie goed op het scherm weergeven. In photoshop heb ik even het design er uit gesloopt zodat we alleen de situatie over houden die ik dmv de hulp uit dit topic wil maken:
Plaatje op imageshack (Popups!)
Nu wordt het maken van die achtergrond vrij lastig. Ik wil in ieder geval dat de achtergrond zich over de hele viewport uitstrekt, en fixed is. De vraag is: hoe ga ik dat doen zodat het mooi blijft op meerdere resoluties? Min conclusie na tientalle minuten zorgvuldig nadenken: snij de achtergrond in tweeën, plak het linkse deel als background in de HTML en lijn die uit op de bottom, en doe hetzelfde met het rechtse deel maar dan op de body en rechts uitgelijnd. Op zich niks mis mee, maar nu gaan de problemen komen.
Ik wil van het zwarte vlak waar de inhoud straks in gaat komen een wrapper div maken die in het midden wordt uitgelijnd, heel simpel met margin:auto en een vaste breedte. De wrapper moet óf 100% van de viewport zijn, of mee stretchen met de inhoud als die groter is dan de viewport. Nu blijkt dit praktisch onmogelijk op te lossen in mijn situatie. Want de achtergrond van de HTML blijft altijd de hele hoogte beslaan, en die van de body en de wrapper niet. Nu is het wel op te lossen dat de achtergrond van de body, én van de wrapper de hele viewport te laten beslaan, maar dan gaat het weer mis als de inhoud groter is dan de viewport: de wrapper gaat wel mee, maar de achtergrond van de body niet.
Het is misschien een beetje onduidelijk, maar ik was net zo gefrustreerd dat ik mn hele HTML en CSS heb weggeknikkerd en opnieuw ben begonnen, dus ik heb geen echte actievoorbeelden. En ik zou het erg waarderen als er niemand met een linkje naar Google zou willen komen, want daar heb ik de afgelopen dagen namelijk al wat uurtjes gespendeerd op zoek naar de oplossing voor dit probleem. Wat ik graag zou willen is een inzicht van iemand die kan aangeven hoe ik dit het beste kan oplossen.
En oh ja, ik hecht op deze site ook veel waarde aan SEO en laadtijd, dus gelieve die te respecteren
Misschien ben ik niet echt in de positie om eisen te stellen, maar toch
Edit: Even vergeten te vermelden dat het zwarte gedeelte met de glow geen deel uitmaken van de achtergrond.
Ik ben net begonnen met een site, en ik wil die graag een achtergrondplaatje geven. In dit geval een beetje een door photoshop bewerkte muur. A.u.b. geen vragen over het onderwerp van de website, dat komt t.z.t wel. In ieder geval, ik zit met een probleem.
Ik wil die achtergrond op vrijwel elke resolutie goed op het scherm weergeven. In photoshop heb ik even het design er uit gesloopt zodat we alleen de situatie over houden die ik dmv de hulp uit dit topic wil maken:
Plaatje op imageshack (Popups!)
Nu wordt het maken van die achtergrond vrij lastig. Ik wil in ieder geval dat de achtergrond zich over de hele viewport uitstrekt, en fixed is. De vraag is: hoe ga ik dat doen zodat het mooi blijft op meerdere resoluties? Min conclusie na tientalle minuten zorgvuldig nadenken: snij de achtergrond in tweeën, plak het linkse deel als background in de HTML en lijn die uit op de bottom, en doe hetzelfde met het rechtse deel maar dan op de body en rechts uitgelijnd. Op zich niks mis mee, maar nu gaan de problemen komen.
Ik wil van het zwarte vlak waar de inhoud straks in gaat komen een wrapper div maken die in het midden wordt uitgelijnd, heel simpel met margin:auto en een vaste breedte. De wrapper moet óf 100% van de viewport zijn, of mee stretchen met de inhoud als die groter is dan de viewport. Nu blijkt dit praktisch onmogelijk op te lossen in mijn situatie. Want de achtergrond van de HTML blijft altijd de hele hoogte beslaan, en die van de body en de wrapper niet. Nu is het wel op te lossen dat de achtergrond van de body, én van de wrapper de hele viewport te laten beslaan, maar dan gaat het weer mis als de inhoud groter is dan de viewport: de wrapper gaat wel mee, maar de achtergrond van de body niet.
Het is misschien een beetje onduidelijk, maar ik was net zo gefrustreerd dat ik mn hele HTML en CSS heb weggeknikkerd en opnieuw ben begonnen, dus ik heb geen echte actievoorbeelden. En ik zou het erg waarderen als er niemand met een linkje naar Google zou willen komen, want daar heb ik de afgelopen dagen namelijk al wat uurtjes gespendeerd op zoek naar de oplossing voor dit probleem. Wat ik graag zou willen is een inzicht van iemand die kan aangeven hoe ik dit het beste kan oplossen.
En oh ja, ik hecht op deze site ook veel waarde aan SEO en laadtijd, dus gelieve die te respecteren
Misschien ben ik niet echt in de positie om eisen te stellen, maar toch Edit: Even vergeten te vermelden dat het zwarte gedeelte met de glow geen deel uitmaken van de achtergrond.
[ Voor 3% gewijzigd door Svennetjee op 14-04-2009 21:43 ]
Tis helaas wel met javascript maar ja.. Is iig gewoon nog compatible wanneer ze JS uit hebben staan (dan zie je de achtergrond gewoon niet)./u/7685/ruinmytune-60x60.png?f=community)
)
/u/197791/crop5b8430e7097fd_cropped.png?f=community)
