PDA

View Full Version : CSS problem


wewt
05-09-2007, 06:22 PM
Hey,

I'm trying to get this box to reach the top and bottom of the page. It only shows when I set height: 100px; or something and not 100% which is what I have atm. I'm a bit stuck and was wondering how I can get it to reach the top and bottom with no top and bottom margins.

this is it now (it's not showing)

wewt.co.uk/xy/

#box {
margin-top: 0px;
margin-bottom: 0px;
width: 600px;
background-color: #fff;
min-height: 100%;
margin-right: auto;
margin-left: auto;
}
Aflux
05-09-2007, 06:29 PM
body {
margin 0 0 0 0px;
}
wewt
05-09-2007, 06:34 PM
Erm, nope :P

body {
background-image: url(images/stripes.png);
font: 10px verdana;
color: #2e2e2e;
height: 100%;
margin: 0 0 0 0px;
}

#box {
margin-top: 0px;
margin-bottom: 0px;
width: 600px;
background-color: #fff;
min-height: 100%;
margin-right: auto;
margin-left: auto;
}

that's my whole code, thanks for the help.
Aflux
05-09-2007, 06:39 PM
Show me the whole site.
wewt
05-09-2007, 06:41 PM
body {
background-image: url(images/stripes.png);
font: 10px verdana;
color: #2e2e2e;
height: 100%;
margin: 0 0 0 0px;
}

#box {
margin-top: 0px;
margin-bottom: 0px;
width: 600px;
background-color: #fff;
min-height: 100%;
margin-right: auto;
margin-left: auto;
}

www.wewt.co.uk/xy/

<!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>W!</title>
<meta name="description" content="WEWT graphic design services" />
<meta name="keywords" content="graphic, design, web, wewt, layout, logo" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="Shortcut Icon" href="/favicon.ico" />
<link href="http://www.wewt.co.uk/xy/style.css" rel="stylesheet" type="text/css" />
</head>
<?php

$getpage = $_GET['page'];
$page = $getpage. '.htm';

if (file_exists($page))
{
echo("<body onload=\"" .$getpage. ".src='http://www.wewt.co.uk/xy/images/" .$getpage. "_on.PNG';\">");
}
else
{
echo "<body>";
}

?>
<div id="box">
<?php

$getpage = $_GET['page'];
$page = $getpage. '.htm';

if (file_exists($page))
{
include($page);
echo('<script type="text/javascript">' .$getpage. '.src="http://www.wewt.co.uk/xy/images/' .$getpage. '_on.PNG";</script>');
}
else if ($getpage == null)
{
include('blog.htm');
}
else
{
include('error.htm');
}

?>
</div>
</body>
</html>
Aflux
05-09-2007, 06:43 PM
I dinny see nay box on the site.


body {
background-image: url(images/stripes.png);
background-repeat: repeat;
font-size: 10px;
font-family: verdana;
color: #2e2e2e;
margin: 0 0 0 0px;
}

#box {
width: 600px;
background-color: #ffffff;
}


Anyway, change your CSS code to that and then change it to

<div id="box" align="center">
wewt
05-09-2007, 06:52 PM
doesn't work. look

www.wewt.co.uk/xy
Aflux
05-09-2007, 07:00 PM
The box is at the top of the screen?
wewt
05-09-2007, 07:06 PM
yeah but not the bottom. I need it to reach both. thanks loads for the help btw.
Aflux
05-09-2007, 07:08 PM
As far as I know, that's impossible until the content fills enough to reach the bottom.

I'm 80% sure on that.
Eccentric
09-09-2007, 07:08 PM
<Br> or <p> it :) i doubt its possible in Css
Sygon..
09-09-2007, 07:51 PM
Find:


#box {
width: 600px;
background-color: #ffffff;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
min-height: 600px;
}Replace:



#box {
margin: 0px auto 0px;
min-height: 600px; /* NON IE 6 */
width: 600px;
position: relative;
background: #FFFFFF;
}

* html #box {
height: 600px; /* IE 6 ACCEPTS THIS AS MIN HEIGHT */
}
Should work if not i will repost a better code but this is the most effective :)!

If its doesnt just add bottom: 0; to the #box then if that dont work i will post a tacky code that works
Eccentric
09-09-2007, 07:53 PM
So you can actually do that via css thanks sygon thats helped me learn a little more too +rep :)
Sygon..
09-09-2007, 08:01 PM
Crappy way is:

(This is just a box not your box wewt)



body {
background: #000000;
height: 100%;
min-height: 100%;
margin: 0;
}

#box {
height: 100%;
bottom: 0px;
position: absolute;
width: 600px;
background: #FFFFFF;
}


To center a absolute position its:



float: left;
margin-left: -300px; /* HALF OF WIDTH WHICH IS 600 */
Tomm
09-09-2007, 08:10 PM
Just add a height: 100%; to the body.
Sygon..
09-09-2007, 08:11 PM
Just add a height: 100%; to the body.

That wouldnt work..
Tomm
09-09-2007, 08:15 PM
Yes it does. If he wants the box to go the full height of the page.

(View in IE, its a IE fix):

http://www.usersystem.net/stretch_example.html

http://www.usersystem.net/stretch_example_fixed.html


That wouldnt work..
Sygon..
09-09-2007, 09:12 PM
Yeh but he needs to my thing for IE (In firefox its completely different look wise) Because he has already defined 100% for body.

Want to hide these adverts? Register an account for free!