Menü verschiebt sich bei hover

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Menü verschiebt sich bei hover »

splinter263

Kaiser

Dabei seit: 08.08.2005

Beiträge: 1 001

Mittwoch, 29. Dezember 2010, 13:40

Hallo Community!
Ich bin gerade dabei eine Navigation für meine Website zu basteln, die mittels <ul> / <li> umgesetzt werden soll.
Soweit funktioniert es ganz gut: Beim hover Effekt soll ein border angezeigt werden ohne das sich der Text irgendwie verschiebt, das habe ich zusammengebracht.
Jetzt möchte ich aber auch für die aktiven Links, also auf dem Link auf dem ich mich gerade befinden auch so ein border ist, nur wenn ich das mit einer 2. Klasse probiere verschiebt sich immer der border und das ganze Menü verschiebt sich natürlich...
Könntet ihr mir da irgendwelche Hilfestellungen geben? Es sollte hald möglichst nur mit CSS umgesetzt werden, ohne Grafiken etc.

HTML:

HTML

<ul class="navigation">
		<li><a href="#" class="current_link">Home</a></li>
		<li><a href="#">&Uuml;ber mich</a></li>
		<li><a href="#">Fotos</a></li>
		<li><a href="#">Kontakt</a></li>
		<li><a href="#">Impressum</a></li>
	</ul>

CSS:

Spoiler
Cascading Style Sheet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/*	reset	*/
* {
	margin: 0;
	padding: 0;
}

/*	main	*/
@font-face {
    font-family: GraublauWeb;
    src: url("GraublauWeb.otf") format("truetype");
}
@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("GraublauWebBold.otf") format("truetype");
}

h1 {
	font-family: GraublauWeb, verdana,sans-serif;
}

h2 {
	font-family: GraublauWeb, verdana,sans-serif;
	font-weight: normal;
	letter-spacing: 1.8pt;		
}

h2:hover {
	color: gray;
}

body {
	background-color: #FFF;
}

.wrapper {
	width: 960px;
	margin: 0px auto;
	font-family: verdana,sans-serif;
	font-size: 12px;
	letter-spacing: 1.8pt;
	z-index: 2;	
}

.header {
	text-align: right;
	padding-top: 40px;
	padding-bottom: 5px; //5px
	margin-bottom: -20px;
	font-size: 30px;
	font-style: normal;
	color: #158DD8; 
}

.tiny {
	font-size: 14px;
	font-weight: normal;
	color: gray;
}

/*	navigation	*/
ul.navigation {
	font-family: GraublauWeb, verdana,sans-serif;
	padding-bottom: 21px;
	list-style-type: none;
	font-size: 14px;
	font-weight: bold;
}

ul.navigation li {
	float: left;
	padding-right: 10px;
}

ul.navigation li a {
	padding: 12px; //12
}

ul.navigation li a:hover {
	border-bottom: 1px solid;
	border-bottom-width: 2px;
	border-top: 1px solid;
	border-right: 1px solid;
	border-left: 1px solid;
	padding: 11px;
	border-color: gray;
	border-bottom-color: white;
}

.current_link {
	border-bottom: 1px solid;
	border-bottom-width: 2px;
	border-top: 1px solid;
	border-right: 1px solid;
	border-left: 1px solid;
	padding: 11px;
	border-color: gray;
	border-bottom-color: white;
}

.content {
	margin-top: 10px;
	padding: 10px;
	letter-spacing: 0pt;
	
	border: 1px solid;
	border-color: gray;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.footer {
	font-family: GraublauWeb, verdana,sans-serif;
	font-size: 9px;
	text-align: right;
	padding-top: 5px;
	padding-right: 5px;
}

/*	links	*/
a:link {
	text-decoration: none;
	color: #158DD8;
}

a:visited {
	text-decoration: none;
	color: #158DD8;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 014

Mittwoch, 29. Dezember 2010, 20:47

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}

@font-face {
font-family:GraublauWeb;
font-weight:700;
src:url(GraublauWebBold.otf) format(truetype);
}

h1 {
font-family:GraublauWeb, verdana,sans-serif;
}

h2 {
font-family:GraublauWeb, verdana,sans-serif;
font-weight:400;
letter-spacing:1.8pt;
}

h2:hover {
color:gray;
}

body {
background:#FFF;
}

.wrapper {
width:960px;
font-family:verdana,sans-serif;
font-size:12px;
letter-spacing:1.8pt;
z-index:2;
margin:0 auto;
}

.header {
text-align:right;
padding-top:40px;
padding-bottom:5px;
margin-bottom:-20px;
font-size:30px;
font-style:normal;
color:#158DD8;
}

.tiny {
font-size:14px;
font-weight:400;
color:gray;
}

.content {
margin-top:10px;
letter-spacing:0;
border:1px solid gray;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
/*border-color:gray;*/
padding:10px;
}

.footer {
font-family:GraublauWeb, verdana,sans-serif;
font-size:9px;
text-align:right;
padding-top:5px;
padding-right:5px;
}


ul.navigation {
font-family:GraublauWeb, verdana,sans-serif;
padding-bottom:21px;
list-style-type:none;
font-size:14px;
font-weight:700;
}

ul.navigation li {
float:left;
padding-right:10px;
}

ul.navigation li a {
padding:11px;
border:1px solid transparent;
border-bottom-width:2px;
}


ul.navigation li a:hover, .current_link {
border-color:gray gray #FFF !important;
}

a:link,a:visited {
color:#158DD8;
}

a:hover,a:active,a:link,a:visited {
text-decoration:none;
}
</style>
</head>
<body>
<ul class="navigation">
		<li><a href="#" class="current_link">Home</a></li>
		<li><a href="#">&Uuml;ber mich</a></li>
		<li><a href="#">Fotos</a></li>
		<li><a href="#">Kontakt</a></li>
		<li><a href="#">Impressum</a></li>
</ul>
</body>
</html>

Ich habs auch mal durchn CSS Tidy gehauen und selbst noch ein wenig übersichtlicher gestaltet.

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

splinter263

Kaiser

Dabei seit: 08.08.2005

Beiträge: 1 001

Donnerstag, 30. Dezember 2010, 02:04

Wow vielen Dank! Schaut sehr clean aus, und funktioniert jetzt auch so wie es sein sollte, vielen Dank!!

Jetzt kann ich endlich weiterarbeiten