Ansicht:   

#328326 Link lässt sich nicht einrücken (web.design)

verfaßt von Mike_R zur Homepage von Mike_R, Rosenheim, 26.12.2012, 12:31:56

Hi,
erst mal allen, die das lesen, ein frohes (restliches) Weihnachtsfest!
Vielleicht hat ja auch ein Experte kurz Zeit, mir bei einem (kleinen?) Problem zu helfen. Ich soll nämlich für jemand einen (vielleicht etwas merkwürdigen) Design-Wunsch erfüllen, der mir Schwierigkeiten macht. Das folgende Code-Beispiel, das ich auf das wesentliche reduziert hab, soll das verdeutlichen. (Der aktive Link soll lediglich eine dunklere Schriftfarbe haqben.) Beim hover-Effekt soll die Hintergrundfarbe ca. 40 Pixel links beginnen, der Link-Text aber an der selben Stelle bleiben, also so wie beim letzten <p>-Element, das ich hier als Beispiel angefügt habe. Hier hab ich das mit 'text-indent' bewerkstelligen können, was aber bei den Links so nicht funktioniert. Auch meine Versuche, da irgendwie das <a> mit einzubinden, bzw. anzusprechen, (z.B: auch a:link{} / a:visited{} usw.) schlugen fehl. Wäre schön, wenn mir da jemand auf die Sprünge helfen könnte.

Viele Grüße
Mike_R

+++++++++++++index.html+++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>webtest</title>
<link rel="stylesheet" href="styletest.css" type="text/css" />
</head>

<body>
<div id="navi">
<div>
<a id="menuAktivLink" href="index.html"> Start </a> </div>
<div>
<a id="menu1" href="#seite2.html"> Seite_2 </a> </div>
<div>
<a id="menu2" href="#nunAufSeite3.html"> Nun auf Seite 3 </a> </div>
<div>
<a id="menu3" href="#seite4.html"> Seite 4 </a> </div>
<p> Noch was zum Testen</p>
</div>

</body>
</html>
++++++++++++++++++styletest.css++++++++++++++++++
body {
font-family:courier, Verdana, sans-serif;
background-color:black;
}
#navi {
position:absolute; left:41px; top:50%; width:265px; height:594px;
background-color:black;
margin-top:-297px;
text-align:left;
}
#menuAktivLink {
position:relative; left:17px; top:-10px;
color:gray;
text-decoration:none;
}
#menu1, #menu2, #menu3 {
position:relative; left:15px;
color:white;
text-decoration:none;
}
#menu1:hover, #menu2:hover, #menu3:hover {
position:relative; left:-25px;
background-color:white;
text-indent:40px; /*funktioniert so nicht!*/
color:orange;
}
p {
position:absolute; left:11px;
color:orange;
}
p:hover {
position:absolute; left:-25px;
color:purple;
background-color:yellow;
text-indent:40px;
}

 

gesamter Thread:

Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz