CSS: Liste in Div? [Archiv]

BoneDaddy

2007-02-27, 00:56:07

Hi,
ich möchte eine Liste in ein Div packen. Allerdings scheitere ich kläglich an der Umsetzung. Der Div ist im Firefox immer nur 1px hoch. Wie müsste ich die Klassenattribute setzen, damit der DIV die Liste beinhaltet und ich so z.b. einen Background setzen könnte?

<div class="categories">
<ul id="catlist">
<div class="box_cat">
<div class="box_headline">
<li><h2><a href="index.php?c=1">Computer</a></h2></li>
</div>
<div class="box_links">
<ul>
<li><a href="index.php?c=11">Hardware</a></li>
<li><a href="index.php?c=12">Software</a></li>
</ul>
</div>
</div>
</div>

Danke für eure Hilfe!

Gruß
Roman

Gast

2007-02-27, 04:06:52

bist du dir sicher, dass du alle html tags (insb. div) benötigst?
du könntest alternativ die li-tags entsprechend formatieren.
background-color wird angeblich von allen elementen unterstützt.

ausserdem ist die schachtelung nicht einwandfrei. </ul> fehlt.

BoneDaddy

2007-02-27, 15:49:57

der div "categories" umschließt alle uls, es kommen noch einige dazu.

die anderen beiden divs dienen später dazu, denen ul's einen hintergrund zu geben.

also, wie kriege ich die listen da rein? ;-)

Gast

2007-02-27, 16:40:33

ul kann kein div als Kindelement haben.
Ohne genau zu wissen was du vorhast, schreib ich pauschal: Die div-Suppe ist überflüssig, allenfalls das äußerste div-Elemente kann notwendig sein. Ein Hintergrundbild oder Größenangaben kannst du der Liste oder den Listenelementen auch direkt verpassen.

Tommes

2007-02-27, 20:05:22

Du kannst auch ul Elemente verschachteln. Der Gast über mir hat was die div Elemente anbelangt auch sehr recht.

darph

2007-02-27, 20:27:50

der div "categories" umschließt alle uls, es kommen noch einige dazu.

die anderen beiden divs dienen später dazu, denen ul's einen hintergrund zu geben.

also, wie kriege ich die listen da rein? ;-)
Ehm... mit geeigneten CSS-Selektoren brauchst du kein einziges Div:

<html>
<head>
<style type="text/css">
body {
background-color: magenta;
}

h1 + ul {
width: 200px;
min-height: 500px;
border: 2px solid red;
background-image: url("bg.png");
}

li > ul {
background-color: green;
}
</style>
</head>
<body>
<h1>Zeugs</h1>
<ul>
<li>
<h2>Computer</h2>
<ul>
<li>Hardware</li>
<li>Software</li>
</ul>
</li>
<li>
<h2>Spiel & Spaß</h2>
<ul>
<li>Sex</li>
<li>Drugs</li>
<li>Rock</li>
<li>Roll</li>
</ul>
</li>
</ul>
</body>
</html>

DanMan

2007-02-28, 22:03:24

Ehm... mit geeigneten CSS-Selektoren brauchst du kein einziges Div.
Musst dann aber auch dazu sagen, dass der IE6 mit den + und < Selektoren nix anfangen kann.

Gast

2007-02-28, 22:18:38

wen interessiert schon der ie6?

DanMan

2007-02-28, 22:40:19

wen interessiert schon der ie6?
Über 50% aller Internetsurfer.