Solved

Using css layers to stop text overlap

Posted on 2013-11-03
8
328 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
  • 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
 
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now