SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Elgin, Illinois
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Can you negate the auto line breaks?

    I am a beginner trying to get away from tables and do my layout in CSS, and I am wondering if I can negate the auto line break after the H1 tag. I have that set as the top banner with a nice padding and background color, and I'd like my horizontal menu to butt up right under it without any space. Is that hopeless? Or do I need to position each element absolutely? (The thought of that makes me shudder in fear!)

    Thank you so much for any advice!!!
    "Fear Me!" Viking Ninja Kitten

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    h1 {
      padding: 0; margin: 0;
    }
    Personally, I currently use the following at the beginning of my CSS to reset all the paddings and all the margins to zero for all elements with the only negative being that it can effect some form elements badly.

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

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Elgin, Illinois
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I need the padding to get that nice box around the H1 text...

    <h1>This is the title of the site.</h1>
    <ul>
    <li><a class="menu" href="#">Link One</a></li>
    <li><a class="menu" href="#">Link Two</a></li>
    <li><a class="menu" href="#">Link Three</a></li>
    <li><a class="menu" href="#">Link Four</a></li></ul>

    I want that menu to appear right below my title. Here are the pertinent classes-- (don't laugh!)

    h1 {
    font-family: trebuchet ms, arial, sans serif;
    font-size: 40px;
    color: #ffffff;
    text-decoration: none;
    text-align: left;
    font-weight: normal;
    background-color:#009dd9;
    padding: 30px 30px 30px 60px;
    border-bottom-style: solid ;
    border-bottom-color: #707276;
    border-bottom-width: 6px;
    position: fixed;}

    ul {
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    }

    li {
    display:inline
    }

    a.menu {
    font-family: bliss, trebuchet ms, arial, sans serif;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    padding: 0.1em 3.0em;
    background-color: #ff9a00;
    border-style: solid;
    border-color: #707276;
    border-width: 3px 1px 1px 0px;
    float:left;
    }

    a.menu:hover {
    font-family: bliss, trebuchet ms, arial, sans serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    padding: 0.1em 3.0em;
    background-color: #009dd9;
    border-style: solid;
    border-color: #009dd9;
    border-width: 3px 1px 1px 0px;
    }

    Right now there is a big space in between them where you can see the background color and I want the gray borders on the top of the menu & the bottom of the H1 to touch.
    "Fear Me!" Viking Ninja Kitten

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Elgin, Illinois
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But thank you anyway, csswiz!!!
    "Fear Me!" Viking Ninja Kitten

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Presumably then you just need to remove the bottom margin from the h1. If you apply the global star selector at the beginning of the CSS though then this should sort out this and any other extra padding issues you may have

    Hope that makes sense?

    Code:
    h1 {
      margin-bottom: 0px;
    }
    or

    Code:
    * { padding: 0; margin: 0; }
    which you can then apply your own padding's and margin's to elements as required

  6. #6
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Elgin, Illinois
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooh, ooh, I did it! I'm sorry-- I used the margin part and left my padding as is and it did what I wanted! Thank you so much!!!
    "Fear Me!" Viking Ninja Kitten

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Little_e View Post
    Ooh, ooh, I did it! I'm sorry-- I used the margin part and left my padding as is and it did what I wanted! Thank you so much!!!
    Yeah sorry, I meant for you to add that CSS to the CSS you already had. Sorry for not explaining properly


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
  •