Solved

Using css layers to stop text overlap

Posted on 2013-11-03
8
345 Views
Last Modified: 2013-11-05
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
Comment
Question by:deanlee17
[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
  • 3
  • 3
  • 2
8 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39620076
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39620085
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
 

Author Comment

by:deanlee17
ID: 39620356
Sorry guys, my mistaek, I was supposted to post a link in the original post...

http://www.deans-place.co.uk/problem.html
0
Industry Leaders: 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!

 
LVL 58

Expert Comment

by:Gary
ID: 39620370
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39622186
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
 

Author Comment

by:deanlee17
ID: 39622883
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39624757
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
 

Author Comment

by:deanlee17
ID: 39624815
Brilliant, thanks mate.
0

Featured Post

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!

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

688 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