[css] header, 3 column, footer - Softwareontwikkeling

dinsdag 21 juni 2005 12:56

Acties:

CQB 241

Topicstarter

Zoals je al aan de topictitle kan zien heb ik een page met een header, 3 column layout en een footer, waarbij de footer fixed onderaan de viewport staat en naar beneden gedrukt wordt als de content dat verlangt.
Simpel. Dit is volgens mij al zo vaak langsgekomen, tientallen oplossingen etc. etc.

Punt is dat deze bijna altijd gebaseerd zijn op 2 verschillende types.
- fixed width container (bijvoorbeeld 760px)
- 100% width container

Probleem wat ik ondervond is het volgende:
De header en footer heeft een width van 100% en de 3 column dient een fixed width te hebben. In dit geval is dat 892px.

Dit werkt allemaal prima (getest in FF en IE) totdat de content in de 3 columns langer wordt.
Dan "schiet" de content onder de footer door, dit is alleen het geval bij FF.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
    <head>
        <title>footer2 test</title>
        <link rel="stylesheet" href="footer2.css" type="text/css">
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    </head>
<body>
<div id="contents">
    <div id="header"><p>header</p></div>
    <div id="main">
        <div id="contentcon">
            <div class="sidebar"><p>left</p></div>
            <div id="maincontent"><p>content</p></div>      
            <div class="sidebar"><p>right</p></div>         
        </div>  
    </div>
    <div id="footer"><p>footer content</p></div>
</div>
</body>
</html>

Cascading Stylesheet:

html, body, #contents {
    min-height: 100%;
    width: 100%;
    height: 100%;
    }
html>body, html>body #contents { height: auto; }
body {
    margin: 0;
    padding:0;
    background:#fff url(i/faux_bgmenu.gif) repeat-y 50% 0;
    }
#contents {
    position: absolute;
    top: 0;
    left: 0;
    margin:0;
    padding:0;
    }
#header {
    width:100%;
    height:135px;
    background:#ccc;    
    margin:0;
    padding:0;
    }
p {padding:0; margin:0;}
#contentcon {
    width:892px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    }
.sidebar {
    width:132px;
    float:left; 
    }
#maincontent {
    width:626px;
    height:auto;
    float:left; 
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    height:200px;
    background:#ccc;
    }
#main { margin-bottom: 200px;   height: auto; }

Het enige wat ik kan bedenken is de floats op #maincontent en op .sidebar weg te halen. Nadeel is meteen dat je je 3 column layout kwijt bent.

Heeft iemand een goeie ingeving?

[ Voor 13% gewijzigd door TeeDee op 21-06-2005 12:59 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 21 juni 2005 13:05

Acties:

André

Analytics dude

Kun je na de <div id="contentcon"> niet een <br style="clear:both" /> zetten?

[ Voor 10% gewijzigd door André op 21-06-2005 13:05 ]

dinsdag 21 juni 2005 13:11

Acties:

TeeDee

CQB 241

Topicstarter

André schreef op dinsdag 21 juni 2005 @ 13:05:
Kun je na de <div id="contentcon"> niet een <br style="clear:both" /> zetten?

Ja.
Lullige was dat ik het iedere keer met een

HTML:

1	<div style="clear:both"></div>

aan het proberen was.

Jouw oplossing werkt. Bedankt.

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 22 juni 2005 14:06

Acties:

SnoeiKoei

Koeien Snoeien Loeiend!

Ik zit een beetje te spelen met deze paginaopmaak maar stuit op een vreemd fenomeen... Als ik in de CSS file opneem dat links (met hover) een stippellijntje aan de onderkant krijgen (met behulp van border-bottom: dotted etc.), wordt dat stippellijntje niet zichtbaar (als ik er met de muis overheen ga)!? In een kale html-file werkt dat wel. Snap er nix van, kan ook niets over dit probleem vinden. Ik heb al naar margins en paddings in de css gekeken maar ik kom er niet uit. Zit er in bovenstaande css-tekst iets dat het gebruik van border-bottom: dotted onmogelijk maakt?

Voor de duidelijkheid: ik heb slechts de volgende tekst in de bovenstaande CSS toegevoegd:

code:

A:hover {
   text-decoration: none;
   border-bottom: 1px solid blue;
}

(en een link in 1 van de columns van de html-files natuurlijk)

Sorry als ik een erg stomme vraag stel. Waarschijnlijk is dit basic, maar ik probeer het te bergijpen, ik heb lang gezocht en ge-experimeteerd en ja ik ben een n00b.

[ Voor 3% gewijzigd door SnoeiKoei op 22-06-2005 14:08 ]

SuBBaSS: "SnoeiKoei, de topic-Freek"

donderdag 23 juni 2005 02:03

Acties:

Verwijderd

Wat vaag

Het werkt niet in .sidebar en #maincontent, en wel weer in de header/footer. In .sidebar werkt het sowieso niet, of je in CSS nou iets erbij zet of niet. Als ik de link in #maincontent zet en in CSS er gewoon #maincontent {} neerzet werkt 't wel weer. Als ik er vervolgens iets van width, hight of float aan toevoeg is 't weer weg...

Ben benieuwd hoe dit zit

donderdag 23 juni 2005 02:06

Acties:

crisp

Devver

Pixelated

IE zeker? --> hasLayout bug

Intentionally left blank

donderdag 23 juni 2005 02:29

Acties:

Verwijderd

crisp schreef op donderdag 23 juni 2005 @ 02:06:
IE zeker? --> hasLayout bug

IE ja.. Gezellig

Was dit nog nooit tegengekomen.

Gezien de datums van de topics die ik er op Google over vind schijnt dit probleem ook al ontzettend lang te bestaan Afbeeldingslocatie: http://www.xs4all.nl/~olie/fok/smilies/Smilies/winkie.gif

Afbeeldingslocatie: http://www.xs4all.nl/~olie/fok/smilies/Smilies/winkie.gif

donderdag 23 juni 2005 03:35

Acties:

Verwijderd

Ik heb deze zelfde opzet eens moeten gebruiken...
Even gezocht en een voorbeeld gemaakt. Wellicht dat er nog overbodige code inzit, maar het meeste is er nu wel uit...

Het idee is dat je een wrapper neemt die een top en bottom marge heeft, welke even hoog zijn als je header en footer. Deze laatste positioneer je absoluut... Verder moet je ook in quirksmode werken anders ging die volgens mij fout...

naja... kijk zelf maar even of dit precies is wat je bedoelt... --> http://vno.webaddict.nl/test.htm
succes!

donderdag 23 juni 2005 08:50

Acties:

SnoeiKoei

Koeien Snoeien Loeiend!

Ik had het inderdaad over IE ja, had ik natuurlijk moeten vermelden, en ook dat ik de link in de #maincontent had gezet. Overigens: als je de stippellijntjes NAAST de link wilt laten verschijnen, doen ze 't wel, alleen niet als je ze eronder (of erboven? niet geprobeerd) wilt zetten.

Pfff blij dat het niet zo'n basic antwoord blijkt te zijn

@Vince-E: Is het de bedoeling dat de rechter column geen scrollbar krijgt als de content er niet in past???

[ Voor 16% gewijzigd door SnoeiKoei op 23-06-2005 08:52 ]

SuBBaSS: "SnoeiKoei, de topic-Freek"

donderdag 23 juni 2005 08:59

Acties:

TeeDee

CQB 241

Topicstarter

Hmm, niet om het één of 't ander maar ik heb alleen (om te testen) het volgende in mijn CSS gezet (net als SnoeKoei)

code:

a:hover {
   text-decoration: none;
   border-bottom: 1px solid blue;
}

Vervolgens heb ik in de main, sidebars en in de footer een "<a href" gezet en in FireFox en in IE 6.0 werkt dit gewoon.
Van de hasLayout bug heb ik nog nooit gehoord, waarschijnlijk omdat ik deze nog nooit tegengekomen ben. Toch maar eens opzoeken.

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 23 juni 2005 09:07

Acties:

crisp

Devver

Pixelated

http://positioniseverything.net/explorer.html

veel bugs in IE komen doordat intern elementen die uit de flow zijn gehaald geen 'layout' hebben. hasLayout is een property die door de trident engine gegenereerd en gebruikt wordt; op MSDN is wel wat te vinden daarover. De oplossing voor dit soort bugs is dan ook door 'layout te forceren'; de Holly-hack doet dat bijvoorbeeld door een height: 1%; te geven.

Intentionally left blank

donderdag 23 juni 2005 09:09

Acties:

TeeDee

CQB 241

Topicstarter

crisp schreef op donderdag 23 juni 2005 @ 09:07:
http://positioniseverything.net/explorer.html

veel bugs in IE komen doordat intern elementen die uit de flow zijn gehaald geen 'layout' hebben. hasLayout is een property die door de trident engine gegenereerd en gebruikt wordt; op MSDN is wel wat te vinden daarover. De oplossing voor dit soort bugs is dan ook door 'layout te forceren'; de Holly-hack doet dat bijvoorbeeld door een height: 1%; te geven.

Las zojuist ook iets om een  in je div te zetten?

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 23 juni 2005 09:34

Acties:

SnoeiKoei

Koeien Snoeien Loeiend!

In de header en footer werkt inderdaad wel maar in de drie kolommen niet. Ik zal jullie tips eens uitproberen.

Comment toevoegen aan de div heeft geen zichtbaar effect.

Crisp: waar moet ik die height: 1%; aan toevoegen? Heb geprobeerd in onder andere #maincontent en .sidebar maar dat doet niks aan het probleem. Of snap ik het nu verkeerd? Het artikel over de holly hack op de website waarvan je een link geeft doet het niet en verder kan ik geen 'gebruiksaanwijzing' van de holly hack vinden die voor een n00b begrijpelijk is...

[ Voor 69% gewijzigd door SnoeiKoei op 23-06-2005 09:53 ]

SuBBaSS: "SnoeiKoei, de topic-Freek"

donderdag 23 juni 2005 12:55

Acties:

Verwijderd

Misschien dat je hier wat aan hebt:

http://weblog.bridgew.edu/ruthsarian/archives/000094.html

donderdag 23 juni 2005 13:37

Acties:

SnoeiKoei

Koeien Snoeien Loeiend!

Misschien doe ik nog steeds (of nu wel) iets stoms, maar het werkt nog steeds niet goed. Ik heb nu

code:

* html .hasLayoutHack
{
    /* \*/ height: 0.01%; /* hasLayout Hack */
}

in de css file opgenomen maar dit lijkt geen resultaat te hebben.

SuBBaSS: "SnoeiKoei, de topic-Freek"

donderdag 23 juni 2005 14:22

Acties:

Verwijderd

SnoeiKoei schreef op donderdag 23 juni 2005 @ 08:50:
Ik had het inderdaad over IE ja, had ik natuurlijk moeten vermelden, en ook dat ik de link in de #maincontent had gezet. Overigens: als je de stippellijntjes NAAST de link wilt laten verschijnen, doen ze 't wel, alleen niet als je ze eronder (of erboven? niet geprobeerd) wilt zetten.

Pfff blij dat het niet zo'n basic antwoord blijkt te zijn

@Vince-E: Is het de bedoeling dat de rechter column geen scrollbar krijgt als de content er niet in past???

huh? zowel in firefox als in ie heb ik bij alle 3 de kolommen scrollbalken... ? hmm zeker wat gemist

donderdag 23 juni 2005 14:30

Acties:

SnoeiKoei

Koeien Snoeien Loeiend!

hm sorry je hebt gelijk... ik had alleen m'n browser window niet gemaximized... Ik zag uberhaupt maar 2 kolommen en de meest rechter daarvan (dus eigenlijk de middelste) had geen scrollbar (die stond dus buiten beeld). Ik was dus helemaal niet op de hoogte van het bestaan van de tweede scrollbar, noch van de derde kolom met diens scrollbar, ook al omdat er geen horizontale scrollbar verschijnt

SuBBaSS: "SnoeiKoei, de topic-Freek"