Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Floating Text Above an Image

Posted on 2007-11-30
5
Medium Priority
?
3,253 Views
Last Modified: 2010-05-04
Hello Experts,

I have a layout in which I've used two jpeg images to form "visual containers" for my site's layout.  I would like to layer textual content over these images.  

Both jpeg images are equal to the width of my website layout.  The entire layout in centered.  As the browser is resized, the page layout remains centered in the window.  

I would like to layer textual content over these images, and I would like for the textual content to remain in its place (relative to the photo it is layered over) as the browser window is readjusted.  

I've tried to accomplish this with CSS, but am unable to force the text over the pictures.  The text simply sits at the bottom edge of the last picture, instead of hovering over the image, as a layer.  Also, the text will not stay in its place when the browser windows is readjusted.  

Is there an expert out there who knows how to make this work?  I'm not sure of what I'm doing wrong here...   :0(
#bottommiddlesegment
    { 
    position: relative;
    left: 405;
    top: 20;
    float: left;
    margin-left: auto;
    margin-right: auto
    }
 
 
 
<body>
<div id="topmenuunderliner"><img src="top_menu_underliner.jpg">
</div>
<div id="wrapper">
    <img src="leftmainpic_palette.jpg" />
    <img src="small_image_palette_triple_v2.jpg" style="margin-left: 21px" />
    <img src="rightsidebarpalette_v2.jpg" style="margin-left: 166px" />
</div>
<div id="wrapper2">
    <img src="three_section_palette_thin_lines_vs2.jpg"> 
</div>
<div id="bottomadvertbanner">
    <img src="bottom_advert_banner.jpg"> 
</div>
 
<div id="bottommiddlesegment">
<div id="musthavestitle">
    This is text...</div>
<div id="musthavestext">
    This is text, too...</div>
<div id="musthavessubtitle">
    This is text here, as well...</div>
</div>
</br>
 
</body>

Open in new window

0
Comment
Question by:TrickyFingers
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
5 Comments
 
LVL 28

Assisted Solution

by:gamebits
gamebits earned 1000 total points
ID: 20380844
2 options:

1) set your image as background image.
2) use Z index o position image and text.
0
 
LVL 6

Accepted Solution

by:
gxp071 earned 1000 total points
ID: 20381031
Hi ,

if im  understanding your post correctly what your tiring to do would be traditionally done using div backgrounds.  What you probably need to read up on is a technique called sliding doors which lets you use three images and 3 containers to make a variable width image container.  I have attached a simple example to try and get across the idea.

Any content images or text in the header div or content div will now be on top of you backgrounds.  the effect can be used again and again, all you need is three more divs or other elements.

Let me know if this is any help at all, if not can you post a link to a live version of the page it makes it alot easer to debug the 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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>untitled</title>
	<style type="text/css" media="screen">
		body{
			margin: 0px;
		}
		#pagewrapper{
			/*background repeat img of sliding doors background */
			width:900px;
			background:#f50 url(middle-bg.gif) repeat-y;
			margin: 0 auto 0 auto;
		}
		#pagewrapper #inside{
			/*top image of sliding doors background */
			background:url(top-bg.gif) no-repeat top;
		}
		/*bottom/closing img of the sliding door background */
		#content{
			background:url(bottom-bg.gif) no-repeat bottom;
		
		}
	</style>
</head>
 
<body>
	<div id="pagewrapper">
		<div id="inside">
			<div id="header">
				some text
			</div>
			<div id="content">
				blar blar blar blar this is text
				
			</div>
		</div>
	</div>
</body>
</html>

Open in new window

0
 
LVL 12

Expert Comment

by:oceanbeach
ID: 20381529
Hello TrickyFingers,

Here is a general layout that will allow you to layer text over images...

I hope this helps!

oceanbeach
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>html</title>
<style type="text/css">
#wrapper {
	width: 60%;
	margin: 0 auto;
	position: relative;
}
#text-layer {
	position: absolute;
	top: 0;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="bg-layer"><img src="img.jpg" /> </div>
  <div id="text-layer">Text</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 12

Expert Comment

by:oceanbeach
ID: 20381580
Hi TrickyFingers,

Depending on your layout, you may be able to try...

#bottommiddlesegment {
position: relative;
top: -100px; /* move up 100px - change to fit layout */
}

As gxp071 said, it is easier to make suggestions when a complete page is available to review.

I hope this helps!

-OB
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question