Harvengure
02-28-2010, 03:34 AM
Going to try and re-word this so it's clearer. I'm trying to create a fluid (or liquid) site...I've got a three column liquid layout and have layered several images on top of each other using z-index...positioning them absolutely in relation to each other. The css scales the lowest image so far (the images not having been included int he code below) but does not seem to scale any of the other images.
Any thoughts?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CssCreator-->HTML 4.01 Strict Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="762917.css" type="text/css" />
<!--[if IE]><style type="text/css">
img,
p {
width: 100%;
}
</style><![endif]-->
</head>
<body><div id="pagewidth" style="display" ><div id="wrapper" class="clearfix" ><div id="twocols" class="clearfix"><div id="maincol" ><img src="container" alt="Book" style="z-index:-1;"><div id="index" style="z-index:1; position:absolute; top:29px; left: 50px; width:50%;"><img src="A" alt="description"></div>
</div></div></div>
</body>
<script type="text/javascript">
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
</script>
<script type="text/javascript">
function reflow() {
var photo = document.getElementById("img");
img.style.border = img.style.border;
}
window.onload = reflow;
</script>
</html>
And the CSS
/* generated by csscreator.com */
html, body{
margin:0;
padding:0;
text-align:center;
}
img {
max-width: 100%;
min-width:1%;
}
#pagewidth{
width:100%;
text-align:left;
margin-left:auto;
margin-right:auto;
position:relative;
}
#leftcol{
width:10%;
float:left;
position:relative;
}
#twocols{
width:90%;
float:right;
position:relative;
}
#rightcol{
width:12%;
float:right;
position:relative;
}
#maincol{background-color: #FFFFFF;
float: left;
display:inline;
position: relative;
width:88%;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
img {
max-width: 100%;}
}
And please, don't be afraid of being harsh. I realize it's very sloppy but I am more concerned of getting it to work then with anything else at this point. :P
If I was unclear on anything I will try my best to better explain.
Thank you in advance.
Any thoughts?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CssCreator-->HTML 4.01 Strict Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="762917.css" type="text/css" />
<!--[if IE]><style type="text/css">
img,
p {
width: 100%;
}
</style><![endif]-->
</head>
<body><div id="pagewidth" style="display" ><div id="wrapper" class="clearfix" ><div id="twocols" class="clearfix"><div id="maincol" ><img src="container" alt="Book" style="z-index:-1;"><div id="index" style="z-index:1; position:absolute; top:29px; left: 50px; width:50%;"><img src="A" alt="description"></div>
</div></div></div>
</body>
<script type="text/javascript">
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
</script>
<script type="text/javascript">
function reflow() {
var photo = document.getElementById("img");
img.style.border = img.style.border;
}
window.onload = reflow;
</script>
</html>
And the CSS
/* generated by csscreator.com */
html, body{
margin:0;
padding:0;
text-align:center;
}
img {
max-width: 100%;
min-width:1%;
}
#pagewidth{
width:100%;
text-align:left;
margin-left:auto;
margin-right:auto;
position:relative;
}
#leftcol{
width:10%;
float:left;
position:relative;
}
#twocols{
width:90%;
float:right;
position:relative;
}
#rightcol{
width:12%;
float:right;
position:relative;
}
#maincol{background-color: #FFFFFF;
float: left;
display:inline;
position: relative;
width:88%;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
img {
max-width: 100%;}
}
And please, don't be afraid of being harsh. I realize it's very sloppy but I am more concerned of getting it to work then with anything else at this point. :P
If I was unclear on anything I will try my best to better explain.
Thank you in advance.