Hallo zusammen.
ich habe folgendes einfaches Design entworfen. Der "center" Bereich rutscht ziemlich weit nach unten.... Wo ist der Fehler bei der Positionierung?
anbei der Code:
design.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">@import "images/style.css";</style>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" />
</head>
<body>
<div class="content">
<div class="toph"></div>
<div class="logo">
<a href="#"><img src="images/logo.jpg" alt="" width="158" height="165" border="0" /></a>
</div>
<div class="menu">
<div id="sidenav">
<a class="section" href="#1">Startseite</a><span class="hideMe"><br /></span>
<a class="section" href="#3">Kontakt</a><span class="hideMe"><br /></span>
<a class="section" href="#4">Impressum</a><span class="hideMe"><br /></span>
</div>
</div>
<div class="center">
<h2>Überschrift</h2>
<p>Haupttext</p>
</div>
<div class="footer">
<div class="footer_text"><a href="#">Login</a> | <a href="impressum.php">Impressum</a> </div>
</div>
</div>
</body>
</html>
style.css:
Code:
body {
margin:15px 0;
padding:0;
color:#685E43;
line-height: 1.4em;
background : url(bg.gif);
font-family: Arial, Helvetica, sans-serif;
}
.logo {
height: 158px;
width: 165px;
position:relative;
left:39px;
top:-70px;
}
.toph {
background: #3D3E42 url(top.jpg) no-repeat center;
height: 67px;
/* width: 665px; */
margin:0;
padding:0;
}
.content {
color: #a0a0a0;
margin: 0 auto;
padding: 0;
width: 665px;
background: #3D3E42 url(bg-mid.jpg) repeat-y center;
}
.menu {
width: 149px;
position:absolute;
left: 340px;
top: 195px;
color:#A90209;
}
/* Links des Menu */
a.mainlevel:link, a.mainlevel:visited {
color:#A90209;
}
/* Links des Menu */
a.mainlevel:hover {
color:#A90209;
}
.center {
float:left;
width: 396px;
font-size: 95%;
margin: 0px 0 0px 225px !important;
margin: 0px 0 0px 20px;
padding: 0;
background: #eee7d2;
color: #685E43;
}
.footer {
clear:both;
width: 665px;
height: 70px;
color:#888;
font-size:90%;
background: #3D3E42 url(bot.jpg) no-repeat center;
text-align:center;
}
.footer_text {
width: 665px;
color:#FFFFFF;
font-size:90%;
text-align:center;
padding: 26px;
}
A.footer {
COLOR: #FFFFFF;
}
A.footer:link {
COLOR: #FFFFFF;
}
A.footer:visited {
COLOR: #FFFFFF;
}
A.footer:active {
COLOR: #FFFFFF;
}
A.footer:hover {
COLOR: #FFFFFF;
}
/* Überschriften */
.contentheading {
color:#685E43;
}
.componentheading {
color:#685E43;
}
/* Menu */
.hideMe {
DISPLAY: none
}
A.section {
font-size: 13px;
PADDING-RIGHT: 2px;
BORDER-TOP: #eee7d2 1px solid;
DISPLAY: block;
PADDING-LEFT: 6px;
BACKGROUND: #DDD5BE;
PADDING-BOTTOM: 4px;
MARGIN: 0px;
COLOR: #DDD5BE;
PADDING-TOP: 4px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
font-stretch: narrower;
}
A.section:link {
BACKGROUND: #DDD5BE;
COLOR: #A90209;
}
A.section:visited {
COLOR: rgb(255,255,255);
}
A.section:active {
COLOR: rgb(255,255,255);
}
A.section:hover {
BACKGROUND: #A90209;
COLOR: rgb(255,255,255);
}
Ferner gefällt mir noch folgendes nicht: Wenn der Haupttext sehr gering ist oder gar nicht vorhanden.... dann rutscht der "footer" Bereich unter dem "menu" Bereich herunter. Ein Teil des Menus wird dann nicht mehr von dem Design-Rahmen umfasst. Wie kann man festlegen, dass sie die mindest Höhe sich an dem "menu" Befehl bemisst!?
Danke für eure Hilfe...