SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Canada
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question removing the spacing around two divs

    I cannot remove the spacing between my top navigation bar and my main content. Here's the code I am using (I have used nastry backgroound colours to highlight my problem). Can anyone help please?

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    h1 {margin: 0;}
    #container {
    width: 770px;
    margin: 0px auto;
    border: 1px solid black;
    text-align: left;
    }
    /*top links*/
    #headerlinks {
    text-align: right;
    margin: 0%;
    }
    #headerlinks li {
    display: inline;
    padding: 0px 5px;
    background-color: green;
    }
    /*end top links*/
    #bigquote {
    text-align: center;
    position: relative;
    padding-right: 200px;
    padding-top : 70px;
    padding-bottom : 70px;
    background-color: orange;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
    <div id="headerlinks"><ul><li><a href="/who we are/">who we are</a></li><li><a href="/church family/">church family</a></li><li><a href="/contact/">contact us</a></li></ul></div>
    <div id="bigquote">
    <h1> "I have many servants but few lovers." </h1>
    </body>
    </html>

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK well I'm not sure why this worked but this is what I did (actually I was just tidying up before tackling the problem)
    1. Removed "<?xml version="1.0" encoding="iso-8859-1"?>", it puts IE6 into quirks mode and isn't required.
    2. Changed the style #headerlinks li to #headerlinks a and repoved the display property
      Code:
      #headerlinks a {
      padding: 0px 5px; 
      background-color: green;
      }
    3. In the headerlinks div removed all the <ul>, </ul>, <li> and </li> tags, you don't particularly need a list, you just want the tags in a row which is what they will naturally do.


    What I haven't done that needs doing:

    Added the missing </div> tags, you should have a </div> for every <div>.

    HTH

  3. #3
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternitively do 1 above, add in the missing </div>s and add
    Code:
    #headerlinks ul {
    display: inline;
    }
    to your styles.

  4. #4
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ok, I am learning from this so now I have a question. In Mozilla I see about a 1px white space below the links. Why is that?

  5. #5
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately since I don't have Mozilla (this is perhaps some I should rectify) I can't reproduce the problem and off the top of my head I can think of no good reason why that should be for either of the solutions I gave.

    I will grab a straws and suggest removing the new line between the </div> and <div id="bigquote">, however I thought it was only IE that put in irritating blankspace for new lines.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    That code looks remarkably like a CSS layout I did for Jeremy:
    http://sitepointforums.com/showthrea...+tabled+layout
    http://www.vinniegarcia.com/tacf/.

  7. #7
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    That code looks remarkably like a CSS layout I did for Jeremy:
    http://sitepointforums.com/showthrea...+tabled+layout
    http://www.vinniegarcia.com/tacf/. [img]images/smilies/confused.gif[/img]
    You're right

  8. #8
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's okay Vinnie, Russ works in the Media department and is one of the creative heads of the new site

    J
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Jeremy W.
    It's okay Vinnie, Russ works in the Media department and is one of the creative heads of the new site

    J
    That's what I figured. I posted with the intent of support in mind: if he has any questions about why I did something he can feel free to PM me .


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
  •