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:

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.

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=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.

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=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

Quote:

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

Quote:

Originally Posted by bullant

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

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.