SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    can't get rid of the extra margin below my menu in responsive theme

    jppv.net is the place where I'm working on, It's a responsive theme and when I the screen is scales down the screen size to 719px (max) my menu layout changes but an extra 20 odd pixel space is being added and I can't get rid of it. see the attached image.

    marginProblemCSS.png

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure if this is what you mean but the 20px purple backgrond beneath the nav is caused by the 20px padding on the parent #header_margin and can't be removed with a negative margin on an inner element.

    You just need to do this:

    Code:
    #header_margin{padding-bottom:0}
    Unless you meant something else of course

  3. #3
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I'm not sure if this is what you mean but the 20px purple backgrond beneath the nav is caused by the 20px padding on the parent #header_margin and can't be removed with a negative margin on an inner element.

    You just need to do this:

    Code:
    #header_margin{padding-bottom:0}
    Unless you meant something else of course
    Boss now new problem arose. the menu bar gets extra margin/padding from the left.


  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    Boss now new problem arose. the menu bar gets extra margin/padding from the left.

    Hi,

    You didn't add the code I gave you but instead added an invalid rule before the margin rule in the media query causing it to be missed.

    line 1631 style.css
    You added this:
    Code:
    #header_margin{padding-bottom:0};
    It should be this:
    Code:
    #header_margin{padding-bottom:0}
    There should be no semi-colon at the end. Otherwise it makes the following rule unmatchable.

    Code:
    	#header_margin{padding-bottom:0};
    
    	.header-container {
    		margin-left:0;
    	}

    It shuld be:

    Code:
    	#header_margin{padding-bottom:0}
    
    	.header-container {
    		margin-left:0;
    	}

  5. #5
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I love you man.. Your awesome!! I thought every statements should end with ; . can you guide me, when not to use semi-colons ?

    Thanks alot..

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    I love you man.. Your awesome!! I thought every statements should end with ; . can you guide me, when not to use semi-colons ?

    Thanks alot..
    Hi,

    Your mistake was adding the semi-colon outside the closing bracket thus effectively beginning a new rule

    Regarding semi-colons then a semi-colon means that there are more rules to follow. The last rule (or a single rule) doesn't need them but does no harm either way.

    e.g. All the following are valid:
    Code:
    #header_margin{padding-bottom:0}
    
    #header_margin{padding-bottom:0;}
    
    #header_margin{
    padding-bottom:0;
    margin:0
    }
    #header_margin{
    padding-bottom:0;
    margin:0;
    }
    As a rule of thumb I usually leave the trailing semi-colun from single rules:

    Code:
    #header_margin{padding-bottom:0}
    But I always add it at the end in multiple rules.
    Code:
    #header_margin{
    padding-bottom:0;
    margin:0;
    }
    It's up to you. It's probably safer to tell people to always add it but in the end its just personal preference and saves a few bytes if you omit it.

  7. #7
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    oh... silly mee..

    guess I'm used to seeing this format (in multiple lines)

    Code:
    #header_margin{
    padding-bottom:0;
    }
    where actually this is the same thins as

    Code:
    #header_margin{padding-bottom:0;}
    or
    Code:
    #header_margin{padding-bottom:0}
    All good now.. Thanks Again.

    Quote Originally Posted by Paul O'B View Post
    Hi,

    Your mistake was adding the semi-colon outside the closing bracket thus effectively beginning a new rule

    Regarding semi-colons then a semi-colon means that there are more rules to follow. The last rule (or a single rule) doesn't need them but does no harm either way.

    e.g. All the following are valid:
    Code:
    #header_margin{padding-bottom:0}
    
    #header_margin{padding-bottom:0;}
    
    #header_margin{
    padding-bottom:0;
    margin:0
    }
    #header_margin{
    padding-bottom:0;
    margin:0;
    }
    As a rule of thumb I usually leave the trailing semi-colun from single rules:

    Code:
    #header_margin{padding-bottom:0}
    But I always add it at the end in multiple rules.
    Code:
    #header_margin{
    padding-bottom:0;
    margin:0;
    }
    It's up to you. It's probably safer to tell people to always add it but in the end its just personal preference and saves a few bytes if you omit it.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    oh... silly mee..

    guess I'm used to seeing this format (in multiple lines)

    Code:
    #header_margin{
    padding-bottom:0;
    }
    where actually this is the same thins as

    Code:
    #header_margin{padding-bottom:0;}
    Its just a preference of mine to put single rules on their own line and save 3 separate lines of code in the stylesheet. In a large stylesheet it soon mounts up and you have to keep scrolling forever to read the stylesheet. I usually only do this with single rules and then revert to the usual format for multiple rules.

  9. #9
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you know what, I think I'm going to like this. As this will enable me to understand other people's codes. And not get bluffed when I see a different rule like now.

    For single rules your one and the regular rules using multiple lines.

    by the way this is valid too right? One Line!!


    Code:
    #header_margin{padding-bottom:0; margin:0;}
    Quote Originally Posted by Paul O'B View Post
    Its just a preference of mine to put single rules on their own line and save 3 separate lines of code in the stylesheet. In a large stylesheet it soon mounts up and you have to keep scrolling forever to read the stylesheet. I usually only do this with single rules and then revert to the usual format for multiple rules.

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    you know what, I think I'm going to like this. As this will enable me to understand other people's codes. And not get bluffed when I see a different rule like now.

    For single rules your one and the regular rules using multiple lines.

    by the way this is valid too right? One Line!!


    Code:
    #header_margin{padding-bottom:0; margin:0;}
    That's valid as well. In fact, you could write all your styles on a single line. Not that that would be a practical idea, at least not in pre-production mode, but it'd be perfectly valid.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    That's valid as well. In fact, you could write all your styles on a single line. Not that that would be a practical idea, at least not in pre-production mode, but it'd be perfectly valid.
    Thanks.. There should be a thanks button in sitepoint!!


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
  •