Hello everyone, relatively new web developer seeking help! I'm working on a template that will eventually be used with Joomla, but right now I'm just concerned about getting the layout to work with just the HTML and CSS. A little background first:
I want to create a fixed frame around the webpage that expands and contracts to fit different resolutions and browser window resizing, and then have the content scroll inside of that frame. The frame is also comprised of transparent PNG's since the client wanted lots of art on the frame around the content. My solution to keep the graphical layout liquid was to chop the frame up into 3 bits: the left side that was absolutely positioned to the left side of the screen, a right side that was similarly positioned to the right, and a thin strip that could be repeated horizontally as much as necessary to fill the gap in between.
Right now It mostly works in Firefox, and is a giant mess in IE, but that's a whole other problem that I'll deal with after. I'd like to get it working in the standards compliant browsers first and then figure out some hacks that I can use for IE. Hopefully I can do that....
Here is my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Site Test</TITLE>
<link rel="stylesheet" type="text/css" href="site_test.css" />
</HEAD>
<BODY>
<div id="wrapper">
<div id="frame_left">
</div><!--End frame_left-->
<div id="logo">
</div><!--End logo-->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
etc, etc,
</div><!--End content-->
<div id="frame_right">
</div><!--End frame_right-->
</div><!-- End wrapper -->
</BODY>
</HTML>Here is my style sheet:
#wrapper {
margin: 0px;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
background-image: url(frame_middle.png);
background-repeat: repeat-x;
z-index: 10;
}
#frame_left {
margin: 0px;
background-color: transparent;
background-image: url(frame_left2.png);
background-repeat: no-repeat;
width: 224px;
height: 625px;
position: fixed;
left: 0px;
top:0px;
z-index:50;
}
#frame_right {
margin: 0px;
background-color: transparent;
background-image: url(frame_right2.png);
background-repeat: no-repeat;
width: 198px;
height: 625px;
position: fixed;
right: 0px;
top: 0px;
z-index: 25;
}
#logo {
margin: 0px;
background-color: transparent;
background-image: url(pink_logo2.png);
background-repeat: no-repeat;
width: 316px;
height: 125px;
position: fixed;
top: 0px;
left: 34.5%;
z-index: 75;
}
#content {
background-color:transparent;
position: fixed;
top: 145px;
bottom: 60px;
left: 160px;
right: 150px;
width: auto;
height: auto;
overflow: auto;
}In FireFox everything works in terms of positioning and the scroll bar pops up, but won't actually scroll anywhere, even though there is content off screen? Any thoughts?
I am slightly concerned that this is just totally undoable, but then I look at some of the stuff on CSS Zen Garden and think that there must be a way to pull it off!
Any help is very, very much appreciated.
