• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV Container erstreckt sich über andere DIV Container

H

Hansii

Mitglied
Hallo.

Ich habe folgendes Problem: Ich habe einen DIV Container "Footer". Der soll ganz unten eine Leiste bilden (Höhe: 20px; Breite: 1000px). Dieser Container geht aber über andere Container ("Content" und "Box").

Wo liegt der Fehler ? Ich vermute, dass ich ein DIV irgendwo falsch geschlossenhabe, aber bin mir nicht sicher und einen Fehler sehe ich auch nicht ?

Hier der Link : Bundesliga Saison 2012/2013



HTML :

HTML: 
<html>
<head>
 <title>Bundesliga Saison 2012/2013</title>
 <link rel="stylesheet" type="text/css" href="xxx.css" />
</head>
<body>
 <div id="wrapper">
  <header>
   <div id="header">
    <img style="float:left;" src="fussball.png"></img>
    <img style="float:right;" src="fussball.png"></img>
    <h1 style="font-weight: bold; font-size: 2.8em;">Bundesliga Saison 2012/2013</h1>
   </div>
  </header>
  <navi>
  <div id='navi'>
  <ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>1. Bundesliga</span></a>
    <ul>
     <li><a href='#'><span>Spieltage</span></a></li>
     <li><a href='#'><span>Tabelle</span></a></li>
     <li><a href='#'><span>Sieger</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>2. Bundesliga</span></a>
    <ul>
     <li><a href='#'><span>Spieltage</span></a></li>
     <li><a href='#'><span>Tabelle</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>DFB-Pokal</span></a>
    <ul>
     <li><a href='#'><span>1. Vorrunde</span></a></li>
     <li><a href='#'><span>2. Vorrunde</span></a></li>
     <li><a href='#'><span>Achtelfinale</span></a></li>
     <li><a href='#'><span>Viertelfinale</span></a></li>
     <li><a href='#'><span>Halbfinale</span></a></li>
     <li><a href='#'><span>Finale</span></a></li>
     <li><a href='#'><span>Pokalsieger</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Champions League</span></a>
    <ul>
     <li><a href='#'><span>Gruppenphase</span></a></li>
     <li><a href='#'><span>Achtelfinale</span></a></li>
     <li><a href='#'><span>Viertelfinale</span></a></li>
     <li><a href='#'><span>Halbfinale</span></a></li>
     <li><a href='#'><span>Finale</span></a></li>
     <li><a href='#'><span>Sieger</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Europa League</span></a>
    <ul>
     <li><a href='#'><span>Gruppenphase</span></a></li>
     <li><a href='#'><span>Sechzehntelfinale</span></a></li>
     <li><a href='#'><span>Achtelfinale</span></a></li>
     <li><a href='#'><span>Viertelfinale</span></a></li>
     <li><a href='#'><span>Halbfinale</span></a></li>
     <li><a href='#'><span>Finale</span></a></li>
     <li><a href='#'><span>Sieger</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Tippspiel</span></a>
    <ul>
     <li><a href='#'><span>Login</span></a></li>
     <li><a href='#'><span>Registrieren</span></a></li>
     <li><a href='#'><span>Rangliste</span></a></li>
     <li><a href='#'><span>Aktuelles</span></a></li>
    </ul>
   </li>
   <li><a href='#'><span>G&auml;stebuch</span></a></li>
   <li><a href='#'><span>Forum</span></a></li>
  </ul>
  </div>
  </navi>
  <article>
  <div id="content">
   <h1>Content</h1>
  </div>
  <div id="box">
   <h1>Box</h1>
  </div>
  </article>
  <div id="footer">
   AGB Datenschutz Nutzungsbedingungen Kontakt Impressum Newsletter
  </div>
 </div>
</body>
</html>



CSS :

Code: 
html, body{
 width: 100%;
 height: 100%;
 font-family: Arial;
 font-size: 1em;
 font-weight: normal;
 background: #ffffff;
}

#wrapper{
 width: 1050px;
 margin: 0 auto;
}

/**********Hier beginnt der CSS-Code für den Header**********/
#header{
 height: 70px;
 background: #00CC00;
 padding: 10px 10px;
 text-align: center;
}

#header h1{
 font-weight: normal;
 font-size: 2.2em;
 color: #efefef;
 margin-top: 15px;
}

#header p{
 margin-left: 5px 0 0 30px;
 color: #dddddd;
}

/**********Hier beginnt der CSS-Code für die Navigation**********/
#navi{
 width:1050px;
 height:48px;
 display:block;
 padding:0;
 margin:20px auto;
 border:1px solid #279409;
 border-radius:5px;
}


#navi > ul {
 list-style:inside none;
 padding:0;
 margin:0;
}


#navi > ul > li {
 list-style:inside none;
 padding:0;
 margin:0;
 float:left;
 display:block;
 position:relative;
}


#navi > ul > li > a{
 outline:none;
 display:block;
 position:relative;
 padding:12px 20px;
 font:bold 13px/100% Arial, Helvetica, sans-serif;
 text-align:center;
 text-decoration:none;
 text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}


#navi > ul > li:first-child > a{
 border-radius:5px 0 0 5px;
}


#navi > ul > li > a:after{
 content:'';
 position:absolute;
 border-right:1px solid;
 top:-1px;
 bottom:-1px;
 right:-2px;
 z-index:99;
}


#navi ul li.has-sub:hover > a:after{
 top:0;
 bottom:0;
}


#navi > ul > li.has-sub > a:before{
 content:'';
 position:absolute;
 top:18px;
 right:6px;
 border:5px solid transparent;
 border-top:5px solid #ffffff;
}


#navi > ul > li.has-sub:hover > a:before{
 top:19px;
}


#navi ul li.has-sub:hover > a{
 background:#3f3f3f;
 border-color:#3f3f3f;
 padding-bottom:13px;
 padding-top:13px;
 top:-1px;
 z-index:999;
}


#navi ul li.has-sub:hover > ul, #navi ul li.has-sub:hover > div{
 display:block;
}


#navi ul li.has-sub > a:hover{
 background:#3f3f3f;
 border-color:#3f3f3f;
}


#navi ul li > ul, #navi ul li > div{
 display:none;
 width:auto;
 position:absolute;
 top:38px;
 padding:10px 0;
 background:#3f3f3f;
 border-radius:0 0 5px 5px;
 z-index:999;
}


#navi ul li > ul{
 width:200px;
}


#navi ul li > ul li{
 display:block;
 list-style:inside none;
 padding:0;
 margin:0;
 position:relative;
}


#navi ul li > ul li a{
 outline:none;
 display:block;
 position:relative;
 margin:0;
 padding:8px 20px;
 font:10pt Arial, Helvetica, sans-serif;
 color:#fff;
 text-decoration:none;
 text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}




#navi, #navi > ul > li > ul > li a:hover{
 background:#279409;
 background:-moz-linear-gradient(top, #279409 0%, #279409 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#279409), color-stop(100%,#279409));
 background:-webkit-linear-gradient(top, #279409 0%,#279409 100%);
 background:-o-linear-gradient(top, #279409 0%,#279409 100%);
 background:-ms-linear-gradient(top, #279409 0%,#279409 100%);
 background:linear-gradient(top, #279409 0%,#279409 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#279409', endColorstr='#279409',GradientType=0);
}


#navi{
 border-color:#279409;
}


#navi > ul > li > a{
 border-right:1px solid #279409;
 color:#fff;
}


#navi > ul > li > a:after{
 border-color:#279409;
}


#navi > ul > li > a:hover{
 background:#3f3f3f;
}

/***SIDEBAR***/
#aside{
 width: 200px;
 padding: 15px 10px 15px 15px;
 margin: 0px 0 0px 0px;
 float: right;
 clear: left;
 border-left: 1px solid #FF4000;
 border-right: 1px solid #FF4000;
 border-top: 1px solid #FF4000;
 border-bottom:1px solid #FF4000;
}

#content{
 width: 800px;
 height: 1000px;
 border-left: 1px solid;
 border-right: 1px solid;
 border-top: 1px solid;
 border-bottom: 1px solid;
 float: left;
}

#box{
 width: 246px;
 height: 1000px;
 border-left: 1px solid;
 border-right: 1px solid;
 border-top: 1px solid;
 border-bottom: 1px solid;
 float: right;
}

/***FOOTER***/
#footer{
 background: #FFB2B2;
}

Danke für eure Hilfe
 
Hallo

Wo liegt der Fehler ?
Zum Vergrößern anklicken....

Du willst eine HMTL/CSS-Seite ohne das notwendige Hintergrundwissen erstellen.

Ich denke auch kaum das dir auf Dauer groß weitergeholfen wird, wenn jede Erweiterung deiner Seite Probleme bereitet. Dann erstellen wir im Endeffekt ja deine Seite. Wenn man ohne HTML/CSS-Wissen eine komplette Website haben möchte muss man dafür in der Regel zahlen.

Aktuell nutzt du in einem HTML4-Doctype Elemente von HMTL5. Und die würden teilweise selbst in HTML5 an falscher Stelle stehen.

Gruss

MrMurphy
 
Hey,
Gehört zwar nicht wirklich zur Frage abet was sollen diese <header></header>, <navi></navi> und <article></article> im code?
Falls man das wirklich neuerdings so machen kann hätte ich da gerne nen Link zu.

Und mir ist aufgefallen, dass du im CSS öfters sowas stehen hast:

border-left: 1px solid #FF4000;
border-right: 1px solid #FF4000; border-top: 1px solid #FF4000; border-bottom: 1px solid #FF4000;

Du kannst, wenn alle Seiten gleich sind, auch einfach das hier schreiben:

border: 1px solid #FF4000;

Dann sparst du immerhin ein paar Zeilen code und es ist übersichtlicher.
 
Selfhtml sollte dir ja bekannt sein, ansonsten könntest du dir auf youtube auch tutorials anschauen wo nach und nach eine website erstellt wird.
Allerdings gibt es bei Youtube auch viel Müll bzw. veraltete Sachen, weswegen du das nur als Hilfe nehmen solltest. Probier einfach mal ein paar davon aus, mach die Schritt für Schritt nach und dann solltest du zumindest schonmal den Grundaufbau verstehen.

Danach kannst du dann quasi nochmal mit deinem Projekt anfangen und wenn du meinst du bist mit einem Teil fertig kannst du den Code mit dem W3c Validator prüfen. Der zeigt dir schonmal offensichtliche Fehler an und schreibt auch dazu was eventuell falsch ist.

Und wenn du dann noch Probleme hast und nicht weiter weißt, kannst du ja ruhig fragen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben