Forum Moderators: not2easy
Now I have this:
<!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><title>Untitled Page</title>
<style type="text/css" media="screen"><!--html, body { height: 100%; margin-top: 0; margin-bottom: 0; }
#main{ background-color: #ccc; width:500px; height: 100%; margin-right: auto; margin-left: auto; }
--></style>
</head>
<body>
<div id="main">
page content here
</div>
</body>
</html>
but when I try to add the 30px border and 10px space at top and bottom it looks like this:
<!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><title>Untitled Page</title>
<style type="text/css" media="screen"><!--html, body { height: 100%; margin-top: 10px; margin-bottom: 10px; }
#main{ background-color: #ccc; width:500px; height: 100%; margin-right: auto; margin-left: auto; border: solid 30px #585858; }
--></style>
</head>
<body>
<div id="main">
page content here
</div>
</body>
</html>
Any ideas as to how to do this would be much appreciated - I must have some lunch now before I loose my mind ;-)
I played with this several different ways, using ff as my browser to view. I can't seem to get it to work, and it should work. Am not sure why it doesn't.
I'm sure that someone will come along and help you out with this.
I know someone will come along with the answer. Just hang tight. Busy time of the year, but someone should have an answer for you.
4~css
You may have to resort to Javascript to compute the required values.
Any thoughts would be gratefully received:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
#head { position:absolute; margin-left:-390px; left:50%; top:0; width:780px; min-width:720px; height:10px; visibility: visible; border-bottom: 30px solid #666; }
#foot { text-align:center; position:absolute; margin-left:-390px; left:50%; bottom:0; width:780px; min-width:720px; height:10px; visibility: visible; border-top: 30px solid #666; }
#content { display:block; overflow:auto; position:absolute; top:40px; bottom:40px; width:720px; margin-left:-390px; left:50%; visibility: visible; border-right: 30px solid #666; border-left: 30px solid #666;url('(EmptyReference!)');
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="foot"></div>
<div id="content">
Content here</div>
</body>
</html>
1) In IE the left and right borders in the ęcontent" are do not span down to join the "footer"
2) If there's a fair bit of content in the "content" area then this flows over the footer border. The way around this is to add a "overflow: auto" tag but then I get a scroll bar in the "content" are whereas what I require is a scroll bar on the browser window and the "content" to control the length of the page so you would therefore scroll the page and the footer would appear at the bottom of the scrolled page.
I hope all that makes sense and someone out there may be able to help.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
#head { position:absolute; margin-left:-390px; left:50%; top:0; width:780px; height:10px; border-bottom: 30px solid #666; }
#foot { text-align:center; position:absolute; margin-left:-390px; left:50%; bottom:0; width:780px; height:10px; border-top: 30px solid #666; }
#content { position: absolute; top:40px; bottom:40px; width:720px; margin-left:-390px; left:50%; border-right: 30px solid #666; border-left: 30px solid #666;url('(EmptyReference!)');
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="foot"></div>
<div id="content">
Corem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tristique, tortor quis condimentum porttitor, augue leo sollicitudin felis, eu blandit turpis magna quis leo. Curabitur est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nec massa. Quisque et felis sed sapien vestibulum elementum. Nulla mattis, velit eget tempor consectetuer, elit sapien sodales quam, placerat convallis nisl velit nec enim. Aenean ultricies. Nam scelerisque adipiscing urna. Aliquam facilisis. Ut tincidunt, felis a cursus pellentesque, magna felis accumsan elit, quis varius lectus justo quis lectus. Mauris et elit non erat egestas molestie. Nam aliquam turpis pellentesque est. Nunc fermentum tincidunt turpis. Quisque libero. Phasellus convallis, libero et rhoncus ultricies, neque turpis suscipit est, sed accumsan felis ante feugiat pede.
<p></p>
</div>
</body>
</html>
After a little more playing today I now have the following. BTW the image bk.gif a 780x1px image that has 30px on either side so this makes up the sides of the box.
The bit that I'm struggling with now is to have a 10px margin at the top - I have one at the bottom but not the top - So close yet so far. I've also tested this on all browsers and platforms and it seems to work pretty well. In IE there's a little bit of the image at the very bottom of the window - I'm not sure if this is also the case with IE7?
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen"><!--
html,body {
margin:0;
padding:0;
height:100%;
}
div#container { background-image: url(bk.gif); position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:780px; height: 100%; /* real browsers */
}
div#header { background-color: #fff; height: 0; padding:1em; border-bottom:30px solid #dadada; }
div#content { margin: 0 30px 30px; padding:0 0 30px; /* bottom padding for footer */
}
div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */
background:#fff; height: 10px; border-top:30px solid #dadada; }
--></style>
</head>
<body>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nec dui. Suspendisse luctus laoreet enim. Aliquam erat volutpat. Integer ultrices aliquet est. Nunc nulla. Pellentesque at nisi. Nullam in ipsum. Phasellus tincidunt, libero a dictum lacinia, odio nunc dictum sapien, a accumsan elit metus a ipsum. Donec orci massa, elementum quis, sodales nec, sagittis ut, sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer commodo mauris eget nisl. Cras sollicitudin.
<p>Vestibulum sollicitudin est ut lectus. Aliquam erat volutpat. Nunc sit amet massa. Ut commodo mi sagittis tellus. Aliquam erat volutpat. Fusce venenatis blandit nisl. In viverra odio ac nisl. Aenean dignissim vulputate dolor. Pellentesque libero. Fusce vitae ligula. Maecenas ullamcorper nibh pretium urna. Aenean porttitor tempus tortor. Donec mollis, lectus eget consequat lobortis, ligula tortor fermentum augue, volutpat porta leo lectus sit amet sem. Donec porttitor. Maecenas quis urna. Nunc vel dolor id lorem hendrerit rhoncus. Sed erat. Sed vestibulum vulputate justo. Pellentesque justo elit, ornare eu, tincidunt vitae, pulvinar at, sapien. Maecenas varius condimentum velit.</p>
<p>Vestibulum quis metus sit amet sem facilisis consequat. Vivamus in tellus. Phasellus mollis magna. Integer scelerisque malesuada mauris. Vivamus eu arcu. Morbi convallis sem nec augue. Cras vehicula, nunc ut fermentum pellentesque, dolor lectus condimentum erat, non commodo odio sem id orci. Pellentesque vel risus. Vestibulum lectus. In vehicula vehicula sem. Morbi vitae nulla sit amet turpis pulvinar pretium. Quisque lacus pede, hendrerit non, sodales vel, pretium nec, felis. Curabitur vehicula orci ultricies tellus. Curabitur est lectus, volutpat at, gravida non, eleifend id, odio. </p>
</div>
<div id="footer">
<p></p>
</div>
</div>
</body>
The new code:
div#header { background-color: #fff; height: 9px; padding-top: 1px; border-bottom:30px solid #dadada; }
Umm, it actually doesn't seem to work - problem being the main content area appears under the footer when you adjust the browser size..
The one I've been basing it on is this [xs4all.nl...] which seems to be similar to what I'm after.
Back to the drawing board!
It isn't that people aren't interested in helping you, but this is a very busy week for people. At least I know it is here.
I'll give your code another try later on today if I get a chance to.
As I stated, I tried the negative margins, but might not have used enough of a margin to get it to move.
4~css
Anyway, here's the code I have to date - the bk.gf is simply a 780x1px image that has 30px grey on both left and right sides to basically make the box shape:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen"><!--
html,body {
margin:0;
padding:0;
height:100%;
}
div#container {
background-image: url(images/bk.gif);
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:780px;
height:auto!important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header { background-color: #fff; height: 9px; padding-top: 1px; border-bottom:30px solid #dadada; }
div#content { margin: 0 30px 30px; padding:0 0 30px; /* bottom padding for footer */
}
div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */
background:#fff; height: 10px; border-top:30px solid #dadada; }
--></style>
</head>
<body>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="content">
orem ipsum dolor sit amet, consectetuer adipiscing elit. Nam mollis adipiscing enim. Phasellus dictum augue vel sapien. Aenean ultricies, lorem vel feugiat venenatis, nulla lorem ullamcorper lectus, quis posuere leo neque ac libero. Sed tincidunt. Suspendisse egestas nibh. Aliquam ac odio eget lectus viverra congue. Sed interdum venenatis sem. Ut id enim vitae diam auctor dictum. Nam semper. Sed urna. Ut adipiscing tristique odio.
<p>Donec molestie ultrices leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc velit elit, viverra eu, faucibus vel, varius ut, nisi. Vestibulum iaculis facilisis leo. Vestibulum euismod nunc. Phasellus urna sem, nonummy tristique, imperdiet vitae, venenatis quis, pede. Fusce tempus accumsan nunc. Quisque porttitor. Cras sit amet neque eu sem aliquet mattis. Donec urna enim, cursus ac,</p>
<p></p>
</div>
<div id="footer">
</div>
</div>
</body>
content div was:
div#content {
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
padding:0 0 30px;
}
and it should be:
div#content {
margin-right: 30px;
margin-left: 30px;
padding:0 0 30px; /* bottom padding for footer */
}
