Probleme mit Abständen
wrdx
- css
Hi, ich will mal vorweg sagen, dass ich erst 14 bin und angefangen habe, mich mit HTML und CCS zu beschäftigen. Dabei hat das Forum und die Seite eine sehr große Rolle gespielt.
Mein Problem:
Ich wollte eine Startseite mit Links für den Internet Explorer gestalten, da meine Mutter mit IE besser zurechtkommt. Es sollen immer zwei Links mit Abstand nebeneinander stehen und bei Mouseover sollen die Buchstaben auseinander gehen. Soweit, sogut. Aber mein Problem ist, dass ich 1. Den Abstand mit Leerzeilen ( ) gemacht habe und 2. der rechte Link sich nach rechts verschiebt, wenn man mit dem Kursor auf den Rechten geht (wegen letter-spacing). Ich habe den Quellcode stark vereinfacht, nur um das Problem darzustellen:
<html>
<head>
<title>Home</title>
<style type="text/css">
body { margin-left:100px; }
a:hover { color:#000000; text-decoration:none; letter-spacing:2px; font-style:italic }
a:active { color:#ffffff; background-color:#000000; }
</style>
</head>
<body>
<span style="font-size: 16pt; font-family: "Arial Black";">
<a href="http://www.google.de/">www.google.de</a> <a href="http://192.168.0.253/" class="router">Router(192.168.0.253)</a>
</span>
</body>
</html>
Bitte seid gnädig und verzieht nicht wegen den Leerzeilen das Gesicht (Ich weiß, dass es auch anders geht, aber das Problem, dass der rechte Link nach rechts verschoben wird, ändert sich damit auch nicht).
Kann mir jemand helfen?
mfg. Karsten
Entschuldigung, ich habe mich verschirben, natürlich bewegt sich der rechte Link nach rechts, wenn man mit dem Cursor auf den LINKEN geht.
Hallo wrdx
Aber mein Problem ist, dass ich 1. Den Abstand mit Leerzeilen ( ) gemacht habe
Das macht man auch nicht.
und 2. der rechte Link sich nach rechts verschiebt, wenn man mit dem Kursor auf den Rechten geht (wegen letter-spacing).
Selbsverständlich, wenn er breiter wird und du einen Abstand dazwischen (egal wie) festgelegt hat.
Kann mir jemand helfen?
Gib den Links mittels CSS ein [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float:]left;
(damit sie auch als CSS-Blockelement nebeneinander stehen) und eine passende Breite.
Auf Wiederlesen
Detlef