...

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



troystump
10-31-2007, 01: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, 04: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum