Forum Moderators: not2easy
I have a header graphic with navigation links. I want to float some more text links over the top right corner of this image. The image uses an image map so I can't use it as background image.
I'm able to place the text where I want in the image, the problem is that it pushes the image down on the page. I want this image to be at the very top of the page and the only way it doesn't move is if I use absolute for the positioning of the text, which I don't want to use.
<div id="topnav">
<div id="links">
<p><a href="#">Home </a>¦ <a href="#">Blog</a></p>
</div>
<img src="http://www.example.com/image.jpg" width="757" height="74" /></div>
#topnav {
width: 757px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#links {
position: relative;
top: 20px;
left: 0px;
width: auto;
float: right;
}
I've experimented with everything I can think of but can't seem to get it how I'd really like it.
Thanks for your time.
the only way it doesn't move is if I use absolute for the positioning of the text, which I don't want to use.
Maybe somebody using dreamweaver can explain how to get it working in dreamweaver, but it really is the simplest solution to use positioning.
here's what I'd do:
<!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" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#topnav {
width: 757px;
margin: 0px auto;
position: relative; /* to gain position */
}
#topnav ul {
position: absolute;
top: 3px; /* relative to the parent that has position */
left: 3px;
list-style: none;
}
#topnav li {
display: inline; /* or however you like it */
}
#topnav li+li {
border-left: 1px solid black;
padding-left: 5px;
}
#topnav img {
width:757px;
height:74px;
}
</style>
</head>
<body>
<div id="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
</ul>
<img src="image.jpg" alt="required" />
</div>
</body>
</html>
I only tested the code in FF, might need help in IE. The sibling selector for one isn't supported by IE6, so that at least will degrade there unless you add something like IE7.js .
Thanks again.
Not knowing where you are with the code makes it hard, but I'd try padding and/or margins (try them large) in a conditional comment targeting the IE version you're using, make it large to be sure it's obeyed (IE has mean streaks). If it doesn't obey, I'd look at the display settings, some of them cause more grief than others in legacy IE versions.
Also the li+li construct will not be supported by IE6, if you have the padding in there, only more recent versions will see that.
