nicht angemeldet
Geschachtelte DIV's mit display formatieren
Naben,
ich habe geschachtelte div Tags die ich mittels CSS formatieren möchte.
Hier erstmal die Struktur:
<div class="VFvalues">
<div class="VFvalue">
<span class="VFvalueImg"> <img width="16" height="16"> </span>
<span class="VFvalueName"> <a href="">Link A</a> </span>
<div class="VFsubvalues">
<div class="VFsubvalue">
<span class="VFsubvalueImg"> <img width="16" height="16"> </span>
<span class="VFsubvalueName"> <a href="">Link AA1</a> </span>
</div>
<div class="VFsubvalue">
<span class="VFsubvalueImg"> <img width="16" height="16"> </span>
<span class="VFsubvalueName"> <a href="">Link AA2</a> </span>
</div>
</div>
</div>
<div class="VFvalue">
<span class="VFvalueImg"> <img width="16" height="16"> </span>
<span class="VFvalueName"> <a href="">Link B</a> </span>
<div class="VFsubvalues">
<div class="VFsubvalue">
<span class="VFsubvalueImg"> <img width="16" height="16"> </span>
<span class="VFsubvalueName"> <a href="">Link BB1</a> </span>
</div>
<div class="VFsubvalue">
<span class="VFsubvalueImg"> <img width="16" height="16"> </span>
<span class="VFsubvalueName"> <a href="">Link BB2</a> </span>
</div>
</div>
</div>
</div>
Das Ganze sieht dann ja so aus:
Link A
Link AA1
Link AA2
Link B
Link BB1
Link BB2
Ich würde das gerne mit CSS so anpassen, dass es so angezeigt wird:
Link A Link B
Link AA1 Link BB1
Link AA2 Link BB2
also habe ich versucht display:inline auf VFvalue anzuwenden, da ja dann die div Tags als inlineelemente interpretiert werden und nacheinander angeordnet werden. Das funktioniert auch wenn ich mit display:none VFsubvalues "ausblende", wenn nicht Erscheint Link B wieder unter Link A.
Kann mir da Jemand weiterhelfen?
Schon mal vielen Dank...
-
Hi,
ich habe geschachtelte div Tags die ich mittels CSS formatieren möchte.
Zuerst mal hast du *Inhalte* vorliegen, die du mittels moeglichst geeigneter HTML-Elemente auszeichnen moechtest.
In diesem Falle waeren Listen hoechstvermutlich um ein vielfaches geeigneter, als deine Div-Suppe.Also bessere erst mal die Struktur aus, danach ist dann die Formatierung ggf. auch einfacher.
Ich würde das gerne mit CSS so anpassen, dass es so angezeigt wird:
Link A Link B
Link AA1 Link BB1
Link AA2 Link BB2also habe ich versucht display:inline auf VFvalue anzuwenden, da ja dann die div Tags als inlineelemente interpretiert werden und nacheinander angeordnet werden. Das funktioniert auch wenn ich mit display:none VFsubvalues "ausblende", wenn nicht Erscheint Link B wieder unter Link A.
Beschaeftige dich, nach der dringend anzuratenden Korrektur deines HTML-Codes, mit floating.
MfG ChrisB
-
Hi,
also eigentlich handelt es sich um geschachtelte Listen <ul>, wollte das nur ein weniger anschaulicher machen.
Sieht eigentlich so aus:
<ul class="VFvalues">
<li class="VFvalue">
<span class="VFvalueImg"> <img width="16" height="16"> </span>
<span class="VFvalueName"> <a href="">Link A</a> </span>
<ul class="VFsubvalues">
<li class="VFsubvalue">
<span class="VFsubvalueImg"> <img width="16" height="16"> </span>
<span class="VFsubvalueName"> <a href="">Link AA1</a> </span>
</li>
<li class="VFsubvalue">
<span class="VFsubvalueImg"> <img width="16" height="16"> </span>
<span class="VFsubvalueName"> <a href="">Link AA2</a> </span>
</li>
</ul>
</li>
<li class="VFvalue">
<span class="VFvalueImg"> <img width="16" height="16"> </span>
<span class="VFvalueName"> <a href="">Link B</a> </span>
<ul class="VFsubvalues">
<li class="VFsubvalue">
<span class="VFsubvalueImg"> <img width="16" height="16"> </span>
<span class="VFsubvalueName"> <a href="">Link BB1</a> </span>
</li>
<li class="VFsubvalue">
<span class="VFsubvalueImg"> <img width="16" height="16"> </span>
<span class="VFsubvalueName"> <a href="">Link BB2</a> </span>
</li>
</ul>
</li>
</ul>Float will ich eigentlich vermeiden, da das wiederum Nachteile mitsich bringt.
Muss doch auch mit display:inline möglich sein oder?-
Kuckuck,
wie wäre es denn mit
<ul> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li> <ul> <li>1.1</li> <li>2.2</li> <li>3.3</li> <li>4.4</li> </ul> </li> </ul>Das erste
<ul> <li>aufdisplay:block;und das verschachtelte<ul> <li>aufdisplay:inline;.Dürfte an sich kein Problem darstellen.
Grüße aus H im R an Urst,
Engin-
Erst einmal vielen Dank für die Lösungsvorschläge.
Ich kann das HTML nur sehr eingeschränkt ändern, da dann andere bestehende CSS Styles wiederum nicht funktionieren, die auch nich ändern kann / darf.
Die einzigste Möglichkeit besteht darin, das Layout über CSS zu realisieren.
Urst
-
Kuckuck,
Ich kann das HTML nur sehr eingeschränkt ändern, da dann andere bestehende CSS Styles wiederum nicht funktionieren, die auch nich ändern kann / darf.
Das verstehe ich nicht so ganz, wenn du ein wenig ändern kannst, dann reicht das doch auch.
Die einzigste Möglichkeit besteht darin, das Layout über CSS zu realisieren.
Ja,
Das erste
<ul> <li>aufdisplay:block;und das verschachtelte<ul> <li>aufdisplay:inline;.Grüße aus H im R an Urst,
Engin-
Hi,
dazu müsste ich ja die Listenstruktur ändern und das kann ich leider nich.
Also, kann man mit der bestehenden Listenstruktur das erreichen?
Urst
-
Hi,
dazu müsste ich ja die Listenstruktur ändern und das kann ich leider nich.
Also, kann man mit der bestehenden Listenstruktur das erreichen?
ja, kann man. Und ChrisB hat dir ganz am Anfang auch schon den entscheidenden Tipp gegeben: Float
Du musst einfach deine ul.VFvalues left-floaten und du solltest dein gewünschtes Resultat erhalten.
Float will ich eigentlich vermeiden, da das wiederum Nachteile mitsich bringt.
Und welche sind das deiner Meinung nach im Allgemeinen und im Vergleich zu einer Variante mit display:inline im Speziellen?
Muss doch auch mit display:inline möglich sein oder?
Ja, wenn du nicht immer wieder extra betonen würdest:
dazu müsste ich ja die Listenstruktur ändern und das kann ich leider nich.
Gruß Gunther
-
-
-
-
-
-
