TrickyFingers
asked on
Floating Text Above an Image
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(
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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
Here is a general layout that will allow you to layer text over images...
I hope this helps!
oceanbeach
Open in new window