Persoonlijk zou ik gebruik maken van floats, en niet van absoluut gepositioneerde elementen.
DIVs zijn van nature block level elementen. Dit houdt in dat er niets voor of achter zo'n element kan staan, ze zijn 'regelvullend'.
Door het attribuut float mee te geven, worden ze in een omringend iets (body, container-div) 'ingeladen' als het ware (alsof je een doos vult, van links naar rechts als je links float, of van rechts naar links als je rechts float).
In jouw code loopt het een en ander een beetje door elkaar.
Wat ik zou doen is een container-div maken waarin de rest van je site komt, met hierin 3 gefloate divs (links, midden en rechts).
Nee, dat hoeft niet bij float. Als je een element float, zal de browser zelf kijken of een gefloate div op dezelfde 'regel' past in de container, en anders plaatst 'ie deze gewoon op de volgende regel.
De header staat op de goed plaats (volges mij)
de linker div,en de midden div staan ook goed.
en de rechter div, staat een regel lager??
Verder als ik een border om de container zet, laat ie die niet zien?
Moet ik daar nog meer waardes aan meegeven?
En de border rondom de header doet het in ie wel, en in ff niet?
edit: even 2 screenies (van ff en ie)
-> http://img206.i...te2uk8.jpg
edit2: lolz, foutje, dat was niet de bedoelign:s
dit hoort natuurlijk niet in de cat php/mysql;-)
edit3: ik ben gewoon verder gegaan met het voorbeeld (tut) en daarin gebruikte ze voor de content div geen vaste breedte.
Dit wil ik zelf wel, alleen heb ik nog niet aangepast.
Thomas - 21/03/2007 11:47 (laatste wijziging 21/03/2007 11:49)
Moderator
Hm, je wilt je layout horizontaal vullend maken?
Dus een soort van 150,*,150 layout, waarbij * dus de breedte van je scherm is minus 2x150. Dan zul je wel moeten werken met absoluut gepositioneerde elementen.
Dat zou je dan kunnen doen door je linker div links uit te lijnen met left: 0px, je rechter div met right: 0px; en je middelste div top: 0px en een linker- en een rechtermarge van 150px.
Maar wellicht is het handiger om vaste afmetingen in je site te hanteren, waarbij je uitgaat van een minimale resolutie (1024x768). En dan kun je floats gebruiken.
Waar je ook rekening mee moet houden is dat als je een div van 150px hebt en een border van 1px hij dus 152px word ipv de opgegeven 150 (weet niet of je dat al wist )
@Ultimatum, idd dat snap ik.
Maar eigenlijk kan ik beter dat voorbeeld uit die tut weggooien.
Want bijna alles wat erin staat klopt niet.. ;) Zo dus ook dit.:p
Thomas - 21/03/2007 12:01 (laatste wijziging 21/03/2007 12:01)
Moderator
De oplossing die ik voorstelde is precies die in de tut, alleen laat BladiN 15px over aan de rechterkant voor een scrollbalk.
Ik kan zo gauw geen fouten ontdekken in die tut, en heb die in het verleden gebruikt om mijzelf het werken met divs eigen te maken, dus... .
Dankje Rens & FangorN.
Mijn code verschilt op een paar kleine dingen na, niet zoveel met de tut, en met jou code Rens.
Ik heb daar btw nog wel 2 vraagjes over:
1. Waarvoor is dit: clear: both;
2. Waarom begind jou content text, niet evenhoog als je links en rechts text?
Edit: en nog 1 klein vraagje.
Waarom doe je eerst dit: <div id="links"> dan <div id="rechts"> en dan pas <div id="midden">? Zit daar een logica in, of kan het gewoon niet anders met css?
iig al bedankt voor jullie hulp, ik leer al heel veel zo;-)
1. Haal maar eens weg, en zie wat er gebeurd
2. Hmmz, in Firefox werkt het perfect, in IE niet.
Heb thuis nog een code liggen die in beide werkt.
Maar ben nu niet thuis, dus kan er zo niet bij.
En zo'n pro ben ik (nog) niet in divs, dus zou het zo niet 1, 2, 3 kunnen oplossen
@rens, ik heb het probleem opgelost.
Je kunt de volgorde nu gewoon zo instellen:
-header
-div links
-div content
-div rechts
-footer
en dan in je css het volgende toevoegen bij de content div:
- float: left;
en het volgende weghalen ook bij de content div:
- margin-left: 150px;
- margin-right: 150px;
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
)
.
^^ 
Actiefste leden van de maand
