Web Hosting Talk






PDA

View Full Version : CSS help needed

larwilliams
11-08-2009, 02:39 PM
Hi guys,

I have a slight problem and I am hoping some CSS guru is able to lend a hand. I am working on a design where I need a right column that extends both upward into the header, and downward into the footer.

I know this involves CSS layers somehow (z-index?), but cannot seem to wrap my head around it.

Here is my complete code to demonstrate


<!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>
<style type="text/css">
#wrapper {
width:500px;
border:solid 1px #000;
}
#topmenu {
background-color:#09F;
clear:both;
width:100%;
height:200px;
}
#header {
background-color:#999;
clear:both;
width:100%;
height:200px;
}
#mainarea {
width:100%;
background-color:#FF0;
clear:both;
}
#leftcolumn {
float:left;
width:200px;
background-color:#063;
height:300px;
}
#rightcolumn {
float:right;
width:300px;
background-color:#666;
margin-top:-40px;
}
#footer {
clear:both;
width:100%;
background-color:#999;
height:200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="topmenu">This is the top menu</div>
<div id="header">This is the header</div>
<div id="mainarea">
<div id="leftcolumn">This is the left area</div>
<div id="rightcolumn">This is some text, floated right, with 40px up into the header and the possibility of overlapping the footer.</div>
</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
larwilliams
11-08-2009, 04:09 PM
Anyone??? I am truly at a loss here.
zomex
11-08-2009, 04:15 PM
You are right z-index is what is used to create the layers. I am having trouble understanding what you are trying to achieve. Maybe you should create a quick mockup image showing everyone what your trying to do?

Jack
freeO
11-08-2009, 05:48 PM
To get layers overlapping each other you need to use the z-index command. Add z-index: 1 in with the positioning code and this element will appear above everything without this command. If you want something else to go over this layer too, add z-index: 2 and so on. The higher the index, the closer the div will appear to the front of the page.

(c/p from http://www.yourhtmlsource.com/stylesheets/csslayout.html )
larwilliams
11-08-2009, 06:10 PM
Hi,

I have attached a short mockup to this message.

I hope it clarifies what I am trying to achieve.
adisetiawan
11-08-2009, 09:47 PM
Hi,

I have attached a short mockup to this message.

I hope it clarifies what I am trying to achieve.

try

#leftcolumn {
float:left;
width:200px;
background-color:#063;
min-height:300px;
}
#rightcolumn {
float:right;
width:300px;
background-color:#666;
margin:-40px 0 -40px 0;
min-height:380px;
}


you should use min-height instead of height, except if you want it to be fixed height
larwilliams
11-09-2009, 01:17 AM
try

#leftcolumn {
float:left;
width:200px;
background-color:#063;
min-height:300px;
}
#rightcolumn {
float:right;
width:300px;
background-color:#666;
margin:-40px 0 -40px 0;
min-height:380px;
}


you should use min-height instead of height, except if you want it to be fixed height

That is good, except that it doesn't seem to work in IE6 (one of the required browsers for my project... le sigh :( )
adisetiawan
11-09-2009, 01:26 AM
That is good, except that it doesn't seem to work in IE6 (one of the required browsers for my project... le sigh :( )

I don't have IE6, but try this

#leftcolumn {
float:left;
width:200px;
background-color:#063;
min-height:300px;
height:300px;
height:auto!important;
}
#rightcolumn {
float:right;
width:300px;
background-color:#666;
margin:-40px 0 -40px 0;
min-height:380px;
height:380px;
height:auto!important;
}


web designer should encourage their clients/user to upgrade their IE browser :)
larwilliams
11-09-2009, 01:29 AM
I don't have IE6, but try this

#leftcolumn {
float:left;
width:200px;
background-color:#063;
min-height:300px;
height:300px;
height:auto!important;
}
#rightcolumn {
float:right;
width:300px;
background-color:#666;
margin:-40px 0 -40px 0;
min-height:380px;
height:380px;
height:auto!important;
}


web designer should encourage their clients/user to upgrade their IE browser :)

Is it possible to get the heights on both the left and right columns to expand automatically if either has more content that can fit into the min-height?

EDIT: It's not the client that is using the browser, it's most of their customers. Unfortunately, it seems people around here hold on to computers like crazy. I've seen people still running Windows 95 and 98 :D
adisetiawan
11-09-2009, 01:39 AM
only one of the column but cannot be both. There are javascripts code that will automatically calculate height of two or more element and assign the height. Other solution would be creating faux column technique to simulate same column height.
larwilliams
11-09-2009, 02:27 AM
Guess I will just have to suggest a small design change that will eliminate my need for such a thing :)

Thanks for your help guys
Bingen
11-09-2009, 09:08 PM
Hmmm... You can do some eye-trick using images on the header and footer and content-sidebar background.

#topMenu {}
#header {clear:both; background: url(images/sidebarTopimg.gif) no-repeat right bottom Yellow}
#container {background-image: url(images/contentandsidebarbg.gif)}
#content {width: 500px; float: left}
#sideBar {width: 200px; float: left}
#footer {clear:both; background: url(images/sidebarTopimg.gif) no-repeat right top Fucsia}

<div id="topMenu">THIS IS TOP MENU</div>
<div id="header">THIS IS HEADER</div>
<div id="container">
<div id="content">THIS IS THE MAIN CONTENT AREA</div>
<div id="sideBar">THIS IS THE RIGHT SIDE</div>
</div>
<div id="footer">THIS IS THE FOOTER</div>

Or something like that :eek:
larwilliams
11-09-2009, 09:14 PM
Thanks guys, I gave up on it somewhat, but was able to sorta emulate the intended effect using z-index (and then a IE fix grrr).
Chaps
11-09-2009, 11:22 PM
I didn't read all the suggestions so this may have been suggested...

But why can't you just position that column ABSOLUTE, center it with margin: 0 auto; and then increase the left margin until it positions where you want it, and make sure to z-index: +1; ?
larwilliams
11-09-2009, 11:28 PM
That's similar to what I did, except I float:right and set a margin on the right side to get it like I wanted (then applied IE fixes of course)
Chaps
11-09-2009, 11:59 PM
That's similar to what I did, except I float:right and set a margin on the right side to get it like I wanted (then applied IE fixes of course)

The only reason float right wouldn't work is because unless the design is fluid, that column would move depending on resolution of the browser. You would want to position from center as opposed to the right side of the window.