Hallo, ich bins nochmal, der Test Basti
Habe jetzt ein weiteres Problem,
ich möchte gerne eine HP mit 3 Zeilen haben, in etwa so:
Kopfbereich (Logo)
----------------------------------------------------------
Steuerung (per Liste mit CSS, Quelltext später)
----------------------------------------------------------
Inhalt
Aber meine Steuerung wird nicht angezeigt, jedoch verschiebt sich die Liste ein Stück in den Inhalt rein
Quelltexte:
HTML, Page (index.htm):
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>Ein Kessel buntes</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="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body bgcolor="#99FFFF">
<div id="seite">
<div id="kopfbereich">
Kopfbereich - ihr Namen oder so
</div>
<div id="steuerung">
<ul>
<li><a href="index.htm">Startseite</a></li>
<li><a href="index.htm">Test</a></li>
<li><a href="index.htm">Noch ein Test</a></li>
<li><a href="index.htm">Wie jez? Noch n' Test?</a></li>
</ul>
</div>
<div id="inhalt">
hier kommt nun der Inhalt Ihrer Website
</div>
</div>
</body>
</html>
Alles anzeigen
Style (ausgelagerte Datei, style.css)
Code
html, body
<style type="text/css">
body {
font: 100.01% Verdana, Arial, Helvetica, sans-serif;
}
* {
margin:0;
padding:0;
}
#seite {
width: 1000px;
margin: 0 auto;
}
#kopfbereich {
padding: 20px;
margin-top: 50px;
background-color:lightblue;
}
#steuerung {
width: 1000px;
background-color: lightblue;
margin: 0px;
padding: 20px;
text-align:left; /* Textausrichtung */
}
#steuerung ul {
list-style:none; /* keine Aufzählungspunkte */
}
#steuerung li {
float:left; /* Anordnung links */
margin-left:15px; /* Außenabstand oben */
width:90px; /* Breite des Links */
background-color:silver; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px black solid; /* Rahmenfarbe unten */
border-right:1px black solid; /* Rahmenfarbe unten */
margin-top:10px; /* Außenabstand oben */
padding-top:8px; /* Innenabstand oben */
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
}
#inhalt {
clear: both;
padding: 20px;
background-color: lightgreen;
}
</style>
Alles anzeigen
Das ist das Problem im Bilde:
[Blockierte Grafik: http://img21.imageshack.us/img21/6939/testzwp.jpg]
Falls aus irgendwelchen Gründen nicht erkennbar (resize oder so) hier:
http://img21.imageshack.us/img21/6939/testzwp.jpg
Hoffe ihr könnt helfen,
Gruß,
Basti