LINK um ein "Horizontales CSS Rollover Menu inkl. weiterem DIV"

SnakeSnoke

Hallo zusammen,

ich hoffe ihr könnt mir weiterhelfen. Meine Webseite ist so gut wie fertig gestellt, einzig meine "Menü-Struktur" bekomme ich bisher nicht W3C konform.

Wie ich mittlerweile weiß, ist ein Link um ein Div nicht erlaubt (<a href="#“><div>text</div></a>). Aus diesem Grund habe ich mir schon einige Horizontal CSS Rollover Menu Beispiele angeschaut, die mit ul li ol ... Wege aufzeigen um das Problem zu lösen - auch hier im Forum.

Mein Menü unterscheidet sich gegenüber den gefundenen Beispielen.
Kompliziert ausgedrückt: Zwei Divs nebeneinander, bei Rollover wächst das erste Div auf die Größe des zweiten Divs daneben (das zweite Div wird dabei überdeckt, beide Divs beinhalten einen weiteren Div mit Text und Hintergrundfarbe ganz unten, Div und Beschreibung sollen zusammen einen vollwertigen Link bilden, beide Divs haben beim Rollover ein Hintergrundbild

Da es mir schwer fällt es näher zu beschreiben, habe ich für das Forum eine simple abgespeckte Variante meiner Seite erstellt.

Mal abgesehen von der W3C-Konformität, freue ich mich auch über weitere Empfehlungen mit Begründungen (z.B. sollte ich noch ein ein position: absolute, display:block, oder Ähnliches einbauen, z.B. beim überlappenden Div?)

Link zur Webseite

index.html

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>My CSS Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menuArea">
    <div id="bg1">
        <a href="#"><div class="text1">Menu 1</div></a>
    </div>
    <div id="bg2">
        <a href="#"><div class="text2">Menu 2</div></a>
    </div>
</div>
</body>
</html>

Alles anzeigen

style.css

Code

body{
    font: 12px tahoma, sans-serif;
}


img{
    border: 0px;
}


a:link, a:visited{
    color: #fff;
    text-decoration: none;
}


a:hover, a:active{
    font-weight: bold;
}


.text1, .text2{
    margin-top: 454px;
    padding: 8px;
}


.text1{
    background: #000;
}


.text2{
    background: #444;
}


#menuArea{
    background: #8facdf;
    height: 490px;
    margin: 40px auto 20px auto;
    width: 490px;
}


#bg1 a, #bg2 a{
    height: 490px;
    position: absolute;
    width: 245px;
}


#bg2 a{
    margin-left: 245px;
}


#bg1 a:hover{
    background: url(bg1.jpg);
    width: 490px;
}


#bg2 a:hover{
    background: url(bg2.jpg);
}

Alles anzeigen

Elvis

Hallo und herzlich Willkommen im Forum!

Mit absoluten Positionierungen hab ich mich noch nie beschäftigt, aber eins fällt bei dem Beispiel deutlich auf:

Die Verwendung das Tags <div> scheint Dir nicht richtig bekannt zu sein.
Warum benutzt Du nicht, wie es richtig wäre, eine Liste?

thilda

Wenn ich das richtig sehe, hast du ja schon fast alles was du möchtest.
Das einzige ist das überlappen. Da könnte man zb mit z-index arbeiten.
Habe ich persönlich noch nicht wirklich mit gearbeitet. aber kommt mir spontan in den sinn.

Unregistriert

Hallo,

danke für die erste Antwort. Ich denke schon dass ich mich mit Divs mittlerweile gut auskenne. Mein Problem ist, dass ich diese Art der Menüstruktur nicht als Liste hinbekommen habe. Falls jemand eine Idee hat wie man das damit W3C konform realisieren kann, dann wäre ich sehr dankbar.

SnakeSnoke

(Bitte den vorrigen Post löschen, ich war anscheinend nicht eingeloggt.)

Elvis
Danke für die erste Antwort. Ich denke schon dass ich mich mit Divs mittlerweile gut auskenne. Mein Problem ist, dass ich diese Art der Menüstruktur nicht als Liste hinbekommen habe. Falls jemand eine Idee hat wie man das damit W3C konform realisieren kann, dann wäre ich sehr dankbar.

thilda
z-index wird glaube ich nicht benötigt, weil ich den Text des zweiten Menüs nicht überdecken will - dann könnte ich dort mit der Maus nicht über den Bereich fahren, wenn das erste Div ausgeklappt ist. Die Ansicht ist bereits exakt wie ich es haben will. Es geht mir einzig darum es nun W3C konform zu bekommen - ohne JavaScript.

Elvis

Das glaube ich nicht, denn ein DIV-Container dient lediglich der strukturierten Formatierung und nicht der Formatierung einzelner Hyperlinks. Diese sollte man mit entsprechenden Klassen layouten.

Ob nun die IDs bg1 und bg2 überflüssig sind, kann man erst am kompletten Aufbau der Seite erkennen.

SnakeSnoke

Ich habe es erneut via Liste probiert:

Link zur Webseite

index2.html

Code

<div id="menuArea">
    <ul id="menuList">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
    </ul>
</div>

style2.css

Code

body{
    font: 12px tahoma, sans-serif;
}


img{
    border: 0px;
}


#menuArea{
    background: #8facdf;
    height: 528px;
    margin: 40px auto 20px auto;
    width: 490px;
}


ul#menuList{
    margin: 0px;
    padding: 0px;
}


#menuList li{
    list-style-type: none;
}


#menuList a{
    display: block;
    float: left;
    height: 24px;
    padding-left: 20px;
    padding-top: 498px;
    width: 225px; 
}


#menuList a:link, #menuList a:visited{
    color: #fff;
    text-decoration: none;
}


#menuList a:hover
{
    background: #000 url(bg1.jpg) no-repeat;
    color: #fff;
    font-weight: bold;
}

Alles anzeigen

Nochmal, was ich nicht hinbekomme:

- Bei Mouseover soll Menu 1 auf die Größe von Menu 2 wachsen, so dass man das vollständige Hintergrundbild beim Mouseover erst sehen kann. Menu2 soll zwar dabei überdeckt werden, jedoch nicht der Text "Menu 2" - so dass man weiterhin mit Mouseover auch bei ausgeklappten Menu 1 auf Menu 2 gehen kann. (siehe Beispiel im ersten Post)

- Die Hintergrundfarbe vom Menu-Text soll auch ohne Hover vorhanden sein, aber nur unten, nicht im ganzen Div. Da ich keine Divs dort einbauen darf, bräuchte ich im Li ein weiteres Listenelement das ich mit CSS definieren kann. Ist das möglich?

SnakeSnoke

Neuer Ansatz.

"<div class="text ..." in "<span class="text ..." geändert und in der CSS bei ".text..." display: block hinzugefügt. Jetzt ist es Valid W3C HTML / CSS.

Weblink zur neuen Version

index3.html

Code

<div id="menuArea">
    <div id="bg1">
        <a href="#"><[U][B]span id[/B][/U]="text1">Menu 1</[U][B]span[/B][/U]></a>
    </div>
    <div id="bg2">
        <a href="#"><[U][B]span id[/B][/U]="text2">Menu 2</[U][B]span[/B][/U]></a>
    </div>
</div>

style3.css

Code

body{
    font: 12px Tahoma, Verdana, Arial, sans-serif;
}


a:link, a:visited{
    color: #fff;
    text-decoration: none;
}


a:hover, a:active{
    font-weight: bold;
}


#menuArea{
    background: #8facdf;
    height: 490px;
    margin: 40px auto 20px auto;
    width: 490px;
}


#bg1 a, #bg2 a{
    height: 490px;
    position: absolute;
    width: 245px;
}


#bg2 a{
    margin-left: 245px;
}


#bg1 a:hover{
    background: url(bg1.jpg);
    width: 490px;
}


#bg2 a:hover{
    background: url(bg2.jpg);
}


#text1, #text2{
    [U][B]display: block;[/B][/U]
    margin-top: 454px;
    padding: 6px;
}


#text1{
    background: #000;
}


[U][B]#text2[/B][/U]{
    background: #333;
}

Alles anzeigen

Bedenken oder Verbesserungsvorschläge?

sejuma

Ich habe mich jetzt nicht näher mit deinem Code auseinandergesetzt.
Aer sieh mal, ob dir vielleicht dies weiterhilft.

SnakeSnoke

Danke für den interessanten Link.

Sobald ich versuche meine Anforderung via ähnlichem List-Style vom genannten Beispiel zu realisieren, endet es so:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My CSS Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
    font: 12px Tahoma, Verdana, Arial, sans-serif;
}


ul.menu{
    list-style-type: none;
    width: 490px;
    margin: 40px auto 20px auto;
    padding: 0px;
}


li.menu1, li.menu2{
    background: #8facdf;
    float: left;
    height: 1%;
    width: 245px;
}


li.menu1:hover{
    background: url(bg1.jpg);
    width; 490px;
}


li.menu2:hover{
    background: url(bg2.jpg);
}


a.menu:link, a.menu:visited{
    color: #fff;
    display: block;
    height: 490px;
    text-decoration: none;
}


a.menu:hover, a.menu:active{
    font-weight: bold;
}


#menuText1, #menuText2{
    display: block;
    margin-top: 454px;
    padding: 6px;
}


#menuText1{
    background: #000;
}


#menuText2{
    background: #333;
}
</style>
</head>
<body>
<ul class="menu">
    <li class="menu1">
        <a class="menu" href="#">
            <span id="menuText1">Menu 1</span>
        </a>
    </li>
    <li class="menu2">
        <a class="menu" href="#">
            <span id="menuText2">Menu 1</span>
        </a>
    </li>
</ul>
</body>
</html>

Alles anzeigen

Kein Vergleich zu meiner fertigen index3-Variante.

Tags