Web Analytics Made Easy -
StatCounter Need help to get a special menu W3C conform - CodingForum

Announcement

Collapse
No announcement yet.

Need help to get a special menu W3C conform

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need help to get a special menu W3C conform

    Hi everyone,

    I hope you can give me some tips how I can solve the last problem, which delays me finishing my website. I've created a simple version of my current div menu for this forum. I want to get this W3C conform/valid html.


    index.html
    Code:
    <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>
    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);
    }
    I try to explain my requirements:
    As you can see I have two divs side by side. Every div has a menu text at its bottom. Both, the div and the menu text are together a hyperlink. If you go mouseover the first div, it expands to the size of the second div and shows a background-picture. You can still mouseover the second div, even when the first div is expanded.

    I know, <a href=" is not allowed arround a div. My current attempt to realize the upper menu with list styles:


    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;
    }
    Last edited by VIPStephan; Nov 25, 2018, 04:14 PM. Reason: removed link

  • #2
    Hello,
    What you're trying to do is called a disjointed rollover. Typically you position your links and hide your rolled image in span tags that become visible on hover. Pretty easy once you've done one...
    have a look at this -
    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, sans-serif;
    background: #fc6;
    }
    * {
    margin: 0;
    padding: 0;
    border: 0px;
    }
    #menuArea{
    width: 490px;
    border-top: 1px solid #fc6; /*use this to avoid UNcollapsing margin*/
    overflow: auto; /*clears the floats*/
    margin: 40px auto 20px auto;
    background: #8facdf;
    position: relative;
    }
    #bg1, #bg2 {
    width: 245px;
    height: 30px;
    margin: 490px 0 5px;
    display: block;
    line-height: 30px;
    text-align: center;
    }
    #bg1 {
    float: left;
    background: #000;
    }
    #bg2 {
    margin-left: 245px;
    background: #444
    }
    #bg1 span, #bg2 span {display: none;}
    #bg1:hover span, #bg2:hover span{
    width: 490px;
    height: 490px;
    position: absolute;
    top: 0px;
    left: 0;
    display: block;
    }
    </style>
    </head>
    <body>
        <div id="menuArea">
                <a href="#" id="bg1">Menu 1<span><img src="http://echizen.ec.funpic.de/example/bg1.jpg" alt="sky" width="490" height="490" /></span></a>
                <a href="#" id="bg2">Menu 2<span><img src="http://echizen.ec.funpic.de/example/bg2.jpg" alt="sky" width="490" height="490" /></span></a>
        <!--end menuArea--></div>
    </body>
    </html>
    Some things to know about that are used in this layout:
    Last edited by VIPStephan; Aug 11, 2021, 05:09 PM. Reason: removed personal info
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      I just noticed that bg2.jpg is a different size than bg1.jpg.
      You can fix that easily, just seperate the two :hover spans and style them to fit their specific image.
      Remember to fix the sizes of the images in the markup too.
      Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
      Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

      Comment


      • #4
        Thank you very much! :-)

        But there's one thing I don't understand now. After seeing your example I just changed "<div class="text ..." to "<span class="text ..." and in the CSS i added to ".text..." display: block. Now it seems like it's working how I want it and it's w3c conform. I don't use your overflow etc. at all, I just changed div to span and added display:block. If you see anything in my version which I definetly shouldn't do, please tell me.

        Another thing, in your version the "area" arround the div is not a hyperlink, only the menu-text at the bottom.

        If you have any idea to make a version with list style (ul li ...) please tell me.


        index3.html
        Code:
        <div id="menuArea">
            <div id="bg1">
                <a href="#"><[B][U]span id[/U][/B]="text1">Menu 1</[B][U]span[/U][/B]></a>
            </div>
            <div id="bg2">
                <a href="#"><[B][U]span id[/U][/B]="text2">Menu 2</[B][U]span[/U][/B]></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{
            [B][U]display: block;[/U][/B]
            margin-top: 454px;
            padding: 6px;
        }
        
        #text1{
            background: #000;
        }
        
        #text2{
            background: #333;
        }
        Last edited by VIPStephan; Nov 25, 2018, 04:16 PM. Reason: removed link

        Comment


        • #5
          I put demos of both versions up at http://nopeople.com/CSS/disjointed_rollover/index.html

          I like your approach, I'll study it more later to see if I can get it a little more stable in IE8.
          The only thing I saw was you seem to be vertically centering the .text1 and 2 with padding. A single line of text centers easily with line-height too.
          Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
          Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

          Comment


          • #6
            I don't see any problems in IE8. I optimized the version a little more.
            Last edited by user75527; Apr 13, 2009, 04:47 AM.

            Comment


            • #7
              @Excavator
              I still would like to see a version of index3 with list-style. Any ideas?

              Comment

              Working...
              X