...

View Full Version : Formatting problem



Juicy
01-13-2008, 07:05 PM
I am having trouble formatting some things. I have a series of menus in the upper left hand side of my page and after the last menu (which is "Contact") I want there to be a bar the same size (vertically) of the other menus that fills the rest of the top of the screen to the right of that last menu. I've tried various things and can't seem to get it. Also, I have an <hr> for a bar that goes underneath the menu and in firefox it appears directly underneath the menus as it should but in IE it's tottaly screwed. Code is here http://pastebin.com/m75703dc8

Any help is much appreciated.

Excavator
01-13-2008, 07:25 PM
bar the same size (vertically) of the other menus that fills the rest of the top of the screen to the right of that last menu

Hello Juicy, That's a little confusing...

If you want the lighter tan background of your menu to extend to the bottom of the page, you can also add a bar between the menu and content this way, have a look at faux columns (http://www.google.com/search?q=faux+columns&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a).

_Aerospace_Eng_
01-13-2008, 07:28 PM
I don't think faux columns are the best solution for this. I would do something like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menu Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#navhold {
background: #E0E0E0;
border-bottom:1px solid #999;
}
#dd {
padding: 0 0 20px 0;
}
#dd li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font: 11px arial;
}
#dd li ul li {
float:none;
}
#dd li a.menu {
display: block;
text-align: center;
background: #E0E0E0;
padding: 4px 10px;
margin: 0 1px 0 0;
color: #000;
text-decoration: none;
}
#dd li a.menu:hover {
background: #CCCCCC;
}
#dd li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
background: #EAEBD8;
border: 1px solid #000;
}
#dd li > ul {
top: auto;
left: auto;
}
#dd li:hover ul, #dd li.over ul {
display:block;
}
#dd li ul a {
display: block;
font: 11px arial;
text-align: left;
text-decoration: none;
padding: 5px;
color: #000;
}
#dd li ul a:hover {
background: #004BE2;
color: #FFF;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("dd");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<div id="navhold">
<ul id="dd">
<li><a href="#" class="menu">Home</a>
<ul>
<li><a href="#">HTML Tutorials</a></li>
<li><a href="#">DHTML Tutorials</a></li>
<li><a href="#">JavaScript Tutorials</a></li>
<li><a href="#">CSS Tutorials</a></li>
</ul>
</li>
<li><a href="#" class="menu">Download</a>
<ul>
<li><a href="#">ASP Scripts</a></li>
<li><a href="#">PHP Scripts</a></li>
<li><a href="#">Ajax Scripts</a></li>
<li><a href="#">Perl Scripts</a></li>
</ul>
</li>
<li><a href="#" class="menu">Order</a></li>
<li><a href="#" class="menu">Help</a></li>
<li><a href="#" class="menu" id="mmenu3">Contact</a>
<ul>
<li><a href="#">Office</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Shipping</a></li>
</ul>
</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>
BTW you don't need all of that js for a simple drop down menu. You just need a snippet for IE6. I also added a doctype which you didn't have. Not having one was likely the cause for IE not displaying the menu properly.

Juicy
01-13-2008, 07:32 PM
Thanks!

_Aerospace_Eng_
01-13-2008, 07:36 PM
I edited my post with a revised code. I forgot to check in IE but thats fixed now with the most recent code.

Juicy
01-13-2008, 07:43 PM
I edited my post with a revised code. I forgot to check in IE but thats fixed now with the most recent code.

Thanks. This helps a lot. U rule.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum