| Author |
Help with my Style Sheet
|
|
|
| I'm trying to move myself off of using tables for page layout so I'm
giving DIV tags a shot, mostly for the header, right and left
columns... with left being the traditional navigational side and the
right being the main page body. A problem I'm running into that I
didn't have using tables is when content is too big in a div, it throws
the layout of the page off. For example... here's a link to my page
http://levelwave.com/dev/divtest.php
If you resize your browser you'll notice that the right-hand column (my
main body section) will drop down to the bottom. How do I keep it
positioned where it is no matter how wide the area grows? I'll paste
the source below...
~john
<style type="text/css">
#lh-logo
{
width: 50%;
float: left;
background: #FFFFFF;
color: #333333;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: left;
}
#rh-logo
{
background: #ffffff;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: right;
}
#safety-slogan
{
width: 100%;
height: 33px;
margin: 0 0 0 0;
padding: 7 0 0 0;
border: solid #3366CC;
border-width: 1 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
#footer
{
margin: 0 0 0 0;
padding: 5 0 0 0;
border: solid #AAAAAA;
border-width: 1 0 0 0;
font-size: 10px;
color: #888888;
}
#lh-col
{
width: 12%;
height: 100%;
float: left;
border: solid #AAAAAA;
border-width: 1 1 0 0;
background: #EEEEEE;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#rh-col
{
background: #ffffff;
height: 100%;
border: solid #AAAAAA;
border-width: 1 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
float: left;
}
</style>
<html>
<head>
<title></title>
</head>
<body style="margine: 0;">
<div id="lh-logo">left image</div>
<div id="rh-logo">right image</div>
<div id="safety-slogan">safety slogan here</div>
<div id="lh-col">
<div><a href=#>Quick Links</a></div>
</div>
<div id="rh-col">
<table width="100%">
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
</table>
<div id="footer">this is the footer</div>
</div>
| |
|
|
~john schreef:
> If you resize your browser you'll notice that the right-hand column (my
> main body section) will drop down to the bottom. How do I keep it
> positioned where it is no matter how wide the area grows? I'll paste
> the source below...
Add the strict doctype to the top of your document.
Remove the float from the body column.
Change the left margin of the body column to let's say 160px.
Make the width of the navi column 145 px.
Add "html, body { height: 100%: }" to the style.
Change height of body and navi columns to about 95%.
This will give a pretty good result in Firefox and Opera, but
unfortunately is broken in IE...
| |
|
|
TomB schreef:
> ~john schreef:
>
>
> Add the strict doctype to the top of your document.
> Remove the float from the body column.
> Change the left margin of the body column to let's say 160px.
> Make the width of the navi column 145 px.
> Add "html, body { height: 100%: }" to the style.
> Change height of body and navi columns to about 95%.
>
> This will give a pretty good result in Firefox and Opera, but
> unfortunately is broken in IE...
Completely remove all margins for the body column and add position:
absolute; and left: 160px;
Now it's also good in IE6 :-)
| |
| Beauregard T. Shagnasty 2006-08-09, 7:14 pm |
| TomB wrote:
> Change the left margin of the body column to let's say 160px.
> Make the width of the navi column 145 px.
...or rather use some value of em, so that the columns would expand with
the text if/when the visitor resizes.
The OP should also change the font sizing from px to percentages or em.
http://k75s.home.att.net/fontsize.html
--
-bts
-Warning: I brake for lawn deer
| |
|
| Thanks! That worked great and was exactly what I was looking for. What
about the footer? How can I get it positioned at the bottom? It seems
to ride along the top if nothings in the body section to push it down.
Also, can you recommend a good book on CSS design?
thanks,
~john
TomB wrote:
> TomB schreef:
>
>
> Completely remove all margins for the body column and add position:
> absolute; and left: 160px;
> Now it's also good in IE6 :-)
| |
|
|
~john schreef:
> Thanks! That worked great and was exactly what I was looking for. What
> about the footer? How can I get it positioned at the bottom? It seems
> to ride along the top if nothings in the body section to push it down.
Try adding position: absolute; and bottom: 5px; to the footer div. Not
sure if that will work though. I'd move the footer div outside the
content div and have it sit on the bottom of the page, below everything
else. I guess clear: both; will do the trick in that case...
You still haven't got the strict doctype in your code. The page renders
awful in FF now, because you put it into quirks mode.
| |
|
| Oh, I hadn't changed the code in the link... I'm at work now and added
your changes to the actual site. Here's the link to the updated version
http://levelwave.com/dev/divtest.php
Everything works great now... but one thing I noticed, now the footer
requires me to scroll a little down to see it even though there's not
enough stuff in the body to push the page down to require the scroll
bars. Any thoughts?
thanks!
~john
<!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">
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0 0 0 0;
}
#lh-logo
{
width: 50%;
float: left;
background: #FFFFFF;
color: #333333;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: left;
}
#rh-logo
{
background: #ffffff;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: right;
}
#safety-slogan
{
width: 100%;
height: 33px;
margin: 0 0 0 0;
padding: 7 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
#footer
{
margin: 0 0 0 0;
padding: 5 0 0 0;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
font-size: 10px;
color: #888888;
absolute;
bottom: 5px;
clear: both;
}
#lh-col
{
width: 145px;
height: 95%;
float: left;
border: solid #AAAAAA;
border-width: 1px 1px 0 0;
background: #EEEEEE;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#rh-col
{
background: #ffffff;
height: 95%;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
/*margin: 0 0 0 160px;*/
padding: 0 0 0 0;
position: absolute;
left: 146px;
}
</style>
</head>
<body style="margine: 0;">
<div id="lh-logo">left image</div>
<div id="rh-logo">right image</div>
<div id="safety-slogan">safety slogan here</div>
<div id="lh-col">
<div><a href=#>Quick Links</a></div>
</div>
<div id="rh-col">
<table width="100%">
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
</table>
</div>
<div id="footer">this is the footer</div>
TomB wrote:
> ~john schreef:
>
>
>
> Try adding position: absolute; and bottom: 5px; to the footer div. Not
> sure if that will work though. I'd move the footer div outside the
> content div and have it sit on the bottom of the page, below everything
> else. I guess clear: both; will do the trick in that case...
>
> You still haven't got the strict doctype in your code. The page renders
> awful in FF now, because you put it into quirks mode.
| |
|
|
~john wrote:
> Everything works great now... but one thing I noticed, now the footer
> requires me to scroll a little down to see it even though there's not
> enough stuff in the body to push the page down to require the scroll
> bars. Any thoughts?
I lowered the heights of the left and right columns to around 80% and
that seemed to fix it...
~john
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |