SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML for Placing Text and Images Over Another Image

    I'm using Fireworks and Canvas for graphics and DW to edit my html. I can't quite wrap my head around the procedure for getting text or another graphic, (ie a rollover image), onto an image that has been inserted onto a DW or html page. On the graphics side, I've played w/ layers, slicing, hotspots, (for rollovers/nav bar links), and at the html end, I've created "editable regions" (which I assume are layers) and although I can get the text over the image using this method, I've only been able to do so w/ absolute positioning which is not what I want, as the page renders poorly and out of alignment. When I change the code from "absolute" to "center", my text pops off the graphic and centers itself on the background directly below the graphic.

    The page I'm trying to build is simple- it's a bordered white box (w/ a caricture) that is centered on a solid background. I've created a PNG of the complete page w/ graphics and txt and have saved each layer as a gif. I can, of course, group the layers into one gif, insert it into my htm pg but, besides not being the proper way of doing it, the problem w/ this approach is that there would be no text for the SEs to crawl to and, thus, no optimization, unless I underlaid text into the background.

    Anyone willing to make a stab at giving this html rookie some help and point me to which tree I should be barking up? Thank youa

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    PS you can place text and images over / in containers with a bgr. image ?

    html overlay ? not sure if you mean this

    1 relative with negative margins, in the flow the first container must have a positioning size w x h (or the image size)
    2 relative that holds 1 relative with negative margins no z-index
    3 relative that holds 1 absolute no z-index
    4 relative that holds 2 absolutes that are out of flow, relative needs no size w x h

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	.placeholder,.overlay{
    	left:0;top:0;
    	background:#ffffcc;
    	width:200px;
    	height:200px;
    	z-index:1;
    	position:relative;
    	}
    	
    	.overlay{
    	z-index:2;
    	margin:-200px 0 0 0;
    	}
    	
    	img{display:block;border:none;}
    	
    	.featured-box{position:relative;}
    	
    	.a{
    	left:220px;top:0px;
    	position:absolute;
    	margin:0 0 0 0;
    	}
    	.aa{
    	left:0;top:0;
    	position:absolute;
    	margin:0 0 0 0;
    	}
    	.zb{z-index:200;}
    	
    	.al{filter:alpha(opacity=70); -moz-opacity:.70;opacity:.70; -khtml-opacity:.70; }
    	
    	.featured-box{width:210px;height:200px;background:#ff6600;}
    	
    	.xx{width:0;height:0;top:-800px;left:200px;}
    	</style>
    </head>
    <body>
    
    <div class="featured-box">
    <div class="placeholder zb"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" /></div>
    <div class="overlay"><img src="design.gif" alt="<?=$title?>" width="200" height="200" class="al" /></div>
    </div>
    
    
    <div class="placeholder zb"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" />
    <div class="overlay al"><img src="design.gif" alt="<?=$title?>" width="200" height="200" /></div>
    </div>
    
    
    <div class="placeholder"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" />
    <div class="overlay aa al"><img src="design.gif" alt="<?=$title?>" width="200" height="200" /></div>
    </div>
    
    <div class="featured-box">
    <div class="placeholder a zb al"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" /></div>
    <div class="overlay a"><img src="design.gif" alt="<?=$title?>" width="200" height="200" /></div>
    </div>
    
    <div class="featured-box xx">
    <div class="placeholder a"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" /></div>
    <div class="overlay a al"><img src="design.gif" alt="<?=$title?>" width="200" height="200" /></div>
    </div>
    
    </body>
    </html>
    text opacity overlay demo

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>opacity</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;}
    	
    	div,p{font-size:1em;font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;}
    	
    	.wra{position:relative;height:20em;width:30em;float:left;}
    
    	.bot p,.top p,.wra p{padding:1em;}
    	
    	.top{
    	position:absolute;
    	width:30em;
    	height:20em;
    	left:0;
    	top:0;
    	background:#ff0000;
    	}
    	
    	.bot{
    	position:absolute;
    	width:20em;
    	height:10em;
    	left:5em;
    	top:5em;
    	background:#ffff00;
    	}
    	
    	.op1{filter:alpha(opacity=10); -moz-opacity:.10;opacity:.10; -khtml-opacity:.10; }/*this s u c k s*/
    	.op2{filter:alpha(opacity=20); -moz-opacity:.20;opacity:.20; -khtml-opacity:.20; }/*this s u c k s*/
    	.op4{filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40; -khtml-opacity:.40; }/*this s u c k s*/
    	.op6{filter:alpha(opacity=60); -moz-opacity:.60;opacity:.60; -khtml-opacity:.60; }/*this s u c k s*/
    	
    	.ca{background:#ffff00;}
    	.cb{background:#ff0000;}
    	.cc{background:#0000ff;}
    	.cd{background:#cc99ff;}
    	</style>
    </head>
    <body>
    
    <div class="wra">
    
    <div class="bot op6">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="top op4">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    <div class="wra">
    
    <div class="top op6">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="bot op4">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    <div class="wra cc">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <div class="bot op6">
    <p>xx Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="top op4">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    <div class="wra">
    
    <div class="top">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="bot op6">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    <div class="wra">
    
    <div class="top">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="bot">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    <div class="wra">
    
    
    <div class="bot">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="top op6">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    
    <!--  -->
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Wasn't expecting to get the whole shabang. That's some good looking code.- beyond anything I could come up w/ given my limited range. I need to fill in my understanding of the x-y axis- will have to look up "z". I imagine that after one has been at it long enough it would be possible to visualize the coordinants on a page. I have a feeling that this is what I'm needing- using a relative value looks right- will have to experiment to see how the different relative->absolutes work . Will give it a spin and get back w/ the results. Thank you. I, truly, appreciate it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •