nicht angemeldet
'Spacer' mit fester Breite und Backgroundimage
Hi zusammen,
Ich sitze momentan ein einem Menu und moechte vor einem Text ein Bild darstellen. Das Bild sollte wechseln je nachdem ob es angeklickt ist, oder gehovert wird. Ich wollte das mittels CSS und background-image loesen. Die Klasse (offen/geschlossen) wird per Javascript umgeschaltet. (Da das Menu dynamisch mit php erstellt wird denke ich, es ist schoener das Bild im CSS zu definieren als im Code).
Naja, dafuer wollte ich erst ein span element vor den Text mit einer festen Breite setzen, was, wie ich mittlerweile auch rausbekommen hab, nicht geht. Ein Div-Container geht wegen dem Zeilenumbruch auch nicht.
Jetzt meine Frage: Welche Moeglichkeiten habe ich, einen "Container" mit fester Breite und Hoehe zu erstellen, dem ich per CSS ein Image zuweisen kann?
(das ganze wird ein Baum mit dynamischer Tiefe und <ul>/<li> tags die verschachtelt sind)
Danke fuer die Hilfe
-
Moin
Ein Div-Container geht wegen dem Zeilenumbruch auch nicht.
würde gehen mit float:left.
Bessser denke ich wäre es direkt in die Links ein Hintergrundbild einzufügen und den Text innerhalb des Links mit padding zu verschieben. In etwas so:
a
{
background:url(hier dein bild) left top no-repeat
padding-left:10px
}nun kann man das Bild bei Hover oder Änderung der Klasse, mittels CSS oder Javascript ändern.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hi,
Die Idee ist eigentlich gut, das Problem ist daran nur, daas der Text schon fuer eine andere Aktion belegt ist. Beim Klick auf das Icon soll der Unterbaum aufgeklappt werden, beim Klick auf den Text rechts neben dem Icon kommt eine andere Seite.
|Icon | Text
Dabei ist Text irgendwo hinverlinkt und das Icon soll sich aendern. (Das Icon hat immer eine groesse von 10px x 10px)
-
Moin
OK, dann doch die Möglichkeit ein Blockelement mit float:left, oder die Navigation in einer Liste verpacken, in der du das HG-Bild in den LI's unterbringen kannst.
Grüße Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hi,
Das mit den LIs hatte ich schonmal probiert, da hatte ich nur das Problem das mir das Klickverhalten nicht gefallen hatte (Da der Klick auch gewertet wurde wenn ich z.b. in die selbe Zeile aber rechts neben den Text text geklickt habe oder wenn ich unterhalb eines Toplevelnodes geklickt habe das der dann geschlossen wurde).Das mit Float:left hatte ich schonmal probiert, allerdings muss ich zugeben das ich das wahrscheinlich nicht nicht so ganz verstanden hab. Das Problem was ich damit hatte, ist das die Icons ja verschiedene Tiefen haben (je nach Verschachtelungstiefe).
also:
|I| Text|
|I| Text|
|I| Text|
|I| Text|
|I| Text |
|I| Noch mehr text|-
Moin
Dann weise den Icons je nach Verschachtelunsgstiefe zusätzlich ein margin-left:XXpx zu! Das kann wiederum durch CSS-Klassen geregelt werden.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Mir is grade ein Licht aufgegangen. Irgendwie hab ich dieses Float etwas falsch gesehen (bzw nie im richtigen Kontext ausprobiert :p)
Habs jetzt wie du vorgeschlagen hast wie folgt gemacht:
<ul>
<li><div style="float:left; width/height:16px; margin-left:10px"> text</div></li>
</ul>Ich dachte float schiebt das Element immer ganz nach links :p
Danke fuer die Hilfe
-
-
-
-
-