[CSS] Div horizontaal centreren op de onderkant - Softwareontwikkeling

dinsdag 5 augustus 2008 11:58

Acties:

Verwijderd

Topicstarter

Graag zou ik een divje horizontaal willen centreren en deze op de onderkant van de browser plakken. Wanneer de content (pagina) langer is dan het scherm moet dit vlak natuurlijk niet over de content gaan zweven maar meegroeien.

In de meeste browsers lijkt het te werken maar in iexplorer krijg ik het niet voor elkaar. Het werkt in iexplorer louter wanneer de website geen gecentreerde tabellen e.d. bevat.

Ik probeer het nu met het volgende:

code:

#footer 
{
    bottom: 0px;
    position: absolute;
    width:100%;
    margin:0px auto;
    text-align:left;
    padding:0px;
}
.footervlak
{
  margin:0 auto;
  text-align:left;
  height:40px;
  width:980px; /* bijvoorbeeld*/
  position: relative;
  background-color:#FF008F;
}

<div id="footer"><div class="footervlak"></div></div>

Ik heb nog een tweede vraag en vind het een beetje onzinnig om twee topics te openen dus plaats ik die hier ook bij.

Ik zou een tabel graag 100% hoogte meegeven. Dit werkt prima in Iexplorer door simpelweg het onderstaande te gebruiken. In andere browsers werkt dit echter niet. Ik heb Gegoogled maar kom niet echt tot een oplossing.

code:

#fullheight
{
    height:100%
}

[ Voor 6% gewijzigd door Verwijderd op 05-08-2008 12:01 ]

dinsdag 5 augustus 2008 12:11

Acties:

Kiphaas7

Genoeg hits over je footer:
Google op: footer bottom css

Eerste hit van:
Google op: 100% height table css

Geeft mij een werkend voorbeeld, en lijkt ook nog eens verdacht veel op jouw code. Gebruik je wel een correct doctype etc?

dinsdag 5 augustus 2008 12:12

Acties:

Dekaasboer

Het is fijn dat je de betreffende code zo even hebt neer gezet, maar een beetje context vind ik altijd wel handig. Misschien kun je de pagina/ code laten zien waar het in terecht komt?

Dan kan ik namelijk precies zien wat internet explorer wel en niet doet. Maar waarschijnlijk is dit wat je moet doen:

code:

<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#container {
position: relative;
min-height: 100%;
}
#content {
padding: 10px;
background-color: #000000;
padding-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0;
padding: 10px;
width: 100%;
}
</style>


<body>
<div id="container">
<div id="content">              
</div>
<div id="footer">
</div>
</div>
</body>

Lol@ Kiphaas, Zelfde oplossing gegeven

[ Voor 78% gewijzigd door Dekaasboer op 05-08-2008 12:34 ]

http://axrotterdam.blogspot.nl

dinsdag 5 augustus 2008 12:47

Acties:

Verwijderd

Topicstarter

Kiphaas7 > De code is puur toeval, ik geef classes, function, etc. vaak Engelse namen, vandaar. Waar ik niet aan gedacht had was de html op 100% height te zetten. Vervolgens werkt het gewoon!

Kaasboer >

Ik heb even alle troep en opmaak weggegooid zodat de essentie overblijft. Als je dit bekijkt in Iexplorer dan staat de bottom links ipv gecentreerd. Verwijder ik de table dan staat de bottom wel gecentreerd.

code:

<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#footer 
{
    bottom: 0px;
    position: absolute;
    width:100%;
    margin:0px auto;
    text-align:left;
    padding:0px;
}
.footervlak
{
  margin:0 auto;
  text-align:left;
  height:40px;
  width:980px; /* bijvoorbeeld*/
  position: relative;
  background-color:#FF008F;
}
-->
</style>
</head>

<body>

<table width="980" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td>Veld 1</td>
    <td>Veld 2</td>
  </tr>
</table>
<div id="footer"><div class="footervlak"></div></div>
</body>
</html>

[ Voor 10% gewijzigd door Verwijderd op 05-08-2008 12:48 ]

dinsdag 5 augustus 2008 13:50

Acties:

Bosmonster

*zucht*

Zoiets?

http://www.bosmonster.nl/html/centered_with_footer.html

Maar een voorbeeldje gemaakt, aangezien het nogal vaak gevraagd wordt.

dinsdag 5 augustus 2008 20:46

Acties:

Kiphaas7

Bosmonster schreef op dinsdag 05 augustus 2008 @ 13:50:
Zoiets?

http://www.bosmonster.nl/html/centered_with_footer.html

Maar een voorbeeldje gemaakt, aangezien het nogal vaak gevraagd wordt.

Aangezien de oplossing al is gegeven, is er eigenlijk een reden waarom je een containing div gebruikt (#site), ipv dezelfde code los te laten op je body tag? Ik zelf gebruik bijna nooit een containing div voor dit soort problemen.

En er zijn toch wel elegantere oplossing dan een nutteloos element dat je footer cleart?

dinsdag 5 augustus 2008 20:52

Acties:

Verwijderd

Kiphaas7 schreef op dinsdag 05 augustus 2008 @ 20:46:

Aangezien de oplossing al is gegeven, is er eigenlijk een reden waarom je een containing div gebruikt (#site), ipv dezelfde code los te laten op je body tag? Ik zelf gebruik bijna nooit een containing div voor dit soort problemen.

Oude versies van o.a. Internet Explorer, en de mogelijkheid om meerdere pagina's tegelijk te tonen (er zijn meer media dan alleen je beeldscherm).

dinsdag 5 augustus 2008 22:48

Acties:

Kiphaas7

Verwijderd schreef op dinsdag 05 augustus 2008 @ 20:52:
[...]

Oude versies van o.a. Internet Explorer, en de mogelijkheid om meerdere pagina's tegelijk te tonen (er zijn meer media dan alleen je beeldscherm).

Tweede punt wil ik toegeven, maar je IE5.5 en lager wordt toch bijna niet meer gebruikt?

dinsdag 5 augustus 2008 23:10

Acties:

Bosmonster

*zucht*

Kiphaas7 schreef op dinsdag 05 augustus 2008 @ 20:46:
[...]

Aangezien de oplossing al is gegeven, is er eigenlijk een reden waarom je een containing div gebruikt (#site), ipv dezelfde code los te laten op je body tag? Ik zelf gebruik bijna nooit een containing div voor dit soort problemen.

En er zijn toch wel elegantere oplossing dan een nutteloos element dat je footer cleart?

Omdat het een stuk eenvoudiger is 1 element te centreren dan alle elementen los. Voor de twee (of meer) kolommen naast elkaar is het sowieso al nodig, dus waarom dan niet in 1x eromheen.

Bovendien geeft mijn oplossing wel iets meer dan alleen de bottom-floating footer, want met het gebruik ervan moet je met een aantal andere dingen rekening houden (zoals die ruimte vrijhouden) en dit werd in het eerste voorbeeld niet gegeven.

[ Voor 16% gewijzigd door Bosmonster op 05-08-2008 23:14 ]

woensdag 6 augustus 2008 12:33

Acties:

Kiphaas7

Bosmonster schreef op dinsdag 05 augustus 2008 @ 23:10:

Omdat het een stuk eenvoudiger is 1 element te centreren dan alle elementen los. Voor de twee (of meer) kolommen naast elkaar is het sowieso al nodig, dus waarom dan niet in 1x eromheen.

Dat kan dus ook op je body tag (width 700px, margin 0 auto). Even afgezien van onderstaande nadelen beschreven door Cheatah.

Verwijderd schreef op dinsdag 05 augustus 2008 @ 20:52:
Oude versies van o.a. Internet Explorer, en de mogelijkheid om meerdere pagina's tegelijk te tonen (er zijn meer media dan alleen je beeldscherm).

---------------------------------

Bosmonster schreef op dinsdag 05 augustus 2008 @ 23:10:
Bovendien geeft mijn oplossing wel iets meer dan alleen de bottom-floating footer, want met het gebruik ervan moet je met een aantal andere dingen rekening houden (zoals die ruimte vrijhouden) en dit werd in het eerste voorbeeld niet gegeven.

Ik had het verder alleen dat je je floats cleart met een extra element, terwijl je dat ook op andere manieren kan doen (zonder extra element). En vroeg me daarbij af waarom je daar (eventueel bewust) voor gekozen hebt.

woensdag 6 augustus 2008 14:04

Acties:

Bosmonster

*zucht*

Kiphaas7 schreef op woensdag 06 augustus 2008 @ 12:33:
[...]
Dat kan dus ook op je body tag (width 700px, margin 0 auto). Even afgezien van onderstaande nadelen beschreven door Cheatah.

Het gebruiken van een losse div hiervoor is veel flexibeler. Het voorbeeld is opgezet als basis voor een site. Het laatste dat ik daarin wil doen is bijvoorbeeld de globale body aanpassen.

Ik had het verder alleen dat je je floats cleart met een extra element, terwijl je dat ook op andere manieren kan doen (zonder extra element). En vroeg me daarbij af waarom je daar (eventueel bewust) voor gekozen hebt.

Dit was de enige manier die ik goed werkend kreeg xbrowser. Als je verbeteringen hebt, noem ze dan gewoon (beter nog: laat een voorbeeld zien), want op deze manier schiet niemand er wat mee op natuurlijk.

woensdag 6 augustus 2008 23:35

Acties:

Kiphaas7

Ik wilde niet op iemands tenen trappen, omdat je een goede reden kon hebben voor deze keuze.

Ik geloof echter dat de volgende oplossing ook werkt:

footer_clear div weg in je html (en css natuurlijk), en de volgende veranderingen gemaakt in jouw code, alles met commentaar erachter heb ik dus toegevoegd. De rest van de code is hetzelfde gebleven.

Cascading Stylesheet:

div#site {
    position: relative;

    width: 980px;
    margin: 0 auto;
    
    overflow:hidden; /* cleart floats voor opera, firefox etc... */

    background-color: #eee;
    background-image: url(../images/example_faux_columns.gif);

    height: auto !important;
    height: 100%; /* IE6 treats this as min-height */
    min-height: 100%;
}

div#content {
    float: left;
    width: 760px;
    background-color: #ff0;
    padding: 10px 10px 110px 10px; /* Extra padding voor de footer */
}

div#menu {
    float: left;
    width: 200px;
    background-color: #0f0;
    padding-bottom:100px; /* Extra padding voor de footer */
}

div#footer {
    position: absolute;
    bottom: 0;
    left:0; /* blijkbaar nodig voor IE7, laat anders de footer niet zien */
    height: 100px;
    width: 100%;
    background-color: #0ff;
}

Snel even getest, en ik geloof dat het nu hetzelfde reageert als met jouw extra element.

overflow property heb ik van http://www.quirksmode.org/css/clearing.html

Mocht er iets niet kloppen hoor ik dat natuurlijk ook graag.

EDIT: dat krijg je dus als je te snel wilt zijn. In mijn haast heb ik padding toegevoegd aan de content div, wat natuurlijk alleen nuttig is als de content div ook daadwerkelijk hoger is dan de menu div. Zal ik morgen even naar kijken, en ook nog eens even goed naar de rest kijken, maar ik geloof dat het geen onoverkomelijk probleem is....

EDIT2: Extra padding toegevoegd voor de menu div, en de volgende code voor een IE6 resizing probleem toegevoegd, dit zou natuurlijk ook met !important kunnen, maar ik heb een persoonlijke voorkeur voor conditional comments:

HTML:

<!--[if IE 6]>
<style type="text/css">
div#site {
    overflow:visible;
}
</style>
<![endif]-->

[ Voor 44% gewijzigd door Kiphaas7 op 07-08-2008 00:04 ]

donderdag 7 augustus 2008 09:44

Acties:

Bosmonster

*zucht*

Nu alleen nog even Firefox2 fixen. Wel weird, die left:0 die nodig is voor IE7, dat is notabene de default value.

Nu snap je misschien waarom ik de extra div heb gekozen. Scheelde me een hele hoop gepiel en werkt zeker in alle geteste browsers, zonder conditional statements en andere trucs.

[ Voor 45% gewijzigd door Bosmonster op 07-08-2008 09:51 ]

donderdag 7 augustus 2008 11:04

Acties:

Kiphaas7

Aargh, die had ik niet meer op deze pc staan.

Alhoewel ik me afvraag hoeveel firefox 2 nog gebruikt wordt, aangezien deze maar support krijgt tot december 2008, is het natuurlijk jammer dat het daarin niet werkt.

Goed dan, poging 2

. Deze werkt volgens mij wel in ff2 en ff3, opera 9.5, IE6 & 7 en safari 3 onder windows. De overflow fix voor IE6 heb ik toch maar met de !important hack gedaan, aangezien deze door jou al gebruikt werd voor de min-height fix.

Zelfs IE5.5 rendert het goed, afgezien van het feit dat deze margin:0 auto niet ondersteund.

Als je in deze code geen fouten kunt ontdekken, dan denk ik toch dat dit een vrij nette oplossing is.

Aangepaste html code, footer buiten de containing div gegooid:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
    <head>
        <title>Voorbeeldje</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <link rel="stylesheet" type="text/css" href="style/main.css">
        <link rel="stylesheet" type="text/css" href="style/example_centered_with_footer.css">
    </head>

    <body>
        <div id="site">
            <div id="header"></div>
            
            <div id="menu">
                <ul>
                    <li>menuitem</li>
                    <li>menuitem</li>
                    <li>menuitem</li>
                    <li>menuitem</li>
                    <li>menuitem</li>
                    <li>menuitem</li>
                    <li>menuitem</li>
                    <li>menuitem</li>
                    <li>menuitem</li>
                </ul>
            </div>
            
            <div id="content">
                    <h1>Hele dikke header</h1>
        
                    <p><strong>Deze template combineert de bottom-floating footer, centered layout en faux columns. Getest met FF2/3, IE6/7, Safari3 en Opera9.</strong></p>
        
                    <p>Midden-kolommen zijn uiteraard vrij in te delen.</p>
        
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quis odio et turpis mattis lobortis. Duis elit purus, mattis non, vulputate et, tincidunt nec, erat. Nulla facilisi. Integer pellentesque magna vel odio. Donec ultrices felis ut diam. Phasellus viverra elit non enim. Pellentesque et mauris. Aliquam erat volutpat. Morbi lorem pede, auctor eu, interdum sed, condimentum a, sapien. Morbi rhoncus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    <p>Fusce pretium. Pellentesque sodales, tortor sed lobortis ullamcorper, quam est euismod lacus, ut pulvinar erat tellus vitae justo. Aenean vulputate. Vivamus iaculis vulputate velit. Suspendisse potenti. Aliquam varius risus eget urna. Curabitur urna. Curabitur eget augue. Curabitur eleifend enim eget nulla. Morbi pretium felis eget diam. Etiam non leo id erat semper ultricies. Aliquam quis nunc. Etiam sed dui sit amet lorem luctus interdum. In dapibus blandit odio. Curabitur id mi. Phasellus pede diam, mattis quis, pulvinar eget, lobortis in, mauris. Donec rutrum accumsan risus. Phasellus sed enim eu urna pretium ultrices. Aliquam sed lorem ut ligula pulvinar luctus. Nunc placerat.</p>
        
                    <p>Nunc varius lacinia enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla molestie sollicitudin eros. Etiam ante diam, vulputate suscipit, scelerisque et, aliquet non, pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris lorem. Donec dolor pede, euismod id, viverra at, mattis eu, nisl. Phasellus sit amet elit. Donec suscipit. Mauris semper semper justo. Proin mi. Donec nec neque. Nulla eu velit. Suspendisse posuere. Donec tincidunt bibendum risus. Duis nisl. Mauris porttitor aliquam velit.</p>
            </div>      
        </div>
        
        <div id="footer"></div>
    </body>
</html>

Cascading Stylesheet:

/* CENTERED WITH FOOTER EXAMPLE */

div#site, div#footer {
    width: 980px; /* Breedte van de site */
}

div#site {
    position: relative;

    margin: 0 auto;
    
    overflow:hidden !important; /* cleart floats voor opera, firefox etc... */
    overflow:visible; /* Fix voor IE6, footer scrollt anders over content heen */

    background-color: #eee;
    background-image: url(../images/example_faux_columns.gif);

    height: auto !important;
    height: 100%; /* IE6 treats this as min-height */
    min-height: 100%;
}

div#header {
    height: 100px;
    background-color: #f00;
}

div#menu {
    float: left;
    width: 200px;
    background-color: #0f0;
}

div#content {
    float: left;
    width: 760px;
    background-color: #ff0;
    padding: 10px;
}

div#content, div#menu {
    padding-bottom:110px; /* Ruimte maken voor de footer, waarde = height_footer + padding */
}

div#footer {
    position:relative;
    height: 100px;
    margin:-100px auto 0 auto; /* Negatieve top margin(=height) "trekt" footer in beeld */
    background-color: #0ff;
}

[ Voor 11% gewijzigd door Kiphaas7 op 07-08-2008 11:28 ]