SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast cluongo's Avatar
    Join Date
    Jun 2011
    Location
    Atlanta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help ASAP PLz - Image Border Around Content

    I cant figure this out and its for a project, if you can help me out asap ill marry you.

    I have a 2 border images that I need to repeat around my content. 2 of the images are simple borders that will go to the left and bottom of my content. The 3rd image is a picture that will be in the bottom left where the 2 borders meet.

    What I need to do is have 4 div containers. 3 for the images, and 1 to position them all.

    Only my corner image is showing and im not sure if i positioned the divs right. Can someone please help asap!

    HTML:
    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <!-- 
       New Perspectives on HTML and XHTML 5th Edition
       Additional Cases
       Case 2
    
       Cornucopia Online Home Page
       Author: 
       Date:   
    
       Filename:         corn.htm
       Supporting files: bottom.jpg, corner.jpg, cornlogo.jpg, cornstyles.css, 
                         countdown.js, left.jpg, tday.js, turkey.jpg
    
    -->
    
       <title>Cornucopia Online</title>
       
       <link rel="stylesheet" type="text/css" href="cornstyles.css" />
       
       <script language="javascript" src="tday.js"></script>
        <script language="javascript" src="countdown.js"></script>
    
    
    </head>
    
    <body>
    	
    
    
    <div id="boxContent"> <!-- border holder-->
    <div id="corner"> <!-- Corner Meetup Image-->
    <div id="bottom"> <!--Bottom Image-->
    <div id="left"> <!-- left image-->
    
     <div id="head">
     	<div id="countdown">
     		<script type="text/javascript">
     		function countdown() {
     			}
     		</script>
     	</div>
          <img src="cornlogo.jpg" alt="Cornucopia Online" />
       </div>
       
    
    
       <div id="main">
    
                <ul id="links">
                   <li><a href="corn.htm">Home</a></li>
                   <li><a href="#">Products</a></li>
                   <li><a href="recipe.htm">Recipes</a></li>
                   <li><a href="#">Newsletter</a></li>
                   <li><a href="#">My Account</a></li>
                   <li><a href="#">FAQs</a></li>
                   <li><a href="#">Support</a></li>
                   <li><a href="#">Contact Us</a></li>
                </ul>
    
               <ul id="links2">
                  <li><a href="corn.htm">Home</a></li>
    
                  <li><a href="#">Products</a></li>
    
                  <li class="sub"><a href="#">Turkey</a></li>
                  <li class="sub"><a href="#">Poultry</a></li>
                  <li class="sub"><a href="#">Ham</a></li>
                  <li class="sub"><a href="#">Pastas</a></li>
                  <li class="sub"><a href="#">Cheeses</a></li>
                  <li class="sub"><a href="#">Dressings</a></li>
                  <li class="sub"><a href="#">Herbs and Spices</a></li>
     
                  <li><a href="recipe.htm">Recipe of the Week</a></li>
    
                  <li class="sub"><a href="#">Breakfast</a></li>
                  <li class="sub"><a href="#">Lunch</a></li>
                  <li class="sub"><a href="#">Dinner</a></li>
                  <li class="sub"><a href="#">Low Calorie</a></li>
                  <li class="sub"><a href="#">Vegetarian</a></li>
    
                  <li><a href="#">Newsletter</a></li>
     
                  <li class="sub"><a href="#">Winter</a></li>
                  <li class="sub"><a href="#">Spring</a></li>
                  <li class="sub"><a href="#">Summer</a></li>
                  <li class="sub"><a href="#">Autumn</a></li>
                  <li class="sub"><a href="#">Holiday</a></li>
    
                  <li><a href="#">My Account</a></li>
    
                  <li class="sub"><a href="#">Login</a></li>
                  <li class="sub"><a href="#">Shopping Cart</a></li>
                  <li class="sub"><a href="#">Recent Orders</a></li>
                  <li class="sub"><a href="#">Profile</a></li>
    
                  <li><a href="#">FAQS</a></li>
                  <li><a href="#">Support</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
    
    
             <div id="article">      
                <h1>Welcome</h1>
                <img src="turkey.jpg" alt="" />
    
                <p class="firstPara">Cornucopia Online began as a small poultry
                   shop in rural Connecticut. Once famous only locally for the quality
                   of its poultry, dressings, herbs, and spices, Cornucopia is fast becoming
                   a leading provider of poultry-based dishes and products throughout
                   the Web.</p>
    
                <p>If you've shopped here before, welcome back! If this is your first visit,
                   a wealth of delicious tastes and aromas await you. Please explore our
                   Products page for a sampling of our tasty dishes.</p>
    
                <p>Cornucopia Online is an ideal entertaining resource for your next banquet
                   or family gathering. While we specialize in turkey, we also provide
                   delicious pastas, cheeses, hams, and side dishes. Cornucopia Online has
                   everything you need, including entertaining tips and serving advice.</p>
    
                <p>Cornucopia Online is dedicated to ensuring safe and speedy delivery of our 
                   food products. Please take advantage of our SureFresh delivery system        
                   employing air tight, fully insulated packages that keep contents cool for 
                   as long as 72 hours in external temperatures of over 100 degrees Fahrenheit.
                   We stand by our guarantee that the food products you receive from us are in 
                   the same fresh condition as when they left our facility.</p>
    
                <p>We use FedEx, UPS, or the U.S. Postal Service to ensure the timely delivery
                   of your order. Orders submitted before 4pm ET can be scheduled to arrive the 
                   following business day (or any business day thereafter) for just $9.99!</p>
             </div>
    
    
    
       </div>
       
    </div> <!--bottom border image-->
    </div> <!-- LEFT border image-->
    </div> <!--CORNER border image-->
    </div> <!--BOXCONTENT-->
       <address>
           Cornucopia Online &bull;
           781 Bridge Street &bull;
           Bristol, CT  06010 &bull;
           1 - (800) 555 - 1088 
       </address>
       
    
    
    </div>
    
    </body>
    
    </html>
    CSS:
    Code:
    /*
       New Perspectives on HTML and XHTML 5th Edition
       Additional Cases
       Case 2
    
       Cornucopia Online Style Sheet
       Author: 
       Date:   
    
       Filename:         cornstyles.css
       Supporting Files: none
    
    */
    
    *                             {margin: 0px; padding: 0px}
    body                          {font-size: 14px; margin: 0px; padding: 0px;
                                   font-family: 'Lucida Grande', Verdana, sans-serif}
    #pageContent                  {width: 780px; position: absolute; top: 0px; left: 0px}
    #head                         {margin-left: 10px}
    
    
    
    #main                         {width: 100%}
    
    
    #links                        {list-style-type: none; text-align: center; width: 100%}
    #links li                     {float: left; width: 12%; font-size: 12px; text-align: center}
    #links li a                   {display: block; width: 100%; text-decoration: none; color: rgb(173, 89, 28);
                                   border: 1px solid rgb(173, 89, 28)}
    #links li a:hover             {color: white; background-color: rgb(173, 89, 28)}
    
    
    
    #links2                       {clear: left; float: right; width: 160px; font-size: 13px;
                                   list-style-type: none; padding: 5px; margin-top: 10px; 
                                   background-color: rgb(244, 244, 233)}
    #links2 li.sub                {text-indent: 20px}
    #links2 li.newgroup           {margin-top: 25px; border-top: 1px solid black}
    #links2 a                     {text-decoration: none; color: black;
                                   display: block; width: 100%; border-bottom: 1px dashed rgb(244, 244, 233)}
    #links2 a:hover               {color: black; background-color: rgb(224, 224, 213); 
                                   border-bottom: 1px dashed rgb(173, 89, 28)}
    
    
    
    #article                      {width: 560px}
    #article h1                   {font-weight: normal; font-size: 32px; letter-spacing: 10px;
                                   color: rgb(173, 89, 28); margin: 5px 0px}
    #article h2                   {font-weight: normal; font-size: 18px; letter-spacing: 5px;
                                   color: rgb(173, 89, 28); margin: 5px 0px}
    #article img                  {float: right; margin: 0px 10px 10px 10px}
    #article p                    {margin: 15px 10px 15px 0px}
    #article ul                   {list-style-type: disc; margin-left: 20px; font-size: 10px}
    #article ol                   {margin-left: 30px; font-size: 10px}
    
    
    
    address                       {font-style: normal; font-size: 10px; text-align: center; 
                                   padding-bottom: 10px}
                                   
     
                                   /* IMAGE BORDER PROPERTIES */                              
    #corner {
    	background-image: url('corner.jpg');
    	background-repeat: no-repeat;
    	background-position: left bottom;
    }                           
    
    #boxContent {
    	width: 740px;
    	padding: 0px 0px 40px 40px;
    }
    
    #bottom {
    	background-image: url('bottom.jpg');
    	background-position: bottom;
    	background-repeat: repeat-x;
    }
    
    #left {
    	background-image: url('left.jpg');
    	background-position: left;
    	background-repeat: repeat-y;
    }
    
                                   /* END IMAGE BORDER PROPERTIES */                              
    
                                   
    p.firstPara:first-line {
    	font-variant: small-caps;
    }
    
    P.firstPara:first-letter {
    	float: left;
    	font-size: 350%;
    	line-height: 0.8;
    	margin: 0px 5px 5px 0px;
    	color: rgb(173,89,28);
    	font-family: "Times New Roman";
    }
    
    #countdown {
    	width: 150px;
    	margin-top: 10px;
    	margin-bottom: 10px;
    	margin-right: 0px;
    	margin-left: 0px;
    	padding: 5px;
    	font-size: 10px;
    	float: right;
    }

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    you don't need "boxcontent"...

    also reverse the order of your tags... #left, #bottom, # corner ;

    since you no longer have /need boxcont... move the padding to #corner, and move the size to the outer most div(#left, I believe).. it is likely that you will need to recalculate that size to 820px ( 740+40*2 ) so that it account for the padding you have moved to the inner div.

    you should be good after that. I will, however, forgo the marriage offer.


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
  •