gmnightingale
11-25-2009, 04:01 PM
I have been using tables for years and have recently been trying to teach myself site structure with css, which i have previously only used for decoration.
I am getting there probs in a complete backward fashion but I am having some serious vertical problems, my main containers just stop and dont go all the way to the bottom of the page?
you can see what i mean by visiting
www.actioncomputing.co.uk/index-css-rebuild.html
and my code is below.
All help is once again very appreciated.
@charset "utf-8";
* {margin: 0; padding: 0; border: 0; outline: 0;}
html, body {font:Tahoma; font-size:14px; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}
.header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #f00;}
.Container{margin-left: auto; margin-right: auto; width:1000px; height:100%; min-height:100%; text-align: left; background-color:#FFFFFF;}
.Containerleftborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-x left top; }
.Containerrightborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) no-repeat right top; }
.content1container{width:906px; margin: 0 0 0 47px; height:100%; min-height:100%; background-color:#ffffff; position:relative; }
.contentleft{width:590px; height:100%; min-height:100%; background:#ffffff; float:left; margin-left:15px; }
.contentright{width:291px; height:100%; min-height:100%; background:#ffffff; float:right;}
.leftcontent-tops{width:590px; height:41px; background-image:url(images/sectiontop.jpg); float:left;}
.leftcontent-bottom{width:560px; padding-left:10px; padding-right:20px; background-image:url(images/sectionback.jpg); background-repeat:no-repeat; float:left; margin-bottom:20px; }
.rightcontent-tops{width:253px; height:41px; background-image:url(images/sectiontop.jpg); float:right; }
.rightcontent-bottom{width:233px; background-color:#AAC7E7; padding-left:10px; padding-right:10px; float:right; margin-bottom:20px; }
.insideleftborder{width:9px; height:100%; min-height:100%; background-color:#6DA7E6; position:absolute; top:0px; left:0px;}
.insiderightborder{width:9px; height:100%; min-height:100%; background-color:#6DA7E6; position:absolute; top:0px; left:897px;}
.Topleftmenu{ background-image:url(images/actioncomputing_03.jpg); width:274px; height:40px; float:left; }
.topmenuright{background-image:url(images/actioncomputing_04.jpg); width:632px; height:40px; float:left;}
.menumiddle{background-image:url(images/actioncomputing_06.jpg); clear:both; width:906px; height:84px; float:left;}
.menubottomimage{background-image: url(images/newcssbottommenuleft.jpg); width:284px; height:141px; float:left;}
.menubottomright{background-image: url(images/newcssbottommenuright.jpg); width:622px; height:40px; float:left;}
#centralisemenu{ text-align:center;}
a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
a.menu:hover {color: Black !important ; text-decoration: underline; font-weight:bolder; font-size:20px !important }
a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
a.menu:visited {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
HTML CODE
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Container">
<div class="Containerleftborder">
<div class="Containerrightborder">
<div class="header">
<div class="Topleftmenu">
<p style="text-align:center; padding-top:7px;">
<a class="menu" href="#">Home |</a> <a class="menu" href="#">Contact |</a> <a class="menu" href="#">About |</a></p>
</div>
<div class="topmenuright"></div>
<div class="menumiddle"></div>
<div class="menubottomimage"></div>
<div class="menubottomright"></div>
<div class="Flashtop"><img src="images/flashback.jpg"></div></div>
<div class="content1container">
<div class="contentleft">
<div class="insideleftborder"></div>
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom"><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p> </p>
</div>
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom"><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p></div></p>
</div>
<div class="contentright">
<div class="insiderightborder"></div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
any help is greatly appreciated. :-):):thumbsup:
I am getting there probs in a complete backward fashion but I am having some serious vertical problems, my main containers just stop and dont go all the way to the bottom of the page?
you can see what i mean by visiting
www.actioncomputing.co.uk/index-css-rebuild.html
and my code is below.
All help is once again very appreciated.
@charset "utf-8";
* {margin: 0; padding: 0; border: 0; outline: 0;}
html, body {font:Tahoma; font-size:14px; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}
.header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #f00;}
.Container{margin-left: auto; margin-right: auto; width:1000px; height:100%; min-height:100%; text-align: left; background-color:#FFFFFF;}
.Containerleftborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-x left top; }
.Containerrightborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) no-repeat right top; }
.content1container{width:906px; margin: 0 0 0 47px; height:100%; min-height:100%; background-color:#ffffff; position:relative; }
.contentleft{width:590px; height:100%; min-height:100%; background:#ffffff; float:left; margin-left:15px; }
.contentright{width:291px; height:100%; min-height:100%; background:#ffffff; float:right;}
.leftcontent-tops{width:590px; height:41px; background-image:url(images/sectiontop.jpg); float:left;}
.leftcontent-bottom{width:560px; padding-left:10px; padding-right:20px; background-image:url(images/sectionback.jpg); background-repeat:no-repeat; float:left; margin-bottom:20px; }
.rightcontent-tops{width:253px; height:41px; background-image:url(images/sectiontop.jpg); float:right; }
.rightcontent-bottom{width:233px; background-color:#AAC7E7; padding-left:10px; padding-right:10px; float:right; margin-bottom:20px; }
.insideleftborder{width:9px; height:100%; min-height:100%; background-color:#6DA7E6; position:absolute; top:0px; left:0px;}
.insiderightborder{width:9px; height:100%; min-height:100%; background-color:#6DA7E6; position:absolute; top:0px; left:897px;}
.Topleftmenu{ background-image:url(images/actioncomputing_03.jpg); width:274px; height:40px; float:left; }
.topmenuright{background-image:url(images/actioncomputing_04.jpg); width:632px; height:40px; float:left;}
.menumiddle{background-image:url(images/actioncomputing_06.jpg); clear:both; width:906px; height:84px; float:left;}
.menubottomimage{background-image: url(images/newcssbottommenuleft.jpg); width:284px; height:141px; float:left;}
.menubottomright{background-image: url(images/newcssbottommenuright.jpg); width:622px; height:40px; float:left;}
#centralisemenu{ text-align:center;}
a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
a.menu:hover {color: Black !important ; text-decoration: underline; font-weight:bolder; font-size:20px !important }
a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
a.menu:visited {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
HTML CODE
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Container">
<div class="Containerleftborder">
<div class="Containerrightborder">
<div class="header">
<div class="Topleftmenu">
<p style="text-align:center; padding-top:7px;">
<a class="menu" href="#">Home |</a> <a class="menu" href="#">Contact |</a> <a class="menu" href="#">About |</a></p>
</div>
<div class="topmenuright"></div>
<div class="menumiddle"></div>
<div class="menubottomimage"></div>
<div class="menubottomright"></div>
<div class="Flashtop"><img src="images/flashback.jpg"></div></div>
<div class="content1container">
<div class="contentleft">
<div class="insideleftborder"></div>
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom"><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p> </p>
</div>
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom"><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p></div></p>
</div>
<div class="contentright">
<div class="insiderightborder"></div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
any help is greatly appreciated. :-):):thumbsup: