CSS - Aarrggh!

djflorian · djflorian

The way I understand CSS - not very well =) - the following code should give me
a page with a 50 pixel border all the way around, with a white panel left in
the middle.

#content {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
background-color: #ffffff;
border-top-width: 50px;
border-right-width: 50px;
border-bottom-width: 50px;
border-left-width: 50px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #005172;
border-right-color: #005172;
border-bottom-color: #005172;
border-left-color: #005172;
}

What I end up with is a 50px Border top and left, and the right and bottom
hangs over the edge of the page.

Any ideas what I am doing wrong?

Excavatorak · Excavatorak

Hello djflorian,
It looks like the white space is taking the 100% and the 50px border is
hanging off the right and bottom because it's adding to the 100%.
I played around with it a bit but I wasn't real happy with anything I came up
with.

I got rid of your content div on my last attempt but it didn't turn out much
better than when I was using the div. There is a lot less code without it so
that's the one I'm putting up tonight.
I'll look at it again tomorrow if no-one else has come up with a better
solution yet.

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html {
height: 90%;
width: 90%;
border: 50px solid #CC0000;
}
body {
height: 100%;
width: 100%;
}
</style>
</head>

<body>
<div id="content"></div>
</body>
</html>

Lionstone · Lionstone

"djflorian" <webforumsuser@macromedia.com> wrote in message
news:drse2m$7fh$1@forums.macromedia.com...

> The way I understand CSS - not very well =) - the following code should
> give me
> a page with a 50 pixel border all the way around, with a white panel left
> in
> the middle.

Not quite. Width and height are the width and height of the area inside the
border. Any border, padding, or margin is extra space added to the width
and height. So your box is actually the width of the screen + 100px and the
height of the screen + 100px.

I think the best way to get the effect you want is actually with two divs:

body {
margin:0;
padding:0;
}

#wrapper {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:#005172;
}

#content {
position:relative;
background-color:#FFFFFF;
margin:50px;
}

You'll still find the 100% height problematic, though. As-is, the 50px
frame is correct, but the page will be only as high as the content needs it
to be; it won't necessarily fill the window.
You can add height:100% to the body {} rule to make the frame always fill
the window, but then the colored portion on the bottom may be quite a bit
larger than 50px if the content of the page isn't long enough to make it
extend downward.

Hopefully that's enough to get you started, but I'm hardly a wizard when it
comes to CSS. I've also never worried too much about the height of my
pages. I know there are other solutions - many with a sprinkling of
JavaScript to make them work - but I don't know them offhand. Try posting
again in the general DW forum if my little solution doesn't work well enough
for you.

Hope this helps.

Excavatorak · Excavatorak

That's an interesting approach Lionstone - gives us more control over the space
inside the 50px border. Still can't get the height issue resolved...I know it
can be done but I just can't seem to find it.
See if this compromise works for you djflorian:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}

#wrapper {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:#005172;
}

#content {
position:relative;
background-color:#FFFFFF;
margin:50px;
height: 100%;
}
html {
height: 100%;
width: 100%;
}
</style>
</head>

<body>
<div id="wrapper"><div id="content">some text here</div></div>
</body>
</html>

Lionstone · Lionstone

"Excavatorak" <stewart@nopeople.com> wrote in message
news:drtpjl$9pc$1@forums.macromedia.com...

> That's an interesting approach Lionstone - gives us more control over the
> space
> inside the 50px border. Still can't get the height issue resolved...I know
> it
> can be done but I just can't seem to find it.

Well, height is tough. 100% has to be 100% of SOMETHING for it to make
sense. A 100% height is normally the height of its parent element. In the
case of your wrapper div, the parent is the page body. The page body is
only as high as it needs to be to fit the page content. If you set the body
to 100% height, then the parent is the browser window, but then you run into
the same set of problems - border, margin, and padding are added to the
height, meaning they'll always run off the bottom of the screen.

All the solutions I've seen use javascript to dynamically write the page
height in pixels. If I had a link for you, I'd give it to you, but it's
never been something I really worried about.

PleaseRegister1 · PleaseRegister1

Im working making to make site with freewebs. I have a CSS coding, but I dont know how to put it in with the html. When I put the code in without the css, it comes out in a whole another format.

djflorian · djflorian

Ok, firstly, thanks for the help!

The following has given me the best results so far (in Safari, Firefox,
Camino, IE - all for Mac obviously).

#wrapper {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:#005172;
}

#content {
position:relative;
background-color:#FFFFFF;
margin:50px;
}

It brings the width back into where I want it, and doesn't drop the bottom off
the edge of the page either.
Height I'm not so worried about as each page *should* be close enough to full
anyway.

Thanks for your help guys. I will let you know how I go.

Murray *TMM* · Murray *TMM*

> Height I'm not so worried about as each page *should* be close enough to

> full
> anyway.

"Full" on whose screen?

And why absolute/relative positioning?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"djflorian" <webforumsuser@macromedia.com> wrote in message
news:drui58$9ko$1@forums.macromedia.com...

> Ok, firstly, thanks for the help!
>
> The following has given me the best results so far (in Safari, Firefox,
> Camino, IE - all for Mac obviously).
>
> #wrapper {
> position:absolute;
> left:0;
> top:0;
> width:100%;
> height:100%;
> background-color:#005172;
> }
>
> #content {
> position:relative;
> background-color:#FFFFFF;
> margin:50px;
> }
>
> It brings the width back into where I want it, and doesn't drop the bottom
> off
> the edge of the page either.
> Height I'm not so worried about as each page *should* be close enough to
> full
> anyway.
>
> Thanks for your help guys. I will let you know how I go.
>
>

CSS - Aarrggh!

Thread Tools

Display

CSS - Aarrggh!

Re: CSS - Aarrggh!

Re: CSS - Aarrggh!

Re: CSS - Aarrggh!

Re: CSS - Aarrggh!

Re: CSS - Aarrggh!

Re: CSS - Aarrggh!

Re: CSS - Aarrggh!

Posting Permissions