[CSS/HTML] achtergrond loopt half/niet met de div met tekst

[Verwijderd]

Ik heb op het internet een paar tutorials gevolgd en hier en daar eens de source-code bestuurd van enkele websites. Ik ben dus zelf ook maar eens gaan experimenteren met het volgende resultaat:

-de website (IE only - zie verder) : linkje
-met bijbehorend csstje : linkje


De opbouw van de website (simplified)

aperte class voor de background die bestaat uit een dikke linkerborder en het overblijvende rechtergedeelte (.split)

twee classes die de positie van de tekst bepalen (eentje voor het menu en eentje voor de tekst/inhoud) op de background (respectievelijk .menu en .content)


<div class="split">

• <div class="menu"></div>

• <div class="content"></div>

</div>

dit met de bedoeling dat wanneer het menu of de tekst groter wordt (meer height dus); de achtergond dan mee groeit (dus niet enkel die van het menu of enkel die van de content; wanneer ik de background in hun eigen class zou stoppen) ; nu staat voor zowel de class menu als content hun "position" op "relative"; met gevolg de content begint op de hoogte waar het menu is gestopt; als ik echter de position van content op absolute zet, staat de tekst wel van boven maar loopt de background niet meer met de content mee (wel met het menu dat nog op relative staat). (zie hier (enkel IE)) ;
en een nog groter probleem is dat bij goede vriend FireFox er helemaal geen background is

Kan iemand mij helpen?

//

foutje in de topic titel: [CSS/HTML] achtergrond loopt half/niet mee met de div met tekst

[ Voor 12% gewijzigd door Verwijderd op 09-03-2005 19:49 ]

[HyperioN]

Waarom gebruik je dan een aparte div voor je achtergrond?
Aangezien beide divs (content en menu) gewoon naast elkaar bovenaan de pagina staan, kun je die gewoon absoluut positioneren en height: auto; meegeven. En dan daar gewoon de achtergrond in.

En bovendien is het netter om je div's een id te geven in plaats van een class. Ze komen toch maar één keer voor.

/Edit: heb heel snel even voor je dit in elkaar geflanst: http://geometric-elements.com/bla/index.htm.
Je had veel divs die echt nergens op sloegen...alles was dubbel ongeveer. Dit komt een heel eind in de richting denk ik. En werkt ook gewoon in FF.

Of sla ik nu de plank volledig mis en begrijp ik je probleem niet?

[ Voor 109% gewijzigd door HyperioN op 09-03-2005 20:12 ]

[Verwijderd]

Niet helemaal mis, maar nu is het menu niet evenlang als de content, wat toch wel de bedoeling is:
ik heb even een jpgtje gemaakt van hoe het eruit zou moeten zien:


Let dus op die lege ruimte onder NFSUII

[CH4OS]

DIV's worden altijd ONDER elkaar geplaatst om de een of andere reden, waarom dat is, weet ik ook niet precies, ik weet wel, dat de oplossing bij jou <span> is... Zou zeggen probeer de <span> ens

[Rowanov]

Verwijderd schreef op woensdag 09 maart 2005 @ 20:52:
Niet helemaal mis, maar nu is het menu niet evenlang als de content, wat toch wel de bedoeling is:
ik heb even een jpgtje gemaakt van hoe het eruit zou moeten zien:

[afbeelding]
Let dus op die lege ruimte onder NFSUII

Met gebruik van div's en css kan je twee dingen niet even lang maken, dat zul je moeten faken met behulp van faux-collumns. Succes.

edit:
Er is trouwens helemaal niets mis met het gebruik van id's, alleen mag je een bepaald id maar 1 keer per pagina voorkomen. Je footer, header, content en container kan je dus gewoon wel een id geven.

[ Voor 17% gewijzigd door Rowanov op 09-03-2005 21:04 ]

[crisp]

Verwijderd schreef op woensdag 09 maart 2005 @ 20:52:
Niet helemaal mis, maar nu is het menu niet evenlang als de content, wat toch wel de bedoeling is:
ik heb even een jpgtje gemaakt van hoe het eruit zou moeten zien:

[afbeelding]
Let dus op die lege ruimte onder NFSUII

Dat soort dingen zijn wel te truuken dmv een achtergrondplaatje op je container.

GJ-tje schreef op woensdag 09 maart 2005 @ 20:55:
DIV's worden altijd ONDER elkaar geplaatst om de een of andere reden, waarom dat is, weet ik ook niet precies, ik weet wel, dat de oplossing bij jou is... Zou zeggen probeer de ens

ahum, een span is alleen voor inline bedoelt, niet om blokken van te maken. Verdiep je eens in CSS positioning...

[Verwijderd]

Dat soort dingen zijn wel te truuken dmv een achtergrondplaatje op je container.

En hoe vraag ik dat een google ?

[Rowanov]

Verwijderd schreef op woensdag 09 maart 2005 @ 21:05:
En hoe vraag ik dat een google ?

In mijn post staat een link

[CH4OS]

crisp schreef op woensdag 09 maart 2005 @ 21:02:
ahum, een span is alleen voor inline bedoelt, niet om blokken van te maken. Verdiep je eens in CSS positioning...

Nadeel daarvan is, dat IE en FF het allebei anders renderen, met een paar px verschil, vandaar dat ik er liever van af zie...

[Rowanov]

GJ-tje schreef op woensdag 09 maart 2005 @ 21:07:
[...]
Nadeel daarvan is, dat IE en FF het allebei anders renderen, met een paar px verschil, vandaar dat ik er liever van af zie...

En ook dat kan je oplossen door gewoon alle dingen als margin, padding, border en line-heigth goed in te stellen.

[Verwijderd]

Rowanov schreef op woensdag 09 maart 2005 @ 21:06:
[...]

In mijn post staat een link

Mijn Welgemeende Excuses

[CH4OS]

Rowanov schreef op woensdag 09 maart 2005 @ 21:07:
[...]

En ook dat kan je oplossen door gewoon alle dingen als margin, padding, border en line-heigth goed in te stellen.

Niet in de layout die ik tijdje terug had... Daar werden complete divs altijd door de een smaller gerenderd dan de ander... Als je dan een padding of margin e.d. in had gesteld, zag je dat verschil tussen de breedte dan, niet veranderd, maar in dat ding zelf... Of het ding werd breder, maar dan was het ook bij allebei zo, dus schoot ik er (toen) niks mee op

[Rowanov]

GJ-tje schreef op woensdag 09 maart 2005 @ 21:19:
[...]
Niet in de layout die ik tijdje terug had... Daar werden complete divs altijd door de een smaller gerenderd dan de ander... Als je dan een padding of margin e.d. in had gesteld, zag je dat verschil tussen de breedte dan, niet veranderd, maar in dat ding zelf... Of het ding werd breder, maar dan was het ook bij allebei zo, dus schoot ik er (toen) niks mee op

Als je het zo oplost:

Cascading Stylesheet:

* {
   margin: 0;
   padding: 0;
   border: 0;
}

en vervolgens gewoon per object waar je geen 0 als waarde wilt het naar gelang instellen, dan werkt het gewoon crossbrowser.
Wat ook nog wel eens wil helpen, om het verschil in boxmodel op te heffen (tussen IE en FF):

Cascading Stylesheet:

* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
}

[PeetR]

GJ-tje schreef op woensdag 09 maart 2005 @ 21:19:
[...]
Niet in de layout die ik tijdje terug had... Daar werden complete divs altijd door de een smaller gerenderd dan de ander... Als je dan een padding of margin e.d. in had gesteld, zag je dat verschil tussen de breedte dan, niet veranderd, maar in dat ding zelf... Of het ding werd breder, maar dan was het ook bij allebei zo, dus schoot ik er (toen) niks mee op

Dat heeft te maken dat IE de CSS regels aan z'n laars lapt en de padding buiten de width van de box rekent, terwijl FF het in dat opzicht goed doet en de padding binnen de width van de box laat vallen.

[Verwijderd]

Dan toch nog een vraagje over die "faux-columns"; als ik die background in body zet lukt het allemaal wel; maar hoe krijg ik er dan een header/footer boven/onder & hoe kan ik het resterende gebeid naast dat background plaatje ook een plaatje geven ipv een kleur?

[JHS]

Dan zet je de background op een container div voor je content / menu gedeelte?

Verwijderd schreef op donderdag 10 maart 2005 @ 16:20:
(...) hoe kan ik het resterende gebeid naast dat background plaatje ook een plaatje geven ipv een kleur?

Wat bedoel je daarmee?

[ Voor 61% gewijzigd door JHS op 10-03-2005 18:01 ]

[Rowanov]

Je geeft je body een achtergrond kleur/plaatje, en je container het faux-column plaatje als achtergrond.
Edit: Code ter verduidelijking:

Cascading Stylesheet:

body {
    background: url(iets.jpg);
}
#container {
    background: url(iets2.jpg);
}

HTML:

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div> 
</div>

[ Voor 75% gewijzigd door Rowanov op 10-03-2005 18:12 ]

[Verwijderd]

Het probleem is dan dat ik weer problemen krijg met die absolute en relative zoals in het begin; in ieder geval heb ik het op een iets mss iets minder nette manier opgelost; ik heb het plaatje voor de background zeer breed gemaakt, dacht iets van 2000px; hierin heb ik dus links mijn "container" gezet en de rest opgevuld met mijn vervangd achtergrond kleurtje.
De footer heb ik dan maar gelaten ...

In ieder geval bedank ik iedereen en de rest zal zelf wel lukken (hoop ik )