SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border issues in CSS

    In the attached HTML and CSS I am trying to get a border around the entire div called container. just applying the border didnt work so I have used the header and footer to get some of it in place but cant figure out how to get the left and right sides sorted. any assistance would be greatly appreciated.
    Thanks
    Hayden

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head>
    <title>Floren and Gilder - Beautiful handmade leather handbags and accessories</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name ="description" content ="Floren and Gilder handmade leather handbags and accessories" />
    <meta name ="keywords" content = "luxury leather handbags handmade leather handbags belts accessories deer nappa wallets made to order handbags new zealand made leather handbags">
    <link href="F&G.css" rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    </head>
    <body>
    <div id="container">
     
                <div id="header">    
                        <!-- navigation -->
            <div id="navigation" class="mod">
     
              <div class="mod-main nav">
                <ul class="list-inline">
                  <li><a href="gallery.html">Gallery</a>
                  <!--  <ul>
                      <li><a href="">Bags</a></li>
                      <li><a href="">Belts</a></li>
                      <li><a href="">Accessories</a></li>
     
                    </ul> -->
                  </li>
                  <li><a class="active" href="about.html">About Us</a>
                  </li>
                  <li><a href="contact.html">Contact Us</a>
                  </li>
                  <li><a href="blog.html">Blog</a></li>
                </ul>
              </div>
            </div>
            <!-- /navigation -->
                        <div id="logo">
                            <img src="images/Horse3.png" class ="feature" width="125" height ="83"/>
                        </div> <!-- end of logo div -->
                        <div id="SiteBranding">
                            <img src="images/branding.png" class ="feature" width="350" height ="50"/>
                        </div> <!-- end of SiteBranding div -->
                </div>    <!-- end of header div -->    
                <div id="AboutContent">
                    <p>Floren and Gilder was born in 2006 from a desire to create beautiful, functional handbags, belts and other leather accessories.  Our products are designed and made to look great without pandering to the latest fashion fads.
    <br>
    <br>
    Our construction techniques promote the original strength and beauty of the leather without tampering too much with the natural structure of the hide.  This also assists longevity of life for the product as it is given the best possible opportunity to improve on its beauty and develop its own patina the more it is used and loved.
    <br>
    <br>
    All bags and belts are currently made to order. New designs and variations to those shown in the gallery are available upon request. Special and non fashion projects are also very welcome.
    <br>
    <br>
    For further information please <a href="contact.html">contact us</a>.
    <br>
    <br>
    Floren and Gilder 
    <br>
    Owner: Jude Stubbington
    <br>
    301 Middle Renwick Rd 
    <br>
    RD1 Blenheim 7271 
    <br>
    New Zealand
    <br>
    <a href="#">info@snip.com</a>
    <br>
    0064 (0)22 674 2260
    </p>
                </div> <!-- end of AboutContent div -->
                <div id="SlimGall">
                    <img src="images/aboutSlim.jpg" width="140" height="333" />
                </div> <!-- end of ImgGall div -->
     
     
                <div id="footer">
                </div> <!-- end of footer div -->
    </div> <!-- end of container div -->
    </body>
    </html>

    Code CSS:
    body {
    background-color: #AAB29C;
    padding:20px;
    margin:0px;
    text-align: center;
    }
    #container {
    margin: 0px auto;
    width: 752px;
    text-align: left;
    background-color: #92ad8b;
    padding: 0px;
    position: relative;
     
    }
     
    #ImgGall {
    position: absolute;
    left: 104px;
    top: 105px;
    padding: 4px;
    }
     
    #SlimGall {
    position: absolute;
    left: 606px;
    top: 105px;
    padding: 4px;
    }
     
    #header {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    height: 105px;
    background-color: #92ad8b;
    border-top: 2px solid  #446f60; 
    border-left: 2px solid #446f60;
    border-right: 2px solid #446f60;
    }
     
    #footer {
    position: absolute;
    left: 0px;
    top: 498px;
    width: 100%;
    background-color: #92ad8b;
    height: 35px;
    border-bottom: 2px solid #446f60;
    border-left: 2px solid #446f60;
    border-right: 2px solid #446f60; 
    }
     
    #dims {
    position: absolute;
    left 0px;
    top: 355px;
    }
     
    #SiteBranding {
    position: absolute;
    left: 105px;
    top: 20px;
    }
     
    #logo {
    position: absolute;
    left: -7px;
    top: 15px;
    }
     
    #BagName {
    Position: absolute;
    left: 105px;
    top: 443px;
    }
     
    #BagDesc {
    position: absolute;
    left: 105px;
    top: 453px;
    }
     
    #Enq {
    Position: absolute;
    top: 440px;
    left: 500px;
    }
    #Prev {
    Position: absolute;
    top: 440px;
    left: 606px;
    }
     
    #Next {
    Position: absolute;
    top: 440px;
    left: 685px;
    }
     
    #gallery {
    Position: absolute;
    top: 65px;
    left: 105px;
    }
     
    #about {
    Position: absolute;
    top:65px;
    left: 170px;
    }
     
    #contact {
    Position: absolute;
    top:65px;
    left: 230px;
    }
     
    #blog {
    Position: absolute;
    top:65px;
    left: 300px;
    }
     
     
    #AboutContent {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 605px;
    padding: 3px;
    }
     
    #blogContent {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 605px;
    padding: 3px;
    }
    Last edited by kohoutek; Mar 17, 2010 at 18:42. Reason: Removed email address & added code tags

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all if you want to set a visible border around the container, you need to set it's border property. also, i suggest setting the beight to auto. finally, you will want to set overflow to hidden, in order to nicely keep your content within the border.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The container div, though it's the reference for its absolute positioned content, it can't sense what size its AP content is. So you need to manually apply a height on the container.

    OT,
    It is easier to read posted code when it's wrapped in code tags; just select pasted code and push the [#] button.
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have tried setting the border property as follows:
    border: 2px solid black;
    that and no joy, it adds a border on top but thats all. when I set overflow to hidden all of the content disappears???

  5. #5
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I set height to a fixed value and it worked! thanks for your help
    cheers
    Hayden

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hstubbington View Post
    have tried setting the border property as follows:
    border: 2px solid black;
    that and no joy, it adds a border on top but thats all. when I set overflow to hidden all of the content disappears???
    Just so you know .

    The border you set was setting it on the top and bottom.

    It just had no height (as you saw)

    Overflow:hidden; will cut the content because..well technically all the content is hanging out of hte container

    Are you sure you need all that AP there? Seems awfully redundant.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm very new to all of this - how would I do it without AP?!!

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hstubbington View Post
    I'm very new to all of this - how would I do it without AP?!!
    Hi, i need to run but a quick glance at your code shows that you use AP for everything. This is a bad idea because AP is to fragile and will break your lay-out sooner or later. Ap should only be used for minor stuff (or best be avoid at all).

    I suggest you redo the layout, using floats. Any problems, post the new code or a live url and we'll get it fixed

    If you're not all to familiar with floats, you can read up on them in the Faq
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •