Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: CSS Alignment Issues - Horizontal List Navigation

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

    Default CSS Alignment Issues - Horizontal List Navigation

    Hey everyone,

    I just got referred to your site today by a friend from University, it has so much information!

    Glad that I finally have a resource to view sample code and get ideas.

    Anyway, my issue is in the alignment on a design I am starting to do. I will post the HTML and CSS code for the website and a screenshot.

    CSS CODE
    Code:
    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;
    	background-color:#333;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .nav ul li{
    	list-style: none;
    	display:inline;
    	width:188px;
    	height:40px;
    	text-align:center;
    }
    
    .nav ul li a{
    	text-decoration: none;
    	float: left;
    	color: #FFFFFF;
    	background-color: #333333;
    	width:188px;
    	height:40px;
    }
    
    .nav ul li a:hover{
    	background-color: #000000;
    	width:188px;
    	height:40px;
    }
    
    #navContainer{
    	width: 940px;
    }
    HTML CODE
    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>Taranix Pty Ltd - 2010</title>
    <link href="styles/styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="whiteContainer">
    	<div id="whiteBox">
        	<div id="navContainer">
    			<div class="nav">
    				<ul>
    					<li><a href="#">Home</a></li>
    					<li><a href="#">Services</a></li>
    					<li><a href="#">Blog</a></li>
    					<li><a href="#">Partners</a></li>
    					<li><a href="#">Contact</a></li>
    				</ul>
                </div>    
    		</div>
            <div id="imageContainer">
            	asad
            </div>
    	</div>
    </div>
    </body>
    </html>
    Here is a picture of my issue.
    http://img176.imageshack.us/img176/9...gnmentissu.jpg

    As you can see, the left of the navigation bar seems to almost have a padding of 20px or so (the black background behind home is the rollover).

    Somehow it has that grey area on and left and a small white space on the right (which i presume is just numbers not matching up).

    If anyone has any ideas on what I did wrong your help would be greatly appreciated.

    Regards,

    Mathew Hood

  2. #2
    Join Date
    Apr 2010
    Posts
    58
    Thanks
    5
    Thanked 1 Time in 1 Post

    Default

    What exactly is the problem you are having? Is it the fact that there is the white space on the right?

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

    Default

    Quote Originally Posted by europe451 View Post
    What exactly is the problem you are having? Is it the fact that there is the white space on the right?
    Hey thanks for replying,

    Umm as you can see on the navigation bar, the Home button is rolled over and has the black background colour.

    However I wanted the navigation to just be wide enough for all of the buttons to fit nicely.

    Here is a preview of what I plan to have the finished design looking like, hopefully this makes my issue clearer.

    http://img191.imageshack.us/img191/9...nixpreview.jpg

    Thanks for your help

  4. #4
    Join Date
    Apr 2010
    Posts
    58
    Thanks
    5
    Thanked 1 Time in 1 Post

    Default

    Have you tried this:
    Code:
    #navContainer{
    	width: 940px;
    	padding-left:10px;
    Last edited by europe451; 05-25-2010 at 06:18 PM.

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

    Default

    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;
    }

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

    MathewHood (05-26-2010)

  7. #6
    Join Date
    May 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    hey how are you doing i have an issue with with making the Nav Bar in general. i would like to use the nav bar from your site http://www.dynamicdrive.com/style/cs...rop_line_tabs/. and i want to change the color of the nav bar and to find out exactly how it is put into Dreamweaver. Please email me or PM me at your earliest convienence.

    Christopher.coello@yahoo.com

    thank you for reading this

  8. #7
    Join Date
    Apr 2010
    Posts
    58
    Thanks
    5
    Thanked 1 Time in 1 Post

    Default

    coelloc123,

    download the external files and open them in Dreamweaver and follow the directions of the tutorial.

  9. #8
    Join Date
    May 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    the links are not files only coding. it doesnt give the Bluedefault.gif and blueactive.gif

  10. #9
    Join Date
    Apr 2010
    Posts
    58
    Thanks
    5
    Thanked 1 Time in 1 Post

    Default

    I didn't read the .css file but I didn't see anything on the tutorial page referring to BlueDefault.gif & BlueActive.gif.

    However, the two images for download for the external files can be found at:

    http://www.dynamicdrive.com/cssexamples/leftedge.gif
    &
    http://www.dynamicdrive.com/cssexamples/rightedge.gif

  11. The Following User Says Thank You to europe451 For This Useful Post:

    coelloc123 (05-25-2010)

  12. #10
    Join Date
    May 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    much appreiciated

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
  •