Navigationsprobleme mit a:hover effekt

[RedQueen08]

Hallöchen,

ich wollte gerne wechselnde effekte bei der Navigation haben wenn man mit der Maus drüber geht und den link aktiviert.
Ist ja eigentlich auch ganz einfach. Nun wollte ich dafür aber eine ganzandere Farbe als hintergrund haben. Sprich wenn man mit der Maus drüber fährt soll in der ganzen Navi breite ein heller Balken erscheinen.

Das mit den Balken habe ich auch hin bekommen, allerdings ist der mehr versetzt nach recht. Siehe Bild.



und so in der css Datei

[FONT=monospace]#left a:link {color: #FFFFFF;  text-decoration: none; font-weight: ; } 
#left a:visited {color:#FFFFFF; text-decoration: none; font-weight: ;} 
#left a:hover {display:block;   background-color: #CCCC33; width: 200px; height: 20px; color: #333300; text-decoration: none; } 
#left a:active {display:block; background-color: #CCCC33; width: 200px; height: 20px; color: #333300; text-decoration: none; }
[/FONT]

Die schrift hab ich mit margin-left: -20px; in der Box verschoben, da die Navi-links listenpunkte sind und die schrift in der Navi-Box erst weiter links war und somit zu weit am rechten rand klebten, dass sah blöd aus.
Aber ich möchte die auch nicht links am Rand kleben haben.

Nun hab ich schon probiert mit "margin-left" im hover bereich, dann ist der balken auch genau da wo ich Ihn hin haben möchte, aber der Text schiebt sich dann beim rüber gehen mit zu rand wie hier auf dem Bild zu sehen.



Und das sieht sch... aus.

Weiß jem. woran das liegt? Oder kann mir bzw. sagen wie das besser funktioniert?

LG Redqueen08

PS.: Page ist noch nicht Online.

 

[MegaAdi]

AW: Navigationsprobleme mit a:hover effekt

du hast eine Navi mit der Breite von 200px. Hast deine Navi-Links 20px nach rechts versetzt... also ist vom 1. Buchstaben der Links bis zum rechten rand 200-20px also 180px.. so breit musst du dann auch die Links machen

Gruß Adrian

 

[patrick_l]

AW: Navigationsprobleme mit a:hover effekt

Außerdem kannst du das ganze etwas kürzen da du ja eigentlich nur zwei Zustände hast.

#left a:link, a:visited {color: #FFFFFF;  text-decoration: none; font-weight: ; }  
#left a:hover, a:active {display:block; background-color: #CCCC33; width: 200px; height: 20px; color: #333300; text-decoration: none; }

 

[Doitsu]

AW: Navigationsprobleme mit a:hover effekt

text-indent

 

[RedQueen08]

@MegaAdi

Das musst du mir mal nochmal für doofe erklären
Weiß nämlich grad net wo genau ich welchen wert eingeben muss.
Hier noch der Code wo die Link aufgelistet sind.

<div id="left">    
  <h2>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="index.html">Startseite</a></li>
<li><a href="index.html">Startseite</a></li>
</ul>
</h2>    
 </div>

h2 {
font-size:14px;
font-weight: normal;
padding: 20px 0px;
padding-left: 0px;
margin-left: -20px;
}
#left {
float: left;
width: 200px;
height: 600px;
margin: 0px;
padding: 0px;
background-image: url(images/nav.links.jpg);
}

Hab es hinbekommen
Nun hab ich nur noch eine frage.
Hab die höhe vom Block der erscheinen soll nun auf 40px.
Nun klebt der Text am oberen Blockabschnitt. Würde den Navi-Text gerne mittig vim Block haben. Was muss ich dafür eingeben?

 

[MegaAdi]

AW: Navigationsprobleme mit a:hover effekt

margin-top: auto; margin-bottom: auto;

 

[Doitsu]

AW: Navigationsprobleme mit a:hover effekt

auto gibt es fuer top & bottom nicht.
line-height

 

[MegaAdi]

AW: Navigationsprobleme mit a:hover effekt

Mit margin-top: können Sie den Rand/Abstand oben bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto oder inherit.

Quelle:

Gruß Adrian

 

[cebito]

AW: Navigationsprobleme mit a:hover effekt

Mit margin-top: können Sie den Rand/Abstand oben bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto oder inherit.

Quelle:

Gruß Adrian

Kannste reinschreiben adi, aber es bewirkt nichts. Ist dasselbe, als würde nix drinstehn. Im Übrigen verzichte ich inzwischen so gut es geht auf SELFHTML hinzuweisen, wird seit Jahren nicht mehr aktualisiert.

 

[MegaAdi]

AW: Navigationsprobleme mit a:hover effekt

jo ich hab auch nochmal bei css4you nachgeschaut und da stand auch auto drinnen... habs in der variante noch nie verwendet, also mit top / bottom deswegen dachte ich das es da auch geht.
Aber siehste, man lernt nie aus

Adi

 

[RedQueen08]

AW: Navigationsprobleme mit a:hover effekt

Also habe es nun mit line-height hinbekommen. Display: Block ist nun 35px breit.
in der CSS unter #left li habe ich die line-height auch auf 35px gesetzt. Nun ist der Text mittig drin.
Aber...
ein Linktext ist etwas länger bei mir und mit einem "Slash" getrennt, also quasi
blablabla / blablabla.
Der wird dann zweizeilig angezeigt, was ja auch in Ordnung ist.
Aber dort wendet er auch line-height an und somit habe ich dort einen riesen Abstand zwischen und der Display Block wird nur bei der ersten zeile angezeigt.
Habe dann eine Div Box und den Navipinkt noch hinzugefügt und die werte dort angepasst. Das ging auch. Aber dann hat der mir den Contentbereich und die Fusszeile zerschossen

Kann ich das vllt. einfacher machen, also das er mir line-height bei dem zweizeiligen Links ausblendet? Oder kann ich vllt. in der HTML datei selber angeben an welchem LI er mir line-height einbinden soll?

LG Redqueen08

 

[ovbb]

AW: Navigationsprobleme mit a:hover effekt

Wenn du dem Link und dem Visited schon den display block gibst dann brauchst es fürs hover nimmer ...

#left a:link, a:visited {
   display:block;
   text-decoration:none;
    padding: 5px 10px 5px 10px; 
/* Verwende das Padding, 
da ich somit die Zeilenhöhe nicht angeben muss :-) */
}

 

[RedQueen08]

AW: Navigationsprobleme mit a:hover effekt

@ovbb:

mit padding hat es geklappt. Der Text ist nun auch mittig im Block, der zweizeilige ist auch nun ganz im Block aber da ist nur die erste zeile mittig und die zweite halt dem entsprechend am unterem Rand.
Wenn ich nun noch weiß wie ich den Text mittig hinbekomme hab ich meine Navigation endlich so wie ich sie mir vorstelle

 

[Doitsu]

AW: Navigationsprobleme mit a:hover effekt

Wirst du anders auch nicht hinbekommen, jedenfalls nicht solange wie du display: block + height Angabe benutzt. Die hoehe muesste dann raus.