XHTML menu correction 1

selenus · Apr 11, 2004

1. I find a pair of menus which approach my needs, I just copied code from some web source. Here is one problem: probably, some of code components between <style> tags belong to anothers site elements, not to this menu directly, and they just not necessary, I'm not sure.(it was a complex site). I am not a huge html/css expert, so probably someone could look at code between <style> tags and correct some if necessary. The code between <div> tags is correct, of cource.

2. What the corrections necessary to leave only horizontal menu from the menu2?

Menu-1

Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>

<title> Sample </title>

<link rel="stylesheet" media="all" type="text/css" href="../style/s7u.css" />
<style type="text/css">

#menu {position:relative; margin-top:20px; left:5px; display:block; background:#fff;}

#menu .tab {position:relative; top:0; left:0;}
#menu a:visited {display:block; width:120px; height:18px; border:1px solid #000; margin-bottom:-1px; background-color:#f8f8e8; color:#000; padding-left:3px; border:1px solid #000; text-decoration:none;}
#menu a:visited span {position:absolute; left:130px; top:2px; width:0px; height:0px; border-left:8px solid #fff; border-top:8px solid #fff; border-bottom:8px solid #fff; overflow:hidden;}
#menu a {display:block; width:120px; height:18px; border:1px solid #000; margin-bottom:-1px; background-color:#f8f8e8; color:#000; padding-left:3px; border:1px solid #000; text-decoration:none;}
#menu a span {position:absolute; left:130px; top:2px; width:0px; height:0px; border-left:8px solid #fff; border-top:8px solid #fff; border-bottom:8px solid #fff; overflow:hidden;}
#menu a:hover {color:#fff; background-color:#65707b; border:1px solid #000; text-decoration:none;}
#menu a:hover span {position:absolute; left:130px; top:2px; width:0px; height:0px; border-left:8px solid #c00; border-top:8px solid #fff; border-bottom:8px solid #fff; overflow:hidden;}


</style>

</head>

<body>



<div id="menu">
		<div class="tab"><a href="#" title="">Item one<span></span></a></div>
		<div class="tab"><a href="#" title="">Item two<span></span></a></div>
		<div class="tab"><a href="#" title="">Item three<span></span></a></div>
		<div class="tab"><a href="#" title="">Item four<span></span></a></div>
		<div class="tab"><a href="#" title="">Item five<span></span></a></div>
</div>

</body>

</html>

Menu2

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>

<title> Sample </title>

<link rel="stylesheet" media="all" type="text/css" href="../style/s7u.css" />
<style type="text/css">

a.vmenu, a.vmenu:link, a.hmenu, a.hmenu:link, a.vmenu:visited, a.hmenu:visited {display:block; width:75px; height:25px; background:#ddd; color:#000; text-decoration:none; text-align:center; line-height:25px;}

a.hmenu, a.hmenu:link, a.hmenu:visited {float:left;}

a.hmenu:hover, a.vmenu:hover {background:#000; color:#fff;}
a.hmenu:active, a.vmenu:active {background:#c00; color:#fff;}

#menua {height:25px;}
.clr {clear:left;}

</style>

</head>

<body>	




<div id="menua">
				<a class="hmenu" href="#">Item 1</a>
				<a class="hmenu" href="#">Item 2</a>
				<a class="hmenu" href="#">Item 3</a>
				<a class="hmenu" href="#">Item 4</a>
				<a class="hmenu" href="#">Item 5</a>
				</div>
				<div class="clr"></div>
				<div id="menub">
				<a class="vmenu" href="#">Item 2</a>
				<a class="vmenu" href="#">Item 3</a>
				<a class="vmenu" href="#">Item 4</a>
				<a class="vmenu" href="#">Item 5</a>
				</div>

</body>
</html>

Vragabond · Apr 11, 2004

There's nothing wrong with the first code, or better said, all elements are needed. It is a pretty simple menu code. There's a couple of duplications which you can get rid of:

Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>

<title> Sample </title>

<link rel="stylesheet" media="all" type="text/css" href="../style/s7u.css" />
<style type="text/css">

#menu {
	position: relative;
	margin-top: 20px;
	left: 5px;
	display: block;
	background: #fff;
}

#menu .tab {
	position: relative;
	top: 0;
	left: 0;
}

#menu a {
	display: block;
	width: 120px;
	height: 18px;
	border: 1px solid #000;
	margin-bottom: -1px;
	background-color: #f8f8e8;
	color: #000;
	padding-left: 3px;
	border: 1px solid #000;
	text-decoration: none;
}

#menu a span {
	position: absolute;
	left: 130px;
	top: 2px;
	width: 0px;
	height: 0px;
	border-left: 8px solid #fff;
	border-top: 8px solid #fff;
	border-bottom: 8px solid #fff;
	overflow: hidden;
}

#menu a:hover {
	color: #fff;
	background-color: #65707b;
	border: 1px solid #000;
}

#menu a:hover span {
	border-left: 8px solid #c00;
}


</style>

</head>

<body>



<div id="menu">
        <div class="tab"><a href="#" title="">Item one<span></span></a></div>
        <div class="tab"><a href="#" title="">Item two<span></span></a></div>
        <div class="tab"><a href="#" title="">Item three<span></span></a></div>
        <div class="tab"><a href="#" title="">Item four<span></span></a></div>
        <div class="tab"><a href="#" title="">Item five<span></span></a></div>
</div>

</body>

</html>

The second without the bottom menu looks like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>

<title> Sample </title>

<link rel="stylesheet" media="all" type="text/css" href="../style/s7u.css" />
<style type="text/css">

a.hmenu {
	display: block;
	width: 75px;
	height: 25px;
	background: #ddd;
	color: #000;
	text-decoration: none;
	text-align: center;
	line-height: 25px;
	float: left;
}

a.hmenu:hover {
	background: #000;
	color: #fff;
}

a.hmenu:active {
	background: #c00;
	color: #fff;
}

#menua {
	height: 25px;
}

.clr {
	clear: left;
}

</style>

</head>

<body>    




<div id="menua">
  <a class="hmenu" href="#">Item 1</a>
  <a class="hmenu" href="#">Item 2</a>
  <a class="hmenu" href="#">Item 3</a>
  <a class="hmenu" href="#">Item 4</a>
  <a class="hmenu" href="#">Item 5</a>
</div>
<div class="clr"></div>

</body>
</html>

selenus · Apr 11, 2004

Just not clear in first menu, why it's not fix selected padding(color and pointer), when selected (the second menu fixes selected padding).
To be exact, I have looked at original of the first menu, it does not fix padding too.

Need I remove link <link rel="stylesheet" media="all" type="text/css" href="../style/s7u.css" /> , or I need replace it with my link?

This menus should be placed in external css file and a link on each page should refer on this external css?

Vragabond · Apr 11, 2004

The maintenance as well as code coherence is much better if you put in an external file. If you are using an external sheet, referenced in the link already you can either add the menu codes to that or create a separate .css file and add another <link /> with reference to that file.

I see no problems whatsoever with the padding.

selenus · Apr 11, 2004

The selected padding remains fixed in first menu?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

XHTML menu correction 1

selenus

MIS

Vragabond

Programmer

selenus

MIS

Vragabond

Programmer

selenus

MIS

Similar threads

Part and Inventory Search

Sponsor