Overlapping elements - Post ID 127811

User 184085 Photo


Ambassador
1,707 posts

I think the answer is with z-index, but am unsure and cant get what I want to happen work.

The first image is of the site with the first column floated to the left, inside a container with red top and bottom borders.

The position is correct for what I want.
http://i130.photobucket.com/albums/p248/pug2775/coffeecup/FireShot-capture-023.jpg

Here is the code for it.

<div id="content2" class="transparent30">
</div>
<!-- <div id="maintitle">
<h1>The Seattle Coffeehouse</h1>
</div> -->
<div id="content_main" class="">
<div id="maincolumntitle">
<h3>The Seattle Coffeehouse</h3>
</div>
<p>content_main: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


and CSS.

#content2 {display:block; position: absolute; top: 0px; /*bottom:50%;*/ left: 0px; height:500px; /*border-top:ridge; border-top-color:#CC0000; border-top-width:.3em; border-bottom:ridge; border-bottom-color:#CC0000; border-bottom-width:.3em;*/ width: 100%; background-color: #85794F;overflow:auto;}
div#maintitle {display:block; /*z-index : 2;*/ position:relative; top:-48px; left:2px; background-image:url('image/theseattlecoffeehouse.png');float:left; width: 602px; height: 80px; text-indent : -9999px; }
#content_main {z-index:-5; width:20%; height:488px; float:left; background-color:#FBD67D; margin:4px 2px; padding:1px 1px; overflow:hidden;}
#maincolumntitle {display:block; /*z-index :1;*/ position:relative; top:4px; left:1px; background-image:url('image/seasonal_specials.png');float:left; width: 200px; height: 25px; text-indent : -9999px; }


So when I un-comment the Maintitle the left column moves right, so what I want is for is to slide under the main title.
http://i130.photobucket.com/albums/p248/pug2775/coffeecup/FireShot-capture-024.jpg
So the main title is displayed on top (layered) of the column and content box.

Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 184085 Photo


Ambassador
1,707 posts

Got it worked out, it was a combination of absolute positioning and Z-index.

Now to continue on with the rest of the columns :-)

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/FireShot-capture-025.jpg
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 2000538 Photo


Registered User
1,392 posts

Glad you got it worked out David ...and glad we could help :lol:

Sometimes just posting the problem makes it all clear...it uncovers the switch :)
I know you believe you understand what you think I said...but I am not sure you realize that what you heard is not exactly what I meant.


User 184085 Photo


Ambassador
1,707 posts

You are correct, but when that switch finally throws, it sometimes causes facial tics :lol:
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.