Frage stellen
Ich bin blutiger Anfänger und versuche mich gerade zum ersten mal an CSS.
Die Webseite ist ganz schlicht und besteht bis auf Header und Footer nur aus einer Navigation (nav) und einem Inhaltselement (content2).
Ich möchte die Elemente fest auf der Seite platzieren, was auch ohne Inhalt in der Navigation soweit funktioniert. Sobald ich allerdings Text, bzw die Links in die Navigation schreibe verschiebt sich das nav Element um eine Zeile der Schrifthöhe nach unten, dadurch entsteht an der Navigation oben und am content Element unten eine Lücke.
Also wenn ich die Links zwischen dem <!-- PROBLEM --> Kommentar rausnehme ist die Anordnung wie ich sie haben möchte. Mit den Links wie unten sind erwähnte Lücken.
Hat jemand einen Tip für mich?
CSS-Datei
- Code: Alles auswählen
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
#container
{
margin: 1em auto;
width: 1024px;
text-align: left;
background-color: red;
}
#header
{
height: 100px;
background-color: fuchsia;
border-bottom-width:3px;
border-bottom-style:solid;
border-color:white;
}
#leiste
{
height: 16px;
background-color: grey;
border-bottom-width:3px;
border-bottom-style:solid;
border-color:white;
}
#content
{
float: right;
width: 804px;
height: 600px;
background-color: yellow;
border-left-width:3px;
border-left-style:solid;
border-color:white;
}
#content2
{
margin-left: 6px;
margin-top: 6px;
margin-right: 6px;
margin-bottom: 6px;
background-color: blue;
border-top-width:10px;
border-left-width:10px;
border-right-width:10px;
border-bottom-width:10px;
border-style:solid;
border-color:white;
}
#nav
{
margin-left: 16px;
width: 177px;
height: 600px;
background-color: aqua;
border-left-width:4px;
border-left-style:solid;
border-right-width:3px;
border-right-style:solid;
border-color:white;
}
#footer
{
clear: both;
height: 18px;
background-color: lime;
border-top-width:3px;
border-top-style:solid;
border-color:white;
white-space: pre;
}
#nav h1 {
font: 85% arial, hevetica, sans-serif; font-size: 120%;
margin-left: 10px;
}
#nav p {
font: 85% arial, hevetica, sans-serif; font-size: 100%;
margin-left: 10px;
}
#nav a
{
font: 85% arial, hevetica, sans-serif; font-size: 100%;
}
#content2 h1
{
font: 85% arial, hevetica, sans-serif;
font-size: 150%;
margin-left: 10px;
margin-right: 10px;
}
#content2 p { font: 85% arial, hevetica, sans-serif; font-size: 100%; margin-left: 10px; }
#content2 a { font: 85% arial, hevetica, sans-serif; font-size: 100%; }
#footer { font: 85% arial, hevetica, sans-serif; font-size: 80%; text-align: right; }
HTML-Datei
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Test1</title>
<link rel="stylesheet" href="test.css" media="screen">
</head>
<body>
<div id="container"> <!-- /container -->
<div id="header"></div>
<div id="leiste"></div>
<div id="content">
<div id="content2"><h1>Content2 Top 1</h1>
<p>
Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test
</p>
<p>
Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test
</p>
<p>
Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test
</p>
</div>
</div>
<div id="nav">
<!-- PROBLEM -->
<h1>Nav Top 1</h1>
<p><a href="/test/Seite1/">Link 1</a></p>
<p><a href="/test/Seite2/">Link 2</a></p>
<p><a href="/test/Seite3/">Link 3</a></p>
<p><a href="/test/Seite4/">Link 4</a></p>
<h1>Nav Top 2</h1>
<p><a href="/test/Seite5/">Link 5</a></p>
<p><a href="/test/Seite6/">Link 6</a></p>
<p><a href="/test/Seite7/">Link 7</a></p>
<h1>Nav Top 3</h1>
<p><a href="/test/Seite8/">Link 8</a></p>
<p><a href="/test/Seite9/">Link 9</a></p>
<!-- PROBLEM -->
</div>
<div id="footer">Copyright © Test-Firma 2010 </div>
</div> <!-- /container -->
</body>
</html>
