SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)

    Positioning within div

    I have a div which contains a <h1> heading and a normal paragraph <p>:

    HTML Code:
    <div class="section">
    <h1>1. Personal Information</h1>
    <p>1.1 Personal Data</p>
    </div>
    It is styled thus:
    Code:
    .section{
    background-color:#CCCCCC;
    padding: 5px;
    }
    .section h1{
    font-size: 15px;
    }
    .section p{
    font-size: 14px;
    color:#333333;
    }
    Browsers automatically put a gap of one line between the <h1> and <p> elements.
    Could somebody please tell me the best/cleanest way to reduce that gap (to maybe 15px)?

    Thanks in advance

  2. #2
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you add a reset to your stylesheet it should take out all browser defaults.

    try
    Code CSS:
    * {
        padding: 0;
        margin: 0;
    }

    you will have to specify where you want padding though (on other elements)

    Hope this helps

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As above said it will vary between browsers...

    Code:
    *
    {
      margin:0;
      padding:0;
    }
    .section p
    {
      margin:1em 0 0;
      font-size:14px;
      color:#333
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, .section p has margin declared as 1em 0 0, is this correct?

    margin: 1em would be 1em on all sides

    margin: 1em 2em would be 1em top& bottom, 2em left and right

    margin 1em 2em 3em 4em would be 1em top, 2em right, 3em bottom, 4em left

    what would 3 be?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by james_littler View Post
    Ryan, .section p has margin declared as 1em 0 0, is this correct?

    margin: 1em would be 1em on all sides

    margin: 1em 2em would be 1em top& bottom, 2em left and right

    margin 1em 2em 3em 4em would be 1em top, 2em right, 3em bottom, 4em left

    what would 3 be?

    margin:0; = margin-right:0;margin-left:0;margin-top:0;margin-bottom:0;

    margin:0 1px; = margin-top:0;margin-bottom:0;margin-left:1px;margin-right:1px;

    margin:1em 0 0; = margin-top:1em;margin-right:0;margin-left:0;margin-bottom:0;

    margin:0 0 0 0; = margin-right:0;margin-left:0;margin-bottom:0;margin-top:0;
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok didn't know you could do that, thanks

  7. #7
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by james_littler View Post
    Ah ok didn't know you could do that, thanks
    Yeppers when doing CSS "Groups" thats what it basically is try to think to yourself as a normal time clock. Top-right-bottom-left. Were going clockwise.

    Code CSS:
    padding: 0, 0, 0, 0;


    Code CSS:
    margin: 5, 5, 5, 5;

    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  8. #8
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea, I just didn't know you could declare 3 values, thought it was 1, 2 or 4

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Just wanted to say thanks for the good advice.
    I have been playing around with what you suggested since last night and it works really well.
    One more question though.
    To force FF to set a scrollbar I have:
    Code:
    html{
    	height:100%; 
    	margin-bottom:0.1em; 
    }
    What is the difference between 'html' and '*' in css?

    Thanks again.

  10. #10
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    html targets the html tag, * targets every element,

    to force scroll you can just set overflow:scroll in the css

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    *{margin:0;padding:0;} has 0,0,0,0 specificity so it can be overridden by anything.

    @james, your welcome.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Cheers guys. Appreciate that.

    Incidentally, regarding the scrollbars, overflow:scroll also produces a horizontal scrollbar. Very unsightly. What I described is the only method I know of to produce only the horizontal scrollbar.

    I would be glad to hear if there is an easier method using css to produce only the horizontal bar.

  13. #13
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    overflow-x:scroll

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Sorry, I meant the vertical bar.
    Nonetheless "overflow-y:scroll" works just the same. Very cool.
    Is this supported in all other browsers? (FF2, Safari etc)
    I'm sure there was a reason I spent ages looking for the "margin-bottom: 0.1em" solution a while back.

  15. #15
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's supported in all good current browsers....oh and IE 7 & 8 too...

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    I don't know if I should laugh or cry (I really did spend a long time working out the thing with 0.1em). Nonetheless, thanks for your help

  17. #17
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could also use
    html {
    height: 101&#37;;
    }

    That should also force scroll and is supported by everything including IE6, only concern would be opera because as far as I know opera doesn't support 100% height....I may be wrong

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by james_littler View Post
    It's supported in all good current browsers....oh and IE 7 & 8 too...
    And IE6

    only concern would be opera because as far as I know opera doesn't support 100% height....I may be wrong
    Opera does support 100% height but various versions have exhibited slightly strange behaviour over the years. However normal usage is ok.

    Code:
    html,body{height:100%}
    #outer{min-height:100%;background:red}


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
  •