Forum Moderators: not2easy
There is a great tutorial located at [webmasterworld.com...] with the last example code providing 95% of what I want to achieve.
The missing element is that I want to place the content div as high up in the html code as possible, preferably just after the body tag, or maybe one other container div.
Is it possible to achieve the tutorial result AND have content div at top of code?
#left {
position: absolute;
top: 0px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
}
#right {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a space
at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body right {
width: 120px; /* ie5win fudge ends */
}
(from thenoodleincedent)
Cheers,
Sorry Or I donīt understand you, or you are wrong.....
Actually, On my index page, I have the content on top in the htm, and then the left navigation bar, and in rest of page, on top of htm the left navigation bar, then the content, that because other pages have images thats takes time to load, and though they already have the css loaded from index that way is better.
Ie, the position in your htm donīt need necesary some particular orden
So, I'll let others 'chime in' now.
Cheers,
}
div#leftmenu {
position: absolute;
top: 0px;
left: 0%;
width: 17%;
height: 100%;
background-image: url(leftmenu.jpg);
font-family:Arial;
font-weight: bold;
font-size: 11pt;
padding-left: 10px;
padding-top: 20px;
color: #001111;
vertical-align: top;
}
div#content {
position: absolute;
top: 0px;
left: 18%;
width: 48%;
height: 100%;
background-color: #FFFFFF;
font-family:Arial;
font-weight: normal;
font-size: 11pt;
color: #001111;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding: 20px, 10px, 25px, 30px;
}
div#rightcol {
position: absolute;
top: 0px;
left: 71%;
width: 29%;
height: 100%;
background-color: #002222;
color:#ffffff;
margin-left: 1px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding: 10px, 0px, 10px, 0px;
}
div#topboxcontainer {
position: relative;
width: 90%;
left: 5%;
background-color: #ffffff;
color: #000000;
}
div#secondboxcontainer {
position: relative;
width: 90%;
left: 5%;
background-color: #ffffff;
color: #000000;
margin-top: 10px;
}
#topboxcontainer p {
margin: -10px 15px;
text-align: left;
}
#secondboxcontainer p {
margin: -10px 15px;
text-align: left;
}
#roundtop {
background: url(boxtopright.gif) no-repeat top right;
}
#roundbottom {
background: url(boxbottomright.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block!important;
}
h1 {
font-family: Arial;
font-weight: bold;
font-size: 16pt;
color: #003333;
vertical-align: top;
}
h4 {
font-family: Arial;
font-weight: bold;
font-size: 12pt;
color: #666666;
vertical-align: top;
}
div#bottom {
position: absolute;
top: 1355px;
left: 0px;
height:3%;
width: 101%;
background:#001111 ;
color:#ffffff;
text-align: center;
clear: both;
}
img#banner {
margin-top: 5px;
margin-bottom: 0px;
margin-left: 10px;
padding-bottom: 3px;
border: none;
}
span.bannertxt {
position: relative;
top: 15px;
vertical-align: top;
padding-left: 2%;
color: #001111;
}
form{display:inline;}
-->
</style>
</head>
<body bgcolor="#000111">
<div id="container">
<div id="content">
<h1>Page Title with some keywords</h1>
<p>A 4 line paragraph.</p>
<p>A 2 line paragraph.p>
<h4> Sub heading 1</h4>
<p>A 4 line paragraph.</p>
<p>A 2 line paragraph.</p>
<h4>Sub heading 2</h4>
<p>A 4 line paragraph.</p>
<p>A 5 line paragraph.</p>
<h4>Sub heading 3</h4>
<p>A 4 line paragraph.</p>
<p>A 4 line paragraph.</p>
<p>A 3 line paragraph.</p>
<h4>Sub heading 4</h4>
<p>A 2 line paragraph that leads into a list.
<ul>
<li>List item 1 - 2 lines.
<li>List item 2 - 3 lines.
<li>List item 3 - 1 line.
<li>List item 4 - 2 lines.
<li>List item 5 - 2 lines.
</ul></p>
<p>A 1 line paragraph</p>
</div>
<div id="leftmenu">
<p>Home</p>
<p>Menu Item 1</p>
<p>Menu Item 2</p>
</div>
<div id="rightcol">
<div id="topboxcontainer">
<div id="roundtop">
<img class="corner" src="boxtopleft.gif" alt=""
width="15" height="15"
style="display: none" />
</div>
<p><a href="apage.htm">Page Services<a><br>
<img src="images/image1.jpg" width="100px" height="79px" alt="" align="left">
Descriptive text several lines.<br><br>Prices from only $x</p>
<div id="roundbottom">
<img class="corner" src="boxbottomleft.gif" alt=""
width="15" height="15"
style="display: none" />
</div>
</div>
<div id="secondboxcontainer">
<div id="roundtop">
<img class="corner" src="boxtopleft.gif" alt=""
width="15" height="15"
style="display: none" />
</div>
<p><a href="anotherpage.htm"> More page services<a><br>
<img src="images/image2.jpg" width="100px" height="72px" alt="" align="left">
Descriptive text over several lines.<br><br>Prices from $x</p>
<div id="roundbottom">
<img class="corner" src="boxbottomleft.gif" alt=""
width="15" height="15"
style="display: none" />
</div>
</div>
</div>
</div>
<div id="banner">
<img id="banner" src="logo.gif" height="60px" width="180px" border="none">
<span class="bannertxt">A tagline with some keywords</span>
</div>
<div id="topmenu">
<span style="word-spacing: 20px;">
Home
Category 1
Category 2 </span>
<form action="" method="post" name="log">
Username:<input type="text" name="fieldname1" size="12"/>
Password:<input type="password" name = "fieldname2" size="9"/>
<input type=submit name="login" value="GO"/>
</form>
</div>
<div id="bottom">The End</div>
</body>
</html>
There are a few things being attempted here.
1. Elastic widths dependant upon browser resolution
2. Rounded corner boxes
3. Variable height column divs dependant upon content (not working properly)
4. A fixed banner & top nav plus a fixed footer. (can't get the footer to be elastic)
5. Needs to be cross browser for IE6, NN7, Opera 7, Moz 1.4+
6. Colors in above code have been modified from actual design colors.
Do a google search on "3 column stretch"
In my code;
the #container div is gone,
#content is relative,
#bottom is relative,
#leftmenu is absolute,
#rightcol is absolute,
#leftmenu's background image is moved to body background
#rightcol's background color is moved to body background
#content has a white background
#bottom has a margin-top of 102px which just about matches the height of #banner & #topmenu, which are absolute because we use #content first in html code.
I have only tested in IE6 so far, but will check the other browsers tomorrow. It looks promising.
