[CSS] Content reikt tot onder de footer - Softwareontwikkeling

dinsdag 21 juni 2005 22:25

Acties:

Verwijderd

Topicstarter

Ik zit met een probleem waar ik al dagen mee aan het klooien ben. De oplossing zal ongetwijfeld simpel zijn, maar ik kom er maar niet uit.
Eerst maar eens de bijbehorende code:

Cascading Stylesheet:

#html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
    font: 11px "trebuchet ms";
    color: #303840;
    background: #515159;
}

#container {
    position: absolute;
    padding-top: 26px;
    padding-bottom: 10px;
    margin-left: -383px;
    top: 0px;
    left: 50%;
    height: 100%;
    width: 766px;
    -moz-box-sizing: padding-box;
}

#top {
    position: absolute;
    top: 0px;
    height: 26px;
    width: 100%;
    background: url("../images/menu_bg.gif") no-repeat;
}

#header {
    position: absolute;
    top: 26px;
    height: 213px;
    width: 100%;
    background: url("../images/header.gif") no-repeat;
}

#main {
    position: absolute;
    left: 0px;
    height: 100%;
    top: 239px;
    width: 589px;
    background: #FCFCFD;
    overflow: auto;
}

#maincontent {
    padding-left: 25px;
    padding-right: 25px;
}

#right {
    position: absolute;
    top: 239px;
    right: 0px;
    height: 100%;
    width: 177px;
    background: transparent url("../images/submenu_bg.gif") repeat-y;
}

#rightcontent {
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 16px;
}

#bottom {
    position: absolute;
    bottom: 0px;
    height: 10px;
    width: 100%;
    font-size: 1px;
    background: #EF4135;
}

HTML:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//golem.ph.utexas.edu//DTD XHTML 1.1 plus Target 1.0//EN" "http://golem.ph.utexas.edu/DTD/xhtml11-target.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" >

<head>
<title>Bla</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="nl" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="false" />
<style type="text/css" media="all">
    @import "css/common.css";
</style>
<script type="text/javascript" src="js/common.js"></script>
</head>

<body>
<div id="container">
    <div id="top">
    Bla menu
    </div>
    <div id="header"></div>
    <div id="main">
        <div id="maincontent">
        Bla main
        </div>
    </div>
    <div id="right">
        <div id="rightcontent">
        Bla rechts
        </div>
    </div>
    <div id="bottom"></div>
</div>
</body>

</html>

Het probleem is dat de 'main' en de 'right' div's dusdanig uitrekken, dat ze nog tot onder de 'bottom' div (footer) reiken. De pagina lijkt goed op het eerste gezicht, ware het niet dat er rechts nog een scrollbar zit i.v.m. die uitrekkende div's.
Het gekke is dat de pagina in Firefox gewoon goed werkt, alleen IE6 verprutst de boel weer.

Iemand enig idee wat ik fout doe? Ik ben het spoor bijster.

dinsdag 21 juni 2005 23:00

Acties:

crisp

Devver

Pixelated

Haal die XML-declaration eens weg zodat IE ook in strict mode (dus met w3c boxmodel) rendered?
En wat is dat voor vage DTD eigenlijk? Als je zonodig target wilt gebruiken kies dan gewoon voor een Transitional DTD...

Overigens is de "negatieve margin"-truuk niet de meest ideale manier om je content te centreren.

[ Voor 15% gewijzigd door crisp op 21-06-2005 23:01 ]

Intentionally left blank

dinsdag 21 juni 2005 23:08

Acties:

MaZo

Nevermind.

[ Voor 97% gewijzigd door MaZo op 21-06-2005 23:09 ]

dinsdag 21 juni 2005 23:10

Acties:

Verwijderd

Topicstarter

Die vage DTD staat er, omdat degene voor wie ik de site maak totaal geen XHTML (wel HTML, vandaar die 'enable target' truc) kan, en ik te lui ben om een CMS te gaan bouwen.

Die XML-declaratie weg halen wil niet echt helpen, het enige verschil is dat m'n footer nog meer naar beneden staat.

Hoe centreer je dan wel goed als ik vragen mag?

dinsdag 21 juni 2005 23:26

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 21 juni 2005 @ 23:10:
Die vage DTD staat er, omdat degene voor wie ik de site maak totaal geen XHTML (wel HTML, vandaar die 'enable target' truc) kan, en ik te lui ben om een CMS te gaan bouwen.

Wat zijn, behalve syntax-verschillen om XHTML XML-compliant te maken, dan volgens jou de verschillen tussen XHTML en HTML?
Wist je dat je XHTML 1.1 eigenlijk helemaal niet als text/html zou moeten versturen? Voldoe je eigenlijk wel aan appendix C? (dat is welliswaar voor XHTML 1.0 aangezien je 1.1 eigenlijk helemaal niet als HTML zou moeten versturen, maar ala)

XHTML 1.0 kent ook een Transitional DTD, net als dat HTML ook een Strict DTD kent (waar target ook niet in bestaat).

Die XML-declaratie weg halen wil niet echt helpen, het enige verschil is dat m'n footer nog meer naar beneden staat.

Mogelijk omdat IE die DTD helemaal niet herkent (overigens doen browsers weinig met de DTD behalve bepalen of ze in standards compliant mode of quirks mode moeten renderen).

Hoe centreer je dan wel goed als ik vragen mag?

margin: 0 auto;

[ Voor 22% gewijzigd door crisp op 21-06-2005 23:31 ]

Intentionally left blank

dinsdag 21 juni 2005 23:44

Acties:

Verwijderd

Topicstarter

crisp schreef op dinsdag 21 juni 2005 @ 23:26:
[...]
Wat zijn, behalve syntax-verschillen om XHTML XML-compliant te maken, dan volgens jou de verschillen tussen XHTML en HTML?

Het gaat niet om de verschillen tussen HTML en XHTML, de enige reden van die custom DTD is dat je (zoals je ongetwijfeld weet) in XHTML 1.1 geen targets mag gebruiken. Omdat ik graag in XHTML 1.1 wil werken, ben ik nu alleen even genoodzaakt om die custom DTD (wat overigens niks anders is dan de standaard 1.1 DTD + targets) te gebruiken. Begrijp me goed, ik ben er geen voorstander van, maar degene voor wie de site is kan hooguit met wat targets werken, om over JS maar niet te spreken.

Wist je dat je XHTML 1.1 eigenlijk helemaal niet als text/html zou moeten versturen?

Waar haal je dit vandaan? Ik zie toch echt <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> staan. Of bedoel je wat anders?

Mogelijk omdat IE die DTD helemaal niet herkent (overigens doen browsers weinig met de DTD behalve bepalen of ze in standards compliant mode of quirks mode moeten renderen).

Helaas, ook met een niet-custom DTD werkt het niet. Zoals je in je laatste zin eigenlijk al aangeeft, die DTD kan het niet aan liggen.

margin: 0 auto;

Merci, alleen met alleen de margin kom ik er niet. Neem aan dat ik ook iets met bijvoorbeeld left: 50%; zal moeten doen? Want anders is het evengoed niet gecentreerd, maar staat de pagina uiterst rechts.

[ Voor 4% gewijzigd door Verwijderd op 21-06-2005 23:47 ]

woensdag 22 juni 2005 00:08

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 21 juni 2005 @ 23:44:
[...]
Het gaat niet om de verschillen tussen HTML en XHTML, de enige reden van die custom DTD is dat je (zoals je ongetwijfeld weet) in XHTML 1.1 geen targets mag gebruiken. Omdat ik graag in XHTML 1.1 wil werken, ben ik nu alleen even genoodzaakt om die custom DTD te gebruiken. Begrijp me goed, ik ben er geen voorstander van, maar degene voor wie de site is kan hooguit met wat targets werken, om over JS maar te zwijgen.

Het gaat wel om de verschillen, want die zijn er praktisch gezien niet, dus is je keuze voor XHTML 1.1 waarschijnlijk enkel gebaseerd op een valse aanname dat het nieuwer en dus beter zou moeten zijn. Let me help you: XHTML is geen vervanger van of opvolger van HTML; het is enkel bedoelt om HTML als XML-application te kunnen gebruiken zodat je het met andere XML-applications kan gebruiken (SVG, MathML) - doe je dat niet dan is er feitelijk geen enkele reden om XHTML te gebruiken - er hangen immers ook nadelen aan vast waar je waarschijnlijk geen rekening mee houd.

Het target verhaal is ook simpel: als je geen target wilt gebruiken, doe dat dan ook niet; gebruik desnoods scripting als je vind dat het behavior is en niet in de opmaak thuishoort.
Een custom DTD voor een standardized application vind ik not-done; het berooft je document van semantische waarde. Ik kan ook een DTD bakken waarbij een custom element als <paragraaf> een geldig element is, maar browsers kunnen er niets mee.
Kies gewoon voor de DTD die aansluit op je behoeften; als je target wilt gebruiken dan kies je gewoon voor een Transitional DTD...

[...]
Waar haal je dit vandaan? Ik zie toch echt staan. Of bedoel je wat anders?

Headers gaan voor meta-tags. content-type opgeven in een meta-tag is sowieso onzinnig; de browser heeft immers al moeten bepalen hoe hij het document moet behandelen nog voordat die meta-tag ueberhaupt geparsed is, en dat bepaalt hij aan de hand van de content-type in de HTTP headers.
In feite heb je een document dat zichzelf tegenspreekt

[...]
Helaas, ook met een niet-custom DTD werkt het niet. Zoals je in je laatste zin eigenlijk al aangeeft, die DTD kan het niet aan liggen.

Toch wel; ook bij een (valid) DTD zonder URI zal IE al in quirksmode renderen.
Ik zie nu dat je al uitgaat van padding-box, dus ws wil je IE dan juist wel quirksmode hebben. Bedenk echter dan wel dat andere standards-compliant browsers zoals Safari en Konqueror geen alternatief hebben voor het w3c boxmodel. 100% height designs met headers en footers gaat echter niet zo eenvoudig in w3c boxmodel.

[...]

Merci, alleen met alleen de margin kom ik er niet. Neem aan dat ik ook iets met bijvoorbeeld left: 50%; zal moeten doen? Want anders is het evengoed niet gecentreerd, maar staat de pagina uiterst rechts.

vollediger dan (en ook IE5.x compatible):

Cascading Stylesheet:

body {
    text-align: center;
}
#container {
    position: relative;
    width: 766px;
    margin: 0 auto;
    text-align: left;
}

de 'auto' in margin: 0 auto; geld overigens voor zowel links als rechts.

Intentionally left blank

woensdag 22 juni 2005 00:50

Acties:

crisp

Devver

Pixelated

boter had je al, nu de vis:

Cascading Stylesheet:

html {
    height: 100%;
}
body {
    padding: 0px;
    margin: 0px;
    height: 100%;
    font: 11px "trebuchet ms";
    color: #303840;
    background: #515159;
    text-align: center;
}
#container {
    position: relative;
    padding-top: 239px;
    padding-bottom: 10px;
    height: 100%;
    width: 766px;
    margin: 0 auto;
    -moz-box-sizing: padding-box;
    text-align: left;
}

#top {
    position: absolute;
    top: 0px;
    height: 26px;
    width: 100%;
    background: url("../images/menu_bg.gif") no-repeat;
}

#header {
    position: absolute;
    top: 26px;
    height: 213px;
    width: 100%;
    background: url("../images/header.gif") no-repeat;
}

#main {
    height: 100%;
    width: 589px;
    background: #FCFCFD;
    overflow: auto;
}

#maincontent {
    padding-left: 25px;
    padding-right: 25px;
}

#right {
    position: absolute;
    top: 239px;
    right: 0px;
    width: 177px;
    background: transparent url("../images/submenu_bg.gif") repeat-y;
}

#rightcontent {
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 16px;
}

#bottom {
    position: absolute;
    bottom: 0px;
    height: 10px;
    width: 100%;
    font-size: 1px;
    background: #EF4135;
}

nadeel blijft dat je aan het padding-box model vast blijft hangen; geen idee of bv Safari het CSS3 attribuut box-model al heeft geimplementeerd.
Note dat ik ook de height: 100% van #right heb weggehaald, de background kan je misschien beter middels de container regelen (faux-columns).

Intentionally left blank

woensdag 22 juni 2005 09:10

Acties:

Verwijderd

Topicstarter

Ik ga het allemaal rustig bekijken, bedankt voor de moeite! $_/-\o_$

Pagina: 1

Reageer