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.
html
css
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.
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 Ü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>
© 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;
}