Hi,
I can't understand how manage the body tag. I wrote this below and to avoid a "white" space between the body tag and the top edge, I had to use margin:-top: -10px; Is it normal?
Moreover, it seems that changing the margin-top of block1, it moves down the entire 'body'. So why can't set e.g. to '10' the margin of 'block1' ? -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<title>1 - positioning</title>
-
<style type="text/css">
-
html {background: white; }
-
body {
-
background: gray; width: 400px;
-
margin: 0px; padding: 0px; margin-top: -10px;
-
-
height: 400px
-
}
-
-
#block1 {
-
background: pink; display: block; border: Dashed 2px;
-
width: 80px; height: 80px; margin: 20px;
-
}
-
-
#block2 {
-
background: yellow; display: block; border: Dashed 1px;
-
width: 80px; height: 80px;
-
}
-
-
#block3 { background: green; display: block; border: Dashed 1px;
-
width: 80px; height: 80px;
-
}
-
-
#wrapper {
-
background: red; position: relative; top: 50px; left: 50px;
-
width: 300px;
-
height: 300px;
-
}
-
-
-
</style>
-
</head>
-
-
<body>
-
-
<div id="wrapper">
-
<div id="block1">
-
Block1
-
</div>
-
-
<div id="block2">
-
Block2
-
</div>
-
-
<div id="block3">
-
Block3
-
</div>
-
</div>
-
-
-
</body>
-
</html>
-
http://imageshack.us/photo/my-images/210/cssr.jpg/ 7  4295 
This has to do with margin collapse between block level elements when they are stacked on top of each other. It prevents two elements, such as paragraphs, from getting double the margin when they are placed next to each other. If you add a border to the wrapper div, it unlinks the connection and the problem goes away.
I profess to have never seen the issue between html and body before and can't think of the reasoning behind it right now.
Hello,
if I set the border of the body, it works. Is it a good thing to set the border? I actually don't need it...however, I had few go and this seems working: -
html { background: yellow; }
-
body {
-
background: gray;
-
margin:0;
-
height: 100%;
-
position: absolute; top:0; left:0;
-
width: 100%;
-
}
-
-
-
#mainblock { background: purple; width: 200px; height: 200px; margin: 20px; }
-
-
It seems that " position: absolute; top:0; left:0;" within 'body' is really needed....any opinion?
Haven't had a chance to think about this. I should know this but can't get my head wrapped around it. Maybe later.
Giving the <html> tag any properties makes it act as an element, and elements have width / height properties.
What I don't understand is this: Why set the background color for your HTML tag, when your body tag is 100% width/height and a different color?
Delete " html { background: yellow; } " from your CSS and the space between your html and body on the page will disappear.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<title>1 - positioning</title>
-
<style type="text/css">
-
body{ background:#FFF;}
-
#container {
-
background: gray; width: 400px; margin-top: -20px; margin-left:-20px;
-
height: 400px
-
}
-
-
#block1 {
-
background: pink; display: block; border: Dashed 2px;
-
width: 80px; height: 80px; margin: 20px;
-
}
-
-
#block2 {
-
background: yellow; display: block; border: Dashed 1px;
-
width: 80px; height: 80px;
-
}
-
-
#block3 { background: green; display: block; border: Dashed 1px;
-
width: 80px; height: 80px;
-
}
-
-
#wrapper {
-
background: red; position: relative; top: 50px; left: 50px;
-
width: 300px;
-
height: 300px;
-
}
-
-
-
</style>
-
</head>
-
-
<body>
-
<div id="container">
-
<div id="wrapper">
-
<div id="block1">
-
Block1
-
</div>
-
-
<div id="block2">
-
Block2
-
</div>
-
-
<div id="block3">
-
Block3
-
</div>
-
</div>
-
</div><!--end of container-->
-
-
</body>
-
</html>
-
You can try this one...
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<title>1 - positioning</title>
-
<style type="text/css">
-
body{ background:#FFF;}
-
#container {
-
background: gray; width: 400px; margin-top: -60px;
-
height: 400px
-
}
-
-
#block1 {
-
background: pink; display: block; border: Dashed 2px;
-
width: 80px; height: 80px; margin-left:-2px;
-
}
-
-
#block2 {
-
background: yellow; display: block; border: Dashed 1px;
-
width: 80px; height: 80px;
-
}
-
-
#block3 { background: green; display: block; border: Dashed 1px;
-
width: 80px; height: 80px;
-
}
-
-
#wrapper {
-
background: red; position: relative; top: 50px; left: 50px;
-
width: 300px;
-
height: 300px;
-
}
-
-
-
</style>
-
</head>
-
-
<body>
-
<div id="container">
-
<div id="wrapper">
-
<div id="block1">
-
Block1
-
</div>
-
-
<div id="block2">
-
Block2
-
</div>
-
-
<div id="block3">
-
Block3
-
</div>
-
</div>
-
</div><!--end of container-->
-
-
</body>
-
</html>
DO COPY AND PASTE, NEXT SAVE. RUN, PLEASE.
Gansehchandra. . . You just copy paste my response....
Sign in to post your reply or Sign up for a free account.
Similar topics
by: GDB |
last post by:
How does one completely remove the space between inline elements with
CSS? I've set margin-left, margin-right, and border-width to 0px, yet
still there is a gap in all browsers I've tried (IE5-6,...
|
by: Tony Benham |
last post by:
I'm having problems with a css layout where a margin is being inserted with
the wrong width. I believe it's my css that's at fault since it is wrong in
netscape 7.1, opera,7.11 and IE6 but I cannot...
|
by: Alex Bell |
last post by:
I am developing at
http://www.members.iinet.net.au/~abell1/test/index.htm with city.css
at http://www.members.iinet.net.au/~abell1/test/city.css. Both
validate.
In index.htm there is a block of...
|
by: Brian |
last post by:
I have a page with content, navigation, and footer divs, in that
order. The nav div has position: absolute, width 8em, on green
background. The other divs have an 8em green left border, such that...
|
by: JWL |
last post by:
Hi
I need to create a bunch of sites with slightly dynamic CSS. Basically,
all the image paths in the CSS need to be dynamic, depending on the
values of certain ASP variables.
I can think of...
|
by: xen |
last post by:
Hey there,
In my html file I use a <div class="quote">.
In my css file I define .quote
I need to specify the margins for <pinside the <div>
Today I learned that I can do this using
..quote p...
|
by: Itaichuk |
last post by:
Hi
I read in several CSS tutorials that block-level elements, such as
<div& <pare rendered with an implicit line break before and
after.
I set to test this out using the following HTML:
I...
|
by: Nik Coughlin |
last post by:
I am halfway through writing a tutorial on image slicing for fluid CSS
layouts, I would love some feedback on what I've done up until this point:
http://nrkn.com/index.html
I am still writing...
|
by: Jim |
last post by:
Hi,
I am hoping that someone here can help me out on this.
The following code works just fine and gives me a nice margin between
my image to the left and the text that appears adjacent to it...
|
by: GTalbot |
last post by:
Hello fellow authoring.stylesheets colleagues,
Can someone please explain why the bottom margin of the last inflow
block-level child in an overflowed parent should not have its margin
reachable....
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
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: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
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...
| |
