[CSS] Div gebruik in kolommen

[Kaastosti]

Het is heel erg, maar ik moet voor de tweede keer vandaag een topic openen omdat ik er niet uit kom. In navolging van het vorige topic ben ik nu zover dat ik een site in plaats van met tabbelen nu met divs wil opbouwen. Aangezien jullie ook gek van me worden ga ik voor de overzichtelijkste topic award... hopelijk helpt het bij de beeldvorming.

Hierbij ondervind ik op dit moment twee problemen:

• Geneste divs in FF en IE verschillen
• Positionering geneste divs

Op die site staan een aantal afgekaderde stukjes, die ook met divs zijn gedaan. Deze bestaan uit een wrapper, waarin een div zit met een titeltje en welke zelf ook weer als wrapper dienst doet. Daar binnen kan vanalles komen; gewoon tekst of tabbelen, whatever. De afmetingen en manier waarop deze op het scherm wordt gezet verschilt echter en ik kan er niet achter komen waar dit aan ligt. Onderstaande plaatjes is hoe het er nu uit ziet: links Internet Explorer en recht Firefox. De rode lijn is de buitenste wrapper, de zwarte de binnenste met titel.

In IE gaat het prachtig, in Firefox zoals je kunt zien niet echt. Niet alleen ziet het er raar uit als je er hiervan een aantal op het beeld hebt staan, ze lijken zich ook niets aan te trekken van de randen van elkaar. Die lijnen lopen dus allemaal door elkaar heen.

Voor zo'n kader gebruik ik de volgende code: (waarvoor dank aan Borizz)

HTML:

<div style='border: 1px solid red; position: relative; padding: 10px; width: 100%;'>
   <div style='border: 1px solid black; position: relative; padding: 10px; width: 100%;'>
      <h2 style='position: absolute;
                 left: 10px;
                 top: 0px;
                margin-top: -10px;
                height: 17px;
                padding: 1px;
                border: 1px;
                background-color: white;
                font-family: Verdana, Arial, sans-serif;
                font-size: 14px;
                color: black;'>titel</h2>
                        
   </div>
</div>

Ook heb ik een probleem met de positionering onder elkaar, aangezien ik gebruik maar van absolute positionering. De kolombreedtes op de site zijn vast, dus makkelijk in te vullen. De hoogtes van de afgekaderde stukjes kan echter nogal eens wijzigen. De onderliggende stukjes moeten dan uiteraard netjes naar beneden opschuiven.

Ik kan natuurlijk net als bij de absolute posities vanaf de zijkant gezien, de hoogte vast opgeven. Dit is pas interessant in Kolom 2, waar meerdere stukjes onder elkaar komen. Ik wil dus best een 'top: 150px' opgeven, alleen moet die 150 wel afkomen van de hoogte van de bovenliggende div.

Voor de kolommenstructuur gebruik ik nu de volgende code:

HTML:

    $width1 = 280;
$width2 = 320;
$width3 = 186;
    
<div style='text-align: left; position: relative; width: 100%; margin: 0 auto;'>
   <div style='position: absolute; left: 0px; top: 0px; width: ".$width1."px; height: 100%;'>
      << insert kader >>
   </div>
   <div id='top5' style='position: absolute; left: ".$width1."px; top: 0px; margin: 0 auto; height: 100%; width: ".$width2."px;'>
      << insert kader >>
   </div>
   <div style='position: absolute; left: ".$width1."px; [color=red]top: ??px[/color]; margin: 0 auto; height: 100%; width: ".$width1."px;'>
      << insert kader >>
   </div>
   <div style='position: absolute; right: 0px; top: 0px; width: ".$width3."px; height: 100%;'>
      << insert kader >>
   </div>
</div>

Wat ik heb geprobeerd is die bovenliggende div een id te geven en door middel van document.getElementById('div').style.offsetHeight die waarde er uit te krijgen. Ik krijg dat geval niet eens in een normale alert ter controle

Uiteraard google afgekocht, tutorial sites gezien, search gebruikt etc. Ook voorbeeldvan van andere GoTters geprobeerd, maar deze hielpen helaasch niet bij dit specifieke probleem. Bij voorbaat dank voor de wederom genomen moeite.

[Boelie-Boelie]

Voor die layout kun je misschien ff kijken naar het voorbeeld van de Piefecta.

En je test toch wel eerst in FF op Opera en daarna pas in IE? (Er is namelijk een grote kans dat je met positioneren met een IE-bug te maken krijgt.)

[ Voor 37% gewijzigd door Boelie-Boelie op 27-10-2005 19:52 ]

[crisp]

Probeer zoveel mogelijk in de flow te werken. Als je een vaste header hebt, zet dan daaronder een container waarbinnen je dan je kolommen gaat uitwerken. Binnen de flow valt die container al automagisch onder je header - daarvoor hoef je nog niets met positionering te doen.
Verder zorg je er natuurlijk voor dat je in standards compliant mode werkt (ergo: een volledige DTD opgeeft) zodat in ieder geval de boxmodel verschillen tussen IE6 en andere browsers al wegvallen.
Voor IE<6 zal je dan nog wel eea moeten corrigeren in een extra stylesheet, maar dat is dan later zorg. Als je in ieder geval zorgt dat je zo min mogelijk width/height combineert met padding of borders op hetzelfde element heb je in ieder geval al minder last van problemen door de verschillende boxmodels.

[Kaastosti]

Dat in de flow werken lag ook ongeveer in de planning, tenminste, ik denk dat dat in ieder geval is wat je bedoelt. Ik ben atm bezig om meteen alles maar naar divs te schrijven, om vanaf het begin af aan problemen te kunnen ondervangen. Dat houdt in alle layout-divs even op papier zetten en benoemen.

Zo heb ik een grote wrapper div voor de gehele viewport. Daarin drie divs voor header, content en footer. In de content dan weer de drie kolommen en als laatstse in de kolommen de verschillende kleine stukjes. Dat is volgens mij wat je bedoelt met in de flow werken, dus zo weinig mogelijk absolute positionering en hardcoding.

Voor die DTD, wat is een goeie om er in te zetten, want om heel eerlijk te zijn heb ik daar weinig ervaring mee. Wel dat het door validators er uit wordt gepakt als je er geen opgeeft, maar niet wat de verschillen zijn in de praktijk.

Wat ik nu in mijn hoofd heb is dat ik het framework neerzet met vaste waarden (dus de kolommen met 'width: 300px' bijvoorbeeld). Daarna kunnen alle elementen binnen zo'n kolom gewoon een breedte van 100% meekrijgen... ik ga er tenminste van uit dan die zich dan vormen naar het parent-element.

Als ik Piefecta source bekijk wordt ik een beetje droef van alle exceptions die je voor allerhande browsers moet maken voordat het normaal werkt maar wel een goede site/source om door te kijken naar oplossingen

[crisp]

simpel opzetje - echt ingewikkeld is het niet om een dergelijke layout te maken

[Kaastosti]

Geweldige code, ik heb alles omgezet en het lijkt zowaar te werken. Een raar probleem wat ik echter zie is dat de drie kolommen naast elkaar staan met daarin de kaders, maar als ik een link gebruik en vervolgens terug ga (backspace of terugknop van browser) komt de derde kolom dan ineens onder de eerste te staan, alsof deze te breed is. Dit gebeurt echter alleen in firefox, internet explorer blijft netjes. Als ik refresh staat alles weer goed.

[ Voor 176% gewijzigd door Kaastosti op 28-10-2005 13:17 ]