Bild und Text im Menü

[CSSNeuling]

Hallo,

leider bin ich gerade vollkommen ratlos.
Ich habe ein Menü. Das sieht so aus:

• Text
• Text
• Text

Das "-" wäre jetzt also das Bild. Wenn der "Text" allerdings etwas länger ist, dann sieht das so aus:

• Text
• Ultra langer
  Text
• Text

Was das ganze sehr unübersichtlich macht. Das Bild und der Text sind in einem DIV. Wie oder kann ich überhaupt einstellen, dass das Bild, wenn es zwei Zeilen gibt, mittig ist und der Text untereinander steht?
Leider bin ich vollkommen ratlos... wahrscheinlich gibts ne ganz simple Lösung - leider komme ich nicht darauf :(

Wäre daher für jede Hilfe sehr dankbar!

[Gino]

Hallo,

Was das ganze sehr unübersichtlich macht. Das Bild und der Text sind in einem DIV. Wie oder kann ich überhaupt einstellen, dass das Bild, wenn es zwei Zeilen gibt, mittig ist und der Text untereinander steht?

Mach aus deiner Divnavigation eine Listnavigation

  
<ul>  
 <li>Text</li>  
 <li>Ultra langer Text</li>  
 <li>Text</li>  
</ul>

Als Listsymbol nimmst du einfach das Bild und wenn der Text umbricht wird zwar der Text umbrechen, aber das Listsymbol wird immer Mittig sein.

[Gino]

Hallo,

Oder zum Nachlesen:
http://de.selfhtml.org/css/eigenschaften/listen.htm
PS: mit der Position kannst du das Bild dann so Rücken wie du es brauchst

[Auge]

Hallo

Ich habe ein Menü. Das sieht so aus:

• Text
• Text
• Text

Das "-" wäre jetzt also das Bild. Wenn der "Text" allerdings etwas länger ist, dann sieht das so aus:

• Text
• Ultra langer
  Text
• Text

Was das ganze sehr unübersichtlich macht. Das Bild und der Text sind in einem DIV. Wie oder kann ich überhaupt einstellen, dass das Bild, wenn es zwei Zeilen gibt, mittig ist und der Text untereinander steht?

Ich gehe jetzt mal davon aus, dass du die <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=Bilder per CSS als Hintergrundbilder> in die divs einfügst.

1. Gib dem Element eine ausreichendendes padding-left, so dass die Texte erst neben dem Bild beginnen.

2. Mit http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=background-position kannst du die Bilder an die gewünschte Stelle im Element anzeigen lassen.

Tschö, Auge

[Heiko J.]

Hallo CSSNeuling!

leider bin ich gerade vollkommen ratlos.

Aber nicht doch!

Ich habe ein Menü. Das sieht so aus:

• Text
• Text
• Text

Das "-" wäre jetzt also das Bild. Wenn der "Text" allerdings etwas länger ist, dann sieht das so aus:

• Text
• Ultra langer
  Text
• Text

Was das ganze sehr unübersichtlich macht. Das Bild und der Text sind in einem DIV. Wie oder kann ich überhaupt einstellen, dass das Bild, wenn es zwei Zeilen gibt, mittig ist und der Text untereinander steht?
Leider bin ich vollkommen ratlos... wahrscheinlich gibts ne ganz simple Lösung - leider komme ich nicht darauf :(

Wäre daher für jede Hilfe sehr dankbar!

Wenn es nur um Text gegangen wäre, zwei Alternativen:
a) Eine Liste definieren

  
<div style="width:100px;">  
<ul>  
<li>Listenpunkt, bitte...</li>  
<li>Bla blubb ja</li>  
<li>Bla blubb laaaaaaaaaaaaaaaaaaaanger Text</li>  
<li>Bla blubb nein</li>  
</ul>  
</div>  

b) Mit text-ident arbeiten:

  
<div style="width:100px;">  
<div class="list">* Listenpunkt, bitte...</div>  
<div class="list">* Bla blubb ja</div>  
<div class="list">* Bla blubb laaaaaaaaaaaaaaaaaaaanger Text</div>  
<div class="list">* Bla blubb nein</div>  
</div>  

mit CSS Style

  
.list {text-indent:-2em; padding-left:2em; }  

In deinem Fall als _billigste Lösung_:
Mit <table> 1) arbeiten, erste Spalte für's Bild, zweite Spalte für den Text.

Gruss
Heiko J.

Fußnote:

1. Pfui, böser Vorschlag!!!!

[Gino]

Fußnote:

1. Pfui, böser Vorschlag!!!!

:) Selbst gemerkt

[at]

Hallo.

a) Eine Liste definieren

<div style="width:100px;">

<ul>
<li>Listenpunkt, bitte...</li>
<li>Bla blubb ja</li>
<li>Bla blubb laaaaaaaaaaaaaaaaaaaanger Text</li>
<li>Bla blubb nein</li>
</ul>
</div>

  
1)  
  

> Fußnote:  
> 1) Pfui, böser Vorschlag!!!!  
  
Stimmt, das `<div>`{:.language-html} ist unnötig.  
MfG, at

[CSSNeuling]

Vielen Dank für eure Tipps.
Hab mir jetzt mal das mit dem Hintergrund ausgesucht, da es am ehesten im Menü realisierbar ist (Ist von einer Shopsoftware)
Allerdings ein Problem hab ich noch:

Gibt es einen Befehl, der die Grafik im Hintergrund zentriert? Also z.B.
         -Z1

• Grafik -Z2
           -Z3

• Grafik -Z1

Denn wenn ich einen festen Wert angebe passt dieser ja nicht mehr, wenn der Eintrag nur eine Zeile lang ist.

Vielen Dank

[Auge]

Hallo

Hab mir jetzt mal das mit dem Hintergrund ausgesucht, da es am ehesten im Menü realisierbar ist (Ist von einer Shopsoftware)
Allerdings ein Problem hab ich noch:

Gibt es einen Befehl, der die Grafik im Hintergrund zentriert? Also z.B.
         -Z1

• Grafik -Z2
           -Z3

• Grafik -Z1

Das Bild wird also an das die Links enthaltende Element vergeben.

Denn wenn ich einen festen Wert angebe passt dieser ja nicht mehr, wenn der Eintrag nur eine Zeile lang ist.

Schrieb ich doch bereits: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=background-position

Tschö, Auge

[CSSNeuling]

Ohh... übersehen... sorry.. vielen Dank :)