Jump to content

Content Holder On Top Of An Image?


hybridgoomba
 Share

Recommended Posts

Sorry if this belongs in the CSS forum, but I'm sure there's more than one way to solve this.Here's the scenario:I've got a 800x600 image centered horizontally on a page. Near the middle of this image is a box about 400x400 I want to use to place text and content in. What's the easiest way to go about putting that container on top of this image?

Link to comment
Share on other sites

I don't know exactly what you are asking but just try this Div box... You can move it anywhere you want all over the page just by changing some numbers.

<div style="width:400;height:400;position:absolute;top:50;left:50;padding:0px;"><div style="width:100%;height:100%;border:1px solid #ff6000">WORDS GO HERE</div></div>

Where it says "top:50" that's 50 pixels from the top. Where it says "left:50" that's 50 pixels from the left. You can add the padding part to the second div tag, and that just determines how many pixels from the border of your box you want your content to be. When you are done you can change the border:1px to 0px to remove the border, or change it up which ever way you like.This is the most useful code I have ever used. And yes, its css.

Link to comment
Share on other sites

Using the image as a background image seems easier...don't have to add an extra div or fiddle with absolute positioning.

Link to comment
Share on other sites

Using the image as a background image seems easier...don't have to add an extra div or fiddle with absolute positioning.
That works too... but I love those divs and absolute positioning... I use them so often I can usually guess approx what all the numbers will be when it's in notepad before I preview it.
Link to comment
Share on other sites

Hmm, I've been trying the same thing as you mentioned Spiffeh, but the problem is that the image is centered and therefore will not be in the same X/Y position on every screen resolution. I've tried percentages but can't seem to get that to work either, I guess I just need to reference some coordinates on the actual image where the content will be. Any Ideas on that?

Link to comment
Share on other sites

<html><head><title></title><style type="text/css">#image{position:relative;margin:0 auto;height:800px; /* same dimensions as your image */width:600px;border: 1px solid #fff;}#image img{position:absolute;z-index: -1;}#image p{margin:100px; /* adjust margins to fit the 400x400 space in your image */}</style></head><body><div id="image"><img src="yourimage.jpg" /><p>blah blah</p></div></body></html>

Edited by smerny
Link to comment
Share on other sites

tested it out here and it works... atleast the way i think you want ithttp://dallasnicol.com/test.php
It looks ok on your site, somehow it's not working on mine(there's a random white line on it and it's not exactly centered)... Anyway, I tweaked it a bit, and with the z-index at -1, the image becomes unusable as an image map. Any thoughts on that
Link to comment
Share on other sites

Well, now there's a div covering up the image map. Perhaps you can learn the necessary PHP to generate the image with the content as part of it, so that you can display it in one div? I understand that's complicated to do, though...

Link to comment
Share on other sites

This ought to work: leave the image in a div with the text div over it, and then create a completely blank png and use that to contain your image map links, and lay it over the text.

Link to comment
Share on other sites

I don't know how you feel about using javascript for positioning?, but this seems to work.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">html, body { height: 100%; }img { border-width:0;}.outer {height: 100%; width: 100%;}.inner { height: inherit;}#center{position:absolute; left: 50%; top: 50%;}#container{ font-size: 0;}#textcenter { width: 400px; height: 400px; background-color:#CCCCCC; position:relative; }#textcenter p {padding:10px;}</style></head><body><div class="outer"><div class="inner"><div id="center"><div id="container"><img src="alien-link.png" width="800" height="500" alt="" /></div><div id="textcenter"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div></div></div></div><script type="text/javascript"><!--//--><![CDATA[//><!--getDimensions()function getDimensions(){var y=document.getElementById("container").offsetHeight;var x=document.getElementById("container").offsetWidth;var z=document.getElementById("textcenter").offsetHeight;var w=document.getElementById("textcenter").offsetWidth;//alert("width: "+(x)+"; Height: "+(y)+";")//alert("width: "+(w)+"; Height: "+(z)+";")document.write("<style type='text/css'>");var addvalue=12;var browser=navigator.appName;if(browser == "Microsoft Internet Explorer"){addvalue=0;}document.write("#center { margin: -"+(y/2)+"px 0 0 -"+(x/2)+"px; }");document.write("#textcenter { margin: -"+((y-z)/2+(z+addvalue))+"px 0 0 "+((x-w)/2)+"px; }");document.write("body:nth-of-type(1) #textcenter { margin: -"+((y-z)/2+(z+16))+"px 0 0 "+((x-w)/2)+"px; }");//alert((y-z)/2+(z+12))document.write("</style>");}//--><!]]></script></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...