Footer naar beneden 'trekken'.

Status
Niet open voor verdere reacties.
D

d0mzy

Terugkerende gebruiker
Lid geworden
26 jan 2008
Berichten
1.339
Hoi allen,

Ik ben met mijn projectgroep bezig met een project waar we een online portaal maken voor een bedrijf. In dit portaal zijn dan een aantal schermen aanwezig, sommigen met een scrollbar naar beneden.

Op de pagina's met de scrollbar naar beneden staat de footer netjes onderaan het scherm. Op de pagina's zonder scrollbar staat de footer een stukje van de onderkant af, zodat er een witte balk onder de footer komt. Dit willen we graag verhelpen.

Ik hoop dat jullie me kunnen helpen.
Als er meer informatie nodig is, vraag maar.

http://img815.imageshack.us/img815/5465/footerlx.png

Code: 
#footer
{
    padding: 10px;
    font-size: 0.8em;
    text-align: center;
    border-top: 1px solid #C9E0ED;
    background-color: #B7A986;
}
 
Aan een plaatje kunnen we het probleem niet zien.
Daar hebben we broncode voor nodig.

En dat gaat het beste met een URL.

Broncode kopieren en hier in een reactie zetten is niet ideaal.


Maar ik gok voorlopig op een verkeerde waarde voor 'margin'
 
Bij deze de HTML code.
De eerste div id van footer is in de vorige post al gegeven.
De footertable en width staan onder de HTML code weergegeven.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="language" content="en" />

        <!-- begin blueprint CSS framework -->
        <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/screen.css" media="screen, projection" />
        <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print" />
        <!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
        <![endif]-->
        <!-- end blueprint CSS framework -->

        <!-- begin We-R-Asia CSS stylesheets -->
        <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/main.css" />
        <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/form.css" />
        <!-- end We-R-Asia CSS stylesheets -->

        <title><?php echo CHtml::encode($this->pageTitle); ?></title>
    </head>

    <body>

        <div id="page">
            
            <div id="mainmenu">               
                <div class="width78procent">                  
                    <?php
                    $this->widget('zii.widgets.CMenu', array(
                        'items' => array(
                            array('label' => 'Home', 'url' => array('/site/index')),
                            array('label' => 'Administratorscherm', 'url' => array('/site/page', 'view' => 'adminscherm')),
                            array('label' => 'Hoofdoverzicht', 'url' => array('/site/page', 'view' => 'overzicht')),
                            array('label' => 'Productoverzicht', 'url' => array('/site/page', 'view' => 'productoverzicht')),
                            array('label' => 'Facturenlijst', 'url' => array('/site/page', 'view' => 'overzichtfacturen')),
                            array('label' => 'Orderoverzicht', 'url' => array('/site/page', 'view' => 'overzichtorders')),
                            array('label' => 'Contact', 'url' => array('/site/contact')),
                            array('label' => 'Help/FAQ', 'url' => array('/site/page', 'view' => 'help')),
                            array('label' => 'Login', 'url' => array('/site/login'), 'visible' => Yii::app()->user->isGuest),
                            array('label' => 'Logout (' . Yii::app()->user->name . ')', 'url' => array('/site/logout'), 'visible' => !Yii::app()->user->isGuest),
                        ),
                        'lastItemCssClass' => 'lastmenuitem',
                    ));
                    ?>
                </div>
            </div><!-- mainmenu -->

            <div id="header">
                <div class="width78procent">
                    <div id="logo">
                        <?php
                        $imghtml = CHtml::image(Yii::app()->request->baseUrl . '/images/logo.png', 'We R Asia logo');
                        echo CHtml::link($imghtml, 'index.php?r=site/index', array(''));
                        // echo CHtml::encode(Yii::app()->name);
                        $imghtml = CHtml::image(Yii::app()->request->baseUrl . '/images/dutch.png');
                        echo CHtml::link($imghtml, '', array('class' => 'languagebutton-dutch'));
                        $imghtml = CHtml::image(Yii::app()->request->baseUrl . '/images/english.png');
                        echo CHtml::link($imghtml, '', array('class' => 'languagebutton-english'));
                        ?>
                    </div>
                </div>
            </div><!-- header -->

			
            <?php if (isset($this->breadcrumbs)): ?>
                <?php
				echo '<div class="width84procent">';
                $this->widget('zii.widgets.CBreadcrumbs', array(
                    'links' => $this->breadcrumbs,
                ));
				echo '</div>';
                ?><!-- breadcrumbs -->
            <?php endif ?>

            <?php echo $content; ?>

            <div id="footer">
                <div style="text-align: left" class="width78procent">
                    <?php echo CHtml::image(Yii::app()->request->baseUrl . '/images/logo-small.png', 'We R Asia logo'); ?>
                </div>
                
                <hr />
                <table class="footertable">
                    <tr>
                        <td>Molenstraat 19</td>
                        <td>Office: +31 492 329889</td>
                        <td>Copyright &copy; 2011-2012 by Projectgroep MSO06h.</td>
                    </tr>
                    
                    <tr>
                        <td>5427 PV BOEKEL</td>
                        <td>E-mail: <a href="mailto:info@we-r-asia.com">info@we-r-asia.com</a></td>
                        <td>All Rights Reserved.</td>
                    </tr>
                    
                    <tr>
                        <td>The Netherlands</td>
                        <td></td>
                        <td><?php echo Yii::powered(); ?></td>
                    </tr>
                </table>
            </div><!-- footer -->

        </div><!-- page -->

    </body>
</html>

Code: 
body
{
    margin: 0;
    padding: 0;
    color: #555;
    font: normal 10pt Arial,Helvetica,sans-serif;
    background: #EFEFEF;
    min-width: 375px;
}

#page
{
    background: white;
    min-height: 100%;
}

#header
{
    margin: 0;
    padding: 0;
    min-height: 101px;
    background: url(../images/header-gradient.png);
    background-repeat: repeat-x;
}

#content
{
    padding: 20px;
}

#sidebar
{
    padding: 20px 20px 20px 0;
}

#footer
{
    padding: 10px;
    font-size: 0.8em;
    text-align: center;
    border-top: 1px solid #C9E0ED;
    background-color: #B7A986;
}

#logo
{
    padding: 10px 20px;
    font-size: 200%;
}

#mainmenu
{
    background:white url(../images/menubar-gradient.png) repeat-x left top;
}

#mainmenu ul
{
    padding:6px 20px 5px 20px;
    margin:0px;
}

#mainmenu ul li
{
    display: inline;
}

#mainmenu ul li a
{
    color:#000000;
    background-color:transparent;
    font-size:12px;
    font-weight:bold;
    font-family: "Arial Narrow",Arial,Helvetica,sans-serif;
    text-decoration:none;
    padding:5px 8px;
}

#mainmenu ul li a:hover, #mainmenu ul li.active a
{
    color: #000000;
    background-image: url(../images/button-gradient.png);
    text-decoration:none;
}

#mainmenu ul li.lastmenuitem
{
    float: right;
}

#mainmenu ul li.lastmenuitem a:hover
{
    color: #000000;
    text-decoration:none;
    background-image: url(../images/button-gradient.png);
    background-repeat: repeat-x;
    background-position: center bottom;
}

div.flash-error, div.flash-notice, div.flash-success
{
    padding:.8em;
    margin-bottom:1em;
    border:2px solid #ddd;
}

div.flash-error
{
    background:#FBE3E4;
    color:#8a1f11;
    border-color:#FBC2C4;
}

div.flash-notice
{
    background:#FFF6BF;
    color:#514721;
    border-color:#FFD324;
}

div.flash-success
{
    background:#E6EFC2;
    color:#264409;
    border-color:#C6D880;
}

div.flash-error a
{
    color:#8a1f11;
}

div.flash-notice a
{
    color:#514721;
}

div.flash-success a
{
    color:#264409;
}

div.form .rememberMe label
{
    display: inline;
}

div.view
{
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #C9E0ED;
}

div.breadcrumbs
{
    font-size: 0.9em;
    padding: 5px 20px;
}

div.breadcrumbs span
{
    font-weight: bold;
}

div.search-form
{
    padding: 10px;
    margin: 10px 0;
    background: #eee;
}

.portlet
{

}

.portlet-decoration
{
    padding: 3px 8px;
    background: #B7D6E7;
    border-left: 5px solid #6FACCF;
}

.portlet-title
{
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin: 0;
    color: #298dcd;
}

.portlet-content
{
    font-size:0.9em;
    margin: 0 0 15px 0;
    padding: 5px 8px;
    background:#EFFDFF;
}

.portlet-content ul
{
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin: 0;
    padding: 0;
}

.portlet-content li
{
    padding: 2px 0 4px 0px;
}

.operations
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.operations li
{
    padding-bottom: 2px;
}

.operations li a
{
    font: bold 12px Arial;
    color: #0066A4;
    display: block;
    padding: 2px 0 2px 8px;
    line-height: 15px;
    text-decoration: none;
}

.operations li a:visited
{
    color: #0066A4;
}

.operations li a:hover
{
    background: #80CFFF;
}

.languagebutton-english
{
    float: right;
    margin-top: 15px;
    margin-right: 5px;
}

.languagebutton-dutch
{
    float: right;
    margin-top: 15px;
}

.background-gradient
{
    background-image: linear-gradient(bottom, rgb(204,204,204) 0%, rgb(255,255,255) 100%);
    background-image: -o-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(255,255,255) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(255,255,255) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(204,204,204)),
        color-stop(1, rgb(255,255,255))
        );
    filter: progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#cccccc', startColorstr='#ffffff', gradientType='0');
    min-height: 400px;
    height: auto;
}

.width78procent
{
    width: 78%;
    margin: 0 auto;
}

.width84procent
{
    width: 84%;
    margin: 0 auto;
}

.frame-inside{
    background-color: white;
    border-top-width: 10px;
    border-top-color: red;
    border-bottom-width: 10px;
    border-bottom-color: red;
    border-bottom-style: solid;
    border-top-style: solid;
    border-radius: 9px;
    padding: 10px;

}

.frame-outside
{
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
    border-top-style: solid;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-right-color: black;
    border-left-color: black;
    border-bottom-color: black;
    border-top-color: black;
    border-radius: 10px;
}

.productenscherm
{
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
    border-top-style: solid;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-right-color: black;
    border-left-color: black;
    border-bottom-color: black;
    border-top-color: black;
    border-radius: 10px;
}

table.overviewtable
{
    border-spacing: 10px;
}

table.overview th
{
    padding-bottom: 2px;
    padding-top: 2px;
    font-weight: bold;
    color: black;
    border-bottom-color: black;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

table.overview td
{
    color: black;
    border-bottom-color: black;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    padding-bottom: 1px;
    padding-top: 1px;
}

.overviewtd
{
    width: 50%;
    /* padding-right: 0px; > Zorgt dat de div's tegen elkaar aankomen, hoort dus niet */
}

table.footertable
{
    bottom: 0;
    width:100%;
    line-height: 1px;
    padding-top: 10px;
}

table.footertable td
{
    width: 10%;
    text-align: center;
}

.width50thtd
{
    width: 50%;
}

div, ul, li {
    zoom: 1;
}

ul ul,
ul ul li {
    zoom: 0;
}

#timeline {
    height: 120px;
    margin-top: 10px;
    padding: 20px;
    overflow: scroll;
    white-space: nowrap;
    /*cursor: -moz-grab !important;*/ /* should this be applied with JS? */
}

.tl-events {
    display:block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.tl-events li {
    display: inline-block;
    *display: inline;
    margin: 0 10px 0 0;
    padding: 0;
    width: 250px;
    white-space: normal;
    zoom: 1;
}

.tl-events ul {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.tl-events ul li a {
    text-decoration: none;
    color: #000;
    background: #D9E4FF;
    border: 1px solid #D9E4FF;
    -moz-border-radius: 4px;
    display: inline-block;
    margin: 2px 2px;
    padding: 2px;
}

.tl-events ul li a:hover,
.tl-events ul li a:focus {
    outline: 0;
    background: #C2CCE4;
    border: 1px solid #B0BACF;
}

.doodle {
    display: none;
}

h1 {
    margin: 8px 0;
}

De reden dat ik geen broncode kan geven met een URL is dat ik lokaal werk.
 
Laatst bewerkt:
Hoi d0mzy,
Heb je dit recept al eens bekeken?
  • De {padding-bottom: 3em;} van de #content moet aangepast worden als de #footer een andere hoogte heeft (dit is de afstand die ervoor zorgt dat bij een lange pagina de laatste regels van de content niet onder de footer verdwijnen).
Met vriendelijke groet,
CSShunter
 
Hoi CSShunter,

Ik heb je internetpagina doorgenomen en de wijzigingen doorgevoerd. Helaas, het wil niet werken.
Mogelijk kun jij me even verder helpen, ik heb de code vernieuwd in de eerste post die ik plaatste.
Dit is exclusief jouw wijzigingen. Met jouw wijzigingen kreeg ik een klein blokje links onderin waar alle gegevens in stonden.
Nu staat de hele CSS file er in.

Groetjes,
 
Hoi d0mzy,
Nu hebben we dus de complete css van de pagina, en de <div> van de footer.

Maar om te duiden wat er aan de hand kan zijn, is ook de complete html-code nodig, dus beginnend met het Doctype t/m </html> (in de hoop dat er vóór het Doctype en na de </html> niets meer staat ;) ).

Kan je die hier ook nog posten?
Het zal wel een lap worden, maar dat geeft niet wat mij betreft.

Met vriendelijke groet,
CSShunter
 
Hoi CSShunter,

De HTML-code is geüpdate.
Bedankt dat je probeert te helpen!

Groetjes,
 
Hoi d0mzy,
Ik citeer 2x:
Bedankt dat je probeert te helpen!
Klik om te vergroten...
Bedankjes hoeven niet, daar zijn we voor! :thumb::)
Klik om te vergroten...
:p

Okee, terzake!
Ah, ik zie dat het een CMS-site is, die met php gevuld wordt. Het CMS heb ik hier niet aan boord, dus ik heb alle php-verwijzingen er uit gefietst.
Dan blijft er niet veel over. ;)
  • Test: bliksekaters.nl/tests/werasia-nw-1.htm
  • Hierin gecorrigeerd: de {line-height: 1px} in de table.footertable. Die hoort er niet in, want veroorzaakt dat alle regels in de footer dwars door elkaar heen gaan lopen, en ook de centrering niet meer klopt (zie deze).
Nu het recept footer op de bodem er in pluggen:
  • De wrapper waar alles in zit, die bij mij de <div id="content"> heet, heet bij jou: <div id="page">.
  • Die moet nu niet meer de footer omvatten, maar vlak voor de footer-div eindigen.
  • Hij krijgt er een padding-bottom bij, zodat de footer bij lange pagina's niet de onderste regels van de content kan gaan overlappen.
  • Omdat de footer een absolute positie heeft, moet deze ook een breedte krijgen: hier gewoon 100% van het scherm.
  • De andere breedtes zijn al geregeld, dus alles van de css uit het voorbeeld kan overgenomen worden zonder de breedtes: html op 100% hoog (+1px padding voor niet-IE browsers), de body een relatieve positie en min-height van 100%, en de footer absolute positie en een bottom:0 geven om altijd onderaan de <body> te komen.
Hokus, pokus, klaar!
Met vriendelijke groet,
CSShunter
________
PS: Is de voertaal van de pagina inderdaad Engels? (als NL, dan dat even 3x wijzigen in regel 2 en 5, anders gaan voorleesbrowsers proberen NL op z'n EN uit te spreken).
 
Dag CSShunter,

Ik wil jou (ja, ik doe het nu met opzet twee keer) bedanken voor alle inzet!
De gradient heb ik moeten aanpassen en dat voorkwam de volgende link met een witte balk.
Ik heb daarnaast de padding-bottom op 10em; gezet.

http://imageshack.us/f/694/compleetwerasia.png/

Het werkt dus!
Ik heb bewust in jouw toegevoegde code de padding-bottom: 1px; in de html er uit gesloopt.
De scrollbar werkt ook zonder deze 1 px, de reservering is zo prima.

N.b. het Yii-framework wat wij gebruiken verandert de taal automatisch met een extensie.

Groetjes, :thumb:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan