Object problem

**Aaroniza** · Apr 14, 2006 07:31

I couldn't think of a suitable title but anyway...
I have some css "boxes" that hold links in them and that go horizontally of the page

Code:

#links {
text-align: center;
background-color: #A08C6B;
border: 1px #000000 solid;
width:120px;
position: fixed;
top: 80px;
margin-left:1px;
}

Now, If i put two of these together (<div id="links">First link</div><div id="links">Second link</div>) then they overlap. What should i do to fix this without using messy margin tags.
Thanks
oh, and excuse me for my bad CSS markup I usually code desktop applications not websites

**BonRouge** · Apr 14, 2006 08:08

Sounds like a menu...
See if this helps...http://css.maxdesign.com.au/listamatic/horizontal07.htm

**Aaroniza** · Apr 14, 2006 08:15

I tried that but it turned out vertical and didn't even work in firefox.
Anymore ideas?

**all4nerds** · Apr 14, 2006 08:26

Hello

Float left, PS use Ul LI 's for menu's, i think BonRouge is pionting to that

PS and an other thing, IE hovers only on A tag's

Code:

<!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>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	.links {
text-align: center;
background-color: #A08C6B;
border: 1px #000000 solid;
width:120px;
top: 80px;
margin-left:1px;float:left;
} 
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>
<div class="links">First link</div><div class="links">Second link</div>

</body>
</html>

**Paul O'B** · Apr 14, 2006 08:32

I tried that but it turned out vertical and didn't even work in firefox.

Don't tell fibs

The code worked straight away in firefox with no modifications at all

.

I've simplified it a bit below and fixed ie.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#navlist ul
{
margin: 0;
white-space: nowrap;
padding: 0;
}
#navlist li
{
display: inline;
list-style-type: none;
position:relative;
}
#navlist a
{
padding: 1px 12px;
border: 1px solid #333;
background-color: #999;
color: #EEE;
text-decoration: none;
}
#navlist a:hover,#navlist a#current
{
border: 1px solid #333;
background-color: #FF6600;
color: #333;
}
 
</style>
</head>
<body>
<ul id="navlist">
 <li><a href="#" id="current">Item one</a></li>
 <li><a href="#">Item two</a></li>
 <li><a href="#">Item three</a></li>
 <li><a href="#">Item four</a></li>
 <li><a href="#">Item five</a></li>
</ul>
</body>
</html>

In your original code you are using position:fixed which you should not be using at all as it fixes the element in one place relative to the viewport at all times. The biggest reason for not using position:fixes is because IE doesn't understand it anyway.

If you are styling a menu or a selection of similar items then you should use a semantic structure like a list which is perfect for this and provides all the hooks you need for styling.

Block elements will not align next to each other unless you float then or set them to display:inline (as in the list example). Block elements always start on a new line under the previous element unless of course they are absolutely positioned and then will appear wherever you put them. However absolute positioning isn't the best way to go as you lose the flow of the document.

Play around with the example above and it should do what you want without too much trouble

**Aaroniza** · Apr 14, 2006 08:35

Woot, that works thanks! "kore"

User Tag List

Thread: Object problem

Thread Tools

Display

Object problem

Bookmarks

Bookmarks

Posting Permissions