[HTML/CSS] table layout totally messed up :-(

[f1r3b4ll]

Hoi allemaal,

Misschien is dit een beetje oubollig en basic problematiek, maar ik heb al veel ge Googled en de search gebruikt, maar kom er totaal niet uit.
Het probleem is het maken van een table layout. De layout bestaat uit een verticale tabel met hoogte 100%. Deze tabel bestaat vervolgens uit een aantal rijen en kolommen. De bovenste en onderste rijen hebben een vaste breedte. De middelste rij - die bestaat uit 2 kolommen (menu en content) hebben een variabele hoogte, afhankelijk van de hoogte van het venster en de inhoud.

Het probleem is dat ik met geen mogelijkheid de hoogte van de cellen precies goed krijg, en het lijkt wel dat er dikke verticale marges / tussenruimtes zitten tussen afbeeldingen. Deze krijg ik er niet uit, ook niet met CSS.

Ik weet dat een table layout niet meer van deze tijd is volgens jullie, maar met divs krijg ik het niet voor mekaar, en de tijdsdruk ligt nogal hoog. Ik zou het erg op prijs stellen als jullie mij zouden willen helpen.

ps het probleem komt zowel in IE, FF en Opera voor.

hier nog even een code dumpje met de elementen waar het om gaat imo:

CSS:

code:

html { height: 100%; }

body {
margin: 0;
padding: 0;
height: 100%;
}

HTML:

code:

<table id="container" cellpadding="0" cellspacing="0" border="0" width="780" height="100%">
  <tr>
    <td id="header" colspan="2" width="780" height="1">[img]"bla"[/img]</td>
  </tr>
  <tr>
    <td id="menu" rowspan="3" width="170"><!-- hier staan de menu rollover images --></td>
    <td id="breadcrumbcontainer"><!-- hier staat een breadcrumb -->
    </td>
  </tr>
  <tr>
    <td id="content" width="610">
<!-- hier komt de content -->
    </td>
  </tr>
  <tr>
    <td id="bottomnav" height="10"><!-- hier dus de bottomnav -->
</td>
  </tr>
  <tr>
    <td id="footer" colspan="2" height="10">[img]"images/footer.jpg"[/img]</td>
  </tr>
</table>

Hartelijk bedankt voor de hulp alvast!

[Gonadan]

Je heeft in je html geen eenheid op voor je height.
Misschien is het handig om dat ook allemaal in je CSS te zetten

[JHS]

Je zegt dat je de hoogtes van de cellen niet goed krijgt: Welke cellen? Hoe hoog zijn deze, en in welke browser(s)? Hoe hoog zouden ze moeten zijn? Je zegt dat er verticale margin ontstaat tussen plaatjes: Welke plaatjes? Wat voor margin, en in welke browser(s)? Treed dat ook op als je de plaatjes los onder elkaar zet?

Oftewel: Ik begrijp je probleem niet helemaal . Daarnaast is het waarschijnlijk ook goed mogelijk je layout te realiseren met CSS en de juiste blocklevel elementen. Wat lukte daar niet aan?

[f1r3b4ll]

@ Gonadan:
de hoogte van de cellen zijn ook in een stylesheet gedefinieerd. Alleen de hoogte van de menu en content cellen zijn niet in de stylesheet gedefinieerd, omdat deze variabel zijn.

@ JHS:
eigenlijk worden alle celhoogtes verprutst, terwijl ik wel zowat overal height attributen heb staan. Ik heb het ook met DIV's geprobeerd, maar ik kreeg het niet voor elkaar om de footer onderaan uit te lijnen, ongeacht de inhoud van de pagina. Hij kwam dan bij een lege pagina bijvoorbeeld op de helft van het venster te staan, en bij een pagina waarbij je moet scrollen, liep de content gewoon over de footer heen, net alsof ze een verschillende Z index hadden.

[Gonadan]

f1r3b4ll schreef op dinsdag 16 mei 2006 @ 11:08:
@ Gonadan:
de hoogte van de cellen zijn ook in een stylesheet gedefinieerd. Alleen de hoogte van de menu en content cellen zijn niet in de stylesheet gedefinieerd, omdat deze variabel zijn.

Als dat zo is waarom definiëer je de hoogte dan nog een keer in je html?
Ik heb het gevoel dat je maar een beetje aan het klooien bent.
Probeer eens al je stijl declaraties in je CSS te zetten, dan heb je het in ieder geval overzichtelijk bij elkaar staan.

@ JHS:
eigenlijk worden alle celhoogtes verprutst, terwijl ik wel zowat overal height attributen heb staan. Ik heb het ook met DIV's geprobeerd, maar ik kreeg het niet voor elkaar om de footer onderaan uit te lijnen, ongeacht de inhoud van de pagina. Hij kwam dan bij een lege pagina bijvoorbeeld op de helft van het venster te staan, en bij een pagina waarbij je moet scrollen, liep de content gewoon over de footer heen, net alsof ze een verschillende Z index hadden.

Dan moet je een DIV gebruiken die de hele pagina beslaat en daarin kan je dan de andere DIV's uitlijnen.
als je de content wilt laten scrollen gebruik dan: overflow: auto;

[f1r3b4ll]

ok, ben weer wat verder, heb tot mijn grote verbazing in 10 minuten de layout omgezet naar divjes

er is alleen nog een probleem, in Opera en FF werkt alles prima, maar in IE werkt de overflow van de content div niet (die staat op auto). In plaats van dat er netjes scrollbalken verschijnen, wordt de hoogte van de div aangepast aan de inhoud, en loopt hij onder de footer door en nog een stuk verder, zodat ik de hele pagina moet scrollen (dit is dus niet de bedoeling).

Hier ff de CSS code:

code:

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    width: 780px;
    height: 100%;
}

#header {
    width: 780px;
    height: 141px;
    background: #FFFFCC;
}

#breadcrumb {
    position: absolute;
    top: 141px;
    left: 170px;
    height: 35px;
    width: 610px;
    background: url(images/breadcrumb.jpg);
}

#menu {
    width: 170px;
    position: absolute;
    top: 141px;
    bottom: 30px;
    background: #FF3333;
}

#content {
    position: absolute;
    top: 176px;
    bottom: 30px;
    left: 170px;
    width: 570px;
    overflow: auto;
    background: #CCCCCC;
    padding: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 780px;
    height: 30px;
    background: #66CCFF;
}

...en de HTML:

code:

<div id="container">
    <div id="header">[img]"images/header.jpg"[/img]</div>
    <div id="menu">menu</div>
    <div id="breadcrumb">breadcrumb</div>
    <div id="content">
      hier komt dus content
    </div>
    <div id="footer">dit is de footer</div>
</div>

...en nog ff een screenshotje om het een en ander te visualiseren:



(die blauwe streep is de footer die tegen de onderkant van het venster hoort te staan.

Alvast bedankt!

edit: o ja, nog een ding: je ziet linksboven een rood streepje met daarin het woord menu. het is de bedoeling dat dat hele vlak rood is, maar dat krijg ik niet voor elkaar. De CSS code voor het menu is
[code]
#menu {
width: 170px;
position: absolute;
top: 141px;
bottom: 30px;
background: #FF3333;
}

[ Voor 14% gewijzigd door f1r3b4ll op 16-05-2006 12:34 ]

[f1r3b4ll]

subtiel schopje

Modbreak:

Wil je dat in het vervolg pas na 24 uur doen

[ Voor 66% gewijzigd door André op 17-05-2006 00:20 ]

[Gonadan]

Als je dan toch alles absoluut positioneert kan je die content div net zo goed een vaste height geven.
Dan moet hij het in IE ook doen.

Je geeft trouwens een bottom op. Ik neem aan dat je daar margin-bottom bedoelt?
Zodat de div tot daar doorloopt?

[ Voor 31% gewijzigd door Gonadan op 16-05-2006 14:47 ]

[Boelie-Boelie]

Het zou wellicht helpen als je eerst precies onder woorden (of liever nog, beeld) probeert te brengen wat voor layout je wilt hebben, zonder te vervallen in CSS dit en table dat.
Wil je een pagina met footer aan de bottom van de viewport vast, of moet de footer uit beeld verdwijnen als je meer tekst hebt, of wil je nog iets anders?
Moet het bijv. zo: www.cssplay.co.uk/layouts/bodyfix.html
Of zo: http://limpid.nl/lab/css/fixed/header-and-footer
Of zo: www.themaninblue.com/experiment/footerStickAlt/
Of...?

[f1r3b4ll]

het mooiste zou zijn dat de footer aan de bottom van de viewport vastzit, maar als hij doorloopt is dat niet erg. dat is eigenlijk wat ik bedoel

[f1r3b4ll]

kan niemand mij helpen?

Modbreak:

Kicken in het vervolg pas na 24 uur
Geduld is een schone zaak.

[ Voor 63% gewijzigd door André op 17-05-2006 00:21 ]

[user109731]

Je kan bijvoorbeeld alles wat niet in de footer zit een min-height:100%; geven, en je footer eronder zetten met negatieve margin-top . Dat staat hier netjes uitgelegd, de link die Boelie-Boelie je al gaf.

[f1r3b4ll]

De oplossing van Boelie Boelie werkt deels voor mij. Het probleem is dat het content gedeelte bestaat uit een verticale menu div links, en een div die ik met absolute positionering rechts uitlijn. Hierdoor komt hij boven de body te zweven en gaat hij alsnog over de footer heen. Gebruik ik deze div niet, en zet de tekst rechtstreeks in de body, gaat het wel goed. maar dan krijg ik de content weer niet rechts naast de menu div.

Help!

[BtM909]

Probeer zoveel mogelijk content in de flow te laten en dus zo min mogelijk absoluut te positioneren. Herschrijf het stuk eens zodat het wel werkt en lever een testcase, zodat wij je op weg kunnen helpen om het menu rechts te floaten

[f1r3b4ll]

ok, dan hier wat code om de boel te verduidelijken:

de HTML:

code:

<div id="nonFooter">
  <div id="header">[img]"images/header.jpg"[/img]</div>
  <div id="menu"><!-- hier staat dus het menu --></div>
  <div id="breadcrumb"><!-- breadcrumb structuur --></div>
  <div id="content"><!-- hier komt de content -->
</div>
<div id="footer">[img]"images/footer.jpg"[/img]</div>

de divjes "breadcrumb" en "content" moeten rechts naast de "menu" div.

CSS die hierbij hoort:

code:

html
{
    height: 100%;
}

body
{
    height: 100%;
    margin: 0;
    padding: 0;
}

#nonFooter
{
    width: 780px;
    position: relative;
    min-height: 100%;
    border: solid;
    border-width: 0;
    border-right-width: 1px;
}

* html #nonFooter
{
    height: 100%;
}

#footer
{
    position: relative;
    margin-top: -30px;
}

#menu {
    width: 170px;
}

#breadcrumb {
    position: absolute;
    top: 141px;
    left: 170px;
    height: 30px;
    width: 610px;
}

#content {
    float: left;
    width: 610px;
    font: 10pt/16pt Trebuchet MS;
}

nog een keer in woorden:

wat ik nu precies wil, is een layout bestaande uit 3 rijen. de bovenste en onderste rij hebben een vaste hoogte. de middelste rij, heeft een variabele hoogte, en bestaat uit 2 kolommen (menu en content). de onderste rij - de footer - moet altijd tegen de onderkant van de viewport, tenzij de content langer is dan het scherm, dan mag de footer mee naar beneden schuiven.

[user109731]

Gebruik float:left; ook op je menu.
Ik zou verder #breadcrumb niet absolute plaatsen maar gewoon in de flow houden en deze ook naast het menu floaten

Overigens is het ook bijna altijd beter om afbeeldingen in je header/footer door middel van css (background-image) in te stellen.

[f1r3b4ll]

ok, strax om 8:30 begin ik er weer mee, zal dan gelijk je suggestie proberen, en hier feedback posten

update 11:19:
Het probleem is opgelost volgens mij. Ik heb alle absolute positionering weggehaald en de divs laten floaten waar nodig. Ook heb ik de footerStickAlt truc gebruikt om de footer onderaan de viewport te krijgen. Ik heb alleen nog het probleem dat er een zwarte lijn van de bovenkant tot onderkant van de viewport moet lopen (aan de rechterkant van de content). In principe werkt dit alleen als de content kleiner is dan de hoogte van de viewport. Zodra ik moet scrollen, loopt de lijn niet door tot aan de footer, maar houdt hij de hoogte van de viewport aan. Is hier een oplossing voor? Ik heb wel height: 100% ingesteld in de stylesheet.

[ Voor 76% gewijzigd door f1r3b4ll op 18-05-2006 11:24 ]