Forum Moderators: not2easy

Message Too Old, No Replies

CSS Headache

         

kevinb84

7:58 pm on Feb 8, 2008 (gmt 0)

10+ Year Member



Need help on the following code if anyone wouldn't mind lending a hand. Right now there is a header, an image, my content, and a footer. Everything is exactly where I want it to be except the content. I would like that to be about 450 pixels up and 300 pixels to the right (about 1.5 inches below the header and about 1.5 away from the image in the corner) So essentially I want the content to overlay the corner image slightly. I just seem to mess up the footer everytime I do so. Any help would be GREATLY appreciated!


<!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">
<!--
#container {
margin:auto;
width: 100%;
background: #ffffff;
}

#header {
background: #DDDDDD;
}

#content {
float:left;
width:100%;
}
#content_text {
position: relative;
margin-left: 15em;
width: 75%;
float: none;
top: 0em;
margin-right: 20em;
margin-bottom: -20px;
}

#footer {
clear:both;
background-image: url(assets/images/jpg/bottomcorner3.jpg);
}
#text_footer_cpywt {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: .7em;
color: #FFFFFF;
text-decoration: none;
}
#text_footer_nav {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #FFFFFF;
text-decoration: none;
word-spacing: 1em;
background-position: center;
}
.div_header {background-image: url(assets/images/gif/header_bg.gif);
background-repeat: repeat-x;
background-position: top;
height: 69px;
}
.div_header_sel_nav {background-image: url(assets/images/gif/header_sel_nav.gif);
}
.div_header_unsel_nav {background-image: url(assets/images/gif/header_unsel_nav.gif);
}
#text_header_coname {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #FFFFFF;
}
#text_header_normal {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #FFFFFF;
}
#text_header_sel_nav {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
#text_header_unsel_nav {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
background-position: center;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#apDiv1 {
position:absolute;
left:505px;
top:103px;
width:697px;
height:147px;
z-index:1;
}
.text_content_header {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #666666;
text-decoration: none;
font-weight: bold;
}
.text_content_normal {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000;
text-decoration: none;
}
.text_content_subheader {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-weight: bold;
color: #3366FF;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="header">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="div_header">
<tr>

<td width="7%"><img src="assets/images/gif/header_logo.gif" alt="logo" width="64" height="69" /></td>
<td width="16%" id="text_header_coname"><strong>BBP</strong> Designs</td>
<td width="3%"><img src="assets/images/gif/header_dottedline.gif" alt="dotted line" width="25" height="69" /></td>
<td width="36%" id="text_header_normal">Custom Website Development</td>
<td width="38%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="65" align="center" class="div_header_sel_nav" id="text_header_sel_nav">Home</td>

<td width="1" height="69" align="center">&nbsp;</td>
<td width="85" align="center" class="div_header_unsel_nav" id="text_header_unsel_nav">Services</td>
<td width="1" align="center">&nbsp;</td>
<td width="80" align="center" class="div_header_unsel_nav" id="text_header_unsel_nav">Portfolio</td>
<td width="1" align="center">&nbsp;</td>
<td width="70" align="center" class="div_header_unsel_nav" id="text_header_unsel_nav">Prices</td>
<td width="1" align="center">&nbsp;</td>

<td width="100" align="center" class="div_header_unsel_nav" id="text_header_unsel_nav">Contact US</td>
<td width="12">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="content">

<img src="assets/images/png/top_left_corner.png" width="551" height="456" />
<table width="83%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="50%" valign="top"><h2 class="text_content_header">Why a website will complete the puzzle!</h2>
<span class="text_content_normal">Looking to have a website built? Possibly redesign or upgrade your existing website? Your website design is only as good as the leads and sales that it brings in. We know, we're in business too. Thats why our custom web design process is also focused on giving you a return on your investment.</span></td>
<td width="50%" valign="top"><h2 class="text_content_header">Get the site you want in quickly as a week!</h2>

<p class="text_content_normal">BBP Designs consists of many well rounded indviduals working together to get your project done in a timely manner. Staffed with an expert in every aspect of web design there is no project to big or small for us to accomdate.</p></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td><h2 class="text_content_header">Benefits of working with BBP Design</h2>
<p><span class="text_content_subheader">You can expect top quality</span><br />

<span class="text_content_normal">Nothing is more important than good quality when trying to advertise your product. Once taking on your project we hand your criteria into our team who will create the original proof. We will continue working on the project until you think we have came up with a quality design that you will be happy with. </span></p>
<p><span class="text_content_subheader">Got a deadline?</span><br />
<span class="text_content_normal">No problem, because of our flexibility we have one of the fastest turn-around times in the business. Let us worry about working around the clock to get the job done for you.</span></p>
<p><span class="text_content_subheader">Why spend a small fortune?</span><br />
<span class="text_content_normal">Don't be fooled. BBP Designs was created with the small business in mind but no project will pose a problem. Our sites are custom made from scratch to give your site the uniqe feel for a fraction of the cost of major vendors.</span></p>
<p><span class="text_content_subheader">Mind your P's and Q's!</span><br />

<span class="text_content_normal">Customer service is very important to us. Next to our search engine optimization, word of mouth is the biggest type of advertisement. We want you to you to have a positive experience that will make a great impression. Getting in touch with someone will never be a problem and the founder of BBP will more often than not being the one to get in touch with you personally.</span></p>
<p><span class="text_content_subheader">Lifetime warranty?!?!</span><br />
<span class="text_content_normal">Thats right, nobody is perfect but our design team is pretty close. IF your site should ever have a flaw on it for the lifetime of our design, our crew will fix their mistakes at no additional charge.</span></p></td>
</tr>
</table>
<p>&nbsp;</p></td>
</tr>

</table>
</div>
<div id="footer">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td align="center" valign="middle" id="text_footer_nav">Home Services Portfolio Prices Contact Us</td>
</tr>
<tr>

<td align="center" valign="middle" id="text_footer_cpywt">&copy; 2007 BBP Designs</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Thanks,
-Kevin

swa66

1:46 am on Feb 9, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First steps: validate the html and the css.

E.g.: you have id-s that occur more than once.
It's not just going to confuse us, but the browsers also.

Next the image: why not make it a background image on the text that's going on top of it? Although tables on top of a background, you might head into serious trouble with IE...

Typically we hope for tables not being nested any longer out here in CSS land. Our goal typically is to separate all layout n the CSS and only keep content in the (x)html.
So this is far back in my past.