SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing on the left

    Creating a website and within my navigation there is like a 50px spacing on the left hand side, below is the coding for the navigation

    Code:
    <div class="nav">
    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">OUR SERVICES</a></li>
    <li><a href="#">WORKING FOR US</a></li>
    <li><a href="#">FAQS</a></li>
    <li><a href="#">CONTACT US</a></li>
    </ul>
    And here is the CSS

    Code:
    .nav{
    	width:100%;
    	background:url(images/nav_bg.jpg) repeat-x;
    	height:42px;
    	clear:both;
    	
    }
    
    .nav ul {  
        margin: 0 auto;  
        width: auto;  
        list-style: none; 
    	
    }  
    
    .nav ul li {  
        float: left;
    	
    }  
      
    .nav ul li a {  
            display: block;  
            margin-right: 20px;
    		padding-left:20px;
    		padding-right:20px;
    		color:#FFF;
            width: auto;  
            font-size: 13px;  
    		font-weight:bolder;  
            text-align: center;  
            text-decoration: none;
    		line-height:42px;  
    }
    
    .nav ul li a:hover {  
            display: block;  
            margin-right: 20px;
    		padding-left:20px;
    		padding-right:20px;
    		color:#FFF;
            width: auto;  
            font-size: 13px;  
    		font-weight:bolder;  
            text-align: center;  
            text-decoration: none;
    		line-height:42px;
    		background:url(images/nav_hover.jpg);  
    }
    Thank you

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Try adding padding:0; to your .nav ul rules to remove the default indent.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet worked a treat, thanks!

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adamhuxtable View Post
    Sweet worked a treat, thanks!
    That's why there are so many people around that advocate the importance of a reset.

    Code CSS:
    html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
        margin: 0; 
        padding: 0; 
    }
    I remember myself jelling why why why! By using this reset in the beginning of your stylesheet you are sure that for all containing elements the margin and padding are 0.

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    Code CSS:
    html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
    margin: 0; 
    padding: 0; 
    }
    or you can use the universal selector

    Code:
     
    * {
    padding: 0px;
    margin: 0px
    }

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    That's why there are so many people around that advocate the importance of a reset.

    I remember myself jelling why why why! By using this reset in the beginning of your stylesheet you are sure that for all containing elements the margin and padding are 0.
    Yes, and there are just as many of us who discourage the extra work that resets force upon you. So we strip them all down to "zero" and off we go setting margins and paddings back on everything. 99% of the time you will be defining them all back over again anyways so why not just address them as needed. It took me a while to break away from resets but after I saw what was going on it was an easy decision.

    There are several dedicated threads running around here about "CSS Resets", it just takes those keywords in the forum search. There are two sides to the subject and the reset crowd is not saving themselves any work since they have to reset their resets.
    Quote Originally Posted by Kalon View Post
    or you can use the universal selector
    And that is even more disastrous since there are some form elements that can never be reset again after you kill em.


    Just my

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    There are two sides to the subject and the reset crowd is not saving themselves any work since they have to reset their resets.

    And that is even more disastrous since there are some form elements that can never be reset again after you kill em.


    Just my
    yep agree

    I have never really used "global" resets at the top of my css for those very reasons.

    just about every selector in my css will have a default margin and padding assigned to suit. for all the others letting the browsers do "their thing" doesn't normally cause me any concerns.

    just another worth

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'd also suggest axing the COMPLETELY POINTLESS div around the UL. you aren't applying anything to that DIV you couldn't be doing on the UL itself.

    I WOULD go with a reset because it just makes life easier; just not the 'universal' one because as noted, it shtups form elements. The one I prefer is this:

    Code:
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    Anything more creates problems and is a waste of code, anything less you end up declaring margins/padding on every blasted element, or ripping your hair out wondering what's wrong with certain elements in certain browsers... or wondering why some people report your layout as broken when you are unable to recreate the problem. Generally I do NOT end up restating the values on the majority of elements, or if I do it's usually different ones from the default anyways, and using it most always means less CSS than having to say margin:0 padding:0 every blasted time I want to use one of those elements.

    Your CSS has a lot of pointless redundancy too -- like on your hover state the ONLY thing you need to change are the parts that are DIFFERENT. Since you aren't changing the width, padding, margins, alignment, decoration or line-height, why are you re-declaring them?!? Likewise I would suggest loading the image on the base anchor and using background-position to hide it, so you don't have the 'load delay' the first time you mouse-over one... and take an axe to 'bolder' and just use bold since support for it is inconsistent/non-existent depending on the browser.

    So, neuter the markup down to:

    Code:
    <ul id="mainMenu">
    	<li><a href="#">HOME</a></li>
    	<li><a href="#">ABOUT US</a></li>
    	<li><a href="#">OUR SERVICES</a></li>
    	<li><a href="#">WORKING FOR US</a></li>
    	<li><a href="#">FAQS</a></li>
    	<li><a href="#">CONTACT US</a></li>
    </ul>
    Getting rid of that silly DIV -- WHY do people keep throwing DIV around UL's for no good reason?!? Ranks right up there with the <div id="header" nonsense -- or putting a P before a H1 or H2 after a H1 for what should be SMALL inside the H1...

    Then for CSS:

    Code:
    #mainMenu {
    	list-style:none;
    	overflow:hidden; /* wrap floats */
    	width:100%; /* trip haslayout, wrap floats IE, also means we don't need to clear! */
    	background:url(images/nav_bg.jpg) top center repeat-x;
    }
    
    #mainMenu li {  
    	display:inline; /* don't even TRY to style these! */
    }  
      
    #mainMenu a {  
    	float:left;
    	display:inline; /* prevent IE margin doubling */
    	margin-right:20px;
    	padding:14px 20px;
    	text-decoration: none;
    	font:bold 13px/14px arial,helvetica,sans-serif;
    	color:#FFF;
    	background:url(images/nav_hover.jpg) 0 42px repeat-x;  
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {  
    	background-position:0 0;
    }
    Notice I added :active and :focus for keyboard users... added a fix so you don't get margin doubling in IE6, avoided the IE7 staircase bug by making the LI display:inline instead of floated and floating the anchor instead, and instead of declaring heights (recipe for disaster) set a short line-height with padding which will provide more consistent placement cross browser. (though I'd up that to 14px font-size as 13px is below usability minimums!)

    Though I'd have to see the whole page in question to say for sure -- that clear:both made by eyebrows furrow.

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    I'd also suggest axing the COMPLETELY POINTLESS div around the UL. you aren't applying anything to that DIV you couldn't be doing on the UL itself.
    when I saw the <div> I initially thought it is useless as well but then again since there is no </div> in the posted code snippet, there might be other elements after the <ul> within the same <div> which means there might be a purpose for the <div>.

    the <div> might also be a child to another element.


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
  •