hybridgoomba Posted June 9, 2009 Share Posted June 9, 2009 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 More sharing options...
makeitspiffeh Posted June 9, 2009 Share Posted June 9, 2009 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 More sharing options...
chibineku Posted June 9, 2009 Share Posted June 9, 2009 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 More sharing options...
makeitspiffeh Posted June 9, 2009 Share Posted June 9, 2009 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 More sharing options...
hybridgoomba Posted June 9, 2009 Author Share Posted June 9, 2009 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 More sharing options...
smerny Posted June 9, 2009 Share Posted June 9, 2009 theres less room for error using it as a background Link to comment Share on other sites More sharing options...
hybridgoomba Posted June 9, 2009 Author Share Posted June 9, 2009 theres less room for error using it as a backgroundYeah but I still need to use it as a image map, and if it's in the background that's not going to work. Link to comment Share on other sites More sharing options...
smerny Posted June 9, 2009 Share Posted June 9, 2009 <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> Link to comment Share on other sites More sharing options...
smerny Posted June 9, 2009 Share Posted June 9, 2009 tested it out here and it works... atleast the way i think you want ithttp://dallasnicol.com/test.php Link to comment Share on other sites More sharing options...
hybridgoomba Posted June 9, 2009 Author Share Posted June 9, 2009 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 More sharing options...
chibineku Posted June 9, 2009 Share Posted June 9, 2009 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 More sharing options...
hybridgoomba Posted June 9, 2009 Author Share Posted June 9, 2009 Yeah I'm getting a little frustrated because this seems like it would be so easy but it's not... Link to comment Share on other sites More sharing options...
smerny Posted June 9, 2009 Share Posted June 9, 2009 can you give us the URL to your page? Link to comment Share on other sites More sharing options...
chibineku Posted June 9, 2009 Share Posted June 9, 2009 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 More sharing options...
smerny Posted June 9, 2009 Share Posted June 9, 2009 or possibly have the main image on top with a transparent center (instead of white) where the text will be Link to comment Share on other sites More sharing options...
dsonesuk Posted June 10, 2009 Share Posted June 10, 2009 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> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.