Lining up Divs - help needed

IamHe

04-15-2011, 12:23 PM

Hey guys, im trying to build a div/css layout

im tryying to line up a menu using divs

i want a spacer then the link

then a spacer again , then a link ..and so on

ensuring that every link has the same distance

the div that contains the link i wanted the width to just adjust to the width that the text takes up , but im having trouble getting them all to run on one line,

here is the code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
body {
background-color: #000;

}

#menu {
margin:auto;
width: 728px;
height: 32px;
padding: 0;
background: #caced1 url(menu.gif);
}

#linkspacer {
display: inline
width: 23px;
height: 32px;
padding: 0;

}

#link {
display: inline
width: auto;
height: 32px;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
line-height: 25px;
}

</style>
</head>
<body>
<div class="menu" id="menu">

<div class="linkspacer" id="linkspacer"></div>
<div class="link" id="link">Home</div>
<div class="linkspacer" id="linkspacer"></div>
<div class="link" id="link">About</div>
<div class="linkspacer" id="linkspacer"></div>
<div class="link" id="link">Pictures</div>
<div class="linkspacer" id="linkspacer"></div>
<div class="link" id="link">News</div>
<div class="linkspacer" id="linkspacer"></div>
<div class="link" id="link">Contact Us</div>
<div class="linkspacer" id="linkspacer"></div>

</div>
</body>
</html>

Appreciate any help , thanks allot :)

bullant

04-15-2011, 12:40 PM

Something like this?

This demo displays the menu items evenly spaced horizontally and centered on the page.

<!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=utf-8" />
<title></title>
<style type="text/css">
#menuContainer {
width: 600px;
overflow: hidden;
border: 1px solid red;
margin: 0px auto 0px auto;
}
#menu {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
position: relative;
left: 50%;
}
#menu li {
float: left;
margin: 0px 10px 0px 10px;
padding: 5px 5px 5px 5px;
position: relative;
right: 50%;
border: 1px solid blue;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="menuContainer">
<ul id="menu">
<li><a href="link1.htm">item1</a></li>
<li><a href="link2.htm">item2</a></li>
<li><a href="link3.htm">item3</a></li>
<li><a href="link4.htm">item4</a></li>
</ul>
</div>
</body>
</html>

IamHe

04-15-2011, 12:47 PM

thats great , if it were not for another thing i want to do that would be perfect, i want to put a little bar (.gif) in between each , i planned to insert a div with the gif as a background after each spacer

so it would look like

Item 1 | Item 2 | Item 3 | Item 4

whats the best way to do this?

thanks allot for your help.

bullant

04-15-2011, 12:55 PM

You could do something like this.

I just used the keyboard's vertical bar character, but you can replace it with your image.

<!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=utf-8" />
<title></title>
<style type="text/css">
#menuContainer {
width: 900px;
overflow: hidden;
border: 1px solid red;
margin: 0px auto 0px auto;
}
#menu {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
position: relative;
left: 50%;
}
#menu li {
float: left;
position: relative;
right: 50%;
}
#menu li a {
margin: 0px 10px 0px 10px;
padding: 5px 5px 5px 5px;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="menuContainer">
<ul id="menu">
<li><a href="link1.htm">item1</a></li>
<li>|</li>
<li><a href="link2.htm">item2</a></li>
<li>|</li>
<li><a href="link3.htm">item3</a></li>
<li>|</li>
<li><a href="link4.htm">item4</a></li>
</ul>
</div>
</body>
</html>

IamHe

04-15-2011, 01:33 PM

ive designed an image in photoshop and am trying to recreate it exactly as it is,
it there a simple way of doing it?

i usually dont have a problem with layouts but ive always used tables, trying to move away from them

bullant

04-15-2011, 01:54 PM

You already have an image of the vertical bar from

i want to put a little bar (.gif) in between each

so what image are you referring to now?

The image of the bar can be put in the <li> where I have a |

IamHe

04-15-2011, 02:00 PM

You already have an image of the vertical bar from

so what image are you referring to now?

The image of the bar can be put in the <li> where I have a |

<li><img src="menuspacer.gif" /></li>

just tried it, works great, i think i should be okay from here :D
thanks allot! youve helped me big time :)

bullant

04-15-2011, 10:27 PM

no problem :)

IamHe

05-05-2011, 03:45 PM

I Was just wondering how i would go about changing the alignment,
so instead of the links being displayed in the centre they would be displayed to the left, i have tried multiple ways but havent had any luck.
thanks.