Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 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.

    Web-Link to the Menu

    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:

    Web-Link to new version of the Menu

    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 SnakeSnoke; 04-11-2009 at 12:45 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello SnakeSnoke,
    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 Excavator; 04-11-2009 at 06:25 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Weblink to newest 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;
    }
    Last edited by SnakeSnoke; 04-13-2009 at 10:48 AM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't see any problems in IE8. I optimized the version a little more.
    Last edited by SnakeSnoke; 04-13-2009 at 10:47 AM.

  • #7
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @Excavator
    I still would like to see a version of index3 with list-style. Any ideas?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •