background-image verschuift content

[hypercube]

Ik kom er maar niet uit.. mijn background image is vrij groot en ik wil gewoon dat hij zich als background image gedraagt, maar hij verschuift al mijn tekst naar beneden (alfbeeldingen niet :S ). Hierzo is de pagina (gewoon pagina bron oproepen voor de code):
http://wshadows.com/test/

Bovendien wil ik de #top div een bepaalde height geven zodat het content blok en mooi onder komt maar dat gebeurt alleen als ik de height op 0 zet, wat nergens op slaat.
weet iemand wat ik allemaal fout doe?

 

[Naarling]

Je #wrapper heeft een bovenmarge van 130px, als je die weghaalt is er geen probleem. Dat heeft met de achtergrondafbeelding niets te maken. Die #top heeft een height meegekregen van 150px, dat lijkt prima te werken, toch?

Waarom maak je trouwens geen gebruik van <header>, <section> en <footer>?

EDIT: hm, bedenk me net dat ik je vraag wellicht verkeerd heb begrepen. Heb je het over het vlak waar de tekst in staat of over de tekst zelf?

 

[hypercube]

En als ik de 'wrapper' id een absolute position geef springt de balk helemaal onderaan de website omhoog :S

 

[Naarling]

En als ik de 'wrapper' id een absolute position geef springt de balk helemaal onderaan de website omhoog :S

Dat moet je dan ook niet doen . Met position absolute haal je een element uit de normale stroom van elementen, waardoor andere elementen er overheen of onderdoor kunnen drijven, niet iets wat je wilt doen met de hoofdmoot van je inhoud.

 

[hypercube]

Je #wrapper heeft een bovenmarge van 130px, als je die weghaalt is er geen probleem. Dat heeft met de achtergrondafbeelding niets te maken. Die #top heeft een height meegekregen van 150px, dat lijkt prima te werken, toch?

Waarom maak je trouwens geen gebruik van <header>, <section> en <footer>?

EDIT: hm, bedenk me net dat ik je vraag wellicht verkeerd heb begrepen. Heb je het over het vlak waar de tekst in staat of over de tekst zelf?

Thx voor die top margin tip, zag ik helemaal over het hoofd, dat is nu opgelost. Maar zoals je kan zien staat die tekst helemaal naar beneden (onder de background image die vrij hoog is).. hoe kan het dat de tekst helemaal naar beneden wordt geduwd door een background image terwijl de witte box waar de tekst in staat wel gewoon ove die background heen gaat??

 

[hypercube]

Waarom maak je trouwens geen gebruik van <header>, <section> en <footer>?

Nog even daarover: Ik heb het daar nu naar veranderd (ook in mijn CSS) maar dan is de hele pagina ontregeld :/
Hebben die elementen al standaard eigenschappen ofzo?

 

[Naarling]

Thx voor die top margin tip, zag ik helemaal over het hoofd, dat is nu opgelost. Maar zoals je kan zien staat die tekst helemaal naar beneden (onder de background image die vrij hoog is).. hoe kan het dat de tekst helemaal naar beneden wordt geduwd door een background image terwijl de witte box waar de tekst in staat wel gewoon ove die background heen gaat??

De background is het probleem niet, het probleem, en dat had ik eerst over het hoofd gezien, is dat je #logo een hoogte van 589px hebt meegegeven, die drukt de tekst dus omlaag. Een oplossing hiervoor is om #logo position:absolute; mee te geven en left:-300px;(dat laatste omdat je logo anders ongeveer in het midden komt te staan). De rest van de inhoud zal zich dan niets meer van het logo aan trekken.

Nog even daarover: Ik heb het daar nu naar veranderd (ook in mijn CSS) maar dan is de hele pagina ontregeld :/
Hebben die elementen al standaard eigenschappen ofzo?

Nee, en dat is net het probleem Als browsers een element tegenkomen waarvan ze niet goed weten wat ze er mee moeten geven ze het display:inline, dat wil je in dit geval niet. Maar, daar is met CSS makkelijk een mouw aan te passen.

article,aside,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section { 
display:block; 
}

 

[hypercube]

Je bent geniaal, thanks