Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    107
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Lining up Divs - help needed

    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
    Last edited by IamHe; 04-15-2011 at 01:28 PM.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>
    Last edited by bullant; 04-15-2011 at 01:43 PM.

  • Users who have thanked bullant for this post:

    IamHe (04-15-2011)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    107
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>

  • Users who have thanked bullant for this post:

    IamHe (04-15-2011)

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Posts
    107
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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 |

  • Users who have thanked bullant for this post:

    IamHe (04-15-2011)

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Posts
    107
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    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

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Posts
    107
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •