SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Gap Between Page Elements

    Hello!

    So, after some much needed beginner help, I'm on the right track with this CSS stuff, but I've hit another hurdle.

    I have a header and a content block centered on my page. The content has a white background that is supposed to butt up directly against the header. It's working on my index page, but the exact same code is not working on the Contact page.

    go to beckysterndesign dot com and click on the contact link to view.

    I need this to work the same as the index on every page of the website.

    Can anyone help?
    Thanks!
    Becky Sue

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    South Florida
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post your HTML and CSS for the contact page? We can take a look.

  3. #3
    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)
    Hi,
    It looks like your having problems with your global reset, aka "universal reset".

    In your stylesheet you have your reset at the top as

    html {
    margin: 0;
    padding: 0;
    }

    That's really not a very good reset, if you change it to * {margin:0; padding:0:} you will see the gap disappear.

    In doing that though it throws your sidenav and lower image out of position on the homepage. That's OK, just go back and reposition them.

    Also I couldn't find the #biocopy div in your stylesheet. Go ahead and get it in there so it can be picked up on by the html. Be careful not to add padding to divs to position text such as <p> tags and <h> tags, It can cause problems. Give them margin and padding through their own selectors.

    That was a very simple reset above and can cause problems if you plan on having any forms on your site.

    This is one that I use, it is more thorough.

    Code:
    body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
        margin: 0;
        padding: 0;
    }
    There are some that have even more to them.

  4. #4
    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)
    Sorry about the double post but I just remembered a recent thread where the topic was the "universal reset".

    And I also found an example of Dan's style sheet starter.


    Code:
    /* My take on the CSS Reset */
        a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, caption, cite,
        code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4,
        h5, h6, hr, html, i, img, ins, kbd, label, legend, li, map, object, ol, p, param, pre,
        q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead,
        tr, tt, ul, var {
            margin: 0;
            padding: 0;
        }
     
        body {
            background: #333;
            color: #000;
            /* the font "Lucida Console" is included for development only - remove it when you're finished, but don't change anything else */
            font: 85%/150% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
            letter-spacing: 1px;
            margin: 0;
            padding:0;
        }
     
        fieldset {
            border: 0;
            display: inline;                                    /* this squashes an IE bug */
        }
       
        h1, h2, h3, h4, h5, h6 {
            font-family: georgia, garamond, "times new roman", times, serif;
            font-weight: bold;
        }
     
        h1 {
            font-size: 1.5em;
            font-weight: normal;
            line-height: 1.8em;
        }
     
        h2 {
            font-size: 1.25em;
        }
     
        h3 {
            font-size: 1em;
        }
     
        h4 {
            font-size: 0.95em;
        }
     
        h5 {
            font-size: 0.85em;
        }
     
        h6 {
            font-size: 0.75em;
        }
     
        img {
            border: 0;                      /* this squashes a Firefox bug */
            vertical-align: bottom;        /* this squashes an IE bug */
        }
     
        table {
            border: 0;
            border-collapse: collapse;
            border-spacing: 0;
        }
            caption, th, td {
                font-weight: 400;
                text-align: left;
            }
       
    /* ok, now that the "reset" is out of the way, let's get to the layout, shall we? */


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
  •