Footer niet tegen content aan - Softwareontwikkeling

woensdag 28 januari 2009 21:37

Acties:

0 Henk 'm!

Forumzwerver

Topicstarter

Ik ben al een poos bezig met websites maken en dergelijke, echter loop ik altijd weer tegen CSS-problemen aan. Zo ook nu weer. Ik weet nu niet goed waarom het niet werkt wat ik wil. Ook als ik er op zoek krijg ik oplossingen die ik reeds er in heb staan of niet het gewenste effect krijgen.

Hier de betreffende pagina waar het over gaat: http://mathijsgroothuis.com/test/

Voor de duidelijkheid heb ik de kleuren even bont gemaakt.

Het probleem is dat de footer enkel tegen de content aan"plakt" als de beide zijkolommen niet lager uitvallen dan de content. Indien dat niet zo is, zoals momenteel op de pagina, dan gaat de footer weer onder de laagste kolom zitten qua hoogte.

Voor de duidelijkheid hier nog even de inhoud van zowel html en css:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />
        <title>Website</title>
    </head>
    <body>
        <div id="container">
            <div id="navigation">
                <span class="login">
                    <a href="index.php?page=logout">Uitloggen</a>
                </span>
                <span class="menu"><a href="index.php?page=home">home</a> | <a href="index.php?page=about me">about me</a> | <a href="index.php?page=home">blog</a> | <a href="index.php?page=portfolio">portfolio</a> | <a href="index.php?page=links">links</a></span>
            </div>
            <div id="header">
            </div>
            <div id="submenu">
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                </ul>
            </div>
            <div id="content">
            </div>
            <div id="submenu2">
                Pindakaas en                Pindakaas en                Pindakaas en
            </div>
            <div id="footer">Copyright &copy; Mathijs S. Groothuis 2008</div>
        </div>
    </body>
</html>

Cascading Stylesheet:

body
{
    font-family: helvetica;
    background-color: lime;
    color: red;
}

#container
{
    width: 1000px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
}

#header
{
    width: 1000px;
    height: 150px;
    background-image: url(../images/header.png);
    background-repeat: no-repeat;
    background-color: #000000;
}

#navigation
{
    width: 990px;
    height: 30px;
    background-image: url(../images/navbar.png);
    background-color: #CC0066;
    background-repeat: repeat-x;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    
    font-family: Helvetica, sans-serif;
    color: white;
    line-height: 25px;
    text-align: right;
    
    overflow: hidden;
}

#submenu
{
    width: 170px;
    height: 600px;
    color: white;
    background-color: purple;
    background-image: url(../images/menu_left_bottom.png);
    background-position: bottom;
    background-repeat: no-repeat;
    float: left;
    
    padding: 0px;
}

#content
{
    width: 620px;
    height: 500px;
    background-color: #121212;
    color: #ffffcc;
    float: left;
    
    
    
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    
    text-align: justify;
}

#submenu2
{
    width: 170px;
    height: 600px;
    background-color: #121212;
    float: right;
    padding: 0px;
    margin: 0px;
    overflow: auto;
    background-color: purple;
}

#footer
{
    width: 620px;
    height: 20px;
    background-image: url(../images/footer.png);
    clear: both;
    font-size: 10px;
    color: white;
    text-align: center;
    line-height: 20px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.textinput
{
    background: none;
    color: #ffffff;
    border-color: #74ab00;
    border-style: solid;
    border-width: 1px;
    height: 15px;
    margin-top: 5px;
    margin-left: 2px;
    vertical-align: top;
}

.login
{
    text-align: left;
    float: left;
}

.login a
{
    color: #ffffff;
    text-decoration: none;
}

.login a:hover
{
    text-decoration: underline;
}

.menu
{
    float: right;
}

.menu a:link,a:visited
{
    color: #ffffff;
    text-decoration: none;
}

.menu a:hover
{
    text-decoration: underline;
}
#shoutbox textarea,input,form
{
    vertical-align: bottom;
}
.submitbutton
{
    height: 19px;
    

    
    color: #ffffcc;
    background-color: #000000;
    border-color: #74ab00;
    border-style: solid;
    border-width: 1px;
    
    margin-left: 2px;
}

ul
{
    padding: 0px;
    margin: 20px;
}

Kan iemand me helpen in een bepaalde richting te denken? Het gaat me echt niet om een kant en klare oplossing, maar met zulke (in mijn ogen) onlogische fouten raak ik gefrustreerd en de weg kwijt.

Zo leek de oplossing "clear: both;" weghalen uit de footer div te helpen. Maar dan werkt alleen de tekst van de footer en krijg ik weer geen achtergrond te zien

.

EDIT: Overigens lijken er wat ongebruikte css-klassen te zijn, maar dat is puur omdat ik even de PHP heb gestript uit dit testdocument.

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

woensdag 28 januari 2009 21:47

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Waarom heb je dan ook zo'n ranzige manier van sidebars gemaakt? Wil je daar niet gewoon faux columns icm een min-height op je content div?

Anyone who gets in between me and my morning coffee should be insecure.

woensdag 28 januari 2009 21:47

Acties:

0 Henk 'm!

teh_twisted

uhm, ga nu de rest ff lezen maar ik gok dat een

code:

1	margin-top: 1em

op de desbetreffende plek wonderen doet?

*edit* whoops te snel gelezen, je wilt 't omgekeerde...

[ Voor 23% gewijzigd door teh_twisted op 28-01-2009 21:48 ]

Tyan S7025, 1x Xeon E5520, 32GB DDR3-1333 ECC/REG, GTX275 896MB, 2x Samsung SM 2243SN, Logitech Perf MX. Laptop: MBP 10,1/6,2. Cams: Canon EOS600D+Tamron AF18-200, Sony W350. Gadgets: iPad 64GB 3G, iPhone 5 64GB, PS1-3. Auto: W211 E220CDI

woensdag 28 januari 2009 21:51

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

MueR schreef op woensdag 28 januari 2009 @ 21:47:
Waarom heb je dan ook zo'n ranzige manier van sidebars gemaakt? Wil je daar niet gewoon faux columns icm een min-height op je content div?

Wat is er ranzig aan dan? Ik defineer toch netjes gewoon 2 divs die ik respectievelijk links en rechts laat floaten. Kan je es onderbouwen wat je bedoeld? Ben wel benieuwd. Bedankt iig voor het meedenken.

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

woensdag 28 januari 2009 23:20

Acties:

0 Henk 'm!

Verwijderd

In je css van de footer staat ook deze regel

Cascading Stylesheet:

1	clear: both

Daarmee vertel je dat er geen divs's links of recht mogen staan van de footer. Aangezien dat dit hier wel moet, moet deze regel er uit ( http://www.w3schools.com/Css/pr_class_clear.asp ).

edit: oeps... De regels onder de code has ik niet gezien

edit2: Ik zou van de footer ook een float left maken. Want nu is dit er niet en zal hij ook niet naast andere objecten kunnen verschijnen. Maar dan zal je toch de clear moeten weghalen.

[ Voor 33% gewijzigd door Verwijderd op 28-01-2009 23:36 ]

donderdag 29 januari 2009 00:29

Acties:

0 Henk 'm!

TeeDee

CQB 241

Kijk eens of je deze oplossing kunt implementeren in combinatie met faux-columns (zoals MueR aangeeft).

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

donderdag 29 januari 2009 00:42

Acties:

0 Henk 'm!

mcDavid

Denk eens na over de float van je pagina.

je zet eerst 3 elementen naast elkaar dmv. float:left
en daarna zet je er één element onder met clear:both

Er gebeurt dus precies wat je aangeeft, dat laatste element gaat overal onder staan.

Als je dat niet wilt moet je de structuur veranderen
je wilt: één element helemaal links; vervolgens [twee elementen boven elkaar] daarnaast, en dan een laatste element laten aansluiten.

Denk daar maar eens over na

donderdag 29 januari 2009 02:13

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

Ik snap eigenlijk niet waarom hij zonder een clear: both geen achtergrond laat zien in FF. Het klopt dan eigenlijk gewoon ja, aangezien ik hem in het midden centreer door die auto margins en hij niet te groot is dat hij overlapt met de linker en rechterkolom. Waarom kan hij wél de tekst goed weergeven, maar laat hij de achtergrond-image niet zien.

De structuur zou eigenlijk zijn dat je na content de footer defineert onder content imo, en daarna de rechterkolom. Echter verandert er dan niks in FF en in IE is hij dan helemaal geflipt. Best een gedoe voor zo'n gebruikelijke indelingsvorm.

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

donderdag 29 januari 2009 02:33

Acties:

0 Henk 'm!

mcDavid

Maak voor de grap #content eens transparent, dan zie je waar die achtergrond gebleven is

donderdag 29 januari 2009 02:52

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

Hij zit zelfs in het allerbovenste div, dus #menu in Firefox. In IE echter wel goed. Ik ga dit uitzoeken

. Snap namelijk niet wat veroorzaakt dat hij helemaal naar boven zou moeten.

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

donderdag 29 januari 2009 03:50

Acties:

0 Henk 'm!

mcDavid

Eigenlijk zit IE fout.

Aangezien je footer geen float heeft, maar die content wel, wordt de footer (block-element) achter de content geplaatst. Alleen de tekst (inline-element) float netjes om de content div heen, en wordt er zo dus onder geplaatst (waardoor de footer-div gigantisch opgerekt wordt).

Nu ik dit typ bedenk ik me een mogelijke oplossing door die footer background-position:bottom; te geven en de height weg te halen...

donderdag 29 januari 2009 08:43

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

MsG schreef op woensdag 28 januari 2009 @ 21:51:
[...]

Wat is er ranzig aan dan? Ik defineer toch netjes gewoon 2 divs die ik respectievelijk links en rechts laat floaten. Kan je es onderbouwen wat je bedoeld? Ben wel benieuwd. Bedankt iig voor het meedenken.

Kijk eens naar http://muer.nl/got/web/test.html bijvoorbeeld. Daar heb ik gewoon een background image op gezet waardoor de kolommen door lijken te lopen "faux columns" heet dat.

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 29 januari 2009 13:40

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

MueR schreef op donderdag 29 januari 2009 @ 08:43:
[...]

Kijk eens naar http://muer.nl/got/web/test.html bijvoorbeeld. Daar heb ik gewoon een background image op gezet waardoor de kolommen door lijken te lopen "faux columns" heet dat.

Bedankt, maar mijn punt is niet dat ik de kolommen alle 3 even lang wil laten worden. Ik wil gewoon dat de linker en de rechter auto height blijft, en de middelste ook. Maar dat de footer altijd tegen de onderkant van de content aan plakt, of hij dan hoger of lager staat dan de linker en of rechterkolom moet niet uitmaken. Maar ik ga even bezig met de nieuwe input. bedankt

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

vrijdag 30 januari 2009 01:55

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

mcDavid schreef op donderdag 29 januari 2009 @ 03:50:
Eigenlijk zit IE fout.

Aangezien je footer geen float heeft, maar die content wel, wordt de footer (block-element) achter de content geplaatst. Alleen de tekst (inline-element) float netjes om de content div heen, en wordt er zo dus onder geplaatst (waardoor de footer-div gigantisch opgerekt wordt).

Nu ik dit typ bedenk ik me een mogelijke oplossing door die footer background-position:bottom; te geven en de height weg te halen...

Bedankt mcDavid. Ik begin het al wat meer te snappen. Door die oplossing werkt het inderdaad, thx. Echter als ik dit verander in color ipv een background-image en ik zet alle vlakken even op background none, dan zie ik dat de footer bovenaan de pagina al begint met zijn vlak. Dit is dus niet te voorkomen begrijp ik uit je verhaal?
Het voelt nu namelijk nog een beetje wazig waarom hij zo vaag reageert. Als ik bijvoorbeeld de background-image verander in een color krijg ik dus zo'n vlak bovenaan, terwijl als ik er image van maak hij de background-image helemaal niet laat zien, ook al heb ik geen background-repeat beperking aanstaan.

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

vrijdag 30 januari 2009 12:10

Acties:

0 Henk 'm!

mcDavid

ja ik vind het ook een vage oplossing en het zou daarom ook niet mijn eerste keus zijn...

Ik zou de HTML structuur iets anders in elkaar zetten, zodat je float wat logischer/overzichtelijker wordt. Gewoon van links naar rechts werken met je divs, zie mijn eerste post.

vrijdag 30 januari 2009 12:36

Acties:

0 Henk 'm!

MBV

Op zich is de oplossing erg simpel: haal 'clear: both' weg bij de footer, en maak daar 'float: left' van. In Firefox werkt dat (getest met Firebug). Dat werkt zolang de linker menubalk groter is dan de content.

Ik geloof dat hierboven iemand al een hint in die richting gaf.

[ Voor 12% gewijzigd door MBV op 30-01-2009 12:37 ]

vrijdag 30 januari 2009 13:48

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

MBV schreef op vrijdag 30 januari 2009 @ 12:36:
Op zich is de oplossing erg simpel: haal 'clear: both' weg bij de footer, en maak daar 'float: left' van. In Firefox werkt dat (getest met Firebug). Dat werkt zolang de linker menubalk groter is dan de content.

Ik geloof dat hierboven iemand al een hint in die richting gaf.

Maar die linker content kan net zo goed stukken kleiner zijn dan de content.

Wat ik wil is dat ze alle 3 variabel zijn afhankelijk van hun content zelf. Dus als er maar 1 woord in de 1e kolom komt dan wordt hij heel klein. en als er een scriptie in zou staan dan wordt hij enorm lang. Dit geldt voor alle 3 de kolommen. De footer wil ik gewoon altijd tegen de contentvlak aan hebben. Maar goed ik ga weer even bezig. Vind het wel wazig dat deze specifieke layoutsvorm zo moeilijk is. Lijkt me toch best vaak gebruikt.

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

vrijdag 30 januari 2009 14:12

Acties:

0 Henk 'm!

MBV

Als je de footer-div in je content-div zet:

HTML:

<div id=menu> </div>
<div id=middle>
  <div id=content> </div>
  <div id=footer> </div>
</div>
<div id=menu2> </div>

dan kan je heel veel standaard-layouts gebruiken.

Dit is een van de redenen dat ik het CSS-model echt ontzettend slecht vind, het QT-model is een stuk eenvoudiger te gebruiken. En ook een stuk makkelijker WYSIWIG te editten.

edit:
Bedankt voor het mierenneuken, hoe wist jij dat het geen HTML4 maar XHTML was

Ja, ik gebruik in code altijd quotes, maar ik was nu lui.

[ Voor 16% gewijzigd door MBV op 30-01-2009 17:52 ]

vrijdag 30 januari 2009 17:47

Acties:

0 Henk 'm!

Zakkenwasser

MBV schreef op vrijdag 30 januari 2009 @ 14:12:
Als je de footer-div in je content-div zet:
HTML:
1
2
3
4
5
6
<div id=menu> </div>
<div id=middle>
  <div id=content> </div>
  <div id=footer> </div>
</div>
<div id=menu2> </div>
dan kan je heel veel standaard-layouts gebruiken.

Dit is een van de redenen dat ik het CSS-model echt ontzettend slecht vind, het QT-model is een stuk eenvoudiger te gebruiken. En ook een stuk makkelijker WYSIWIG te editten.

Correctie:

HTML:

<div id="menu"> </div>
<div id="middle">
  <div id="content"> </div>
  <div id="footer"> </div>
</div>
<div id="menu2"> </div>

PSP 1000 @ 6.60 Pro C2 [+256GB]
PSVita @ Henkaku Enso [+256GB]
3DS @ Luma (B9S) [+160GB]
Nintendo Switch 3.0.1 [+256GB]

zaterdag 31 januari 2009 11:19

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

MBV schreef op vrijdag 30 januari 2009 @ 14:12:
Als je de footer-div in je content-div zet:
HTML:
1
2
3
4
5
6
<div id=menu> </div>
<div id=middle>
  <div id=content> </div>
  <div id=footer> </div>
</div>
<div id=menu2> </div>
dan kan je heel veel standaard-layouts gebruiken.

Dit is een van de redenen dat ik het CSS-model echt ontzettend slecht vind, het QT-model is een stuk eenvoudiger te gebruiken. En ook een stuk makkelijker WYSIWIG te editten.

edit:
Bedankt voor het mierenneuken, hoe wist jij dat het geen HTML4 maar XHTML was Ja, ik gebruik in code altijd quotes, maar ik was nu lui.

Klopt dat werd mij ook aangeraden door een vriend. Echter ben ik zo'n typische neuzelaar die dat symptoombestrijding vind, tuurlijk voor de werking werkt het even. Maar ik heb nu de tijd en vraag me bij zulke dingen af waarom het in 2009 nog niet normaal werkt. Bij bijna elke layout tutorial van gerespecteerde css-ers zie ik ook dingen als /* for IE */ etc en allemaal hacks. Dat vind ik jammer dat dat nog steeds moet tegenwoordig blijkbaar. Ik had het idee dat je dat met tabellen veel minder had.

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

zaterdag 31 januari 2009 14:42

Acties:

0 Henk 'm!

MBV

IE6 moet je aparte CSS-bestanden voor maken, daar ontkom je niet aan (en anders verval je idd in hacks). Met conditional comments kan je makkelijk een bestandje layout_ie6.css inladen, die alle correcties bevat, zoals ik op www.mvdvlist.nl heb gedaan.
Tabellen werken inderdaad wat intuïtiever, denk ik. Nadeel is dat ze slechter te doorzoeken zijn met een crawler, lastig te bewerken met javascript, meer dataverkeer vragen (omdat je veel tabellen nodig hebt), en sowieso trager laden dan een vergelijkbare div-layout. Dan heb ik het nog niet gehad over toegankelijkheid: screen-readers kunnen heel weinig met een table-layout.

zaterdag 31 januari 2009 17:02

Acties:

0 Henk 'm!

mcDavid

MsG schreef op zaterdag 31 januari 2009 @ 11:19:
[...]

Klopt dat werd mij ook aangeraden door een vriend. Echter ben ik zo'n typische neuzelaar die dat symptoombestrijding vind, tuurlijk voor de werking werkt het even. Maar ik heb nu de tijd en vraag me bij zulke dingen af waarom het in 2009 nog niet normaal werkt. Bij bijna elke layout tutorial van gerespecteerde css-ers zie ik ook dingen als /* for IE */ etc en allemaal hacks. Dat vind ik jammer dat dat nog steeds moet tegenwoordig blijkbaar. Ik had het idee dat je dat met tabellen veel minder had.

Tabellen zijn wat meer hufterproof idd, maar zijn ook weer veel minder flexibel.
Ik ben benieuwd hoe jij dit probleem bijvoorbeeld had willen oplossen met tables. Dat zou waarschijnlijk een stuk of 3 geneste tables opleveren... Dan raak je het spoor ook snel bijster hoor!

zondag 1 februari 2009 00:22

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

Dan had ik een header en menubalk met een colspan van 3,

dan de content in 3 aparte td's. Je krijgt alleen wel dat de hoogte dan niet per td anders is, maar ja.

Ik vind tabellen nog steeds idd wat inituitiver, niet dat ik het gebruik hoor

. Maar ik snap bijvoorbeeld dat wazige gedrag van die #footer echt nog steeds niet

.

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

zondag 1 februari 2009 16:01

Acties:

0 Henk 'm!

MBV

Welk stuk niet? Het staat hier al precies uitgelegd waarom de verschillende oplossingen werken zoals ze werken, toch