nicht angemeldet
UL nebeneinander
0 
Gunnar Bittersmann
0 0 0
UL nebeneinander
Hallo ich weis so ähnliche Threads gabs schonmal aber ich habe lange rumprobier und bekomme es einfach nicht genau so hin wie ich will.
Also bitte schauts euch mal an.
Meine Liste sieht so aus:
<ul id="presets">
<li class="headline">Presets</li>
<ul class="presetsleft">
<li>Preset1</li>
<li>Preset2</li>
<li>Preset3</li>
<li>Preset4</li>
<li>Preset5</li>
</ul>
<ul class="presetsright">
<li>Preset1</li>
<li>Preset2</li>
<li>Preset3</li>
<li>Preset4</li>
<li>Preset5</li>
</ul>
</ul>
Mein style sieht so aus:~~~css
ul#presets {
position: absolute;
}
ul#presets li.headline {
font-size:16px;
list-style: none;
width:300px;
background-color:#800080;
}
ul#presets ul.presetsleft {
background-color:#ff8000;
list-style: none;
float: left;
width: 150px;
}
ul#presets ul.presetsright {
background-color:#80ff00;
list-style: none;
width: 150px;
margin-left: 150px;
}
es funktioniert auch so mehr oder weniger das problem ist nur, das die 2 "spalten" nicht gleich breit sind
danke schon mal für die hilfe
grüße xasz
-
@@xasz:
nuqneH
Hallo ich weis so ähnliche Threads gabs schonmal
Ja, das wurde schon oft erwähnt, dass
<ul id="presets"><li class="headline">Presets</li> <ul class="presetsleft">nicht richtig ist. 'ul' darf nur 'li'-Kinder haben, nicht aber 'ul'. Korrigiere dein Markup, vorher wäre jeder Gedanke an die gewünschte Darstellung Zeitverschwendung. Qapla' -- Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
danke dann hab ich es jetzt geupdated:
html:<li class="headline">Presets</li> <li class="presetsleft">Preset1</li> <li class="presetsleft">Preset2</li> <li class="presetsleft">Preset3</li> <li class="presetsleft">Preset4</li> <li class="presetsleft">Preset5</li> <li class="presetsright">Preset1</li> <li class="presetsright">Preset2</li> <li class="presetsright">Preset3</li> <li class="presetsright">Preset4</li> <li class="presetsright">Preset5</li> </ul>ul#presets { position: absolute; } ul#presets li.headline { font-size:16px; list-style: none; width:300px; background-color:#800080; } ul#presets li.presetsleft { background-color:#ff8000; list-style: none; float: left; width: 150; } ul#presets li.presetsright { background-color:#80ff00; list-style: none; margin-left: 150; }funktioniern tuts leider aber noch net
-
Hi,
funktioniern tuts leider aber noch net
Bitte beschreibe dein Problem so, dass es für uns nachvollziehbar wird.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak. -
ul#presets {
position: absolute;}
ul#presets li.headline {
font-size:16px;
list-style: none;
width:300px;
background-color:#800080;
}
ul#presets li.presetsleft {
background-color:#ff8000;
list-style: none;
float: left;
width: 150;fällt was auf?
}
ul#presets li.presetsright {
background-color:#80ff00;
list-style: none;
margin-left: 150;fällt was auf?
}
> funktioniern tuts leider aber noch net mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o Der Valigator leibt diese Fische
-
-
-
also danke schon mal für eure antwort, ich hab jetzt einiges gebastelt und hab ein fast perfektes ergebnis bekommen.
html:<ul id="presets"> <li class="headline">Presets</li> <li class="presetsleft">Preset1</li> <li class="presetsleft">Preset2</li> <li class="presetsleft">Preset3</li> <li class="presetsleft">Preset4</li> <li class="presetsleft">Preset5</li> <li class="presetsright">Preset1</li> <li class="presetsright">Preset2</li> <li class="presetsright">Preset3</li> <li class="presetsright">Preset4</li> <li class="presetsright">Preset5</li> </ul>und css:
ul#presets { position: absolute; } ul#presets li.headline { font-size:16px; list-style: none; width:300px; background-color:#800080; } ul#presets li.presetsleft { background-color:#ff8000; list-style: none; width:150px; } ul#presets li.presetsright { background-color:#80ff00; list-style: none; margin-left:150px; }momentan sieht es so aus, hoffe die erklärung haut hin: "Presets" ist oben ein lila balken wie eine tabellenüberschrift.
Presets eins 1-5 in orange wird nur auf der linken hälfte gangezeigt, und preset 1-5 grün auf der rechten, soweit so gut, allerdings sind die "listen" nicht nebeneinander sondern schräg untereinander.Pesets Preset1 Preset2 Preset3 Preset4 Preset5 Preset1 Preset2 Preset3 Preset4 Preset5aussehen sollte es aber so:
Pesets Preset1 Preset1 Preset2 Preset2 Preset3 Preset3 Preset4 Preset4 Preset5 Preset5-
Hi
Pesets
Preset1
Preset2
Preset3
Preset4
Preset5
Preset1
Preset2
Preset3
Preset4
Preset5> aussehen sollte es aber so: > ~~~html Pesets > Preset1 Preset1 > Preset2 Preset2 > Preset3 Preset3 > Preset4 Preset4 > Preset5 Preset5 >Dann mach doch zwei Listen draus - eine für links und eine für rechts. Dann im CSS noch display: inline; angeben, da LI ein block-element ist und Deine gewünschte Darstellung sollte kommen.
Gruß
-
@@xasz:
nuqneH
und hab ein fast perfektes ergebnis bekommen.
Dein Markup ist weit davon entfernt, perfekt zu sein.
<ul id="presets"><li class="headline">Presets</li>Das ist also eine Überschrift für die Liste, kein Listitem, hat also in der Liste nichts zu suchen. Die Überschrift sollte als 'h#'-Element ausgezeichnet sein, danach beginnt die Liste, wie AirMax schon sagte. > Pesets > Preset1 > Preset2 > Preset3 > Preset4 > Preset5 > Preset1 > Preset2 > Preset3 > Preset4 > Preset5 Warum erwartest du, wenn du lediglich 'margin-left' für 'li[@class="presetsright"]' vergibst, dass das zweite "Preset1" wieder oben neben dem ersten steht? Du möchtest eine [mehrspaltige Liste](http://forum.de.selfhtml.org/archiv/2009/10/t191245/#m1275378). Oder zwei Listen, wie AirMax schon sagte. Qapla' -- Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
Hallo ich weis so ähnliche Threads gabs schonmal aber ich habe lange rumprobier und bekomme es einfach nicht genau so hin wie ich will.
Was willst Du genau? Unter anderem, wo/wie sollen die li dargestellt werden?
*jetzt erstmal essen geht*
-
Das mit den listen mit inline klingt ziemlich gut,
allerdings hab ich jetzt nicht ganz verstanden wie genau das funktioniert.
Könntest du mir bitte nen kleines beispiel machen wär super nett?-
Das mit den listen mit inline klingt ziemlich gut,
allerdings hab ich jetzt nicht ganz verstanden wie genau das funktioniert.
Könntest du mir bitte nen kleines beispiel machen wär super nett?<h1>Presets</h1> <ul class="presetsleft"> <li>Preset1</li> <li>Preset2</li> <li>Preset3</li> <li>Preset4</li> <li>Preset5</li> </ul> <ul class="presetsright"> <li>Preset1</li> <li>Preset2</li> <li>Preset3</li> <li>Preset4</li> <li>Preset5</li> </ul>.presetsright ul { display: inline; margin-left: 150px; }-
So wie du schreibst muss, ich leider sagen das es bei mir immernoch untereinander ist.
-
So wie du schreibst muss, ich leider sagen das es bei mir immernoch untereinander ist.
Dann versuch folgendes:
<h1>Presets</h1> <ul class="presetsleft"> <li>Preset1</li> <li>Preset2</li> <li>Preset3</li> <li>Preset4</li> <li>Preset5</li> </ul> <ul class="presetsright"> <li>Preset1</li> <li>Preset2</li> <li>Preset3</li> <li>Preset4</li> <li>Preset5</li> </ul>.presetsleft { float: left; } -
So wie du schreibst muss, ich leider sagen das es bei mir immernoch untereinander ist.
Fehler von mir. So ist's richtig:
ul { display: inline-block;Gruß
AirMax
-
-
-