Poitionierung mit padding

[Julian Rath]

Zervus,
Also, ich habe eine ul mit ils drinnen, jetzt will ich das gleich formatieren wie im Windows Explorer(muss so sein).

Ich habe jetzt drei Elemente pro li, das plus oder minus das icon, den Text.

wie schaffe ich diese Elemente relativ zum li zu positionieren, oder zueinander, Hauptsache irgendwie, ich habs bis jetzt nicht geschafft.

Danke

Julian

[Ashura]

Hallo Julian.

Ich habe jetzt drei Elemente pro li, das plus oder minus das icon, den Text.

wie schaffe ich diese Elemente relativ zum li zu positionieren, oder zueinander, Hauptsache irgendwie, ich habs bis jetzt nicht geschafft.

Verwende das [+] / [-] als list-style-image und das Icon als normales Bild vor dem Text.

Einen schönen Montag noch.

Gruß, Ashura

[Julian Rath]

Hallo Julian.

Ich habe jetzt drei Elemente pro li, das plus oder minus das icon, den Text.

wie schaffe ich diese Elemente relativ zum li zu positionieren, oder zueinander, Hauptsache irgendwie, ich habs bis jetzt nicht geschafft.

Verwende das [+] / [-] als list-style-image und das Icon als normales Bild vor dem Text.

dise Idee hatte ich auch schon aber ich brauch das onclick nur aufs +/- und nicht aufs ganze li
ausserdem muss es picelgenau gleich ausschauen

[Julian Rath]

mit würde auch schon reichen wenn ich wüsste wie ich das newline vom div wegbekomme.

[Struppi]

mit würde auch schon reichen wenn ich wüsste wie ich das newline vom div wegbekomme.

welches Newline?
welches DIV?

Struppi.

[Ashura]

Hallo Julian.

dise Idee hatte ich auch schon aber ich brauch das onclick nur aufs +/- und nicht aufs ganze li

Dann formatiere deine Listenpunkte entsprechend, dass kein Bullet angezeigt wird und setze die onclick-Aktion in das img-Element von [+] / [-].
Du weißt, dass solch kleine Flächen mit der Maus sehr schwer zu treffen sind?

ausserdem muss es picelgenau gleich ausschauen

Wo ist das Problem?

Einen schönen Montag noch.

Gruß, Ashura

[wahsaga]

hi,

Du weißt, dass solch kleine Flächen mit der Maus sehr schwer zu treffen sind?

Wer die Usability des Windows Explorers nachbasteln will, wird vermutlich bewusst an einem Negativbeispiel arbeiten.

gruß,
wahsaga

[Julian Rath]

Hallo Julian.

dise Idee hatte ich auch schon aber ich brauch das onclick nur aufs +/- und nicht aufs ganze li

Dann formatiere deine Listenpunkte entsprechend, dass kein Bullet angezeigt wird und setze die onclick-Aktion in das img-Element von [+] / [-].
Du weißt, dass solch kleine Flächen mit der Maus sehr schwer zu treffen sind?

ausserdem muss es picelgenau gleich ausschauen

Wo ist das Problem?

wie mach ich das hier?

<ul>
<li>
<div class="container">
<div>
</div>
<div class="bullet">
<img src="pics/plus.png">
</div>
<span class="icon">
<img src="pics/folder_c.png">
</span>
<span class="caption">
Dateien
</span>
</div>
</li>
<li>
<div class="container">
<div>
</div>
<div class="bullet">
<img src="pics/plus.png">
</div>
<span class="icon">
<img src="pics/folder_c.png">
</span>
<span class="caation">
Dateien
</span>
</div>
</li>
</ul>

[Der Martin]

Hallo Julian,

<ul>
<li>
<div class="container">
<div>
</div>
<div class="bullet">
<img src="pics/plus.png">
</div>
<span class="icon">
<img src="pics/folder_c.png">
</span>
<span class="caption">
Dateien
</span>
</div>
</li>
...

du liebe Güte, was soll denn diese div-Wüste?!
1. Das äußere div (.container) ist unnötig, weil es praktisch mit dem li-Element zusammenfällt. Formatiere also besser das li, anstatt noch ein div drumzulegen.
2. Wozu das leere div ohne class und id?
3. Wozu das div.bullet? Auch hier gilt: Formatiere das img-Emelent doch direkt, anstatt es in ein sinnfreies div einzuwickeln.

So, und was bleibt dann noch schwierig?
So long,

Martin

[Julian Rath]

<ul>
<li>
<img src="pics/plus.png" class="bullet">
<img src="pics/folder_c.png" class="icon">
<span class="caption" >
Dateien
</span>
</li>
<li>
<img src="pics/plus.png" class="bullet">
<img src="pics/folder_c.png" class="icon">
<span class="caption">
Dateien
</span>
</li>
</ul>

so, die poitionierung zueiander mach ich mit margin's aber wie positionire ich z.B. bullet so, dass es 3px von (li) oben is oder 4 von unten.

danke

[Ashura]

Hallo Julian.

so, die poitionierung zueiander mach ich mit margin's aber wie positionire ich z.B. bullet so, dass es 3px von (li) oben is oder 4 von unten.

[ ] Du kennst margin.

Einen schönen Montag noch.

Gruß, Ashura

[Gernot Back]

Hallo Julian,

Also, ich habe eine ul mit ils drinnen, jetzt will ich das gleich formatieren wie im Windows Explorer(muss so sein).

wie schaffe ich diese Elemente relativ zum li zu positionieren, oder zueinander, Hauptsache irgendwie, ich habs bis jetzt nicht geschafft.

Das ist wieder mal ein ziemlicher Aufwand, das für den IE genauso aussehen zu lassen wie für richtige Browser.

Ich habe da ja vor einiger Zeit schon mal was gebastelt. Dabei habe ich mit Hintergrundbildern gearbeitet, die ich den LI-Elementen zugeordnet habe. Bei einem Klick auf das LI-Element wird über den Eventhandler onclick die Auf- und Zuklapp-Aktion ausgelöst, gleichzeitig wird das Weiterblubbern des Events bei Klick auf ein darin befindliches A-Kindelement aber gestoppt.

Wenn du also auf das Plus- oder Minuszeichen klickst, "klappt" es. Bei Klick auf den Link selbst bleibt aber alles so wie es ist und nur der Link öffnet sich. Es "klappt" aufgrund dieses Ansatzes aber auch, wenn man auf den leeren Bereich rechts neben dem Link klickt. Ich bin noch uneins mit mir selbst, ob ich das nun als Feature oder als Bug ansehen soll. So ganz zufrieden bin ich mit dem Ansatz nicht, bastele aber im Moment auch nicht weiter dran. Vielleicht sollte ich ja doch lieber verlinkte Vordergrundgrafiken (Plus und Minus) zum Auf- und Zuklappen nehmen, das würde dann natürlich beim Padding des LI-Elements und ggf. beim Margin des IMG-Elements auch wieder ganz andere Werte erfordern.

http://lernspielwiese.de/klappmenue/tree.html

Meine ausgelagerten CSS- und JS-Dateien sowie die Grafiken findest du hier gebündelt:

http://lernspielwiese.de/klappmenue/tree.zip

Du darfst gerne stibitzen, wenn du davon was für brauchbar hältst.

Wenn du mit dem Alternativansatz (verlinkte Vordergrundgrafiken) weiterkommst, lass es mich wissen.

Gruß Gernot