kEv: <ul> in <div>

Beitrag lesen

SELF-Forum

<ul> in <div>

kEv
– Informationen zu den Bewertungsregeln

Guten Morgen liebe SELFHTMLer,

ich habe folgendes Problem. Ich bin dabei ein kleines Testlayout zu erstellen, um mich in das CSS einzuarbeiten.
Im Moment habe ich einen header <div>, versehen mit einer Hintergrundgrafik die 170px hoch ist.
Darunter soll eine Navigationsliste. Derzeit realisiert mit

  
<ul>  
  <li></li>  
  <li></li>  
  .....

Ich möchte das diese Navigationsleiste genau unter dem Header anfängt.
Soll ich diese nun in ein <div> legen oder kann ich mittels CSS auch die ul so positionieren, das sie 100% an den header anschließt?

Ziel soll es sein, das die Liste bei 800px Seitenbreite genau 200px breit sind. Dazu will ich diese aber auch direkt am Header beginnen lassen.

Hier mal zum Verständniss:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
        "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title><?php echo $seitentitel; ?></title>  
<style type="text/css">  
<!--  
body{  
  background-color:#FFFFFF;  
  font:"Courier New", Courier, monospace;  
  font-size:100.01%;  
  text-align:center;  
  }  
  
#container{  
  margin:0 auto;  
  text-align:left;  
  border:1px solid #000000;  
  width:800px;  
  }  
  
#header{  
  background-image:url(images/banner.gif);  
  background-repeat:no-repeat;  
  background-position:left;  
  border:1px solid red;  
  height:170px;  
  }  
  
ul#navigation li{  
  margin-top:0px;  
  list-style:none;  
  display:inline;  
  border:1px solid black;  
  }  
  
ul#navigation li:hover{  
  background-color:#33FFCC;  
  }  
  
-->  
</style>  
</head>  
<body>  
  
<div id="container">  
<div id="header">meine ersten CSS Versuche, stehen mal im Header Teil</div>  
<ul id="navigation">  
  <li><a href="#" target="_self">LINK 1</a></li>  
  <li><a href="#" target="_self">LINK 2</a></li>  
  <li><a href="#" target="_self">LINK 3</a></li>  
  <li><a href="#" target="_self">LINK 4</a></li>  
</ul>  
<div id="content">  
  <h1>Content als Div</h1>  
  <h2>Ratsam?</h2>  
  <p>Mein kleiner Inhalt.<br>  
  Bla bla bla</p>  
</div>  
<p id="menu"></p>  
<p id="footer">hier ist ein Copyright vom mir drin. Im Footer</p>  
</div>  
</body>  
</html>

Vielen Danke für eure Hilfe
LG
kEv

Beitrag melden
–
Informationen zu den Bewertungsregeln