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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css navigation problem.

    Hi,

    I didnt know how to put a title to this but my problem is that i am making a simple css layout and when i put text in my nav bar the spaces between the buttons get bigger....

    Heres the code:

    Code:
    body
    {
    background-color:#dad8d8;
    }
    
    #main
    {
    width:65%;
    min-height:550px;
    background-color:white;
    margin:auto;
    }
    
    #header
    {
    width:100%;
    height:100px;
    background-image: url(background.gif); 
    }
    
    #header2
    {
    width:100%;
    height:40px;
    background-image: url(background2.gif); 
    }
    
    #footer
    {
    width:65%;
    height:20px;
    background-image:url(background.gif);
    margin:auto;
    }
    
    #nav
    {
    width:22%;
    min-height:50px;
    margin-left:5px;
    }
    
    #button
    {
    	width:100%;
    	height:20px;
    	background-color:gray;
    	text-align:center;
    	margin-top:5px;
    
    }
    
    p.button
    {
    	color: white;
    	font: arial;
    	font-family: arial;
    	font-size:x-small;
    	padding-top:4px;
    }
    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <head>
        	<link rel="stylesheet" href="style.css" type="text/css" />
        	<title></title>
        </head>
        <body>
    		<div id="main">
    			<div id="header">
    			</div>
    			<div id="header2">
    			</div>
    			<div id="nav">
    				<div id="button"><p class="button">Home</p></div>
    				<div id="button"><p class="button">About us</p></div>
    				<div id="button"><p class="button">FAQ</div>
    				<div id="button"><p class="button">Services</p></div>
    				<div id="button"><p class="button">Enquiries</p></div>
    			</div>
    		</div>
    		<div id="footer">
    		</div>
        </body>
        </html>
    Thanks
    HalfALime

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The easy and semantic way to create a navigation list is with unordered-list, <ul>
    Say,
    Code:
    <ul id="nav">
    				<li>Home</li>
                                    <li>About us</li>
    				
    </ul>
    The way yo have given id is invalid, as we can't use the same id value for more than one element in a document. And no need to use an extra <p> tags for each item.

    PS: Adding a style
    Code:
    *{
    		margin:0;
    		padding:0;
    		}
    is useful to remove all default margin/padding settings(in browser) of all elements.
    Last edited by abduraooft; 05-22-2008 at 11:24 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This works for me.

    http://exitfegs.co.uk/a22.html

    Adjust the margins to space the buttons.
    Put the css back into your style sheet.

    Frank

    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>For test purposes only.</title>
    <style type="text/css">
    
    * {
          margin: 0;
          padding: 0;
          border: none;
        }
    
        body {
          background-color: #dad8d8;
        }
    
        #main {
          width: 65&#37;;
          min-height: 550px;
          background-color: white;
          margin: auto;
        }
    
        #header {
          width: 100%;
          height: 100px;
          background-image: url(background.gif);
        }
    
        #header2 {
          width: 100%;
          height: 40px;
          background-image: url(background2.gif);
        }
    
        #footer {
          width: 65%;
          height: 20px;
          background-image: url(background.gif);
          margin: auto;
        }
    
        #nav {
          width: 22%;
          min-height: 50px;
          margin-left: 5px;
        }
    
        .button {
          display: block;
          margin:5px 0 0 50px;
          height: 20px;
          width: 59%;
          background-color: gray;
          text-align: center;
        }
    
        li.button {
          color: white;
          font-family: arial, sans-serif;
          font-size: x-small;
          padding-top: 4px;
        }
    
    </style>
    </head>
    
    <body>
      <div id="main">
        <div id="header"></div>
    
        <div id="header2"></div>
    
        <div id="nav">
          <ol>
            <li class="button">Home</li>
    
            <li class="button">About us</li>
    
            <li class="button">FAQ</li>
    
            <li class="button">Services</li>
    
            <li class="button">Enquiries</li>
          </ol>
        </div>
    
        <div id="footer"></div>
      </div>
    </body>
    </html>
    Last edited by effpeetee; 05-22-2008 at 01:27 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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