Advanced Search

Page 2 of 2 FirstFirst 12
Results 11 to 13 of 13

Thread: CSS Alignment Issues - Horizontal List Navigation

  1. #11
    Join Date
    May 2010
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by azoomer View Post
    Maybe this css would get you a little closer. Added a Meyer reset.

    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    
    /* remember to highlight inserts somehow! */
    ins {
    	text-decoration: none;
    }
    del {
    	text-decoration: line-through;
    }
    
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    body {
    	background-color: #5b5a5c;
    	font-family: Century Gothic, Tahoma, Verdana, Arial;
    }
    
    #whiteContainer {
    	width: 1000px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    
    #whiteBox {
    	background-color: #FFFFFF;
    	width: 1000px;
    	height:2000px;
    }
    
    .nav ul{
    	color:#FFF;
    	height: 40px;
    	width:940px;
    	
    }
    
    .nav ul li{
    	list-style: none;
    	display:inline;
    	width:186px;
    	height:40px;
    	text-align:center;
    }
    
    .nav ul li a {
    background-color:#333333;
    color:#FFFFFF;
    float:left;
    height:30px;
    padding-top:10px;
    text-decoration:none;
    width:188px;
    }
    
    .nav ul li a:hover{
    	background-color: #000000;
    	width:188px;
    	height:30px;
    }
    
    #navContainer {
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    padding-top:20px;
    width:940px;
    }
    Thankyou so much, that works perfectly.

    Can you please just give me a bit more of a explanation of what you did so I can learn ?

  2. #12
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Hi MathewHood. The part of the css above the body tag is a Meyer reset. It helps in getting rid of unwanted margins and paddings and basically helps to get the page rendering the same way in different browsers. Next i deleted some some background color and margins in the the divs holding the navigation. Gave the navigation some top margin to make it look more like your picture. Gave the text some padding at the top and changed the height of the navigation. OK it's difficult to explain but basically just playing around until it looks more the way you want.
    By far the best advice i could give you is to get the firefox add on that is called:

    FIREBUG

    Install it in firefox and learn to use it. It will take you leaps ahead. I promise, that is absolutely the most helpful thing plugin/ addon i have ever used. Try it and you will be surprised ( in a positive way)

  3. The Following User Says Thank You to azoomer For This Useful Post:

    MathewHood (05-26-2010)

  4. #13
    Join Date
    May 2010
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks for that Azoomer. I will look into all that

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
  •