multiple overlapping divs?

[Donny Bahama]

It's a crazy question, and I think I already know the answer, but I'm going to ask anyway. Is this possible?

Code: Select all

<div class="a">This is div A.
   <div class="b">This is div B and still div A.
</div class="a">This is only div B.
      <div class="c">This is div B and div C.
   </div class="b">
          This is only div C.
       </div>

[Ryan Fait]

Nope, not possible. What were you intending to do with that code? You could place div's over each other using absolute positioning anyway...

[Donny Bahama]

Originally Posted by Ryan Fait

What were you intending to do with that code?

Picture 3 side-by-side floated divs... the center div contains text (height will vary), the left and right ones contain navigational elements. If I could control overlapping divs, I could vertically center the nav elements without resorting to a table. I think I've become obsesses with eliminating tables! :crazy:

[ukgeoff]

Just define your three divs one after the other.

Float them all left and control the width of each to suit your total layout width.

Use margin to control space between divs.

[moojoo]

http://www.newguyinennis.com/samples...yout_3_column/

[Donny Bahama]

I get how to stack divs side-by-side. I get how to use width and margins. What I'm trying to do is vertically center small nav images (arrow left and arrow right) in the left and right div - regardless of how the height of the middle div may vary.

[moojoo]

background: url("foo.jpg") left center no-repeat; no? that will keep the background centered in a div regardless of its height.

[Donny Bahama]

Originally Posted by moojoo

background: url("foo.jpg") left center no-repeat; no? that will keep the background centered in a div regardless of its height.

I didn't know that, and I'm happy new to have learned something, but...

I can't link using a background image, though, can I? I'll still need a foreground element to serve as link/the nav element. Can I put a clear.gif in the foreground and set its height and width to 100% and have it be the clickable link/nav element? I haven't had great success in the past with setting elements to 100% height and actually have them obey (especially from a cross-browser standpoint.) If you can tell me how to do that, I'll be thrilled!

[Ryan Fait]

Code: Select all

a {
  width: 200px;
  height: 200px;
  background: url(img.jpg) no-repeat;
  display: block;
}

You'll need something to hide the text, text-indent: -5000; will do the trick, but as I recall, you can't use that on anchors. So you'll have to select it's parent or something to set the text-indent.

[Donny Bahama]

But you're specifying a height for the anchor... The whole point is that the height will vary. Sometimes 200px will be too much, other times not enough.

I don't understand your point about hiding the text. Unless we're getting back to the whole "never ever use images for navigation" thing. But this is just a simple previous/next arrow thing - and I'll be using alt and title text, so why not just use a clear gif as the anchor?

Hey, wait a minute - what about setting the height of the image to something ridiculously high, then setting overflow on the container to hidden?

[Donny Bahama]

Originally Posted by Donny Bahama

Hey, wait a minute - what about setting the height of the image to something ridiculously high, then setting overflow on the container to hidden?

Nevermind. That definitely doesn't work.

[Donny Bahama]

OK. Could someone please just say, "Give it up, Donny! The only way to do that currently is using a table!"

[Ryan Fait]

Can you show me what you're doing with a table? I'll tell you how to do it with CSS.

[Donny Bahama]

Happy to. Here's a link: http://stickpuppy.com/dhs57/yearinre...?event=1010601

Notice the event text. Click the next arrow 4 or 5 times (you could click the previous arrow, but those images won't be preloaded for you) and watch how the event text changes in quantity, ergo height. But the next and previous arrows stay vertically centered, regardless of the height of the middle (text) div.

If you must view source, know that I have overhauled most of this page and eliminated tables everywhere but in the area in question. If I need to use a single row table to do this, so be it, but I thought that since it was a single row table, I should be able to replace it with a div-based layout.

[Ryan Fait]

Sorry for taking so long. I forgot about this...

Code: Select all

<!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">
	<head>

		<script type="text/javascript">

		</script>

		<style type="text/css">
			body {
				margin: 0;
				padding: 15px;
			}
			.box {
				position: relative;
				height: auto;
				width: 200px;
				background: #ccc;
			}
			.box p {
				margin: 0 35px;
			}
			.box p.leftarrow {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 30px;
				margin: 0;
				text-indent: -5000px;
				background: #aaa url(arrowleft.gif) no-repeat 50% 50%;
			}
			.box p.rightarrow {
				position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				width: 30px;
				margin: 0;
				text-indent: -5000px;
				background: #aaa url(arrowright.gif) no-repeat 50% 50%;
			}
			.box a {
				position: absolute;
				width: 30px;
				height: 100%;
				display: block;
			}
		</style>

		<title>Untitled</title>

	</head>
	<body>

		<div class="box">
			<p class="leftarrow"><a href="#">Left</a></p>
			<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
			<p class="rightarrow"><a href="#">Right</a><p>
		</div>

	</body>
</html>

This was kind of tricky I like tricky things!

[Donny Bahama]

You cheated! I don't want to use javascript. (Sorry, should've specified.)

[Donny Bahama]

Originally Posted by Ryan Fait

show me what you're doing with a table? I'll tell you how to do it with CSS.

[Ryan Fait]

There's no JavaScript. It's just my test page layout. Ignore the script tags.

[Donny Bahama]

DOH! Should've looked more closely! OK - I'll check that out, then. Man, if you pulled that off... WOW!

[Ryan Fait]

Haha. I have a strange understanding of CSS, and I just can't figure out why people have problems with it.

*brushes off shoulders... lol