Jump to content
Sign in to follow this  
ROUBOS

CCS DIV Layout for Elxis CMS

Recommended Posts

Hi people,

I want to build a CMS and I'm using Elxis which is a CMS like Mambo.

 

What I'm trying to do and I cannot get it to work, (long time since I've touched web dev, and my skills are very rusty) is to have a header of 100% width, a 3 column layout of 800px fixed width, and a footer of 100% width.

Now I want the footer always at the bottom and the columns all the way down too.

 

here's what i got and cannot get it to work:

 

-----------------

 

<!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>My Page</title>

 

<style type="text/css">

<!--

body {

background-repeat: repeat-x;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

text-align:center;

}

 

html, body {

height: 100%;

}

 

#surrounds {

width:100%;

border:0;

margin-left:auto;

margin-right:auto;

margin-top:0px;

}

 

#header {

width:auto;

height:171px;

border:0;

text-align:center;

background-image: url(temp_images/header_bg.jpg);

}

 

#topnav-language {

width:800px;

height:25px;

border:0;

background:#FFF;

text-align:center;

margin-left: auto;

margin-right: auto;

}

 

#topnav {

background:#FFF;

color:#000;

padding:0;

float:left;

border:1px solid;

}

 

#langselector {

background:#F00;

color:#FFF;

padding:0;

float:right;

}

 

#langselector form { margin:0;}

 

#pathway {

background:#FFF;

border:1px solid #000;

width:800px;

margin-left: auto;

margin-right: auto;

}

 

 

#leftcolumn {

background-color:#99FF00;

position: fixed;

width: 150px;

height: auto;

top: 171px;

right: auto;

bottom: 30px;

left:auto;

margin-left:auto;

 

}

 

#leftcolumn #content {

width:auto;

border:0;

}

 

#mainarea {

float:left;

width:500px;

}

 

#mainarea #content {

width:auto;

border:0;

}

 

#rightcolumn {

float:left;

width:150px;

}

 

#rightcolumn #content {

width:auto;

border:0;

}

 

#footer {

clear:both;

border-top:1px solid #FFFFFF;

background-image:url(temp_images/footer_bg.jpg);

position: fixed;

width: 100%;

top: auto;

right: 0;

bottom: 0;

left: 0;

 

}

 

#footer #content {

width:800px;

height:30px;

margin-left:auto;

margin-right:auto;

background-color:#5d88b5;

}

-->

</style>

 

</head>

 

<body>

<div id="surrounds">

<div id="header"><img src="temp_images/header.jpg" /></div>

<div id="topnav-language">

<div id="topnav">Top Navigation Module</div>

<div id="langselector">Lang Selector</div>

</div>

<div id="pathway">Pathway goes here</div>

<div id="leftcolumn">

<div id="content">Left Column</div>

</div>

<div id="mainarea">

<div id="content">Main Area (Middle Column)</div>

</div>

<div id="rightcolumn">

<div id="content">Right Column</div>

</div>

<div id="footer">

<div id="content">Footer</div>

</div>

</div>

</body>

</html>

 

--------------------------------------

 

I keep working on it, your help and any thoughts would be greatly appreciated

 

thanks in advance

Share this post


Link to post
Share on other sites

um...

 

when you say you want the header and the footer to have a width of 100%, i take you mean 100% of the browser window?

 

in theory, what you're wanting should be relatively simple, considerably more so than what you have now - but i'm not sure how much of your mark up has other puropses elsewhere, so i can't say what to get rid of as unnecessary.

 

one error jumps out straight away, though - you can only use an 'id' once. you'd be better to change each <div id="content"> to <div class="content">. however, those are one of the many sets of div's that i'm uncertain as to how badly they're needed.

 

 

i'll have a wee play, though, and see if i can come up with something that does what you want....

Share this post


Link to post
Share on other sites

take a look bellow. Getting to what is fine by me now, just that I cannot get my 2 columns to go 100% height. The footer does sit at the bottom of the page, but my columns do not follow all the way down... any ides?

 

my stylesheet:

~~~~~~~~~~

 

* { padding: 0; margin: 0; }

html,body {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

background-image:url(images/header_bg.png);

background-repeat:repeat-x;

height:100%;

}

#container {

margin: 0 auto;

width: 800px;

min-height: 100%;

position:relative;

height:auto;

}

#header {

width: 800px;

float: left;

padding: 0px;

border: 0;

height: 150px;

margin: 00px 0px 0px 0px;

background-image:url(images/header.png);

border-bottom:1px solid #FFFFFF;

}

#pathway {

float: left;

width: 799px;

height: 20px;

padding: 0px;

border: 0;

margin: 0px 0px 0px 0px;

background: #491515;

border-bottom:1px solid #FFFFFF;

border-left:1px solid #FFFFFF;

border-right:1px solid #FFFFFF;

color:#FFFFFF;

}

#leftcolumn {

color: #000000;

border: 0;

background: #C9CAC6;

margin: 0px 0px 0px 0px;

padding: 10px;

width: 178px;

float: left;

border-left:1px solid #FFFFFF;

border-right:1px solid #FFFFFF;

}

#rightcolumn {

float: right;

color: #000000;

border: 0;

background: #E4E6DC;

margin: 0px 0px 0px 0px;

padding: 10px;

width: 579px;

display: inline;

border-right:1px solid #FFFFFF;

}

#footer {

width: 798px;

height:30px;

clear: both;

color: #333;

border: 0;

background: #5D88B5;

margin: 0px 0px 00px 0px;

padding: 0px;

border:1px solid #FFFFFF;

position:absolute;

bottom:0;

}

 

------------------------

and the html:

~~~~~~~~~

<body>

 

<div id="container">

<div id="header">

This is the Header

</div>

<div id="pathway">

Navigation

</div>

<div id="leftcolumn">

Left Column

</div>

<div id="rightcolumn">

Right Column

</div>

<div id="footer">

This is the Footer

</div>

</div>

 

</body>

Share this post


Link to post
Share on other sites

try adding "height: 100%" in your leftcolumn div, and possibly for the other two. you may need to remove the top white border on the footer though as it will show over the green area.

Edited by Layers

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×