Ideas on an alternative to the <nav> feature - MUST use XHTML Strict 1.0

StackOverflow https://stackoverflow.com/questions/16305580

  •  13-04-2022
  •  | 
  •  

题

doing a project at uni and I've completely misread the brief, used HTML5 in my project and realised that I'm not allowed to do this. Oops!

My only problem is, I've tried to convert it to XHTML Strict 1.0 standards by using divs and it just isn't as easy as I thought.

I will only post up the nav section as that's what I need help with, no need for all the extra bits and bobs.

Before I post - just wanted to clarify the question:

This code is HTML5 compliant, I need it to be XHTML Strict 1.0 compliant but I can't get the CSS working with divs in place of the nav function.

Here is the code:

<!DOCTYPE html> 
<head>
<link rel="stylesheet" type="text/css" href="style\main.css" />
<title>Wessex Round Table of Investors</title>
</head>
<body>
    <div id="whole">
        <div id="header">
        <img class="logo" src="images\wrtilogo.gif" alt="WRTI Logo" />
    </div>
     <div id="navbar">
        <div id="container">
            <nav id="menu">
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Link</a>
                    <ul>
                        <li><a href="#">Sublink</a></li>
                        <li><a href="#">Sublink</a></li>
                        <li><a href="#">Sublink</a></li>
                        <li><a href="#">Sublink</a></li>
                    </ul>
                </li>
                <li><a href="#">Link</a>
                    <ul>
                        <li><a href="#">Sublink</a></li>
                    </ul>
                </li>
                <li><a href="#">Link</a>
                    <ul>
                    <li><a href="#">Sublink</a></li>
                    </ul>
                </li>
                <li><a href="#">Link</a></li>
            </ul>
            </nav>  
        </div> 
    </div>
</div>
</body>
</html>

aaaand here is the CSS

div.whole {
margin-left: 15%;
margin-right: 15%   }

div.header  {
width: 100%;    }

div.navbar {
position: absolute;
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center }

img.logo {
display: block;
margin-left: auto;
margin-right: auto  }

#content

#footer

#navigation {
width: 800px;
margin: 30px auto;    
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
nav#menu {
margin: 10px 30px 30px;
padding: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
text-align: center; /*this is the first bit that centers the menu*/
font: 100%/40px Verdana, Geneva, sans-serif
}
nav#menu ul {margin: 0;}
nav#menu ul li {
    margin: 0;
    padding: 0;
    display: inline-block; /*this is the second bit that centers the menu*/
    position: relative;
    list-style: none;
    background: #fff;
}
    nav#menu ul li a {
        padding: 1px 20px;
        display: block;
        font-size: 17px;
        font-weight: 300;
        color: #cc0000;
        text-decoration: none;
    }
    nav#menu ul li:hover {background: #fff;}
        nav#menu ul ul {
            width: 160px;
            margin: 0;
            padding: 0;
            position: absolute;
            top: 42px;
            left: -999px;
            border: 1px solid #ccc;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 0 0 transparent;
        }
            nav#menu ul li:hover ul { /*this bit centers the dropped ul relative to the parent li*/
                margin: 0 0 0 -80px;
                left: 50%;
        }
nav#menu a:hover {color: #540000;}
有帮助吗？

解决方案

Often, you're using IDs in your HTML, but styling based on classes.

e.g. If you're going to say

div.navbar { 
  ...
}

That will apply to:

<div class="navbar">...</div>

not

<div id="navbar">...</div>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top