multiple overlapping divs?

Donny Bahama · #1 Apr 19th, 2007, 06:54

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

<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 · #2 Apr 19th, 2007, 10:06

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 · #3 Apr 19th, 2007, 14:59

Quote:

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 · #4 Apr 19th, 2007, 16:03

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 · #5 Apr 19th, 2007, 16:49

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

Donny Bahama · #6 Apr 19th, 2007, 17:27

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 · #7 Apr 19th, 2007, 17:37

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

Donny Bahama · #8 Apr 22nd, 2007, 00:17

Quote:

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 · #9 Apr 22nd, 2007, 00:58

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 · #10 Apr 22nd, 2007, 01:11

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 · #11 Apr 22nd, 2007, 01:41

Quote:

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 · #12 Apr 22nd, 2007, 01:53

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

Ryan Fait · #13 Apr 22nd, 2007, 01:57

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

Donny Bahama · #14 Apr 22nd, 2007, 02:30

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 · #15 Apr 23rd, 2007, 03:52

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 · #16 Apr 23rd, 2007, 04:08

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

Donny Bahama · #17 Apr 23rd, 2007, 04:11

Quote:

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 · #18 Apr 23rd, 2007, 04:17

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

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
multiple overlapping divs?