Autor |
Nachricht |
m.meinen
Threadersteller
Dabei seit: 24.04.2003
Ort: Spielplatz
Alter: 38
Geschlecht:
|
Verfasst Do 16.03.2006 14:57
Titel [css] Problem mit Navigation (solved) |
|
|
Hallo,
ich weiß, es gibt schon hunderte Fragen zu css-Navigationen, aber irgendwie habe ich trotzdem keine Lösung für mein Problem gefunden.
Ich versuche gerade eine Navigation zu erstellen, bei der die (Rollover)-Buttons nebeneinander angeordnet sein sollen und alle eine Breite von 175 px haben sollen. Genau da liegt mein Problem. Mit dem Internet-Explorer sieht es so aus, wie ich es haben wollte. Opera und Firefox ignorieren die Angabe "width" und ich weiß nicht warum.
Hier der Code meines Ansatzes:
HTML:
Code: |
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>CSS-Navigation</title>
<link href="style_neu.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<ul class="navipunkt">
<li><a href="#">Home</a></li><li><a href="#">Kontakt</a></li><li><a href="#">Impressum</a></li>
</ul>
</body>
</html> |
und die CSS:
Code: |
body { background-color: #fafad2 }
ul.navipunkt { list-style-type: none }
.navipunkt li { display: inline }
.navipunkt li a
{
background-image: url("Buttons.jpg");
background-repeat: no-repeat;
background-position: 0 0;
text-align: center;
width: 175px;
height: 22px
}
.navipunkt li a:hover { background-position: 0 -39px }
|
Wenn ich display auf block setze, wird zwar der gesamte Button angezeigt, aber dann bekomme ich sie ja nicht mehr nebeneinander.
Ich hoffe, ich habe keinen alten Thread übersehen, der die Frage schon beantwortet.
Danke und Gruß
M.
Zuletzt bearbeitet von m.meinen am Do 16.03.2006 19:25, insgesamt 2-mal bearbeitet
|
|
|
|
|
Doppelplusgut
Dabei seit: 06.10.2005
Ort: Zimmer 101
Alter: 55
Geschlecht:
|
Verfasst Do 16.03.2006 15:11
Titel
|
|
|
So sollte es eigentlich klappen:
Code: | .navipunkt li a { float:left; background-image: url("Buttons.jpg"); background-repeat: no-repeat; background-position: 0 0; text-align: center; width: 175px; height: 22px } |
|
|
|
|
|
Anzeige
|
|
|
m.meinen
Threadersteller
Dabei seit: 24.04.2003
Ort: Spielplatz
Alter: 38
Geschlecht:
|
Verfasst Do 16.03.2006 15:16
Titel
|
|
|
Es Funktioniert!
Ich sitze schon seit Stunden an dem Problem.
Vielen Dank
M.
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 16.03.2006 15:16
Titel
|
|
|
float:left haste wohl vergessen,
und display:block; Den backgroud
hab ich eben mal rausgekickt.
So dürfte es funken.
BODY {
background-color: #fafad2
}
UL.navipunkt {
list-style-type: none;
padding: 0px;
margin: 0px;
}
UL.navipunkt LI {
padding: 0px;
margin: 0px;
float:left;
}
UL.navipunkt LI A {
background: red;
display: block;
text-align: center;
width: 175px;
height: 22px;
}
UL.navipunkt LI A:hover {
background: green;
}
//edit: ja herrschaftszeitennochamoi, bin einfach zu langsam
Zuletzt bearbeitet von Raumwurm am Do 16.03.2006 15:17, insgesamt 1-mal bearbeitet
|
|
|
|
|
m.meinen
Threadersteller
Dabei seit: 24.04.2003
Ort: Spielplatz
Alter: 38
Geschlecht:
|
Verfasst Do 16.03.2006 15:21
Titel
|
|
|
Trotzdem vielen Dank Raumwurm. Beim nächsten mal bist DU bestimmt wieder schneller
Zuletzt bearbeitet von m.meinen am Do 16.03.2006 15:22, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Problem mit Navigation
[CSS] Problem mit Navigation
CCS Problem in der Navigation mit IE
IE Problem mit CSS Navigation
Problem mit der Navigation (like otto)
problem mit listen navigation
|
|