Ansicht:   

#328326

Mike_R zur Homepage von Mike_R

Rosenheim,
26.12.2012, 12:31:56

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

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;
}

#328536

Johann [Gast]

28.12.2012, 21:56:25

@ Mike_R

Link lässt sich nicht einrücken

Ich weiss nicht, was genau Du erreichen möchtest, aber wozu machst Du diese negativ-Positions-Orgie? Suchst Du evtl padding-left?

#328608

Mike_R zur Homepage von Mike_R

Rosenheim,
29.12.2012, 20:13:55

@ Johann

Link lässt sich nicht einrücken

Hallo Johann,

vielen Dank für die Antwort und den Tip. Irgendwie hatte ich padding-left schon mal in meine Versuche mit einbezogen, daber wahrscheinlich war da an anderer Stelle (im umfangreicheren Code) ein Wurm drin, so dass ich's dann wieder außer acht ließ.

Viele Grüße und ein gutes Hinüberkommen nach 13

Mike_R

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