How do you give a <body> a 10px margin on every side, then a border? That
is, an inset border.
In the example below, the browsers I've tried interpret "width:100%" as 100%
of the width including margins (the same width the height). As the actual
display area for the body contents is the window display area minus the CSS
margin, scroll bars show up.
I don't want hard-coded dimensions, the body should resize and reflow (and,
when needed, scroll bars show up) as the window is resized.
--
Joakim Braun
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{margin:10px;border:1px solid black;width:100%;height:100%;}
</style>
</head>
<body>
</body>
</html>
6  47737 
"Joakim Braun" <jo**********@jfbraun.removethis.com> writes: How do you give a <body> a 10px margin on every side, then a border? That
is, an inset border.
What do you want to happen to the border when
(a) the content of the body doesn't fill the viewport
(b) it's larger, so it needs to scroll?
In the example below, the browsers I've tried interpret
"width:100%" as 100% of the width including margins (the
same width the height).
As it's supposed to (whether or not one thinks that is a
sensible model). If you set width: auto you get something
more agreeable. For height, it's not clear where you want
the bottom border to appear. If you set height: auto, you'll
get something which, when the content is large enough, will
leave a 10px margin at the bottom when scrolled to the
bottom, but a much bigger one if the content isn't big
enough.
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
"Jón Fairbairn" <jo***********@cl.cam.ac.uk> writes: "Joakim Braun" <jo**********@jfbraun.removethis.com> writes:
How do you give a <body> a 10px margin on every side, then a border? That
is, an inset border.
What do you want to happen to the border when
(a) the content of the body doesn't fill the viewport
(b) it's larger, so it needs to scroll?
[...] For height, it's not clear where you want
the bottom border to appear. If you set height: auto, you'll
get something which, when the content is large enough, will
leave a 10px margin at the bottom when scrolled to the
bottom, but a much bigger one if the content isn't big
enough
I forgot to add that if you set the margin and border on
html instead of on body, you get something that fits the
viewport if the content is small. I'm not sure whether this
is behaviour one can rely upon, though.
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
Joakim Braun wrote: How do you give a <body> a 10px margin on every side, then a border? That
is, an inset border.
In the example below, the browsers I've tried interpret "width:100%" as 100%
of the width including margins (the same width the height). As the actual
display area for the body contents is the window display area minus the CSS
margin, scroll bars show up.
I don't want hard-coded dimensions, the body should resize and reflow (and,
when needed, scroll bars show up) as the window is resized.
Forget the 10px and go with a small percentage, say 2 or 3? Then
subtract your percentage for margins from the width you want.
Height is another story. Body height is based upon content rather than
browser window size. It's better to leave it alone although you can go
through some contortions to set it. Do some studying at: http://www.w3.org/TR/REC-CSS2/ about absolute positioning and possibly
margins if you REALLY want to still set the height. I can't tell you
right off as this is something I don't even try to do.
--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
"Uncle Pirate" <st**@surecann.com> skrev i meddelandet
news:41********@nntp.zianet.com... Joakim Braun wrote:
How do you give a <body> a 10px margin on every side, then a border?
That is, an inset border.
In the example below, the browsers I've tried interpret "width:100%" as
100% of the width including margins (the same width the height). As the
actual display area for the body contents is the window display area minus the
CSS margin, scroll bars show up.
I don't want hard-coded dimensions, the body should resize and reflow
(and, when needed, scroll bars show up) as the window is resized.
Forget the 10px and go with a small percentage, say 2 or 3? Then
subtract your percentage for margins from the width you want.
<snip>
Thanks, that's an idea.
What I'm trying to do is have an inset frame around the whole page, with the
contents being a header at the top stretching over 100% of the body width
minus margins, and below that an iframe filling the rest of the available
body area (and having scroll bars when needed). So the inset frame would
remain at most window sizes.
--
Joakim Braun
Joakim Braun wrote: What I'm trying to do is have an inset frame around the whole page, with the
contents being a header at the top stretching over 100% of the body width
minus margins, and below that an iframe filling the rest of the available
body area (and having scroll bars when needed). So the inset frame would
remain at most window sizes.
A link to the page you are trying to put together might help people come
up with better solutions.
--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
"Uncle Pirate" <st**@surecann.com> skrev i meddelandet
news:41********@nntp.zianet.com... Joakim Braun wrote:
What I'm trying to do is have an inset frame around the whole page, with
the contents being a header at the top stretching over 100% of the body
width minus margins, and below that an iframe filling the rest of the
available body area (and having scroll bars when needed). So the inset frame would
remain at most window sizes.
A link to the page you are trying to put together might help people come
up with better solutions. www.jfbraun.com/trash/demo.htm This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Greg |
last post by:
Javascript Folks,
I am relatively new to javascript and am working on a script where I
want to utilizes a couple of iframes and format text in them. I have
run into a problem with getting the...
|
by: bipède |
last post by:
Hi,
Is it possible in Mozilla / Firefox / Netscape to fix minimum size for
html and/or body element in a "real" XHTML (mime application/xhtml+xml)
page so that when there is few text in a page...
|
by: Josselin |
last post by:
(Mac 10.4.6 , Firefox/1.5.0.3 Mozilla/5.0 (Macintosh; U; PPC Mac OS X
Mach-O; fr; rv:1.8.0.3) Gecko/20060426 )
I am trying to setup a Reusable Image Cache in JS ( as per...
|
by: VK |
last post by:
Richard Cornford wrote:
> The html element is the outermost element in an (x)HTML document.
> All other elements are its descendants, with its direct children being
> the head and body elements.
...
|
by: =?Utf-8?B?dG9t?= |
last post by:
Hi All,
I have a theme with a Style.css in which I have defined a style rule for the
body element :
body
{
min-width: 780px;
margin: 0;
padding: 0;
|
by: Pugi! |
last post by:
I am making a site with lot of AJAX components. When I present a form
(in a layer on top of contents of page) I want to make sure that the
user cannot click on a link or button other then on the...
|
by: AAaron123 |
last post by:
<body runat="server" id="MainBody">
<form id="form1" runat="server" style="background-color:green; width: 100%;
height: 100%">
<br />
Table1" runat="server" Style="background-color:Yellow;...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
