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
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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
    Tags: None
  • #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

              Previous template Next
              Working...
              X