Probleme mit HTML-Gerüst

sunflash

Aktives Mitglied
Thread Starter
Dabei seit
16.06.2009
Beiträge
358
Reaktionspunkte
12
Hallo allerseits,

ich habe mich mal wieder an HTML herangewagt. Komme aber irgendwie nicht weiter. Vielleicht hat einer einen Tipp. Habe ein HTML-Grundgerüst fertig. Allerdings ist dort eine sichtbare Lücke. Kann mir einer sagen, was ich vergessen habe?

IM Bild habe ich es rot eingerahmt.

Bildschirmfoto 2012-10-22 um 23.11.52.png

html
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML Erste Seite</title>
<link href="style2.css" rel="stylesheet">
<style type="text/css">
.schrift {
	color: #FFF;
}
</style>
</head>
 
<body>
<div class="container">
	<header>
   <h1>Meine Seite</h1>
   <nav>
   <ul>
   <li><a href="">Home</a></li>
   <li><a href="">About</a></li>
   <li><a href="">Portolio</a></li>
   <li><a href="">Impressum</a></li>
   </ul>
   </nav>
  </header>
   <div style="overflow:hidden;">
  <section>
   <article>
    <h2>Meine &Uuml;berschrift</h2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</article>
  </section>
   <aside>
   <h2>Meine Sidebar</h2>
   Hier gibt es klitzekleine Infos, die den Leser informieren sollen.</aside>
  <div style="height: 20px; clear:both;"></div>
  </div> 
  <footer>
  &copy; Meine-Seite.de
  	</footer>
 
 </div>
</body>
</html>

css
Code:
/* *{ margin: 0; padding: 0;} */ 
 
header, nav, section, article, aside, footer {
 
display: block;
 
}

container {
 
margin: 0px;
width: 800px;
padding: 15px 20px;
height: 1%;
 
}

header {
background-color: #CF0;
background-color: #3E94D1;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

header h1{
color: white;
padding: 15px 20px;
text-transform: uppercase;
}

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
height:100%;
}

nav {
padding: 0px 15px;
 
}

nav ul{
	
list-style: none;  /*keine Listenpunkte*/
font-size: 16px;
text-transform: uppercase;

}

nav ul li{ /* Navileiste nebeneinander */
 
display: inline;
margin: 0;
padding: 0;
 
}

nav ul li a{ Navileiste Hintergrund - nicht unterstrichen 
 
padding: 0 6px; 
background-color: #03406A;
color: #09F;
display: inline;
text-decoration: none;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
 
}

nav ul li.active a,
nav ul li a:hover
{
 
color: #fff;
} 

section {
 
width: 470px;
float: left;
border-right: solid 1px #CCC;
border-left: solid 1px #CCC;
padding-bottom:10000px; /* keine Zwischenräume */
margin-bottom:-10000px;
}

article {
 
    padding: 15px 15px 5px 20px;
}
 
article h2 {
 
padding-top: 10px;
padding-bottom: 20px;
 
}

aside {
 
width: 297px;
border-right: solid 1px #CCC;
float: left;
padding: 15px 15px 15px 15px;
padding-bottom:10000px;
margin-bottom:-10000px;
 
}

aside h2 {
 
padding-top: 10px;
padding-bottom: 20px;
 
}

footer {
 
clear: both;
text-align: center;
padding: 7px 0;
color: white;
background-color: #24577B;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
height: 100px;
 
}
 
Mach aus
Code:
nav ul{
    
list-style: none;  /*keine Listenpunkte*/
font-size: 16px;
text-transform: uppercase;

}

mal folgendes

Code:
nav ul{
    
list-style: none;  /*keine Listenpunkte*/
font-size: 16px;
text-transform: uppercase;
margin-bottom: 0px;
}


Sicherlich gibt es saubere Lösungen, aber es funktioniert ;)
 
Du solltest bei margin und padding immer px, em usw. komplett für oben, rechts, unten, links angeben. Und auch die Bezeichnung nicht vergessen, also px, em...
 
Danke für Eure Antworten. War mal n Anfängerproblemchen. Ich hing gestern wirklich lange daran um den Fehler zu finden.
 
Zurück
Oben Unten