#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0

    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%;
    	}
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2012
    Posts
    7
    Rep 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
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep 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.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep 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!

IMN logo majestic logo threadwatch logo seochat tools logo