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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS horizontal align of links

    Having a problem with CSS part. I am simply trying to have all of my links, horizontally aligned at the top of the page, but they are instead aligning to the left in a list.

    Here be the CSS code:

    Code:
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background-color: #4E5869;
    	margin: 0;
    	padding: 0;
    	color: #000;
    }
    
    ul, ol, dl
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	
    	padding-right: 15px;
    	padding-left: 15px; 
    }
    a img { 
    	border: none;
    }
    
    
    a:link {
    	color:#414958;
    	text-decoration: underline; 
    }
    a:visited {
    	color: #4E5869;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { 
    	text-decoration: none;
    }
    
    nav-example {
    	    background:url("../../Pictures/01Test.png") no-repeat;
    		width: 490px;
            height: 40px;
            margin: o;
            padding: 0;
    }
    
    #nav-example li, #nav-example a {
        height: 40px;
        display: block;
    }
    
    #nav-example li {
        list-style: none;
        display: inline;
        text-indent: -9999em;
    	letter-spacing: 1px;
    }
    
    #nav-example-01 { width: 98px; }
    #nav-example-02 { width: 131px; }
    #nav-example-03 { width: 123px; }
    #nav-example-04 { width: 138px; }
    
    #nav-example-01 a:hover { background:url("../../Pictures/01Test.png") 0px -40px no-repeat; }
    #nav-example-02 a:hover { background:url("../../Pictures/01Test.png") -98px -40px no-repeat; }
    #nav-example-03 a:hover { background:url("../../Pictures/01Test.png") -229px -40px no-repeat; }
    #nav-example-04 a:hover { background:url("../../Pictures/01Test.png") -352px -40px no-repeat; }
    
    .container {
    	width: 80%;
    	max-width: 1260px;
    	min-width: 780px;
    	background-color: #FFF;
    	margin: 0 auto; 
    }
    
    .header {
    	background-color: #6F7D94;
    }
    
    
    }
    .content {
    	padding: 10px 0;
    	width: 80%;
    		float: right;
    }
    And here is the HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="Untitled-10.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div class="container">
      <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a> 
        <!-- end .header --></div>
    	<ul class="nav">
        <li id="nav-example">
          <li><a href="#">Home</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
          
        </ul>
    </body>
    </html>
    I am a bit of a noob right now so it is probably something stupid that I did or forgot to do, help would be greatly appreciated though.

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    123
    Thanks
    0
    Thanked 25 Times in 25 Posts
    i removed a few of your css items and added you .nav class as you have that listed on your <ul class="nav">.

    See if the following works for you, hope this helps:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background-color: #4E5869;
    	margin: 0;
    	padding: 0;
    	color: #000;
    }
    ul, ol, dl
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	
    	padding-right: 15px;
    	padding-left: 15px; 
    }
    a img { 
    	border: none;
    }
    
    a:link {
    	color:#414958;
    	text-decoration: underline; 
    }
    a:visited {
    	color: #4E5869;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { 
    	text-decoration: none;
    }
    nav-example {
    	    background:url("../../Pictures/01Test.png") no-repeat;
    	width: 490px;
            height: 40px;
            margin: o;
            padding: 0;
    }
    
    #nav-example li, #nav-example a {
        height: 40px;
    }
    .nav{
        list-style: none;
        display: inline;
    }
    li{
     display: inline;
    }
    
    #nav-example-01 { width: 98px; }
    #nav-example-02 { width: 131px; }
    #nav-example-03 { width: 123px; }
    #nav-example-04 { width: 138px; }
    
    #nav-example-01 a:hover { background:url("../../Pictures/01Test.png") 0px -40px no-repeat; }
    #nav-example-02 a:hover { background:url("../../Pictures/01Test.png") -98px -40px no-repeat; }
    #nav-example-03 a:hover { background:url("../../Pictures/01Test.png") -229px -40px no-repeat; }
    #nav-example-04 a:hover { background:url("../../Pictures/01Test.png") -352px -40px no-repeat; }
    
    .container {
    	width: 80%;
    	max-width: 1260px;
    	min-width: 780px;
    	background-color: #FFF;
    	margin: 0 auto; 
    }
    
    .header {
    	background-color: #6F7D94;
    }
    
    }
    .content {
    	padding: 10px 0;
    	width: 80%;
    		float: right;
    }
    </style>
    
    </head>
    <body>
    <div class="container">
      <div class="header">
            <a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a> 
        <!-- end .header --></div>
    	<ul class="nav">
              <li><a href="#">Home</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
            </ul>
    </body>
    </html>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the reply, unfortunately it did not correct the main problem. It did make the links look a lot better but they are still vertically aligned on the left side and now have bullet points beside each of them.

  • #4
    Regular Coder
    Join Date
    Aug 2012
    Posts
    123
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Which browser are you running this in? i checked in firefox/chrome/ie8 and the links are all inline...
    Last edited by Brandnew; 05-07-2013 at 05:41 PM.
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #5
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I actually use Dreamweaver and the 'preview' was showing that the links were vertical, but you are right, previewing in Firefox and Chrome they look fine.

    Dont know why the Dreamweaver sig wasnt working, thank you for the help tho you saved me many hours trying to figure this stuff out.


  •  

    Posting Permissions

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