PDA

View Full Version : CSS within div tags - going crazy -need help



troystump
10-31-2007, 02:15 AM
Hello there,
I am having a problem with the layout of my website. i am trying to not have any of my tags break, but at a resolution of 800 x 600 (maximized), in mozilla, it fails. it seems to work fine if the browser window isnt maximized, then as soon as it is maximized i run into problems. my site is based off of this demo - http://www.pmob.co.uk/temp/min-max-3col.htm and i would like the layout to be exactly like this my site is here - http://www.auriasdesign.com/troystump/clients/jeffstump/indextest.html


here is my current code (divs are colored for visual degbugging on my part)

<!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>
<title>Jeff Stump</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
body {
padding:0 0 0 0;
color: #000000;
background-color:#ffffff;
text-align:center;
}
#wrapper{
background-color:#ff0000;
width:auto;

min-width:770px;
max-width:1024px;
text-align:left;
margin-left:auto;
margin-right:auto;
position:relative;
}
#outer{
margin-left:348px;
margin-right:421px;
background-color:#ffffff;
color: #000000;

}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:17px;
text-align:center;
overflow:hidden;
color: #fff;
background-color:#00ff00;
}
#left {
position:relative;/*ie needs this to show float */
width:348px;
height:350px;
float:left;
margin-left:-347px;/*must be 1px less than width otherwise won't push footer down */
left:-1px
}
* html #left {margin-right:-3px;}/* 3px jog*/
* html #outer{/* 3px jog*/
margin-left:345px;
margin-right:418px;
}

#right {
position:relative;/*ie needs this to show float */
width:421px;
height:350px;
float:right;
margin-right:-420px;/*must be 1px less than width otherwise won't push footer down */
left:1px;
}
* html #right {margin-right:-130px;margin-left:-3px}/* stop float drop in ie + 3px jog */

#footer {
width:100%;
clear:both;
background-color:#ffffff;
color: #000000;
text-align:center;
position:relative;
}
#clearheader{height:17px;background-color:#000000;}/*needed to make room for header*/
#centrecontent {float:right;width:99%;position:relative;}
* html #centercontent{width:100%}

.outerwrap {
float: left;
width: 99%;

}
.clearer{
height:0px;
overflow:hidden;
margin-top:0px;
clear:both;

}

td
{
font-family: "trebuchet ms";
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
padding: 0px;
border: 0px;
}

.subtable
{
height: 62px;
width: 100%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
border-spacing: 0px;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
body {width:expression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? "770" : "auto") : "770px") : "auto" );}
#wrapper {width:expression( documentElement.clientWidth > 1024 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1024 ? "1024" : "auto") : "1024px") : "auto" );}
* html #outer, * html #wrapper,* html #centrecontent {height:1%}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="outer">
<div id="clearheader"></div>
<div class="outerwrap">
<div id="centrecontent">&nbsp;</div>



<div id="left">
<img src="beta0.png" height="100" width="348"style="position:absolute;left:0px;bottom:0px;">
</div>
<div class="clearer"> </div>
</div>
<!--end outer wrap -->

<div id="right">
<iframe src="contact.html" style="width: 421px; height: 350px;" framespacing="0" frameborder="0" name="content" scrolling="auto"></iframe> </div>
<div class="clearer"></div>
</div>
<div id="footer">
<table class="subtable">
<tr>
<td colspan="3" height="10" bgcolor="#000000" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top" width="78">
<script type="text/javascript" src="swfobject.js"></script>

<div id="flashPlayer">Download the latest flash plug-in.</div>

<script type="text/javascript">
var so = new SWFObject("playerLoopMini.swf", "mymovie", "75", "30", "7", "#ffffff");
so.addVariable("autoPlay", "no");
so.addVariable("soundPath", "loop.swf");
so.write("flashPlayer");
</script></td>

<td align="left" valign="top" style="padding-top: 4px;">p r o f e s s i o n a l <font color="#8B0000">h a i r</font> d r e s s e r.</td>

<td align="right" style="padding-top: 10px;">&nbsp;<img src="beta6.png" align="top"> &nbsp;<img src="beta5.png" align="top"> &nbsp;<img src="beta4.png" align="top"> &nbsp;<img src="beta3.png" align="top"></td>
</tr>
</table>
</div>

<div id="header">Header </div>

</div>

</body>
</html>

zro@rtv
10-31-2007, 05:09 AM
Im a little confused on what the visual effect you are trying to achieve is.
Do you have a graphic, or could you describe in more detail what you are trying to do?

There are a handful of errors in the markup as well, like not properly closing image tags.

Also, when posting code. please use the CODE tags.