Trouble Positioning Layers

J

Jeff Bowman

Hello

I'm trying to set a series of layers as a backdrop against a main layer in
the foreground, but alas I'm not having much luck. The whole thing has got
me considering going back to my old job of hunting water buffalo in New
Jersey.

Here's a quick link to what I've got so far:

http://jeffbowman.com/layers/

Any ideas?

Thanks!
 
D

dorayme

"Jeff Bowman said:
I'm trying to set a series of layers as a backdrop against a main layer in
the foreground, but alas I'm not having much luck. The whole thing has got
me considering going back to my old job of hunting water buffalo in New
Jersey.

Here's a quick link to what I've got so far:

http://jeffbowman.com/layers/

Any ideas?
Click to expand...

Tried height: 100px; in the .border?
 
J

Jeff Bowman

Tried height: 100px; in the .border?
Click to expand...

Yep, I did. No difference.

The trouble seems to be the negative relative positioning in the background
layers. I can't use absolute positioning for this because--again--it's
dynamically generated markup and it may need to appear several times on one
page. I also can't use images on this one.

I'm starting to think this is one that CSS can't handle. But then again I'm
pretty much a novice at this stuff.
 
J

Jonathan N. Little

Jeff said:
Hello

I'm trying to set a series of layers as a backdrop against a main layer in
the foreground, but alas I'm not having much luck. The whole thing has got
me considering going back to my old job of hunting water buffalo in New
Jersey.

Here's a quick link to what I've got so far:

http://jeffbowman.com/layers/

Any ideas?
Click to expand...

1. Use doctype strict
2. Reorder your div's
3. Simplifly your CSS

BTW you don't need to comment your styles anymore...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Stacked Layers</title>
<style>
body { background-color:#eeeeee; }

div.border {
border: 1px solid gray;
margin-left:25px;
width:200px;
}

div.blue {
background-color:blue;
width: 180px;
height: 80px;
margin: 10px;
margin-top: -90px;
}
div.red, div.white {
width: 100%;
height: 50px;
}

div.red {
background-color:red;
}

div.white {
background-color:white;
}

</style>
</head>
<body>
<div class="border">
<div class="red"></div>
<div class="white"></div>
<div class="blue"></div>
</div>

<p>reorder your DIVs</p>
</body>
</html>
 
D

dorayme

"Jeff Bowman said:
Yep, I did. No difference.
Click to expand...

Well, it sure made a difference on my tests.

Basically you have 3 boxes inside a box. Normally these inner
boxes would take up a certain space (what you see inside the
border of the container). But you are shifting them by relative
positioning to take up less height in appearance. The container
does not know these shananigans going on inside. It is like a mum
happy that the kids are safe inside. What they get up to though!
If she knew they did not use up all the space, she could get a
smaller house or sell off a part.

See

<http://members.optushome.com.au/droovies/test/jeffBowman.html>

Jeff, you have to give units in your css... basic stuff this...
there are browsers that are not happy about this ommision. You
should also give a doc type. Preferably as I have it. And check
things against validators to pick some mistakes up. You cannot do
any old how, it is not that forgiving this stuff.
 
J

Jonathan N. Little

Jonathan N. Little wrote:
<snip>

Oh of course I got lazy and forgot to test with the OSCPB (OS Component
Posing as a Browser) and it screws the bottom margin on "blue"
div.blue {
background-color:blue;
width: 180px;
height: 80px;
margin: 10px;
margin-top: -90px;
Click to expand...

need to add conditional, or hack to add

div.blue { margin-bottom: 0; }

for IE. Don't know if needed for IE7, got Win2K, but I betcha it does!

<snip>
 
J

Jonathan N. Little

dorayme said:
Well, it sure made a difference on my tests.
Click to expand...

That's because you where using a real web browser. Fire up your old
Winbox and take a gander with IE! He has an IE-headache that
unfortunately Excedrine won't cure ;-)
 
D

dorayme

"Jonathan N. Little said:
That's because you where using a real web browser. Fire up your old
Winbox and take a gander with IE! He has an IE-headache that
unfortunately Excedrine won't cure ;-)
Click to expand...


Of course, you are right. I was thinking to pull off the least
little change to his code. See if I can develop a fairy tale
model of HTML/CSS using little ditties about mums and kids and
houses and make old K cross to see how fantasy can actually work.
But not in this case! I really, really hope he does not now see
it. <g>

Much better to do without rel pos. You are the man. I'm the
martian. In fact, Jonathan, I just took a peek at Mac IE and with
the border suggestion, the red has disappeared and the white is
not where OP would like it. No need to fire the Winbox, I believe
you.

Sorry Op, look at JL's code, really.
 
J

Jonathan N. Little

dorayme said:
Of course, you are right. I was thinking to pull off the least
little change to his code. See if I can develop a fairy tale
model of HTML/CSS using little ditties about mums and kids and
houses and make old K cross to see how fantasy can actually work.
But not in this case! I really, really hope he does not now see
it. <g>
Click to expand...

Fairy tale dashed be the Wicked Wizard Of the West! "He-he heee!", cries
Big Bill with evil glee.
 
J

Jeff Bowman

Basically you have 3 boxes inside a box. Normally these inner
boxes would take up a certain space (what you see inside the
border of the container). But you are shifting them by relative
positioning to take up less height in appearance. The container
does not know these shananigans going on inside. It is like a mum
happy that the kids are safe inside. What they get up to though!
If she knew they did not use up all the space, she could get a
smaller house or sell off a part.
Click to expand...

Or she could bundle 'em up and haul 'em off with her to her remote cabin in
Alaska :)


See

<http://members.optushome.com.au/droovies/test/jeffBowman.html>
Nice!



Jeff, you have to give units in your css... basic stuff this...
there are browsers that are not happy about this ommision.
Click to expand...

I was wondering about that, for the positioning styles. Thanks for the
clarification.


You
should also give a doc type. Preferably as I have it. And check
things against validators to pick some mistakes up. You cannot do
any old how, it is not that forgiving this stuff.
Click to expand...

Validators--good things, they are. It's been too long. I should go and visit
one for old times' sake. "Go often to the house of your friend, for weeds
soon choke up the unused path."

Doc type isn't an option on this one, though. This particular markup is for
the designer window in Visual Studio, which in turn uses the IE engine. In
fact FWIW I don't think there're any <html>/<head>/<body> tags used at all.
 
J

Jeff Bowman

Gosh durn it, for the life of me I can't figure out what on earth OP means!

On-Pedestal?
 
J

Jeff Bowman

That's because you where using a real web browser. Fire up your old Winbox
and take a gander with IE! He has an IE-headache that unfortunately
Excedrine won't cure ;-)
Click to expand...

Actually we lucked out on this one. It's not a headache after all.

You see, all this is for the design-time view in Visual Studio, which of
course uses IE for its rendering. So, in this rare instance, I'm able to
predict my audience with pinpoint accuracy.
 
J

Jeff Bowman

1. Use doctype strict
2. Reorder your div's
3. Simplifly your CSS
Click to expand...

Unfortunately doctype isn't an option here--all I have access to is the
design-time markup for the control that's currently under construction.
While it's certainly possible that a full HTML page is passed to the Visual
Studio designer, I have no way of verifying that.

Since IE will render a page with only a single DIV in it, however, it's also
possible that only the control's markup is passed. I really have no idea,
and I don't think any of us will be finding out anytime soon.

BUT... your negative-top-margin tip and zero-bottom-margin follow-up are
what did the trick. It now works like a champ, without doctype.

See? I keep telling you guys that you're the Kings, but you never believe me
:)


BTW you don't need to comment your styles anymore...
Click to expand...


Ah, good. Thanks.
 
D

dorayme

"Jeff Bowman said:
See? I keep telling you guys that you're the Kings, but you never believe me
:)
Click to expand...

....yeah well, Queens might just find that a bit hard to believe.
 
J

Jonathan N. Little

Jeff said:
Unfortunately doctype isn't an option here--all I have access to is the
design-time markup for the control that's currently under construction.
While it's certainly possible that a full HTML page is passed to the Visual
Studio designer, I have no way of verifying that.
Click to expand...

VSD is just the tool that you are generating the HTML, if it is not
generating valid markup either (a) it is not setup up to do so or (b)
it's a POS and should be used for web pages. But I bet it's (a).

BTW you may be using a MS to develop your markup but how can you
guarantee that your user will only use IE?
Since IE will render a page with only a single DIV in it, however, it's also
possible that only the control's markup is passed. I really have no idea,
and I don't think any of us will be finding out anytime soon.
Click to expand...

What do you mean by that? IE will render a page with only a single DIV
in it?
BUT... your negative-top-margin tip and zero-bottom-margin follow-up are
what did the trick. It now works like a champ, without doctype.
Click to expand...

With out doctype throws IE in quirks mode so rendering CSS predictably
can be a joy! said:
See? I keep telling you guys that you're the Kings, but you never believe me
:)





Ah, good. Thanks.
Click to expand...
 
J

Jeff Bowman

dorayme said:
...yeah well, Queens might just find that a bit hard to believe.
Click to expand...


Hm... That'd be the generic 'he' ;-)

Anyway, I think I like it here--I wish I had more to contribute. It took me
awhile to get used to the bottom-posting thing, but as it turns out it's not
that big a deal.

I see that the newsgroup's description refers us to another group
(comp.infosystems.www.authoring.html). I lurked in there a bit a couple
weeks back, and it just didn't seem the same as it does here. More
contentious, I suppose. 'Course, maybe I just happened on the wrong threads,
but that was my impression such as it was.

I guess I'd compare it to a large auditorium while this feels more like a
small jazz club.

FWIW...
 
D

dorayme

"Jeff Bowman said:
I guess ... alt.html ... feels more like a
small jazz club.
Click to expand...

I know what you mean, with all the syncopation and nicely
clanging off-beat notes clashing in harmony/unharmony in this
little hall here. You won't find any one more jazzy than Jukka
Korpela, it is the first word that comes to my mind when thinking
of his good self. I love dueting with him. His fine trumpeting to
my combo cymbal/trombone alongs... my feet are tapping away as I
write these thoughts...
 
J

Joe

Gosh durn it, for the life of me I can't figure out what on earth OP means!

On-Pedestal?
Click to expand...
original (or sometimes 'other') poster
from here, looking at a map, it's
"Up and to the right." waaay to the right.
 
J

Jeff Bowman

I know what you mean, with all the syncopation and nicely
clanging off-beat notes clashing in harmony/unharmony in this
little hall here. You won't find any one more jazzy than Jukka
Korpela, it is the first word that comes to my mind when thinking
of his good self. I love dueting with him. His fine trumpeting to
my combo cymbal/trombone alongs... my feet are tapping away as I
write these thoughts...
Click to expand...

:)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I'm tempted to quit out of frustration 1
Re: CSS positioning help - Mozilla 1
border trouble 19
WxPython upgrade trouble on Ubuntu 8.04 2
layer switching 5
trouble with rollover buttons on master page 4
FAQ 6.2 I'm having trouble matching over more than one line. What's wrong? 0
Trouble moving servers with asp.net 5

Members online

No members online now.
Total: 42 (members: 0, guests: 42)
Robots: 85

Forum statistics

Threads
473,780
Messages
2,569,611
Members
45,282
Latest member
RoseannaBa

Latest Threads

Top