PDA

View Full Version : help with spacing


wolfmanbc
12-10-2008, 03:40 AM
I started a page using a dreamweaver template.

I picked 1 column fixed, centered with a header and footer.

I put together my page but there's a white border or box or something thats separating my header from the main content, and main content from my footer. I dont know if its separating them, I think its just the space between each div.

Can anyone help me eliminate that space?

coloeagle
12-10-2008, 03:48 AM
Can you give us a url or post your code? If you post your code be sure to wrap it inside the code tags.

wolfmanbc
12-10-2008, 04:20 AM
<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;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 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;
}
.oneColFixCtrHdr #container {
width: 736px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
background: #DDDDDD; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-right: 0;
padding-left: 0;
}
.oneColFixCtrHdr #mainContent {
padding: 0 30px;
background-color: #FFFFFF;
background-image: url(holidays_FitnessPlaza.jpg);
background-repeat: no-repeat;
}
.oneColFixCtrHdr #footer {
background:#DDDDDD;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
}
.oneColFixCtrHdr #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: 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.Text_info {font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
.highlight_info {font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: italic;
color: #FF0000;
}
.style1 { color: #FF0000;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
}
.style2 { font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
.style3 {color: #FF0000}
.style8 {font-family: Arial, Helvetica, sans-serif; font-size: 36px; }
.style9 {font-size: 18px}
-->
</style>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
<div id="header">
<h1><img src="header.jpg" width="736" height="121" /></h1>
<!-- end #header --></div>
<div id="mainContent">
<h1><br />
<br />
<br />
<span class="style1">Give</span><span class="style8"> the Gift of Health and <span class="style3">Get</span></span><span class="style1">...</span><span class="style9"><br />
<br />
<span class="style2">- Bring a friend before 12/31/08 and you </span></span><span class="highlight_info"><u>get</u></span><span class="Text_info"> $25 off your next month's dues.
<!-- end #mainContent -->
<br />
<br />
- Your friends </span><span class="highlight_info"><u>get</u></span><span class="Text_info"> a free month.<br />
<br />
- You </span><span class="highlight_info"><u>get</u></span><span class="Text_info"> a new workout partner<br />
<br />
- Your friends </span><span class="highlight_info"><u>get</u></span><span class="Text_info"> a thoughtful healthy gift.<br />
<br />
- Former members </span><span class="highlight_info"><u>get</u></span><span class="Text_info"> a reduced enrollment fee and a free month.</span><br />
<br />
<span class="Text_info">Gift certificates available for all memberships from 1 week to 1 year.</span><br />
</h1>
<p>&nbsp;</p>
<p><br />
<br />
</p>
</div>
<div id="footer">
<p><img src="footer.jpg" width="736" height="121" /></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>

coloeagle
12-10-2008, 04:37 AM
Try giving your header and footer id's width and height settings equal to the size of the images. Then remove the margins from the div's.

wolfmanbc
12-10-2008, 05:26 AM
the white spaces are still there. they jumped around abit but still there

edbr
12-10-2008, 05:46 AM
try without the <h1> tags in the header and the <p> tags in the footer

wolfmanbc
12-10-2008, 06:19 PM
didn't work. I redid the page and i got it to work, thanks for your help guys

Corrosive
12-10-2008, 09:41 PM
didn't work. I redid the page and i got it to work, thanks for your help guys

Just a bit of advice as you seem to be getting into your CSS based designs now. Try not to use the </br> tags so much (if at all). Try and totally separate content and structure