Antworten auf deine Fragen:
Neues Thema erstellen

Navigationsprobleme mit a:hover effekt

RedQueen08

Nicht mehr ganz neu hier

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
Code:
[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

Freak

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

Hat es drauf

AW: Navigationsprobleme mit a:hover effekt

Außerdem kannst du das ganze etwas kürzen da du ja eigentlich nur zwei Zustände hast.
Code:
#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; }
 
Zuletzt bearbeitet:

RedQueen08

Nicht mehr ganz neu hier

@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.
Code:
<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>
Code:
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?
 
Zuletzt bearbeitet von einem Moderator:

cebito

undefined

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. ;)
 
Zuletzt bearbeitet:

MegaAdi

Freak

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

Nicht mehr ganz neu hier

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

es gibt für alles eine weg

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 ...

HTML:
#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

Nicht mehr ganz neu hier

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

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.618
Beiträge
1.538.362
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben