Mouseover verändern

[DirtyWorld]

Hallo,
ich wollte meine Menü mittels angepassten a-tag verändern und zwar so das vor denen mit dder Klasse pointmenue ein bullet erscheint.
Nur leider funktioniert das nicht.
Kann es sein das das das list-style tag nicht mehr erkennt das es sich um eine Liste handelt oder woran liegt das ?

<div id="menue">
<ul id="navlist">
<li><a class="navlist" href="index.html"><span>Home</span></a></li>
<li class="navlistnoactive"><span>Leistungen</span></li>
<li><a class="pointmenue" href="#"><span class="submenue">Programmerstellung</span></a></li>
<li><a class="pointmenue" href="#"><span class="submenue">Reiseleitung</span></a></li>
<li><a class="pointmenue" href="#"><span class="submenue">Kulturelle Events</span></a></li>
<li><a class="pointmenue" href="#"><span class="submenue">Consulting</span></a></li>
<li><a class="pointmenue" href="#"><span class="submenue">V.I.P.-Service</span></a></li>
<li><a class="navlist" href="#"><span>White Tower Tours</span></a></li>
<li class="listempty">2</li>
<li><a class="navlist" href="#"><span>Kontakt&nbsp;/&nbsp;Impressum</span></a></li>
</ul>
</div>

Css-Datei:
a.pointmenue:link  {background:#B2CCDB;
       width:210px;
          line-height:23px;
          margin:0px;
         color:#000000;
         text-decoration:none;
          font-family: Verdana, sans-serif;
          font-size: 11;}

a.pointmenue:visited {background:#B2CCDB;
         width:210px;
            line-height:23px;
            margin:0px;
           color:#000000;
           text-decoration:none;
            font-family: Verdana, sans-serif;
            font-size: 11px;}

a.pointmenue:hover, a.pointmenue:active {background:#B2CCDB;
              width:210px;
          line-height:23px;
             margin:0px;
              color:#000000;
              text-decoration:none;
              font-family: Verdana, sans-serif;
             font-size: 11px;
                                         list-style-type: circle;}

Hoffe auf Hilfe und wünsche noch eine angenehme NAcht.

Viele Grüße

[Hopsel]

Hi DirtyWorld!

Kann es sein das das das list-style tag nicht mehr erkennt das es sich um eine Liste handelt oder woran liegt das ?

Du kannst diese Eigenschaft nur auf ol und ul anwenden. Eine Definiton durch style-tag auf a oder li hat meines Wissens keinen Einfluss.

MfG Hopsel

[DirtyWorld]

Danke für eure Hilfe.
Ich habe es jetzt mit einem Hintergrundbild gemacht welches ein Punkt enthält.
Danke für eure Hilfe.

Jetzt entsteht aber ein weiteres kleines Problem.
Nämlich ich habe die Links mit Ankern versehen und möchte jetzt das an dem Link der Kreis solange sichtbar bleibt bis ein anderer Link gedrückt wird.

Gruß

[Fabian]

Du kannst aber ein ähnlichen effekt verursachen indem du:

a {
 border-left: 5px solid #fff;
 padding-left: 7px;
}

a:hover {
 border-left-color: #ff0000;
}

dies wirkt bei einem weißen hintergrund. du musst einfach den ersten
border-left: die farbe dem hintergrund anpassen!

[dey]

Hallo,

ich habe gestern an einer Variante rumgefummelt, die dich weiter bringen könnte:
https://forum.selfhtml.org/?t=112753&m=714037

• auf hover den Hintergrund (bei dir ein Bild von einem Punkt) ändern
• mit padding-left den Punkt vor den Linktext plazieren

Tuningmassnahmen sind allerdings noch notwendig, da mein Code das Fuba-Satdium nicht überschritten hat.

bydey

[mbr]

hallo DirtyWorld,

a.pointmenue:hover, a.pointmenue:active {background:#B2CCDB;
              width:210px;
          line-height:23px;
             margin:0px;
              color:#000000;
              text-decoration:none;
              font-family: Verdana, sans-serif;
             font-size: 11px;
                                         list-style-type: circle;}

du versuchst, in einer Klasse des a selectors die Eigenschaft
list-style-type auf circle zu setzen. Diese Eigenschaft ist allerdings nur für ul und ol definiert. Versuch doch mal noch Klassen für dieses beiden Selektoren einzuführen. Allerdings bezieht sich diese Eighenschaft dann auf alle Listenpunkte. Eventuell müßte man dann also mehrere Listen definieren (die Verfechter des Semantik makeup mögen mir verzeihen - oder mir verraten, wie man es besser macht ;-) )

Ach so: eine kleine Anmerkung noch: dein HTML Code schein valides HTML 4.01 transitional zu sein, dein CSS ebenfalls valide, (1) bis auf eine Kleinigkeit in Zeile 8:

font-size: 11;
            --

hier fehlt das px als Einheit.Vielleicht könntest du das noch ändern?

liebe Grüße

mbr

(1) Was mich schon etwas wundert, denn normalerweise müßte er doh merken, dass es für a kein list-style-type gibt, oder? Wenn einer von den Experten das mal aufklären könnte...

[wahsaga]

hi,

[valide ...] Was mich schon etwas wundert, denn normalerweise müßte er doh merken, dass es für a kein list-style-type gibt, oder?

es "gibt" jede CSS-eigenschaft für jedes element, immer und überall - das ist syntaktisch vollkommen korrekt. und mehr als die syntax ist der validator ja gar nicht zu prüfen in der lage.
(und überlege dir mal, was wäre, wenn der list-style-type nicht für einen elementtyp, sondern für eine klasse oder id definiert worden wäre - da weiß der validator ja, wenn er lediglich das CSS überprüft, überhaupt nicht, auf was für einen elementtyp diese formatierung nachher angewendet wird. aus diesem grunde _kann_ er diesbezüglich gar keine aussage treffen, selbst wenn er wollte.)

es gibt aber natürlich CSS-eigenschaften, die nicht bei allen element eine auswirkunge haben - so wie in diesem beispiel. das hat mit der validität aber nullkommanull zu tun.

gruß,
wahsaga

[mbr]

Hallo wahsaga,

[valide ...] Was mich schon etwas wundert, denn normalerweise müßte er doh merken, dass es für a kein list-style-type gibt, oder?

es "gibt" jede CSS-eigenschaft für jedes element, immer und überall - das ist syntaktisch vollkommen korrekt. und mehr als die syntax ist der validator ja gar nicht zu prüfen in der lage.
es gibt aber natürlich CSS-eigenschaften, die nicht bei allen element eine auswirkunge haben - so wie in diesem beispiel. das hat mit der validität aber nullkommanull zu tun.

Danke für die klare Aussage. Wieder was gelernt.

liebe Grüße

mbr

[DirtyWorld]

Also erst mal vielen dank für eure Antworten.
Nur wie verhalte ich mich den nun am besten?
Gibt es den nicht noch eine andere Möglichkeit als jetzt nochmal eine Liste in die andere zu verschachteln?

Gruß

[MudGuard]

Hi,

es gibt aber natürlich CSS-eigenschaften, die nicht bei allen element eine auswirkunge haben - so wie in diesem beispiel.

Wobei die Auswirkung (außer bei Dingen, die mit replaced/non-replaced zu tun haben) nicht vom Elementnamen abhängt, sondern vom Wert anderer Eigenschaften, so wie z.B. bei list-style-type, das nur dann wirkt, wenn display den Wert list-item hat.

cu,
Andreas

[at]

Hallo.

ich wollte meine Menü mittels angepassten a-tag verändern und zwar so das vor denen mit dder Klasse pointmenue ein bullet erscheint.

In CSS übersetzt ergibt dieser Satz:
a.pointmenue:before {content: '•';}
MfG, at