Problem mit CSS

Computer: Software & Programmierung HTML & CSS
#1

Hallo Leute,

ich hab eine kleine Problem mit meiner CSS-Formatierung.

  1. Was hab ich vor?
    Ich möchte in einer Navigation pro Link ein Bildchen (Pfeil) und dann den Link-Text dahinter anzeigen. Wenn der Text länger ist wie die Navigation breit, erfolgt ein umbruch und soll bündig unter dem Text weiter fließen, aber nicht unterhalb vom Bild beginnen!

  2. Code

CSS:
#pfeil {border:0px;}
#HNAV
{
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #33F000;
background-color: #F2F2F2;
padding-top: 40px;
position: fixed;
width: 250px;
height: 100%;
}

A {width: 240px; text-decoration: none;}

A.hnav:link {height: 25px; border-bottom: 1px solid #AAAAAA; padding-top: 5px; COLOR:#000000;}
A.hnav:visited {height: 25px; border-bottom: 1px solid #AAAAAA; padding-top: 5px; COLOR:#000000;}
A.hnav:active {height: 25px; border-bottom: 1px solid #AAAAAA; padding-top: 5px; COLOR:#FF0000;}
A.hnav:hover {height: 25px; border-bottom: 1px solid #AAAAAA; padding-top: 5px; COLOR:#FF0000;}

HTML:

bla

Ich hoffe jemand kann mir beim lösen dieses Problems weiter helfen. Eigentlich ist es nicht mehr wie ein

  • asdf
    aber anstelle vom Punkt ein Bildchen…

Vielen Dank.

Grüße,
Jens

#2

ich hab eine kleine Problem mit meiner CSS-Formatierung.

  1. Was hab ich vor?
    Ich möchte in einer Navigation pro Link ein Bildchen (Pfeil)
    und dann den Link-Text dahinter anzeigen. Wenn der Text länger
    ist wie die Navigation breit, erfolgt ein umbruch und soll
    bündig unter dem Text weiter fließen, aber nicht unterhalb vom
    Bild beginnen!
    […]
    Ich hoffe jemand kann mir beim lösen dieses Problems weiter
    helfen. Eigentlich ist es nicht mehr wie ein
  • asdf
    aber anstelle vom Punkt ein Bildchen…

Warum benutzt du dann nicht einfach die Listenformate und baust die Navigation mit einer ul?

http://www.w3.org/TR/CSS21/generate.html#q10
insbesondere
http://www.w3.org/TR/CSS21/generate.html#propdef-lis…

#3

Danke für die schnelle Antwort!

Ok, das hab ich auch schon gefunden. Habs auch damit schon probiert, habs aber nicht hin bekommen.
Könntest du mir vl ein CSS-Beispiel schicken, an dem ich mich orientieren kann.

Danke!

Jens

#4

Hab gerade gelesen, das die „list-style-image“ nur mit
oder
funktionieren, ist das richtig?
Wenn, dann kann ich das natürlich nicht gebrauchen. Da ich meine Navi-Punkt eigentlich nicht einrücken wollte… :smile:

so soll’s aussehen:
____________________
|                                       |
| [BILD] Das ist ein LINK,  |
|            der zu lang ist.    |
|____________________|

Ideen?

Grüße,
Jens

#5

Hab gerade gelesen, das die „list-style-image“ nur mit

oder
funktionieren, ist das richtig?
Wenn, dann kann ich das natürlich nicht gebrauchen. Da ich
meine Navi-Punkt eigentlich nicht einrücken wollte… :smile:

Soweit richtig, allerdings kann man Listen einigermaßen umbauen. Alternativ ginge auch sowas, frisch aus dem Buch „Dingem die der IE nicht kann“:

http://www.spearhead.de/stuff/stufftest.html

#6

Hallo,

Hab gerade gelesen, das die „list-style-image“ nur mit

oder
funktionieren, ist das richtig?
Wenn, dann kann ich das natürlich nicht gebrauchen. Da ich
meine Navi-Punkt eigentlich nicht einrücken wollte… :smile:

musst Du ja nicht - mit margin und padding (und einer Sonderbehandlung des IE) kannst Du genau festlegen, wie weit ul oder ol einrücken.

Greetinx
Christian
http://www.html-workshop.de

#7

Hey Nicos,

danke für das Bsp. jedoch funktionierts bei mir nicht…
er gibt mir einfach kein Bild aus…

CODE:
#HNAV
{
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #33F000;
background-color: #F2F2F2;
padding-top: 40px;
position: 0px;
width: 250px;
height: 100%;
margin: 0px;
}

A
{
width: 240px;
padding: 0;
margin: 0;
margin-left: 5px;
text-decoration: none;
list-style-type: none;
}

A.unav:before {margin-right: 4px; margin-left: -14px; content: url(‚ABSOLUTER-PFAD/pfeil.gif‘);}
A.unav:link {height: 25px; border-bottom: 1px solid #000000; padding-top: 5px; background-color: #FFFFFF; COLOR:#FF0000;}
A.unav:visited {height: 25px; border-bottom: 1px solid #000000; padding-top: 5px; background-color: #FFFFFF; COLOR:#FF0000;}
A.unav:active {height: 25px; border-bottom: 1px solid #000000; padding-top: 5px; background-color: #FFFFFF; COLOR:#FF0000;}
A.unav:hover {height: 25px; border-bottom: 1px solid #000000; padding-top: 5px; background-color: #FFFFFF; COLOR:#FF0000;}

Test-Link der zu lang ist…

ich versteh es nich :frowning: weiß noch einer Rat?

Vielen Dank.

Grüße,
Jens

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#8

danke für das Bsp. jedoch funktionierts bei mir nicht…
er gibt mir einfach kein Bild aus…

CODE:
[…]
A
{
/* … */
}

A.unav:before { /* … */ }
/* etc. */

Test-Link der zu langist…

Probier’s mal mit „a“ und „a.unav“ im CSS. Der Kram ist zumindest in XHTML case sensitive.

Was auch ganz nett ist, ist die CSS-Eigenschaft „text-indent“:
http://www.w3.org/TR/CSS21/text.html#indentation-prop

Damit kann man zB die erste Zeile eines Blockelements negativ einrücken und dann in die Einrückung ein Bild mit der richtigen Breite stellen.

#9

Sowas in der Art hatte ich schon mal probiert, da hab ich dann aber wieder das Problem, dass ich Bildchen nicht zentriert vor die erste Zeile bekomme…oder?
Denn wenn ich: Bild { margin-top: 5px; } so beeinflusse, schieb er mir den Text glaub ich gleich mit runter…und das möchte ich ja auch nicht.

Mich würde lieber interessieren warum mir content: url(ASBOLUTER-PFAD); kein Bild ausgibt…

Wenn jemand noch eine Idee hat zur Lösung meines Problems, nur her damit…wollte es eigentlich nicht mit machen

Grüße,
Jens

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#10

Mich würde lieber interessieren warum mir content:
url(ASBOLUTER-PFAD); kein Bild ausgibt…

Dein Code mit klein geschriebenen Elementnamen funktioniert in Firefox 1.5, Opera 8.5 und Konqueror 3.4.3. Wenn der Pfad richtig ist weis sich auch nicht was noch schiefgeht (es sei denn du testest in IE).

#11

hey nicos,

ich muss dir leider recht geben :frowning:
kuhl das es zumindestens da geht, aber das interessiert halt 80% der internetnutzer nicht soviel…

vielen dank für deine hilfe!

Grüße,
Jense

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]