Ergebnis 1 bis 10 von 10

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

  1. #1
    HTML Newbie
    Registriert seit
    09.04.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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
    Code:
    <!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>
    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);
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

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

    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?

  3. #3
    Meister(in)
    Registriert seit
    27.03.2009
    Ort
    Berlin
    Beiträge
    278
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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.

  4. #4
    Unregistriert
    Gast

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

    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.

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    09.04.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    (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.
    Geändert von SnakeSnoke (09.04.2009 um 12:05 Uhr)

  6. #6
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

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

    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.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    09.04.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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;
    }
    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?
    Geändert von SnakeSnoke (13.04.2009 um 11:32 Uhr)

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    09.04.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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="#"><span id="text1">Menu 1</span></a>
        </div>
        <div id="bg2">
            <a href="#"><span id="text2">Menu 2</span></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{
        display: block;
        margin-top: 454px;
        padding: 6px;
    }
    
    #text1{
        background: #000;
    }
    
    #text2{
        background: #333;
    }
    Bedenken oder Verbesserungsvorschläge?
    Geändert von SnakeSnoke (13.04.2009 um 11:46 Uhr)

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

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

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    09.04.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    Danke für den interessanten Link.

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

    Code:
    <!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>
    Kein Vergleich zu meiner fertigen index3-Variante.
    Geändert von SnakeSnoke (14.04.2009 um 10:33 Uhr)

Ähnliche Themen

  1. "Eine Seite zurück"-Link
    Von Manfred3456 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 07.11.2008, 11:41
  2. Link "Zurück zur Übersicht"
    Von Rolf19740 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 04.05.2006, 12:33
  3. Antworten: 9
    Letzter Beitrag: 07.09.2005, 10:37
  4. Suche einen "Link"
    Von noname im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.06.2004, 15:39
  5. Link mit "doppel Laden"
    Von Holger S. im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.11.2003, 15:27

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •