PDA

View Full Version : Border Problems


scottcom4
06-21-2009, 12:20 PM
Hi Everybody,

I was having some footer problems that I couldn't resolve so I decided to start over using a fixed template with a sidebar, header and footer. I can't seem to extend the border to where I would like as you will see in the screenshot attached. I want the entire body and footer areas to be in a solid black border. Can somene please point me in the right direction?

Thank you in advance.

The code is as follows:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #666666;
background-image: url(Background---Dark.jpg);
padding-top: 2cm;
padding-bottom: 2cm;
border: thick solid #000;
}
.twoColFixLtHdr #container {
width: 780px; /* the auto margins (in conjunction with a width) center the page */
border: 1px none #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #FFFFFF;
background-image: url(Background---Light.jpg);
}
.twoColFixLtHdr #header {
text-align: center;
background-color: #DDDDDD;
background-image: url(Background.jpg);
background-repeat: repeat-x;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
height: 20cm;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
background-color: #EBEBEB;
background-image: url(Background.jpg);
background-repeat: repeat;
}
.twoColFixLtHdr #mainContent {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 6.25cm;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
font-family: "Brock Script";
}
.twoColFixLtHdr #footer {
background:#DDDDDD;
padding-top: 0;
padding-bottom: 0;
}
.BodyFormat {
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000;
text-align: left;
text-decoration: blink;
}
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
text-align: center;
background-image: url(Background.jpg);
background-repeat: repeat;
font-size: 9pt;
border: thick solid #000;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header"> <img src="Poodle-Right.gif" alt="Right Poodle" width="63" height="63" align="middle" /><img src="Pykasso-Logo.gif" alt="Pykasso Pooch Parlour &amp; Pet Products" width="585" height="39" align="middle" /><img src="Poodle-Left.gif" alt="Left Poodle" width="63" height="63" align="middle" />
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> Welome </h1>
<p align="left" class="BodyFormat">Pykasso is a family business and as such any dealings go directly through the owners, Brenda &amp; Scott Mitchell. </p>
<p align="left" class="BodyFormat">Pykasso Poodles will be breeding Miniature Poodles selectively for conformation, type and temperament. We breed for quality, not quantity. Our stud dog is on offer to approved bitches.</p>
<p align="left" class="BodyFormat">If you would like any details of upcoming puppies or stud enquiries, please phone or email for more information.</p>
<p align="left" class="BodyFormat">Pykasso Pooch Parlour &amp; Pet Products aim to look after all dogs and owner’s needs from grooming &amp; accessories, dog foods &amp; bowls to treats &amp; training. We will sell these at convenient times and locations and offer the best quality and professional care. We will treat our grooming parlour guests to massages and pampering as part of a normal service to make them feel truly relaxed.<br />
</p>
<p class="BodyFormat">Pooches are our Passion!</p>
<h2>
<!-- end #mainContent -->
</h2></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Contact Us | Privacy Policy | Products</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

DWcourse
06-21-2009, 06:00 PM
Can you post an image file. I don't download and open zipped files from unknown sources.

scottcom4
06-24-2009, 09:42 AM
Can you post an image file. I don't download and open zipped files from unknown sources.

Hi there.

I have attached an image as requested.

Thank you for your help.

Corrosive
06-24-2009, 09:46 AM
Hi there.

I have attached an image as requested.

Thank you for your help.

Try adding the border to your container styles...

.twoColFixLtHdr #container {
width: 780px; /* the auto margins (in conjunction with a width) center the page */
border: 1px none #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #FFFFFF;
background-image: url(Background---Light.jpg);
}

Then change the border styles on the other bits to fit in.

scottcom4
06-25-2009, 11:13 AM
Try adding the border to your container styles...

.twoColFixLtHdr #container {
width: 780px; /* the auto margins (in conjunction with a width) center the page */
border: 1px none #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #FFFFFF;
background-image: url(Background---Light.jpg);
}

Then change the border styles on the other bits to fit in.

Thank you for the code, but unfortunately it didn't work. Do you have any other suggestions???

Corrosive
06-25-2009, 01:13 PM
Thank you for the code, but unfortunately it didn't work. Do you have any other suggestions???

I wasn't giving you the code. That was the bit you needed to change!

DWcourse
06-25-2009, 02:31 PM
That solution will put a border around the whole design which seemed to be what you asked.

However, if you're trying to get the borders of the #mainContent and #sidebar areas to reach all the way to the #footer, it ain't gonna happen. You need to fake it. Here's what I'd try.

Put a border on all sides of #container as Corrosive suggested.

Put a bottom border on #header

Put a top border on #footer

If you know which column will always be the longest, put a left or right border (as appropriate) on it.

If the columns will vary, then create a background image for #container that you can repeat vertically (repeat-y) to create the border between #sidebar and #mainContent. In this case #header and #footer will need a background to hide the part of the #container background image you don't want to see and #sidebar and #mainContent will have no background image or color.