I'm sure I'm missing something obvious, but I'd appreciate it if someone could
point out why the following puts a wide margin on the top, left, and right, but
not on the bottom (even when scrolled fully down):
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
body { background: gray; }
div#sheet { position: absolute; margin: 10%; z-index: 1; width: 80%; background:
white; }
div#shadow { position: absolute; z-index: -1; height: 100%; width: 100%; bottom:
-5px; right: -5px; color: white; background:
black; }
p { padding: 5%; }
</style>
</head>
<body>
<div id="sheet"><p>Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet
Sheet Sheet Sheet Sheet Sheet Sheet Sheet
Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet Sheet
</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><
p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p><p>Sheet</p>
<div id="shadow"><p>Shadow</p></div>
</div>
</body>
</html> 6 1413
Paul Wake wrote:
I'm sure I'm missing something obvious, but I'd appreciate it if someone could
point out why the following puts a wide margin on the top, left, and right, but
not on the bottom (even when scrolled fully down):
[snip code]
Assuming you are talking about the margin on the first element in
<body>, I'm guessing the margin is there, but it just collapses with
the margin of <body>, and falls outside the screen.
It's just a guess though, as I couldn't be bothered copy-pasting your
code into a file, save it, and let my server display it.
If the guess is correct though, I'm curious to know whether giving
<bodya border-bottom or a padding-bottom would solve your problem.
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
In article <1n******************************@40tude.net>, Els says...
>It's just a guess though, as I couldn't be bothered copy-pasting your code into a file, save it, and let my server display it.
Sorry. Here's an online version of the test page: http://www.xmission.com/~wake/test.html
My own home page and some other linked pages have a margin all around, but this
one doesn't work.
Paul Wake wrote:
In article <1n******************************@40tude.net>, Els says...
>It's just a guess though, as I couldn't be bothered copy-pasting your code into a file, save it, and let my server display it.
Sorry. Here's an online version of the test page: http://www.xmission.com/~wake/test.html
My own home page and some other linked pages have a margin all around, but this
one doesn't work.
Is there some reason for not taking advantage of flow? How about
removing the position and z-index rules?
Louise
In article <5P******************@news-server.bigpond.net.au>, boclair says...
>Is there some reason for not taking advantage of flow? How about removing the position and z-index rules?
That changes it from: http://www.xmission.com/~wake/test.html
to: http://www.xmission.com/~wake/test2.html
which does get the bottom margin in, but messes up the shadow div. I'm not
familiar enough with CSS get both of what I want on the page.
Paul Wake wrote:
In article <5P******************@news-server.bigpond.net.au>, boclair says...
>>Is there some reason for not taking advantage of flow? How about removing the position and z-index rules?
That changes it from: http://www.xmission.com/~wake/test.html
to: http://www.xmission.com/~wake/test2.html
which does get the bottom margin in, but messes up the shadow div. I'm not
familiar enough with CSS get both of what I want on the page.
If this position:absolute is only to get that shadow in, try it this
way:
body{
padding:10%;
}
#shadow{
position:relative;
top:5px;
left:5px;
}
#sheet{
position:relative;
top:-5px;
left:-5px;
}
<div id="shadow">
<div id="sheet">
[page content]
</div>
</div>
(background colours to be added obviously :-) )
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Paul Wake wrote:
In article <5P******************@news-server.bigpond.net.au>, boclair says...
>Is there some reason for not taking advantage of flow? How about removing the position and z-index rules?
That changes it from: http://www.xmission.com/~wake/test.html
to: http://www.xmission.com/~wake/test2.html
which does get the bottom margin in, but messes up the shadow div. I'm not
familiar enough with CSS get both of what I want on the page.
If the aim is to have the shadow box offset horizontally and vertically
another approach would be something like.
Louise
div#shadowloc {
left: 0.5em;
position: relative;
top: 0.5em;
}
div#shadowloc div {
background: #000000;
color: #ffffff;
width: 100%; /* IE fix*/
}
and markup
<div id="sheet">
[sheet content]
<div id="shadowloc"><!-- contained in sheet -->
<div>Shadow</div>
</div><!-- end contained shadowloc -->
</div><!-- end sheet --> This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: mitsura |
last post by:
Hi,
I have included a small listing. The test program opens a panel and
show a bitmap.
What I want is to when the mouse is over the bitmap panel, I want to
trap the left mouse click.
The...
|
by: A.M |
last post by:
Hi,
Using C#, what is the equivalent of functions Left, Right and Mid that we
had in vb6?
Thanks,
Alan
|
by: Bruce A. Julseth |
last post by:
I have:
If (Microsoft.VisualBasic.Left(TextBox1.Text, 1) = "$") Then
TextBox1.Text = Microsoft.VisualBasic.Right(TextBox1.Text,
TextBox1.Text.Length - 1)
End If
Adding: Imports...
|
by: James Brown [MVP] |
last post by:
Hi,
I am having trouble understanding how the 'const' modifier affects the
'left-right' rule when deciphering c-declarations:
const int *x; // x is a pointer to a 'const int'
int const *x; ...
|
by: Chaitanya |
last post by:
Hello, In my Application i want to know when user clicks both the
"Left" and "Right" buttons of the Mouse.
I am getting a number like this "3145728". But the MouseButtons Enum
contains only Left,...
|
by: |
last post by:
What are the equivalant to left, right, etc. in C#. How can I extract
strings from a string without them? For instance, I have a string like so:
...
|
by: TheServant |
last post by:
Hi guys,
I have done this before, but I can't figure out why it won't work. If any of you can see my problem, please let me know. Here are the relavent pieces of code.
<!-- Main Content -->
<div...
|
by: shapper |
last post by:
Hello,
I am used to SQL but I am starting to use LINQ.
How can I create Left, Right and Inner joins in LINQ? How to
distinguish the different joins?
Here is a great SQL example:...
|
by: ImpactMan |
last post by:
Need help to create an windows mobile application with a few buttons that when they are pressed/clicked they assign keys, like up, down, left, right.
It is just like to create a "virtual d-pad",...
|
by: samz |
last post by:
Hello,
A. CONTEXT
My album is generated by a batch script, but DOS cannot get the size of an image file. So, the a unique picture size is defined in the script....
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
|
by: PapaRatzi |
last post by:
Hello,
I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
|
by: Shællîpôpï 09 |
last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
|
by: af34tf |
last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
| | |