Ich möchte das des Layout überall verfügbar is:
Das Content Div sitzt nicht rechts von der steuerung, das sollte gerne so sein. Auch mit float: right oder anderen Breitenangaben erziele ich nicht den gewünschten Effekt
HTML
* {margin: 0; padding: 0;}
body {
color: #fff;
background: #627f7d;
font-size: 12px;
font-family: arial, sans-serif, verdana;
}
div#head {
height: 150px;
background: url(img/head.jpg) no-repeat;
}
#head h1 {
font-family: calibri;
color: #c0c0c0;
text-align: right;
margin: 30px 30px 0 0;
}
#head h2 {
font-family: arial;
color: #c0c0c0;
text-align: right;
text-decoration: underline;
margin: 30px 30px 0 0;
}
ul#steuerung {
width: 100px;
float: left;
margin: 50px 0 0 5%;
padding: 5px 0;
line-height: 28px;
list-style-type: none;
}
ul#steuerung li a {
width: 100%;
color: #c0c0c0;
background: #000;
font-weight: bold;
text-decoration: none;
display: block;
padding: 5px;
}
ul#steuerung li a:hover {
border-left: 20px solid #000;
color: #000;
background: #387b74;
text-decoration: underline;
}
div#content {
width: 20%;
background: #000;
float: left;
margin: 4em .8em 0 4em;
padding: 20px;
}
ul#footer {
width: 100%;
height: 30px;
color: #000;
text-align: center;
clear: both;
margin: 35px 0 0 0;
list-style-type: none;
line-height: 20px;
}
ul#footer li {
display: inline;
}
ul#footer li a {
color: #000;
padding: 3px;
text-decoration: underline;
border-right: 1px dotted #000;
}
ul#footer li a:hover {
text-decoration: none;
}
ul#footer li a.noborder {
border: none;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Startseite - http://www.domain.info - Kurzhalten?</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<link href="css.css" type="text/css" rel="stylesheet" />
<link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
<div id="head">
<h1>Seitenname</h1>
<h2>Kurze Überschrift</h2>
</div>
<ul id="steuerung">
<li><a href="#index.php">Startseite</a></li>
<li><a href="#">Testseite1</a></li>
</ul>
<div id="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<ul id="footer">
<li><?php echo date('Y'); ?>©Webseitenname</li>
<li><a href="#">Informationen</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</body>
</html>
