SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems having borders

    Hello Sitepointers.

    I am having an issue, bordering my "headeri" div. The main problem, is when I use border-bottom, it borders the top. Also, when I use background-color, it doesn't add the color to the "div".

    Here is the code
    Code:
     <!DOCTYPE HTML>
    <html lang = "en">
      <head>
        <title>VALUES</title>
        <link href = "style1.css" rel = "stylesheet" type = "text/css"/ >
        <meta name="keywords" content="VALUES" />
        <meta name="description" content="DESCRIPTON_VALUES." />
        <meta charset = "utf-8" />
      </head>
    <body>
      <div id = "headeri" >
        <div id = "titlei">
          <h1 class = "titlec">TITLE_VALUE</h1>
          <p class = "sloganc">SLOGAN_VALUE</p>
        </div> <!-- end of titlei -->
        <div id = "followi">
        
          <!-- below is a twitter follow,  (We need to figure out if we want a small button, or a larger one(the "F", or "FOLLOW US") -->
          <a href="http://twitter.com/???????"><img src="IMAGE_SOURCE"  alt = "Image for Twitter Link" width = "???" height = "???" /></a>
               <!-- we can make them the same size, if ness -->                 
          <br />
          <!-- below is a facebook follow, (We need to figure out if we want a small button, or a larger one(the "F", or "FOLLOW US")-->
          <a href="http://facebook.com/???????/"><img src="IMAGE_SOURCE" alt = "Image for Facebook Link" width = "???" height = "???" /></a>
          <br>
        </div> <!-- end of followi -->
      </div> <!-- end of headeri -->
    </body>
    </html>
    and here is the CSS :
    Code:
    /* CSS for mainpage.html() */
    
    #headeri { 
      background-color: red;
      border-bottom: 5px solid black;}
    
    #titlei { 
      float: left; }
      
    
              
    
    #followi {
      float: right;
      border-bottom: 5px solid black;
       }
    Thank you

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The problem is the a container doesn't wrap around its floated contents by default, so at the moment, the header has no height, and the contents are hanging out of it. An easy way to change that is to add overflow: hidden:

    Code:
    #headeri { 
      background-color: red;
      border-bottom: 5px solid black;
      overflow:hidden;
    }
    Here's a brief explanation of containing floated elements:

    http://pageaffairs.com/web/css/containing-floats/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

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
  •