nicht angemeldet
<ul> in <div>
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
-
Hallo,
Suchst du nach Außenabständen (margin)? Die musst du dann auch für das ul-Element, nicht nur für die li-Elemente definieren. Dann sollte es funktionieren.
Beste Grüße
--
Meine bescheidene Internetpräsenz - Gästebucheinträge erwünscht!
Das beste Freeware-Programm der Welt
Selfcode: ie:( fl:| br:^ va:| ls:[ fo:) rl:( n4:| ss:| de:[ js:| ch:? sh:( mo:) zu:| -
Ich habe mich viel zu schnell um Hilfe bemüht ich habe es gelöst.
Verdammt. Sorry das ich jetzt einen Eintrag im Forum gemacht habe, und 2 Minuten später auf die Lösung komme.ul#navigation{ margin:0; }So funktioniert es.
Ok, trotzdem würde mich intressieren, ob zumindest der Ansatz des testens in die richtige Richtung läuft.LG
kEv*-
Hi,
ul#navigation{
margin:0;
}Füge bitte auch noch ein padding:0 ein, sonst wird die Navi in nicht-IE Browsern wie Firefox eingerückt und ich glaube nicht, dass du das willst! Einen schönen Samstag noch! -- Enjoy the Web! [Firefox 1.5](http://www.mozilla-europe.org/de/products/firefox/)-
Hallo
Füge bitte auch noch ein padding:0 ein, sonst wird die Navi in nicht-IE Browsern wie Firefox eingerückt und ich glaube nicht, dass du das willst!
Einen schönen Samstag noch!
Wer machts denn flasch?
Der IE oder die anderen?Danke das war auch noch ein Problem. Gelöst.
Vielen Dank
LG
--
kEv*
-----
Hi,
Wer machts denn flasch?
Der IE oder die anderen?keiner! Es steht den Browsern frei, welche Eigenschaften sie wie (sinnvoll) vorbelegen.
freundliche Grüße
Ingo
-
-
-
Hallo liebe SELFHTMLler,
Wie bekomme ich es denn hin, das die 4 li tags über 800 pixel Seitenbreite jeweils 200 pixel goß sind, aber ohne das in Angabe des
width:200px;
zu formatieren?
em wäre ja nicht schlecht, nur finde ich keinen Anhaltspunkt.
Im Moment mach ich es mit
padding; 4.13em 0em 0em 4.14em;Nur da habe ich am Ende einen kleinen Spalt. Und genua der muß weg.
Vielen Dank
LG
--
kEv*
-----
Hallo,
Alles sind 100%. 100% / 4 = 25%.
Beste Grüße
--
Meine bescheidene Internetpräsenz - Gästebucheinträge erwünscht!
Das beste Freeware-Programm der Welt
Selfcode: ie:( fl:| br:^ va:| ls:[ fo:) rl:( n4:| ss:| de:[ js:| ch:? sh:( mo:) zu:|
-
-
-
Hallo kEv!
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.
Wenn Deine ul kein margin-top hat, sollte diese auch "direkt unter", ich vermute Du meinst dies mit 100%, dem Header beginnen. Da Du dies bisher nur auf die li anwendest, dürfte das schon des Problems Lösung sein.
Schönen Gruß
Afra