|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
January 25th, 2004, 04:44 AM
|
|||
|
|||
|
CSS - Please help me
Ok, I want web page whose body bgcolor is black, I want a div which will be an overall container for the rest of the sites divs, and it will be 770 in width, and 100% in height of the page. So, no matter how much content in nested in it, it will always reach the browsers bottom. If the browser is larger than than 800 wide, the containing div should be centered, with equal space on both sides. I want all of this as I like a web site which when viewed bigger than 800, it doesn't sit in the left side of the window as most do, with a huge space of nothing beyond its right border...
__________________
Today the world, tomorrow the universe...
|
|
#2
January 25th, 2004, 02:11 PM
|
||||
|
||||
|
Hi,
How about this: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else {
if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
}
}
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
}
.divmain {
height: 100%;
width: 770px;
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<script language="javascript" type="text/javascript">
document.write('<tr height="' + myHeight + '">');
</script>
<td align="center"><div class="divmain">Text</font></td>
</tr>
</table>
</body>
</html>
|
|
#3
January 31st, 2004, 05:45 PM
|
|||
|
|||
|
this actually looks like something i might use, but i would like to know what everything is before i start using it, so first of all:
why is the java necessary? I don't know any java, and what just wondering why it was necessary? thanks
|
|
#4
January 31st, 2004, 05:45 PM
|
|||
|
|||
|
this actually looks like something i might use, but i would like to know what everything is before i start using it, so first of all:
why is the java necessary? I don't know any java, and what just wondering why it was necessary? thanks sorry for double post
|
|
#5
January 31st, 2004, 07:26 PM
|
||||
|
||||
|
The script edwinbrains posted gathers the client area's width and height, and places the height in the <tr> portion of a table statement. That is one method using HTML and javascript, but it seems to set the size only initially, not sure if it is resize friendly. If one had content that fit in the table upon load, and the user made the window larger, then it looks like the table would stay the same size (since the height is set in pixels insted of 100%). From the sound of what you wanted, I'd do it in css only, maybe something like:
Code:
/* CSS: */
body
{
padding: 0;
margin: 0;
background-color: rgb(0,0,0);
}
.maincontent
{
position: absolute;
left: 50%;
width: 770px;
height: 100%;
/* margin is negative one half of width */
margin: -385px;
/* this with the left: 50% should center an absolutely positioned div */
}
Cheers to kk5st who brought the negative margin centering trick to my attention. HTH
__________________
Obstruct the doors, cause delays, be dangerous.
|
|
#6
February 1st, 2004, 12:44 AM
|
||||
|
||||
|
I would agree with Detrifuse. I don't think my code is very resize friendly. Detrifuse's code does look better!
|
|
#7
February 1st, 2004, 01:34 AM
|
|||
|
|||
|
Interesting thing, I have been using this code and for some reason, the container div is perfectly centered in both Netscape and IE, but there is nothing in the code which is centering it, nor can I move the div so it is left aligned on the page??? Here is the code:
<!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" lang="en" xml:lang="en"> <head> <meta name="GENERATOR" content="Microsoft FrontPage 5.0" /> <meta name="ProgId" content="FrontPage.Editor.Document" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Navigation</title> <style type="text/css" media="screen"> html{ height:100%; } body{ margin: 0; padding: 0; font: 85% arial, hevetica, sans-serif; color: #000; background-color: #00f; height: 100%; border: 0px solid red; } #container{ margin: 0px auto; width: 770px; height: 100%; text-align: left; background-color: #f00; background-image: url('images/keybg.jpg'); background-repeat: no-repeat; border: 0px solid red; } </style> </head> <body> <div id="container" > </div> </body> </html>
|
|
#8
February 1st, 2004, 01:59 AM
|
||||
|
||||
|
Code:
#container{
margin: 0px auto;
width: 770px;
height: 100%;
text-align: left;
background-color: #f00;
background-image: url('images/keybg.jpg');
background-repeat: no-repeat;
border: 0px solid red;
}
cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#9
February 1st, 2004, 02:01 AM
|
|||
|
|||
|
I will look it up, but "compliance mode" as opposed to? and what defines this? Thanks Gary.
|
|
#11
February 1st, 2004, 02:29 AM
|
|||
|
|||
|
Thanks so much, that site you pointed me to yesterday is unavaiable, that being /*pei*/, unfortuantely. I am just racking my brain out on this stuff, I am trying to understand the "doc flow" so to speak, in relation to positioning, just when I think I am getting it, something like this happens - http://tmh.netdbs.com/turnkey/default7.htm
I had it all figured out, until I added content to the mainbod area, and by doing so, it just served to extend it beyond the nav area in IE, in NS, it pushes the text right out of its containing block, that being mainbod. As I wrote earlier, I will rtfm and look up various tutorials on positioning. I have an O'Reily book which seems to be fairly good at this. By the way, this devshed site is great, but one the home page, it seems I need to actually generate a "search" to get to the forum section, and once I am in the site and logged in (via cookie I assume) I can't seem to figure out how to go to my personal information and see post I have submitted, etc. Take good care and thanks for advice. Tom PS, I peeked at that above link and it looks really great, thanks!
|
|
#12
February 1st, 2004, 09:19 AM
|
|||
|
|||
|
Ok, so the tutorial in the link above pointed me to Appledev and it is an awesome resource which further pointed me in different directions. For this solution only, I have integrated minimal usages of tables to accomplish my design pursuit. (only because I need to get this project done asap) I have it looking identical in both IE and NS but one small problem, I want it to fill 100% of the screen. I tried every variation I could on both the divs, table, and td's, but all to know avail. Here is the site, if anyone could peek at it and tell me how to get 100% height, I sure would apprecaite it. If only in IE, that would be ok for now. Thanks, Tom
http://tmh.netdbs.com/turnkey/layout.htm
|
|
#13
February 1st, 2004, 03:36 PM
|
||||
|
||||
|
As an alternative to a lot of blank space, put your entire page into a single cell table. The default will center the page vertically. An example is here.
gary
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS - Please help me |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
