SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast ParfaitMacaron's Avatar
    Join Date
    Mar 2013
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing Out Navigation Links

    Hi,

    I'd like to space out my navigation links.

    HTML Code:
                                           <li><a href="page.php">Text</a></li>
    						<li><a href="page.php">Text</a></li>
    						<li><a href="page.php">Text</a></li>
    						<li><a href="page.php">Text</a></li>
    						<li><a href="page.php">Text</a></li>
    						<li><a href="page.php">Text</a></li>
    						<li><a href="page.php">Text</a></li>
    						<li><a href="page.php">Text</a></li>
    Code:
    #navigation {
    	list-style-position: inside;
    	list-style-type: none;
    	
    
    }
    
    #navigation li{
    	display: inline-block;
    	text-align:center;
    
    }
    At the moment the text is very squashed together. How would I edit the font size to make it larger in CSS3?

    I'd also like to make the text align justified so that it matches where the header banner begins and end (not in the centre).

    Thank you.

    ---edit---

    Fixed my problem by padding it out. However, still can't increase font-size: [size]px;

    and it's not justifying still.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    We'd need to see the full css to know why the font-size isn't being applied. Normally you would just say #navigation li a{font-size:120%} etc.

    If you are supporting only ie8+ then you can space the menu items out easily using the display table properties. Here's an example.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ul#nav {
    	width:60%;
    	display:table;
    	border:1px solid red;
    	margin:0 auto;
    	padding:0;
    	list-style:none;
    	background:#000;/*table-layout:fixed; use if you want them all the same width*/
    }
    #nav li {
    	display:table-cell;
    	border-left:1px solid red;
    	text-align:center;
    }
    #nav li:first-child { border:none; }
    #nav a {
    	display:block;
    	color:#fff;
    	text-decoration:none;
    	line-height:1.5;
    	font-size:140%;
    }
    #nav a:visited { color:#fff }
    #nav a:hover {
    	background:#ccc;
    	color:#000;
    }
    </style>
    </head>
    
    <body>
    <ul id="nav">
    		<li><a href="page.php">Text text</a></li>
    		<li><a href="page.php">Text</a></li>
    		<li><a href="page.php">Text</a></li>
    		<li><a href="page.php">Text text</a></li>
    		<li><a href="page.php">Text</a></li>
    		<li><a href="page.php">Text</a></li>
    		<li><a href="page.php">Text</a></li>
    		<li><a href="page.php">Text</a></li>
    </ul>
    </body>
    </html>


Bookmarks

Posting Permissions

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