Also, unten stehend der Quellcode und das CSS.
Ich habe es stark reduzieren müssen, da die Website noch nicht freigegeben ist.
Das Menü (div id=nav) hebe ich durch eine farbige faux column vom Inhalt (div=content) ab.
Wie ihr seht habe ich im Link5 einen automatischen Zeilenumbruch drin.
Wenn ihr nun per CSS die #container #nav ul auf eine Breite von 200 Pixel setzt (das ist auch genau die Breite der farbigen faux column), ist zwar der Zeilenumbruch weg, das Menü hat aber weiterhin einen Abstand zur linken Seite und ragt rechts in den Inhalt rein.
Schon mal vielen Dank für eure Hilfe zur Behebung des "Problems"! ;-)
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="PzM.css" rel="stylesheet" type="text/css" />
</head>
<body id="index">
<div id="container">
<div id="header"></div>
<div id="nav">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#" target="_self">Link2</a></li>
<li><a href="#" target="_self">Link3</a></li>
<li><a href="#" target="_self">Link4</a></li>
<li><a href="#" target="_self">Link5, der mit Zeilenumbruch</a></li>
<li><a href="#" target="_self">Link5</a></li>
<li><a href="#" target="_self">Link6</a></li>
</ul>
</div>
<div id="bet">
<p>Bild1</p>
<p>Bild2</p>
<p>Bild3</p>
</div>
<div id="content">
<p class="seitentitel">Überschrift</p>
<p> Text</p>
</div>
<div id="footer">
<div id="imp"></div>
<div id="webad"></div>
</div>
</div>
</body>
</html>
Das CSS:
Code:
@charset "utf-8";
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
background-image: url(../Entwurf%206/Bilder/hg.jpg);
background-repeat: repeat-y;
}
#content {
margin-right: 200px;
margin-left: 200px;
padding: 10px;
}
#header {
text-align: left;
width: 100%;
height: 166px;
}
#bet {
width: 200px;
text-align: center;
padding-bottom: 10px;
float: right;
}
#nav {
float: left;
width: 200px;
}
.seitentitel {
font-size: large;
color: #003366;
font-weight: bold;
}
#nav a:link {
color: #003366;
text-decoration: none;
display: block;
}
#nav a:visited {
text-decoration: none;
display: block;
color: #003366;
}
#nav a:hover {
text-decoration: none;
background-color: #CCCCCC;
display: block;
color: #003366;
}
.seitentitel {
font-size: large;
font-weight: bold;
color: #003366;
}
.texttitel1 {
font-size: medium;
color: #003366;
font-weight: bold;
}
a:link {
color: #003366;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #003366;
}
#container #nav ul {
list-style-type: none;
}
a:hover {
text-decoration: underline;
color: #003366;
}
a:active {
}
#footer {
width: 100%;
clear: both;
height: 56px;
}
#webad {
text-align: right;
vertical-align: middle;
float: right;
padding-top: 10px;
padding-bottom: 10px;
}
#imp {
float: left;
width: 200px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
