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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Canada
    Posts
    60
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Smile CSS Navbar A little off?

    Having a little trouble with my CSS, my navbar seems to move just a little left of the mainwrap, I've looked but can't find anything wrong, if anyone can help that would be grand.
    CSS:
    Code:
    <style type="text/css"> 
    <!-- 
     
    .navbar ul{
    padding: 3px 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 0;
    font: bold 24px Verdana;
    list-style-type: none;
    text-align: center; 
    }
    
    .navbar li{
    display: inline;
    margin: 4px;
    }
    
    .navbar li a{
    text-decoration: none;
    padding: 5px 7px;
    margin-right: 5px;
    border: 1px solid #778;
    color: white;
    border:1px solid gray;
    background: #3282c2;
    border-radius: 8px; /*w3c border radius*/
    box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
    -moz-border-radius: 8px; /* mozilla border radius */
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
    background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
    -webkit-border-radius: 8px; /* webkit border radius */
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
    background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
    }
    
    .navbar li a:hover{
    text-color:#03F ;
    text-decoration:blink;
    }
     
     .blacktheme li a{
    font-size:24px;
    background: black;
    background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
    background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); 
    }
    
     
    --> 
    
    
    li {text-align:center;}
    
    h3 {text-align:center;color:#fff;}
    
    h4 {text-align:center;color:#fff;}
    
    h6 {font-size:20px;text-align:center;text-decoration:underline;}
    
    body {background-image:url('http://www.widewallpapers.net/mod/abstract-dark/1366x768/dark-abstract-wide-wallpaper-1366x768-005.jpg');}
    
    p {color:#fff;}
    
    hr {color:#FF8000;}
    
    
    
    a:link{color:#000;text-align:center;}
    a:visited{color:#000;}
    a:hover{color:#FF8000;text-decoration:blink;}
    a:active{color:#ff0000;}
    
    a.two:link {display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:485px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    
    a.two:visited {display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    
    
    a.two:hover {background-color:#FF8000;text-decoration:blink;}
    
    
    a.three:link {color:#fff;}
    a.three:visited {color:#fff;}
    a.three:hover {
    	color:#0099FF;
    	text-decoration:underline;
    }
    
    a.four:link {color:#fff;}
    a.four:visited {color:#fff;}
    a.four:hover {
    	color:#0099FF;
    	text-decoration:underline;
    }
    
    a.six:link {display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;
    text-align:center;
    padding:8px;
    text-decoration:none;
    }
    a.six:visited {display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;
    text-align:center;
    padding:8px;
    text-decoration:none;
    }
    a.six:hover {background-color:#FF8000;text-decoration:underline;}
    
    a.seven:link {color:#fff;font-size:20px;}
    a.seven:visited {color:#fff;}
    a.seven:hover {color:#FF800F;}
    
    #main-wrap{ 
    width: 796px; 
    margin: auto; 
    background-color: #000; 
    padding: 2px; 
    } 
    
    #sidebar {
    	border-top: 3px solid #FF800F;
    	border-left: 3px solid #FF800F;
    	border-bottom: 3px solid #FF800F;
    	height: 800px;
    	width: 200px;
    	float: right;
    	margin-right: 2px;
    	padding: 1px 0 0 1px;
    	color:#FF800F;
    }
    
    
    </style>
    Thanks,
    Sam.
    Check out my new forums: http://www.moderncoding.co.nr (:

    Strengths: HTML & CSS.


    Code:
    EpicFriends x = 
    players.getNearest(BestFriend);
    if (x != null) {
    x.interact("High Five" + x.getName());

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Hey there Sam,

    It would be helpful is you posted a link to a live website where your problem occurs or the html and full css. As of now, I can only guess

    Code:
    ul {
       padding: 0; /* resets default padding */
    }
    the code for the navbar is a little off in my eyes, turning li's into display: inline; isn't exactly the best method


  •  

    Tags for this Thread

    Posting Permissions

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