Help with overlaying text

Dev Shed Forums Sponsor:

October 9th, 2012, 10:45 PM

binahsaurus

Registered User

Join Date: Oct 2012

Posts: 3

Time spent in forums: 53 m 21 sec
Reputation Power: 0

New Member - Help with overlaying text

Hello,

I'm working on re-doing the website for my company and I've run into some trouble with the overlaying texts.

The trouble can be seen at this page:

http://mpcwebsitetesting.mpcmachining.com/about.html

When I resize my browser window the text and box don't resize as well. I tried setting the dimension as % and then switched back to pixels all with no change. Can someone please tell me what I'm missing? The code is below:

Code:


HTML
<div class="container">
	<div class="image">
		<div class="img_caption">
		<h5>About Us</h5>
		<p>Lorem Ipsum
		</div>
		<img src="img/image_010.jpg" width="100%" >
       </div>
</div>

CSS
#image{
	float: left;
	position: relative;
	}

div.img_caption {
	background: #000;
	background: rgba(0, 0, 0, 0.8);
	filter:alpha(opacity=60); /* IE transparency */  
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: .5%;
	width: 600px;
	height: auto;
	bottombottom:0px; /* position will be on bottom */  
	display:block;
	position: absolute;
	}
	
div.img_caption  p {
	font-family: 'Oxygen Mono', sans-serif;
	font-size:70%;
	color: #CCCCCC;
	margin-left: 2%;
	margin-right: 2%;
	}

October 10th, 2012, 05:23 AM

HemZone

Registered User

Join Date: Jan 2012

Posts: 7

Time spent in forums: 1 h 23 m 17 sec
Reputation Power: 0

Hi,

There is few ways to fix your issue.

I'm explaining one of them. Add/Edit your css with

div.img_caption {z-index: 500; position: relative;}
add style to <img src="img/image_010.jpg" width="100%" style="margin-top: -554px; z-index: 50;position: relative;">

I'm using inline css for your idea. You can make class and apply to tht image.

Thanks

October 11th, 2012, 05:49 PM

binahsaurus

Registered User

Join Date: Oct 2012

Posts: 3

Time spent in forums: 53 m 21 sec
Reputation Power: 0

Thanks so much! It fixed the problem with resizing, however now there's a huge gap between the nav bar and the image and blocks.

Here's what I entered:

HTML:

Code:

<div class="image">
<div class="img_caption">
<p>blah blah blah
<img src="img/image_010.jpg" width="100%" style="margin-top: -554px; z-index: 50; position: relative;">
</div>

CSS:

Code:

div.img_caption {
	background: #000;
	background: rgba(0, 0, 0, 0.8);
	filter:alpha(opacity=60); /* IE transparency */  
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: .5%;
	width: 45%;
	height: auto;
	bottombottom:0px; /* position will be on bottom */  
	display:block;
	z-index: 500; 
	position: relative;	
	}

I'm going to keep playing around with it. If you can think of any tips however they'd be greatly appreciated.

Thank you again.

October 11th, 2012, 05:52 PM

binahsaurus

Registered User

Join Date: Oct 2012

Posts: 3

Time spent in forums: 53 m 21 sec
Reputation Power: 0

Never mind .. looks like I solved it. Had a total "Oh, duh!" moment after I hit post. I just adjusted the

Code:

style="margin-top: -620px;

Thanks for your help!

New Member - Help with overlaying text

Developer Shed Advertisers and Affiliates