Listen unterschiedlich in einem Bereich formatieren?

[pit]

Hallo,

ich habe hier eine Webseite auf der zwei Listen sind.Beide Listen befinden sich in "einem" DIV-Bereich
Die erste Liste soll nur eine ganz normale Aufzahlung untereinander seinund wird im externen Stylesheet über .main ul, .main li formatiert. Die Liste funktioniert auch so wie ich es will!

Obere Liste:
Code html-Dokument
<div class="main" style="....
<ul>....
<li>...</li>
</ul>

Stylesheet:
.main ul
{
list-style-image: url(grafik/quadrat_kl.gif);
margin: 12px 10px 10px 25px
}

.main li
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 10px;
color: #CCCCCC;
margin-bottom: 9px;
margin-left: 0px
}

Jetzt soll aber nochmal ein Liste in diesem Div-Bereich (unter der oberen Liste) mit einer anderen Formatierung eingefügt werden (siehe unten). Die Blider der Liste sollen nebeneinander angeordnet werden. Kann man überhaut zwei Listen in einem DIV-Bereich unterschiedlich über ein externes Stylesheet formatieren? Wie schaut das dann aus? Oder soll ich besser einen zweiten DIV-Bereich darunter erstellen.
Oder soll ich direkt im HTML.Dokument die Tags formatieren - wie schaut das dann aus?
Ich habe mal gelesen, man soll nicht so viele DIV-Verschachtelungen machen. Was ist da besser?
Die obere Liste würde ich gerne im externen Stylesheet lassen, da diese Formatierung auf mehreren
Seiten vorkommt. Die zweite Liste kommt nur in einer Seite mit der ersten Liste vor. Ich hoffe Ihr kennt euch noch aus!

Untere Liste !!!!einzeln!!!!
Code html-Dokument:
<ul>
<li>Bild 1<br>
<img src="grafik/bild1.gif" width="125" height="100" alt=""><br>
<span>Noe Bau</span></li>

<li>Bild 2<br>
<img src="grafik/bild2.gif" width="125" height="100" alt=""><br>
<span>Ferienhaus Danowski</span></li>
</ul>

Stylesheet-Eintrag !!!!einzeln!!!!
ul
{
margin:0;
padding: 10px 0px 0px 0px;
font-size: 12px;
}

li
{
float:left;
l ist-style:none;
width: 10px;
padding:5px;
margin: 5px;
}

li span{font-size:10px;}



Gruß,
Peter

 

[dkdenz]

Du kannst doch den beiden ul's verschiedenen Klassen oder id's geben.
<ul class="main"></ul>
<ul class="sub"></ul>
Und dann ganz einfach in Deinem StyleSheet formatieren.

 

[pit]

Hi,

irgendwie blicke ich nicht mehr durch Grrr.

Es wird bei mit immer noch teilweise die obere Listenformatierung verwendet.
Z. B. ändere ich das margin left in der oberen Liste, so hat das auch in der unteren eine Auswirkung!

Hier ist mein Beispiel als Datei (Test.zip) Das ist so sicherlich einfacher!

Ich würde gerne die untere Liste anders formatieren:
Abstand Bild 1 zum linken Rand, zur Überschrift "Beispiel", zum Titel unter dem Bild, ....
Nach den Bildern soll der Text auch wie ganz oben normal weitergehen. Der ist jetzt neben den Bildern.
Wieso? Hat das was mit dem "float" zu tun?

Der Div-Bereich (Höhe 295px) muss aber so bleiben, weil später natürlich mehr Text kommt und der Berecih nicht größer werden soll. Es erscheinen dann Scrollbalken,... Das Beispiel ist stark beschnitten, damit
es nicht noch unübersichtlicher wird.

Gruß,
Peter