css en layout

[sanderb]

Ik ben voor het eerst wat aan het spelen met CSS om een layout te maken.

Ik begin met 3 divjes op een rij, daaronder 2 divjes naast elkaar...en daaronder weer 3 divjes naast elkaar.

Al deze divjes zitten binnen een andere div, die zorgt voor het centreren van alles, en de divjes onder elkaar moet plaatsen.
(gebaseerd op de 3 colomn example van glish.com)

Dit ging goed. Heb eerst alleen met divjes met een background color geprobeerd en alles werkte perfect.
Daarna ben ik er images in gaan zetten, maar nu heb ik bij de divs die een image bevatten een probleem. Ze sluiten links,rechts en boven perfect aan, maar de div wordt naar beneden toe vergroot
Alle div's hebben een vaste breedte en hoogte.

Ik heb gezocht op w3c-schools ea, maar kon de oplossing niet vinden.

Het aparte is dat ik het ook bekeken heb op een Mac, met daarop safari en IE5(mac)
bij die mac werkt alles wel perfect

Op mijn eigen pc met IE6 gaat het dus mis.

Kan iemand mij vertellen wat ik over het hoofd zie/fout doe?

[edit]
heb net gezien dat ik wel een negatieve bottom margin kan invoeren, en dan ziet het er in IE6 normaal uit...maar twijfel of dit wel een goeie methode is:s ?

[ Voor 8% gewijzigd door sanderb op 16-12-2003 00:10 ]

[Willem]

Ehm heb je misschien een linkje naar een werkend voorbeeld en/of wat code?

[sanderb]

oops..
hierbij de stylesheet en HTML

code:

<style type="text/css">
    
    
    body {
        text-align:center;
        background: #C9C9C9

        }
    /* container om alles te centreren, tevens parent van de anderen */
    #container {
        width:750px;
        margin-right:auto;
        margin-left:auto;
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        text-align:left;
        }
/* header divs */
    #headerl {
        width:50px;
        height:60px;
        padding:0px;
        float:left;
        background:#C2C2C2;
        }
    
    #headerc {
        width:500px;
        height:60px;
        padding:0px;
        float:left;
        background-image:url("images/headerc.jpg");

        }
    
    #headerr {
        margin-top:0px;
        margin-bottom:0px;
        width:200px;
        height:60px;
        padding:0px;
        float:left;
        }
/* image div */
    #imagediv {
        margin-top:0px;
        margin-right:0px;
        margin-left:0px;
        margin-bottom:0px;
        width:750px;
        max-height:290px;
        padding:0px;
        float:left;
        
        }

/*  navbardivs */
    #navbarl {
        width:50px;
        height:20px;
        padding:0px;
        float:left;
        background:#FB5A96;
        }
        
    #navbarr {
        width:700px;
        height:20px;
        padding:0px;
        float:left;
        background:#DF276D;
        }

/*  contentdivs */
    #contentl {
        width:50px;
        height:180px;
        padding:0px;
        float:left;
        background:#C7EFDF;
        }
        
    #contentc {
        width:170px;
        height:180px;
        padding:0px;
        float:left;
        background:#ACDDCA;
        }
        
    #contentr {
        width:530px;
        height:180px;
        padding:0px;
        float:left;
        overflow: auto;
        background:#8FCCB4;
        }
        
/* footer divs */
    #footerl {
        width:50px;
        height:45px;
        padding:0px;
        float:left;
        background:#C2C2C2;
        }
    
    #footerc {
        width:170px;
        height:45px;
        padding:0px;
        float:left;
        background:#929292;
        }
    
    #footerr {
        width:530px;
        height:45px;
        padding:0px;
        float:left;
        background:#6E6D6D;
        }

stylesheet staat nu nog in de head van de .html
background kleuren zijn alleen maar gedaan om de elementen waar niets in staat zichtbaar te hebben

rest van de HTML is enkel en alleen de divjes achter elkaar

dus

code:

<div id="container">
        <div id="headerl">
            [img]images/headerl.jpg>
        </div>

        <div[/img]
        </div>

        <div id="headerr">
            [img]images/logo.jpg>
        </div>
        
        <div[/img]
            [img]images/$randimage.jpg>
        </div>
        
        <div[/img]
            <p>navl</p>
        </div>
        
        <div id="navbarr">
            <p>navigation bar rechts</p>
        </div>
        
        <div id="contentl">
            <p>contl</p>
        </div>
        
        <div id="contentc">
            <p>contentcenter (thumbnails)</p>
        </div>
        
        <div id="contentr">
            <p>Lorem ipsum enz...</p>

        </div>
        
        <div id="footerl">
            <p>fleft</p>
        </div>

        <div id="footerc">
            <p>footerc (zoek)</p>
        </div>

        <div id="footerr">
            <p>footer rechts</p>
        </div>
        
    </div>

[Verwijderd]

Het is nog steeds een beetje lastig om zo na te gaan wat het probleem is. Ik denk dat een voorbeeldje ergens online veel zou helpen.
Misschien komt het omdat die plaatjes in de divs groter zijn dan 60px?

[Verwijderd]

een gokje: waarschijnlijk heb je alles net te "krap" eringezet,... maak die container eens wat breder.

[InZane]

Heb ook weleens dat gezeik gehad.

Enkel een plaatje in een div met IE 6 == ruimte aan de onderkant

Padding, margin, enz allemaal op 0, maar het maakt allemaal geen ene ruk uit.
Andere browsers hebben geen last van dit probleem.

[Rickets]

Waarschijnlijk komt het door de whitespace om de image. Zet het plaatje en de parent eens op 1 regel:

HTML:

<div id="headerl">[img]images/headerl.jpg></div[/img]

[sanderb]

[code=html]
<div id="headerl">[img]images/headerl.jpg></div> [/code][/img]geprobeerd....maakt niets uit. Heb tevens geprobeerd wat er gebeurd als ik de image als background van de div zet in de css....maakt ook niets uit.

>images zijn precies de afmetingen van de div. (dus header images zijn 60 hoog).

>container groter maken helpt ook niets...

>met het zetten van margin-top:-5px; is de ruimte in IE6 aan de onderkant weg, maar dan heb ik het probleem dat in andere browsers de divs gaan overlappen....zucht...dan zou ik dus een browser check moeten doen? moet toch simpeler kunnen...

in ieder geval bedankt voor de tips. als iemand nog een idee heeft hoe het op te lossen, dan hoor ik het graag.

[drm]

Als de image het enige is wat je in die div gaat zetten, waarom zet je dan niet gewoon de image zelf op de goeie plek

vervang

HTML:

<div id="header1"><img src="images/header1.jpg" /></div>

gewoon door

HTML:

<img id="header1" class="header" src="images/header1.jpg" />

en geef dat plaatje het juist uiterlijk met de class, en de juiste positie met de id..

[sanderb]

[quote]drm schreef op 16 december 2003 @ 13:34:
Als de image het enige is wat je in die div gaat zetten, waarom zet je dan niet gewoon de image zelf op de goeie plek
[quote]

er komt (later)nog wel meer content in die div. Ik had daarom eerst de images als background staan in de css, maar aangezien ik toen dit probleem zag, heb ik daarna geprobeerd wat ie doet als ik het image gewoon in de HTML zet.

Met alleen een background color kloppen alle divs prima. de vlakken sluiten dan mooi op elkaar aan. Met een image erin niet meer dus.
doordat margin-top:-5px het probleem in IE6 omzeilt vermoedt ik dat er dus iets fout gaat bij die margin bij de implementatie van IE6. Of ik begrijp er gewoon nog steeds geen snars van en is dit een manier die gewoon niet kan?

Iedereen zit hier altijd zo te roepen dat je layout met css moet doen ipv met tables..vandaar dat ik dit een keer wilde proberen als leek. (laat de discussie wat beter is in dit topic maar achterwege...

[drm]

Ach so...

Ik kan me voorstellen dat IE het niet fijn vindt dat je de width en height van het plaatje zelf niet opgeeft. Dat zijn echt van die dingen waar de renderengine van IE over kan struikelen. Dus da's iig het proberen waard.

Verder zou je kunnen proberen het box-model op border-box te zetten, en ik weet niet of je in quirks of standards mode rendert, maar als je enkel een xhtml doctype hebt staan zou je er eens een XML declaratie boven moeten zetten:

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html ....>

[sanderb]

width en height toevoegen had ik al geprobeerd..zonder resultaat..

dat van dat box-model ga ik even verder uitzoeken. (css noob )