✔ CSS hilfe bei display:block

[Sk8terboi]

Hey ihr,
ich hab ein kleines problem, und zwar, habe ich nun einen link.

in der form:

<li><a href="#" class="nav">Test</a></li>

so, nun möchte ich das der hintergrund sich ändert, also z.b. schwarz hinterlegt wird.

daher verwende ich "

style="display:list-item;"

" um sicherzustellen das die ganze zeile eingefärbt wird.

der css für den link sieht dann so aus:

a.nav:hover
{
background-color:#ffffff;
}

Nun ist aber das problem das er, wenn ich mit der maus darüber fahre, immer eine leerzeile einfügt, könnt ihr mir sagen woran das liegt ?

Hoffe ihr versteht was ich meine.

Gruß
Marc

 

[Maik]

Hi,

wieso verwendest du nicht einfach, wie im Topic genannt, display:block für das a-Element?

Sollten die Links horizontal ausgerichtet werden, nimmst du stattdessen float:left.

display:list-item ist hier überflüssig, da ja dem Quellcode-Auszug zur Folge schon ein Listenelement zum Einsatz kommt:

<ul>
    <li><a href="#" class="nav">Test</a></li>
    ...
</ul>

 

[Sk8terboi]

Hey danke für deine hilfe,

es funktioniert ja auch wie es soll, aber das problem ist das wenn ich mit der maus drüber fahre, er zwar den hintergrund ändert, aber unter dem link plötzlich eine freie zeile ist.

also es wird automatisch eine neue zeile eingefügt.

kannst du mir da weiterhelfen ?

 

[Maik]

Wenn du hier den vollständigen HTML- und CSS-Code zeigst und mir verrätst, wer "er" ist, kann ich mal einen Blick drauf werfen.

Und beachte bitte die Netiquette (Nr.15) bzgl. der Groß- und Kleinschreibung. Vielen Dank!

 

[Sk8terboi]

Hallo,

okey, erstmal entschuldigung

Hier einmal der Ausschnitt aus dem Quellcode der Relevant dafür ist:

          <table cellpadding="0" cellspacing="0">
                <tr>
                   <td>                    
                       <table cellpadding="0" cellspacing="0" style="width:214px">
                            <tr>
                                 <td style="width:13px"><img src="http://www.tutorials.de/forum/images/back_1.jpg" /></td>
                                 <td background="http://www.tutorials.de/forum/images/back_2.jpg"><img src="http://www.tutorials.de/forum/images/folder_top.gif" />&nbsp;NAVIGATION</td>
                                <td style="width:8px"><img src="http://www.tutorials.de/forum/images/back_3.jpg" /></td>
                            </tr>
                        </table>
                   </td>
                </tr>
                <tr>
                    <td class="navigation_links_center_2" style="border-bottom:0px; display:block;">
                      <ul style="display:block;">
                        <b><li><a href="#" class="nav">Link1</a></li></b>
                        <b><li><a href="#" class="nav">Link2</a></li></b>
                        <b><li><a href="#" class="nav">Link3</a></li></b>
                     </ul>
                   </td>
               </tr>
         </table>

So und hier die zutreffenden CSS einträge die enthalten sind:

Die Nav Class:

a.nav:hover
{
    display:block;
    background-color:#ce571f;
    color:#000000;
}

Und hier noch die navigation_links_center_2 :

.navigation_links_center_2
{
    display:block;
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:10px;
    background-color:#EEEEEE;
    border-left:1px;
    border-left-color:#000000;
    border-left-style:solid;
    border-bottom:1px;
    border-bottom-color:#000000;
    border-bottom-style:solid;
    border-right:1px;
    border-right-color:#000000;
    border-right-style:solid;
}

So, ich hoffe du kannst mir dabei weiterhelfen, das wäre freundlich.

Falls du noch irgendwelche Daten brauchst dann sag mir einfach bescheid, aber ich denke ich habe alles. Ist ein bisschen kompliziert da ich ein Template System verwende und Sprachdateien.

Und wegen der Betreff Zeile, tut mir leid das diese vielleicht nicht so aussagekräftig war, aber ich wusste nicht wie ich das Problem anders erklären sollte.

Sorry, hab es nochmal editiert, beim kopieren die Links von den Hintergrundbildern wurden irgendwie die pfade von tutorials.de eingefügt.

Gruß
Marc

 

[Maik]

Wenn ich jetzt alles richtig verstanden habe, und du hier vom IE sprichst, sollte dir dieses Stylesheet weiterhelfen:

a.nav {
    display:block;
    width:100%;
    font-weight:bold;
}
a.nav:hover
{
    background-color:#ce571f;
    color:#000000;
}

Den <b>-Tag kannst du aus dem HTML-Code entfernen, den hab ich durch font-weight:bold ersetzt. Zudem hast du ihn an der falschen Stelle notiert, da dieses Element kein unmittelbares Nachfahrenelement des ul-Elements darstellt.

 

[Sk8terboi]

Hey danke,

genau das wars =).

Dank dir vielmals für deine schnelle hilfe.

Gruß Marc