CSS navigation alignment [Archive]

Click to See Complete Forum and Search --> : CSS navigation alignment

bsstweb

02-26-2008, 05:42 PM

I am working with the following code. I have the rollovers how I want them but I can't seem to bring the individual cells closer together. Does anyone know a way to accomplish this - even if my existing code has to be tweaked. I'm open to almost any suggestion except using Javascript. Thanks in advance.

My html looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>css image navigation test</title>
<link rel="stylesheet" type="text/css" media="screen" href="navtest.css" />
</head>
<body>

<div id="navigation">
<ul>
<a class="mainlink" href="#">testing link</a><br />
<a class="mainlink" href="#">testing link</a><br />
<a class="mainlink" href="#">testing link</a><br />
<a class="mainlink" href="#">testing link</a><br />
<a class="mainlink" href="#">testing link</a><br />
<a class="mainlink" href="#">testing link</a><br />
</ul>
</div>

</body>
</html>

My CSS code looks like this:
body {
background-color: #333333;
}

#navigation {
position: relative;
top: 100px;
left: 40px;
}

.testlink {
margin: -10px 0 -10px 0;
padding: 0px;
}

a.mainlink:link {
font-family: verdana;
font-size: 14px;
text-decoration: none;
color: #000066;
text-align: center;
vertical-align: middle;
height: 30px;
width: 150px;
background-color: #666666;
display: table-cell;
}

a.mainlink:hover {
font-family: verdana;
font-size: 14px;
text-decoration: none;
color: #990000;
text-align: center;
vertical-align: middle;
height: 30px;
width: 150px;
background-color: #999999;
display: table-cell;
}

Centauri

02-26-2008, 06:30 PM

There are some errors in coding here. <ul>s can only directly contain <li>s, not <a>s and <br>s. Setting up the list properly, the surrounding div is not needed as the <ul> can be positioned directly. The <a>s are set to block display and sized as required - the line height sets the text vertically in the centre of each <a>. Bottom margin on the <li>s can set the gap between the buttons (if you do want some). Try this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<ul id="navigation">
<li><a href="#">testing link</a></li>
<li><a href="#">testing link</a></li>
<li><a href="#">testing link</a></li>
<li><a href="#">testing link</a></li>
<li><a href="#">testing link</a></li>
<li><a href="#">testing link</a></li>
</ul>
</body>
</html>
Note also I zeroed all default margins and padding at the start of the css - necessary when working with lists. I also used a more appropriate doctype for new pages.

This also works in IE6 where your code does not.

bsstweb

02-26-2008, 06:43 PM

I was just looking at that same thing as you sent this, I can't believe I overlooked that. Thank you for simplifying the code a little as well, I am going to eliminate the div tag and <br />. I have done a full css navigation menu before using just text and dt, dd, dl commands with submenus and have used some different commands for IE6. Is there a CSS command that I could use that would fix IE6 without changing the doctype from html strict to xhtml transitional?

Thanks very much for the help and improvements!

Centauri

02-26-2008, 07:08 PM

It should still work fine with the xhtml transitional doctype in IE6 (as long as the doctype is the first thing on the page and is the full type specifying the URI). I usually recommend html 4.01 strict for new pages as transitional is normally used for pages that contain deprecated tags and there is really no need to use those in a new page, and proper xhtml is not supported by IE so the page is really html anyway. The main reason your code did not work in IE6 was due to the table-cell display mode which IE does not support.

If you are going to implement submenus, then the suckerfish javascript is really the only viable method of making these work in IE6.