Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 351
  • Last Modified:

Using css layers to stop text overlap

Hi guys,

I know the attached looks a little rough at present, but i was just wondering how to stop the text overlapping 'shop now'?

<div style="clear:both; display:inline; float:left; width:100%; margin-top:40px; margin-bottom:5px;">
		
		
		<div style="position:relative; height:320px; width:480px; display:inline; float:left; background-image:url('http://www.ishop.co.uk/roots/1244/images/common/Homepage_Gasfireplaces.jpg'); background-repeat:no-repeat;">
			<!-- Title -->
			<div style="padding-top:5px;font-size: 34px; font-family: Tahoma,Geneva,sans-serif; color:#ffffff;">Gas Fires and Fireplaces</div>
			<!-- Images row -->
			<div style="border:soid 1px; float:left; padding: 15px 0px 0px 30px; width:100%;">
				<div style="float:left; padding-left:4px;"><a href='http://www.urban-indoors.co.uk/shop/all-fires/all-fires/valor-black-beauty-slimline-gas-1113922.html'><img src = "http://www.ishop.co.uk/roots/1244/images/common/Gasfires_HomepageImage1.jpg"/></a></div>
				<div style="float:left; padding-left:8px;"><a href='http://www.urban-indoors.co.uk/shop/gas-fire/all-gas-fires/valor-dream-homeflame-gas-fire-1113899.html'><img src = "http://www.ishop.co.uk/roots/1244/images/common/Gasfires_HomepageImage2.jpg"/></a></div>
				<div style="float:left; padding-left:4px;"><a href='http://www.urban-indoors.co.uk/shop/gas-fire/all-gas-fires/be-modern-abbey-gas-fire-sli-1116367.html'><img src = "http://www.ishop.co.uk/roots/1244/images/common/Gasfires_HomepageImage3.jpg"/></a></div>
				<div style="float:left; padding-left:4px;"><a href='http://www.urban-indoors.co.uk/shop/gas-fire/all-gas-fires/valor-dream-gas-fire-deep-chrome-1113935.html'><img src = "http://www.ishop.co.uk/roots/1244/images/common/Gasfires_HomepageImage4.jpg"/></a></div>
			</div>	
			<!-- Blank block-->
			<div style="height:47px; width:140px; border:solid 3px #000000; position:absolute; bottom:0; left:325px; "></div>
			<p style="padding: 0px 20px 0px 20px; text-align:left;">A gas fire offers unrivalled heat output. Available in a range of styles, sizes and colours browse the range at Urban Outdoors from brands such as Valor, Flavel and Be Modern.blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar blar</p>
			
		</div>
		
		
</div>

Open in new window


Cheers,
Dean.
0
deanlee17
Asked:
deanlee17
  • 3
  • 3
  • 2
1 Solution
 
GaryCommented:
You can't - its a background image.
You should remove that portion of the image and use it as a real image positioned in the corner.
0
 
COBOLdinosaurCommented:
A fragment of code with no context does not provide enough information.

Post a link to the page please, and perhaps we can suggest alternatives.

Cd&
0
 
deanlee17Author Commented:
Sorry guys, my mistaek, I was supposted to post a link in the original post...

http://www.deans-place.co.uk/problem.html
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
Still my comment applies,
Either that or you make it a png and make the middle transparent then layer it with the div and the text and the headline and ...
0
 
COBOLdinosaurCommented:
A widget written that way is going to get broken all over the place.  You are assuming that all users have their browser set up to use the same font size that you have set by default.  User controls override that.  Setting font size to an absolute value hurts accessibility and usability.

No matter what you do with a widget like that it is going to be problematic for some users.  If you have to have some that restrictive and rigid, the use overflow-y:scroll on the text element to keep it contained and scrolling when it is too large.

Cd&
0
 
deanlee17Author Commented:
Cd&, do you suggest keeping all text in straight lines then, as in from top to bottom?  want to try and stick to best practices where possible.

Thanks.
0
 
COBOLdinosaurCommented:
What I am suggesting is the the <p> tag can us overflow with <p style="overflow-y:scroll;"> or <p style="overflow-y:auto;">

However the doctype you are using put IE into quirksmode and the differences cross-browser are going to break it no matter what you do.

replace:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

Open in new window




With:
<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" />

Open in new window


Cd&
0
 
deanlee17Author Commented:
Brilliant, thanks mate.
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now