tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
910
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 24.03.06 14:35 #1
    emonem emonem ist offline Mitglied Gold
    Registriert seit
    Apr 2005
    Ort
    Bottrop
    Beiträge
    136
    Hi,

    baue grad ein vertikales CSS Menu welches mittels der Pseudoklasse :hover ein anderen Background anzeigt wenn man auf einen Button geht.
    Klappt auch bis dahin. Hab jetzt aber das Problem das im IE freiräume zwischen den Buttons sind.Im Firefox sieht es dagegen normal aus.
    Ist mein CSS Code irgendwo falsch?
    Vielleicht weiß jemand rat.
    Hier ist der link zu der Page
    CSS Code:
    PHP-Code:
    #navi li a { 
    width: 200px; 
    height: 40px; 
    display: block; 
    } 

    #navi li { 
    list-style:none; 
    width: 200px; 
    } 

    #navi li a:hover { 
    background-image: none; 
    background: transparent; 
    } 

    span { 
    display:none; 
    } 

    a#navi_1_norm { 
    background-image: url('_images/news.jpg'); 
    } 

    a#navi_2_norm { 
    background-image: url('_images/reviews.jpg'); 
    } 

    a#navi_3_norm { 
    background-image: url('_images/music.jpg'); 
    } 

    a#navi_4_norm { 
    background-image: url('_images/lyrics.jpg'); 
    } 

    #navi_1_hover { 
    background-image: url('_images/news2.jpg'); 
    } 

    #navi_2_hover { 
    background-image: url('_images/reviews2.jpg'); 
    } 

    #navi_3_hover { 
    background-image: url('_images/music2.jpg'); 
    } 

    #navi_4_hover { 
    background-image: url('_images/lyrics2.jpg'); 
    } 
    Html Code:
    PHP-Code:
    <div id="navi">
      <    ul>
        <    li id="navi_1_hover"><a  id="navi_1_norm" href="#" title="News"><span>News</span></a></li>
        <    li id="navi_2_hover"><a  id="navi_2_norm" href="#" title="Reviews"><span>Reviews</span></a></li>
        <    li id="navi_3_hover"><a  id="navi_3_norm" href="#" title="Music"><span>Music</span></a></li>
        <    li id="navi_4_hover"><a  id="navi_4_norm" href="#" title="Lyrics"><span>Lyrics</span></a></li>
      </    ul>
    </    div> 
    Wie krieg ich dann noch das Menu Horizontal Ausgerichtet?(Buttons nebeneinander statt untereinander)
    Danke und Gruß
     
  2. 24.03.06 16:06 #2
    Avatar von MasterEvil
    MasterEvil MasterEvil ist offline Mitglied Gold
    Registriert seit
    Feb 2004
    Ort
    Templin
    Beiträge
    137
    Das liegt an dem SPAN-Block der erzeugt komischerweise einen Abstand unter dem Listenobjekt. Verursacht wird das durch das display: none; wenn du stattdessen visibility: hidden; nimmst dann funktioniert es auch im IE.
     
  3. 24.03.06 16:24 #3
    Maik Tutorials.de Gastzugang
    Zitat Zitat von emonem
    Wie krieg ich dann noch das Menu Horizontal Ausgerichtet?(Buttons nebeneinander statt untereinander)
    Danke und Gruß
    Die CSS-Regel für eine horizontal ausgerichtete Liste lautet:

    Code css:
    1
2
3

    li {
display: inline;
}
    In deinem Fall greift die Regel aber nicht auf Anhieb, da für die Links durch display:block der Block-Level-Charakter bestimmt wurde, was sie untereinander anordnet und die Liste weiterhin vertikal ausrichtet.

    Es bedarf der Ergänzung float:left, damit sie vom nachfolgenden Element umflossen werden:

    Code css:
    1
2
3
4
5
6
7
8
9
10
11

    #navi li {
display: inline;
}
 
#navi li a {
width: 200px;
height: 40px;
display: block;
float: left;
text-decoration: none;
}

    Nun wird die Liste horizontal ausgerichtet, aber die hover-Grafiken werden in keinem Browser mehr angezeigt!

    Hier ein 'konventioneller' Lösungsvorschlag, um die Hintergrundgrafiken zu tauschen:
    • Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000
    Code css:
    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

    #navi li a {
width: 200px;
height: 40px;
display: block;
float: left;
text-decoration: none;
}
 
#navi li {
list-style: none;
display: inline;
width: 200px;
height: 40px;
}
 
span {
visibility: hidden;
}
 
a#navi_1:link, a#navi_1:visited {
background-image: url('_images/news.jpg');
}
 
a#navi_1:hover {
background-image: url('_images/news2.jpg');
}
 
a#navi_2:link, a#navi_2:visited{
background-image: url('_images/reviews.jpg');
}
 
a#navi_2:hover {
background-image: url('_images/reviews2.jpg');
}
 
a#navi_3:link, a#navi_3:visited {
background-image: url('_images/music.jpg');
}
 
a#navi_3:hover {
background-image: url('_images/music2.jpg');
}
 
a#navi_4:link, a#navi_4:visited {
background-image: url('_images/lyrics.jpg');
}
 
a#navi_4:hover {
background-image: url('_images/lyrics2.jpg');
}
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="navi">
  <ul>
    <li><a id="navi_1" href="#" title="News"><span>News</span></a></li>
    <li><a id="navi_2" href="#" title="Reviews"><span>Reviews</span></a></li>
    <li><a id="navi_3" href="#" title="Music"><span>Music</span></a></li>
    <li><a id="navi_4" href="#" title="Lyrics"><span>Lyrics</span></a></li>
  </ul>
</div>
</body>
</html>
     
  4. 24.03.06 20:02 #4
    emonem emonem ist offline Mitglied Gold
    Registriert seit
    Apr 2005
    Ort
    Bottrop
    Beiträge
    136
    Hi,
    danke für die hilfe, jetzt klappt es.
    Allerdings hab ich noch ein Problem mit der Ausrichtung.
    Hab dieses hier als Menuhintergrund eingefügt.
    PHP-Code:
    #navi {
    width:900px;
    height:40px;
    background-color:green;
    } 
    Man sieht hier das das Menu links nicht bündig abschließt obwohl
    float:left; eingetragen wurde. Wenn ich dagegen float:right wähle dann schließt das Menu
    an der rechten seite ab.
    Wie kann ich diesen Schönheitsfehler beheben?
     
  5. 24.03.06 20:08 #5
    Maik Tutorials.de Gastzugang
    Füge im Stylesheet noch folgende Regel für die Liste ein:

    Code css:
    1
2
3
4

    #navi ul {
margin: 0;
padding: 0;
}
     
« Aufzählungen schachteln mit "Kapitel"-Nummerierung | Boxen anordnen »

Ähnliche Themen

  1. Vertikale Ausrichtung in horiz. Navigation
    Von Fanatico im Forum CSS
    Antworten: 5
    Letzter Beitrag: 08.07.09, 20:17
  2. horiz. Hovermenü: IE zickt rum
    Von MonGol1992 im Forum CSS
    Antworten: 4
    Letzter Beitrag: 05.03.08, 14:23
  3. Tutorial für horiz. Bilderslideshow
    Von medico im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 01.04.07, 16:43
  4. Horiz. Bildlauf
    Von kerian im Forum VisualStudio & MFC
    Antworten: 0
    Letzter Beitrag: 05.12.03, 08:39
  5. text vertikal und horiz schnell scrollen
    Von begbie im Forum Flash Plattform
    Antworten: 3
    Letzter Beitrag: 29.10.03, 11:49