tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
409
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 20.05.11 12:22 #1
    rizzoo rizzoo ist offline Rookie
    Registriert seit
    May 2011
    Beiträge
    8
    Hallo Liebes Forum,

    also ich bin nicht der absolute Crack mit CSS, aber meistens bekomme ich es irgendwie hin!

    Aber nun, weiß ich nicht weiter:
    Ich habe mir ein FLYOUT-Navigations-Menu gebaut (mit großer Hilfe hier ausm Forum und über andre Seiten).
    Nun habe ich den Links/Seiten, auf der der User sich befindet, ist mit der ID=Currenrt verpasst. Sie werden nun auch farblich anders dargstellt. Allerdings schaffe ich es nicht, dass das FLYOUT-MENU auch sichtbar bleibt (ohne dass man mit der Maus drüber hovert).

    Ich bekomms leider nicht hin, und dachte vielleicht kann mir hier jemand helfen

    Also hier mal CSS:
    Code :
    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

    #container {
    width:695px;
    padding:0px;
}
#menu {
    font-family: "News Gothic MT", Helvetica, Arial, sans-serif;
    width:120px;
    position:relative;
    margin:0;
    font-size:10px;
}
#menu ul li a, 
#menu ul li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    width:120px;
    border-width:0px 0px 1px 0;
    background:#fff;
    font-size:10px;
    padding-left:10px;
    height: 15px;
    line-height: 15px;
}
#menu ul {
    padding:0; 
    margin:0;
    list-style-type: none;
}
#menu ul li {
    float:left;
    position:relative;
    border-bottom: solid #000 thin;
}
#menu ul li ul {display: none;}
 
#menu table {border-collapse:collapse; border:0; margin:0; padding:0;}
 
#menu ul li:hover a,
#menu ul li a:hover {
    color:#000000;
    border-bottom: solid #000 thin;
}
 
#menu ul li:hover ul,
#menu ul li a:hover ul {display:block; position:absolute; top:0; left:130px; width:565px; background: transparent;}
 
#menu ul li:hover ul li,
#menu ul li a:hover ul li {float:left;}
 
#menu ul li:hover ul li a,
#menu ul li a:hover ul li a {display:block; color:#999999; width:130px; float:left;}
 
#menu ul li:hover ul li a.sub,
#menu ul li a:hover ul li a.sub {color:#000;}
 
#menu ul li:hover ul li a:hover,
#menu ul li a:hover ul li a:hover {color:#000;}
 
#menu ul li:hover ul li ul,
#menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; width:200px;}
 
#menu ul li:hover ul li:hover ul,
#menu ul li a:hover ul li a:hover ul {visibility:visible; left:-1px; top:31px; color:#000;}
 
#menu ul li:hover ul li:hover ul li a,
#menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; color:#000; border-left:1px solid #eee;}
 
#menu ul li:hover ul li:hover ul li a:hover,
#menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
 
#menu ul li a#current, 
#menu ul li a#current:link,
#menu ul li ul a#current,
#menu ul li ul a#current:link
{
    color: #000000;
    cursor: default;
    font-weight: bold;
    border-bottom: 1px solid #000;
    visibility:visible;
    display:block
}
 
#menu ul li a#current:hover
{
    border-bottom: 1px solid #000;
    color: #000000;
}

    Und hier die html:

    Code :
    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

    <div id="navcontainer">
            <div id="menu"><ul>
            <li id="active"><a href="vita.html" title="VITA" id="current">V I T A<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="vita_basics.html" title="BASICS">B A S I C S</a></li>
        <li id="active"><a href="vita_theater.html" title="THEATER" id="current">T H E A T E R</a></li>
        <li><a href="vita_film.html" title="FILM">F I L M</a></li>
        <li><a href="vita_sprache.html" title="AUDIO">S P R A C H E</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="demo.html">D E M O S
      <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="demo_film.html" title="FILM">F I L M</a></li>
        <li><a href="demo_audio.html" title="AUDIO">A U D I O</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="photos.html">P H O T O S <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="photos_portrait.html" title="PORTRAITSPHOTOS">PORTRAITS</a></li>
 
        <li><a href="photos_theater.html" title="THEATERPHOTOS">THEATER</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="kontakt.html">K O N T A K T <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    </ul>
</div>
    </div>

    Da vor allem in der html sicher Fehler drinnen sind, wäre ich froh über Hinweise

    Danke schon mal

    LG
    *R
     
    Zitieren Zitieren
  2. 23.05.11 18:09 #2
    rizzoo rizzoo ist offline Rookie
    Registriert seit
    May 2011
    Beiträge
    8
    Kann mir keiner helfen?

     
    Zitieren Zitieren
« CSS 3-Darstellungsfehler | <div> an der richtigen Stelle positionieren »

Ähnliche Themen

  1. vertikales flyout
    Von whiterussian im Forum CSS
    Antworten: 4
    Letzter Beitrag: 19.11.07, 13:58
  2. Flyout Menu für IE 5.5 und 6.0
    Von zempsit im Forum CSS
    Antworten: 2
    Letzter Beitrag: 14.12.06, 20:25
  3. Flyout menu
    Von Peter Klein im Forum CSS
    Antworten: 2
    Letzter Beitrag: 29.05.06, 21:51
  4. css list (navigation)... current?
    Von Apfelkuchen im Forum CSS
    Antworten: 7
    Letzter Beitrag: 14.11.05, 10:49
  5. key und current
    Von Wolfsbein im Forum PHP
    Antworten: 4
    Letzter Beitrag: 04.12.02, 14:16