a:hover bei einer Vertikalen Navi

visio · 29.03.2010

Ich bekomme es einfach nicht hin, möchte eine Navigation machen und die links bestehen nur aus Bildern. Wenn man drüber hovert schiebt sich der gewählte Navi link leicht raus und wird größer. Das ganze wirklich nur mit Bildern ohne Text. Es geht ja auch mit rollover bildern über Dreamweaver aber das möchte ich mal umgehen.
Könnte jemand ein kurzes beispiel Code dazu posten.

msblacky · 29.03.2010

AW: a:hover bei einer Vertikalen Navi

Hallo,

evtl. hilft Dir das jetzt schon ein Stück weiter.

msblacky

micr0 · 29.03.2010

AW: a:hover bei einer Vertikalen Navi

Wie waere es wenn du dein code mal postest und wir dann versuchen ne loesung zu fiden?!
Waere doch sinvoller fuer uns und fuer dich oder?

(Bist du sicher dass auch beider bilder gleichgross sind? Lange und hoehe?)

vanilladragon · 29.03.2010

AW: a:hover bei einer Vertikalen Navi

Mit Hilfe von CSS kein Problem. Musst halt nur deine Bilder positionieren. Dazu brauchst du aber auch gute Kenntnisse

vanilla

EDIT:
Beispielcode findest du hier:

visio · 29.03.2010

AW: a:hover bei einer Vertikalen Navi

msblacky schrieb:
Hallo,

evtl. hilft Dir das jetzt schon ein Stück weiter.

msblacky

ja das scheint das richtige zu sein werde es mal ausprobieren.

micr0 schrieb:
Wie waere es wenn du dein code mal postest und wir dann versuchen ne loesung zu fiden?!
Waere doch sinvoller fuer uns und fuer dich oder?

(Bist du sicher dass auch beider bilder gleichgross sind? Lange und hoehe?)

Wenn ich morgen nich weiterkomme poste ich hier die CSS und Queltext rein.

vanilladragon schrieb:
Mit Hilfe von CSS kein Problem. Musst halt nur deine Bilder positionieren. Dazu brauchst du aber auch gute Kenntnisse

vanilla

EDIT:
Beispielcode findest du hier:

Welchen Code meinst du?

visio · 30.03.2010

AW: a:hover bei einer Vertikalen Navi

ok habs nach dem tutorial versucht aber es klappt nicht es ist auch auf ein horizontales Menü ausgelegt.

Hier der Quelltext:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Über mich</title>
<link href="css/ak_portfolio.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

	<div id="header">
   	  <img src="bilder/ak_portfolio_slices/ak_design_09.jpg" class="header_links" alt="header" width="609" height="123" />
   	  <img src="bilder/ak_portfolio_slices/ak_design_10.gif" alt="header_rechts" width="22" height="81" />
    </div>
	
  	<div id="content">
    	<img src="bilder/ak_portfolio_slices/ak_design_18.jpg" alt="Rahmen links" width="28" height="388" />   
    </div> 
    
  	<div id="navi">
    	<ul>
    	  <li><img src="bilder/ak_portfolio_slices/ak_design_14.gif" alt="Über mich" width="22" height="132" /></li>
    	  <li id="galerie_link"><a href="unterseiten/galerie.html"><img src="bilder/ak_portfolio_slices/ak_design_21.gif" width="19" height="135" /></a></li>	
    	  <li id="kontakt_link"><a href="unterseiten/kontakt.html"><img src="bilder/ak_portfolio_slices/ak_design_30.gif" width="19" height="162" /></a></li>
 	  </ul>
   	</div>
    
<img src="bilder/ak_portfolio_slices/ak_design_36.jpg" alt="footer" />
        
    </div>
</body>

</html>

und die CSS Anweisung:

Code:

#navi{
	float:right;
	margin-top:-41px;
	width:22px;
	height:430px;
}

#navi ul{
	list-style:none;
}

#navi ul li{
	width:22px;
	height:138px;
}

#galerie_link{
	background-image:url(../bilder/ak_portfolio_slices/ak_design_21.gif);
}

#galerie_link a:hover{
	background-image:url(../bilder/ak_portfolio_slices/galerie_rollover.gif);
}

Der erste link ist Aktiv deswegen bleibt das Bild ohne hover Effekt.
Bei den anderen beiden will soll ja kein Text stehen sondern Bilder drin sein, aber sobald ich dennen ein hover Bild zuweise überdeckt das img vorne das hintere. Wenn ich aber im link kein Bild reintue dann habe ich ja nichts zum anklicken da der Text oder das Bild fehlt.
Keine Ahnung wie ich das machen soll.

hubspe · 30.03.2010

AW: a:hover bei einer Vertikalen Navi

blueDragoon schrieb:
Keine Ahnung wie ich das machen soll.

Es gibt drei Möglichkeiten grafische navis umzusetzen:
vollgrafische navis (Text im Bild und Linktext trotzdem im Markup)
teilgrafische Navis (Bild ist nur der Hintergrund)
CSS-Sprites (eignet sich gut für horizontale Tab-navis)

Für vertikale navis ist das einfacher weil du da nix floaten mußt.
Für diesen Fall werden die Linkzustände in der Grafik (beim Erstellen in PS) auch horizontal angeordnet und nicht wie in den Tuts vertikal.

visio · 30.03.2010

AW: a:hover bei einer Vertikalen Navi

danke für die links werde es mal gleich probieren.

gracias hat geholfen

Solla · 30.03.2010

AW: a:hover bei einer Vertikalen Navi

hey danke für Eure ausführlichen Anmerkungen wollte gerade eine Frage dazu posten. Jetzt hat sich das erledigt.

B.G.

judie626 · 01.04.2010

AW: a:hover bei einer Vertikalen Navi

Hi,
wenn du schnell und einfach navigationen herstellen möchtest kannst du dazu den tabdesigner verwenden. Dann einfach code in deine projekt posten und fertig

CSS Tab Designer - Download