I am trying to create a layout for my website but am having problems with the CSS that I am using. My Code is below and the image that I am using is attached. Can you tell me how to get the image that I have at the left to continue on down the page until it hits the bottom footer? I have been playing with for a while and cant see me get it to work.
Thanks for your help
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><link rel="shortcut icon" type="image/ico" href="favicon.ico"><LINK REL=StyleSheet HREF="Style.css" TYPE="text/css" MEDIA=screen><title>Ordered Borders Layout</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript">if (window.self != window.top) window.top.location = window.self.location; </script><style type="text/css">
html, body {margin: 0; padding: 0; border: 0;}
body {
color: #000;
background-color: #ffffff;
font-family: verdana, sans-serif;
font-size: 80%;
text-align: left;
margin: 0;
}
p {margin: 0; padding: 8px;}
h2 {font-size: 1.2em; text-align: center; padding: 10px;}
.clear { clear: both; }
a {text-decoration: underline; font-weight: bold; color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.wrapper {
width: 100%;
text-align: left;
background: #ffffff;
}
/*** Below is the Tan hack, needed because the decorative side borders (thin black) on
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/
* html .wrapper {
width: 100%;
w\idth: 100%;
}
.outer {
border-left: 191px solid #ffffff;
background: url(Center-Bar.gif) 100% 0 repeat-y;
}
/*** These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes
for the thin black divider between the right green col and the center col. If the black divider
is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different
BG location, due to a BG placement variation.
***/
* html .outer {
background: url(images/blackline.gif) 565px 0 repeat-y;
}
.inner {
margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/
width: px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border-width: 0 0 0 2px;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
* html .inner {
width: 100%;
}
.float-wrap {
float: left;
width: 900px;
margin-left: -191px; /*** Same length as left column width ***/
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
.left {
float: left;
background-image: url('Center-Bar.gif');
width: 191px;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
text-align: center;
}
.center {
float: right;
width: 700px;
}
.wide {
background-color: #ffc; /* header and footer colours */
width: 100%;
border: 2px solid #000;
font-size: 1.4em;
font-weight: bold;
}
.wide p {padding: 5px;}
.top {border-width: 0 0 2px;}
.bottom {border-width: 2px 0 0;}
/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}
</style></head><body><!--XXXXX
Based on a 3-col method by Douglas Livingstone, and the Source Ordered Cols method.
XXXX--><div class="wrapper"><div class="wide top"><p><span style="float: right; font-weight: bold; font-size: .6em;"></span>
Top
</p></div><div class="outer"><div class="inner"><div class="float-wrap"><div class="center"><div align="center"><font class="header">Welcome to Our Website!</font></div><br><font face="Times New Roman">
Text
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
More Text
<br /><br /><br /><br /><br />
Even More Text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
No more text
</div><!-- end centered div --><div class="left"><a href="Link1.html">Link 1</a> <br><br><a href="Link2.html">Link 2</a> <br><br><a href="Link3.html">Link 3</a> <br><br><a href="Link4.html">Link 4</a> <br><br></div><!-- end left div --><div class="clear"></div></div><div class="clear"></div></div></div><div class="wide bottom"><p>Bottom</p></div></div></body></html>
Last edited by mrstuff68; Feb 16th, 2006 at 10:08 AM.
I found the following code online and would like to apply it to my site. I have attached the html file and the image that I am trying to display on the left hand side , but it only displays up to the point where there is text, and I need it to go all the way to the bottom footer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
<LINK REL=StyleSheet HREF="Style.css" TYPE="text/css" MEDIA=screen>
<title>Ordered Borders Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">if (window.self != window.top) window.top.location = window.self.location; </script>
<style type="text/css">
html, body {margin: 0; padding: 0; border: 0; height:100%;}
body {
color: #000;
background-color: #ffffff;
font-family: verdana, sans-serif;
font-size: 80%;
text-align: left;
margin: 0;
height: 100%;
}
p {margin: 0; padding: 8px;}
h2 {font-size: 1.2em; text-align: center; padding: 10px;}
.clear { clear: both; }
a {text-decoration: underline; font-weight: bold; color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.wrapper {
width: 100%;
text-align: left;
background: #ffffff;
height:100%;
}
/*** Below is the Tan hack, needed because the decorative side borders (thin black) on
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/
* html .wrapper {
width: 100%;
height:100%;
}
.outer {
border-left: 191px solid #ffffff;
background: url(Center-Bar.gif) 100% 0 repeat-y;
height:100%;
}
/*** These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes
for the thin black divider between the right green col and the center col. If the black divider
is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different
BG location, due to a BG placement variation.
***/
* html .outer {
background: url(images/blackline.gif) 565px 0 repeat-y;
height:100%;
}
.inner {
margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/
width: px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border-width: 0 0 0 2px;
height:100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
* html .inner {
width: 100%;
height:100%;
}
.float-wrap {
float: left;
width: 900px;
height:100%;
margin-left: -191px; /*** Same length as left column width ***/
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
.left {
float: left;
background-image: url('Center-Bar.gif');
width: 191px;
height:100%;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
text-align: center;
}
.center {
float: right;
width: 700px;
height:100%;
}
.wide {
background-color: #ffc; /* header and footer colours */
width: 100%;
border: 2px solid #000;
font-size: 1.4em;
font-weight: bold;
}
.wide p {padding: 5px;}
.top {border-width: 0 0 2px;}
.bottom {border-width: 2px 0 0;}
/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}
</style></head>
<body>
<!--XXXXX
Based on a 3-col method by Douglas Livingstone, and the Source Ordered Cols method.
XXXX-->
<div class="wrapper">
<div class="wide top">
<p>
<span style="float: right; font-weight: bold; font-size: .6em;">
</span>
Top
</p>
</div>
<div class="outer">
<div class="inner">
<div class="float-wrap">
<div class="center">
<div align="center"><font class="header">Welcome to Our Website!</font></div>
<br>
<font face="Times New Roman">
Text
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
More Text
<br />
<br />
<br />
<br />
<br />
Even More Text<br />
<br />
<br />
<br />
<br />
<br />
<br />
</font><p><font face="Times New Roman">
<br />
<br />
<br />
<br />
<br />
<br />
No more text
</font>
<font face="Times New Roman">
</div> <!-- end centered div -->
<div class="left" style="width: 191px;>
<a href="Link1.html">Link 1</a>
<br><br>
<a href="Link2.html">Link 2</a>
<br><br>
<a href="Link3.html">Link 3</a>
<br><br>
<a href="Link4.html">Link 4</a>
<br><br><br>
</div> <!-- end left div -->
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="wide bottom"><p>Bottom</p></div>
</div>
</body></html>
What I've done is to give each parent container of the parent container of the parent container (of the parent container) of the div you want to set to 100% height to a height of 100% as well. I am not sure what your 'tan hack' refers to, but I've added it there as well.
How come when I add more <Br>'s in the body of the document the image on the left doesnt continue just as it should but it just stops. I dont understand how this is since the height is set to 100%. Also how do i get the text in the body of the document to be at 100% width and not go beyond that, currently it goes outside of it boundaries. I need it to resize automatically.
Image is included in zip file in one of the above posts code is below.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><link rel="shortcut icon" type="image/ico" href="favicon.ico"><LINK REL=StyleSheet HREF="Style.css" TYPE="text/css" MEDIA=screen><title>Ordered Borders Layout</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript">if (window.self != window.top) window.top.location = window.self.location; </script><style type="text/css">
html, body {margin: 0; padding: 0; border: 0; height:100%;}
body {
color: #000;
background-color: #ffffff;
font-family: verdana, sans-serif;
font-size: 80%;
text-align: left;
margin: 0;
height: 100%;
}
p {margin: 0; padding: 8px;}
h2 {font-size: 1.2em; text-align: center; padding: 10px;}
.clear { clear: both; }
a {text-decoration: underline; font-weight: bold; color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.wrapper {
width: 100%;
text-align: left;
background: #ffffff;
height:100%;
}
/*** Below is the Tan hack, needed because the decorative side borders (thin black) on
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/
* html .wrapper {
width: 100%;
height:100%;
}
.outer {
border-left: 191px solid #ffffff;
background: url(Center-Bar.gif) 100% 0 repeat-y;
height:100%;
}
/*** These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes
for the thin black divider between the right green col and the center col. If the black divider
is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different
BG location, due to a BG placement variation.
***/
* html .outer {
background: url(images/blackline.gif) 565px 0 repeat-y;
height:100%;
}
.inner {
margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/
width: px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border-width: 0 0 0 2px;
height:100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
* html .inner {
width: 100%;
height:100%;
}
.float-wrap {
float: left;
width: 900px;
height:100%;
margin-left: -191px; /*** Same length as left column width ***/
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
.left {
float: left;
background-image: url('Center-Bar.gif');
width: 191px;
height:100%;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
text-align: center;
}
.center {
float: right;
width: 700px;
height:100%;
}
.wide {
background-color: #ffc; /* header and footer colours */
width: 100%;
border: 2px solid #000;
font-size: 1.4em;
font-weight: bold;
}
.top {border-width: 0 0 2px;}
.bottom {border-width: 2px 0 0;}
/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}
</style></head><body><!--XXXXX
Based on a 3-col method by Douglas Livingstone, and the Source Ordered Cols method.
XXXX--><div class="wrapper"><div class="wide top"><p><span style="float: right; font-weight: bold; font-size: .6em;"></span>
Top
</p></div><div class="outer"><div class="inner"><div class="float-wrap"><div class="center"><div align="center"><font class="header">Welcome to Our Website!</font></div><br><font face="Times New Roman">
Text that will be put here should text wrap and not keep going so that I have to scroll horizontally on the page that is very inconvienent and annoying.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
More Text
<br /><br /><br /><br /><br />
Even More Text<br /><br /><br /><br /><br /><br /><br /> </font><p><font face="Times New Roman"><br /><br /><br /><br /><br /><br /><br /><br /><br />
No more text
</font><font face="Times New Roman"></div><!-- end centered div --><div class="left" style="width: 191px;>
<a href="Link1.html">Link 1</a>
<br><br>
<a href="Link2.html">Link 2</a>
<br><br>
<a href="Link3.html">Link 3</a>
<br><br>
<a href="Link4.html">Link 4</a>
</div> <!-- end left div -->
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="wide bottom"><p>Bottom</p></div></div></body></html>
The first thing that strikes me is that the XHTML is extremely invalid. But anyway. I made it HTML 4 Strict, because I gather you need it to work properly in IE and HTML 4 is the best choice for meeting that end.
I rewrote your entire layout, because I don't like the CSS you had at all: it was mostly hacks. In my code I used absolute positioning, no hacks; it's not very taxing so it renders identically in Firefox, Opera, and IE.
What I want you to notice is the changes to the markup itself (apart from the fact I used Lorem Ipsum for the content ) It is slim: far less tags; and zero presentational attributes in the markup: it purely defines content, that's how the markup section should be used. An excellent tip that I picked up from Merri is that your content should make sense without any styling applied. If you're messing around with the markup in order to get the layout right, then you're putting form before function
Anyway.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><title>Ordered Borders Layout</title><link rel="icon" type="image/ico" href="favicon.ico"><link rel="stylesheet" href="Style.css" type="text/css" media="screen"><style type="text/css">
html
{
font-family: 'Times New Roman', serif;
font-size: 11pt;
padding: 0;
}
body
{
background: white url('Center-Bar.gif') top left repeat-y;
margin: 0;
padding: 0;
}
h1, #footer
{
margin: 0;
padding: 0.5em;
background: #ffc;
font: 1.2em Tahoma, sans-serif;
font-weight: bold;
}
h1
{
border-bottom: 2px solid black;
}
#footer
{
border-top: 2px solid black;
}
#leftSide, #rightSide
{
position: absolute;
width: 191px;
color: white;
}
#leftSide
{
left: 0;
}
#rightSide
{
right: 0;
}
#main
{
background: white url('Center-Bar.gif') top right repeat-y;
margin: 0 0 0 191px;
padding: 0 191px 0 0;
text-align: justify;
}
#content
{
padding: 0.2em 2ex;
}
#rightSide p
{
margin: 0;
padding: 0.2em 1ex;
}
#leftSide ul
{
list-style: none;
margin: 0;
padding: 0.2em 1ex;
}
#leftSide ul li a
{
color: white;
}
</style></head><body><h1>Top</h1><div id="leftSide"><ul><li><a href="Link1.html">Link 1</a></li><li><a href="Link2.html">Link 2</a></li><li><a href="Link3.html">Link 3</a></li><li><a href="Link4.html">Link 4</a></li></ul></div><div id="main"><div id="rightSide"><p>I assume you want something here</p></div><div id="content"><h2>Welcome to Our Website!</h2><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce luctus urna non orci mattis
commodo. Curabitur ut diam a purus rhoncus tempus. Nunc nec felis. Integer auctor euismod turpis.
Aliquam non nibh vitae tortor rhoncus mollis. Donec ante dui, tempus sit amet, tempus vitae,
congue sit amet, orci. Integer consequat dignissim nunc. Praesent vulputate dui at sapien. Aliquam
erat volutpat. Sed orci tellus, nonummy sodales, iaculis quis, molestie quis, mauris. Cras elit
elit, placerat sit amet, faucibus nec, rutrum tempor, enim. Proin mattis. Quisque augue.
</p><p>
Aliquam erat volutpat. Suspendisse sollicitudin tellus ut nisi. Nam scelerisque facilisis quam.
Sed sit amet libero a lorem feugiat sagittis. Nunc vestibulum nibh non enim. Cras eget nisi.
Praesent tincidunt enim non nisl rhoncus nonummy. Donec placerat tortor eu nibh. Lorem ipsum dolo
sit amet, consectetuer adipiscing elit. Curabitur laoreet, turpis sit amet sodales placerat,
libero libero accumsan turpis, sed pulvinar lorem elit ut est. Pellentesque vestibulum, magna sit
amet venenatis porttitor, nisi quam suscipit justo, et egestas mauris nibh ac enim. Donec dapibus
enim sed lectus. Sed risus. In hendrerit. Fusce massa erat, ornare vitae, mattis vitae, volutpat
vel, tellus. Quisque eget elit.
</p><p>
Proin et odio et magna fringilla dignissim. Nam accumsan laoreet quam. Etiam dui nisl, malesuada
a, dignissim at, auctor eget, arcu. Maecenas rhoncus dolor vel arcu. Integer sagittis. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Nulla tincidunt semper elit. Duis ultricies sodales
arcu. Integer enim ligula, vulputate ut, rutrum et, malesuada eget, risus. Nunc pede risus, rutrum
vel, lacinia at, viverra in, lacus. Nulla et augue. Cras facilisis, turpis fermentum lacinia
imperdiet, dui sapien feugiat diam, non venenatis felis diam id augue. Curabitur leo lacus,
imperdiet ac, ultricies vel, tristique sed, erat. Sed eget tellus. Morbi a sem posuere lectus
accumsan nonummy. In et leo a felis tincidunt aliquam. Duis eleifend tristique justo. Nullam
turpis metus, posuere eu, vulputate quis, venenatis at, velit. Fusce neque massa, sagittis sed,
faucibus eu, sollicitudin nec, tellus.
</p><p>
Etiam vel lacus. Sed sit amet lorem a pede convallis dapibus. Cras imperdiet. Vivamus nisl velit,
egestas vitae, auctor vitae, rhoncus et, nisl. Nulla a est lobortis augue feugiat commodo. Proin
non sem fringilla diam commodo tincidunt. Vivamus lobortis tellus sit amet odio. Curabitur semper
urna sed ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sem eros, adipiscing
a, fermentum at, venenatis quis, pede. Praesent scelerisque varius purus.
</p></div></div><p id="footer">
Bottom
</p></body></html>
Last edited by penagate; Feb 8th, 2006 at 06:15 PM.
I love the layout that you came up with, a lot less code. I am new to CSS and the layout that I had I found online. It fit the look that I wanted to accomplish.
dude penagate that is some wicked awesome code man, I will definatly be refrencing this at a later date! ~ Good rep to you! (In my mind)
Software languages known: Qbasic - TI-Basic - Liberty Basic - Visual Basic 6
Software API's known: Directx 7 and 8
Internet languages, in the process of learning: HTML - JAVASCRIPT - PHP - CSS - MYSQL - AJAX
No problems, and to mrstuff: if you feel this thread is resolved, then feel free to indicate it as such by using the "Mark Thread Resolved" option from the "Thread Tools" menu.
Need CSS Layout Help [resolved]
Reply With Quote
) It is slim: far less tags; and zero presentational attributes in the markup: it purely defines content, that's how the markup section should be used. An excellent tip that I picked up from Merri is that your content should make sense without any styling applied. If you're messing around with the markup in order to get the layout right, then you're putting form before function 
