Ergebnis 1 bis 3 von 3

Thema: Problem mit Footer / Container-Boxen

  1. #1
    HTML Newbie
    Registriert seit
    10.09.2013
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem mit Footer / Container-Boxen

    Hallo! Ich habe ein Problem mit dem Aufbau einer Seite. Wer kann mir helfen, den Fehler zu finden warum der div #container nicht bis zum Seitenende läuft (hier orange), obwohl height: 100%? Dadurch sitzt auch der footer nicht am unteren Rand, sondern steht quasi mitten auf der Seite. Für Hilfe wäre ich sehr dankbar!! Hier mein Code:<!doctype html>
    <html>
    <head>
    <title>Start PTM</title>
    <!--<link rel="stylesheet" type="text/css" href="style-ptm.css"/>-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type=text/css>

    body, html { background-color: #EBE7E7;
    height: 100%;

    }

    * { margin:0;
    padding:0;
    }

    #container { position: relative;
    min-height: 100%;
    height: 100%;
    background-color: orange;}

    #header { margin: 0px 0px 15px 0px;
    background-color: #336666;
    height: 100px;
    width: 100%;
    }
    #headerBox { width: 960px ;
    margin: auto;
    }

    #logo {
    margin-top: 20px;
    }
    #headerRight { float: right;
    margin-top: 10px;
    }

    #headerText { font-size: 0.8em;
    color: #fff;
    }
    #headerRight a {text-decoration: none;
    color: #fff;
    font-family: arial, sans-serif;
    font-size: 0.8em;
    }
    #headerRight a:hover { color: rgb(91,234,205);
    }
    #headerRight a:visited { color: #fff;
    }
    form {
    margin-top: 4px;
    }
    input { height: 20px;
    outline: none;}

    button {height: 22px;
    width: 50px;
    }


    #mainnav { margin-bottom: 10px;
    }

    #mainnav li {
    float: left;
    width: 240px;
    height: 25px;
    background-color: #2D3E4E;
    text-align: center;
    line-height: 25px;
    font-size: 1em;
    list-style-type: none;

    }
    #mainnav li a {
    text-decoration: none;
    display: block;
    font-family: sans-serif;
    color: #fff;
    }

    #mainnav li a:hover { background-color: #999;
    }

    #imgCenter { margin-top: 10px;
    margin-bottom: 10px;

    }
    .maincontent { margin: auto;
    width: 960px;
    background-color: red;

    }

    #textLeft {background-color: #fff;
    float: left;
    padding: 8px;
    width: 450px;
    margin-right: 14px;


    }

    #textRight {background-color: #fff;
    float: left;
    padding: 8px;
    width: 450px;
    margin-left: 14px;

    }


    #imgRight {float: right;
    margin: 0 4px 4px 10px;

    }
    #imgLeft {float: right;
    margin: 20px 4px 4px 30px;

    }

    .text {font-size: small;
    font-family: "Times New Roman";
    color: gray;}
    h3 {font-size: medium;
    color: #242491;}

    hr { margin: 8px 3px;
    color: #ccc;
    }

    .footer { position: absolute;
    bottom:0;
    background-color: #336666;
    width: 100%;
    height: 30px;
    font-family: sans-serif;
    color: #fff;
    font-size:0.6em;
    text-align: center;
    line-height: 30px;

    }




    </style>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <div id="headerBox">
    <img id="logo" src="bilder/logo2.png" width="167" height="47" alt="BILD" title="BILD" />

    <div id="headerRight">
    <p id="headerText"><a href="#">Lorem</a> | <a href="#">Ipsum</a> | <a href="#">Kontakt</a></p>

    <form>
    <input type="text" name="text" />
    <button type="button">Suche</button>

    </form>

    </div>
    </div>
    </div> <!--- End #header --->
    <div class="maincontent">
    <div id="mainnav">
    <ul>
    <li><a href="#">START</a></li>
    <li><a href="#">ABFAHRT</a></li>
    <li><a href="#">VERSPÄTUNG</a></li>
    <li><a href="#">S-BAHN</a></li>
    </ul>
    </div>

    <img id="imgCenter" src="bilder/header_960.jpg" width="960" height="314" alt="BILD" title="BILD"/>

    <div id="textLeft">
    <h3>Curabitur</h3>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed magna porta,
    bibendum eros a, tristique nisi. Quisque velit ipsum, tempor fermentum porta sed, porta
    vitae ante. </p>
    <hr>
    <h3>Maecenas</h3>
    <img id="imgLeft" src="bilder/springa_s.jpg" width="80" height="68" alt="BILD" title="BILD"/>
    <p class="text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    Nunc vestibulum egestas dolor, et feugiat felis mattis sit amet. Quisque vitae lorem nec arcu viverra
    dictum. Proin sit amet porta est, quis pharetra turpis. Nulla fermentum tincidunt augue, non rhoncus augue
    aliquet quis. Ut nec fringilla.</p>
    <hr>
    </div>

    <div id="textRight">
    <h3>Quisque velit</h3>
    <img id="imgRight" src="bilder/farligt_s.jpg" width="170" height="109" alt="BILD" title="BILD"/>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed magna porta,
    sökord bibendum eros a, tristique nisi. Quisque velit ipsum, tempor fermentum porta sed, porta
    vitae ante. Vivamus vitae felis interdum, rhoncus libero sed, fermentum dolor. Nunc et ultrices lectus.
    Proin imperdiet leo nibh, eu vehicula orci aliquam eget. Donec in accumsan felis.</p>
    <p class="text">Nunc iaculis suscipit arcu, id auctor elit. Nullam sit amet quam faucibus, ornare metus
    faucibus, fermentum metus. Maecenas metus tortor, ullamcorper at pulvinar eget, volutpat id metus.
    Fusce aliquet nunc sollicitudin quam tempus, viverra faucibus magna egestas. Vestibulum eget ipsum mi.
    </p>
    <hr>
    </div>


    </div><!--End #maincontent-->

    <div class="footer">
    <p id="footerText">&copy; 2013 Lorem Ipsum</p>
    </div>

    </div> <!--End #container -->
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: Problem mit Footer / Container-Boxen

    Ein Link zur Seite wäre deutlich besser als dieser unformatierte Quellcode

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    10.09.2013
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit Footer / Container-Boxen


Ähnliche Themen

  1. Problem mit sticky footer (footer wandert nach oben)
    Von NinaH im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 10.09.2013, 13:22
  2. 2 Div Boxen nebeneinander- FF und IE Problem
    Von Nefftes im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.11.2010, 17:24
  3. Problem mit Footer
    Von micronix im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 01.07.2010, 12:50
  4. div boxen problem
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.09.2007, 23:16
  5. Problem mit boxen
    Von gelöschter User im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 28.07.2007, 15:47

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •