?
Solved

Using css layers to stop text overlap

Posted on 2013-11-03
8
Medium Priority
?
347 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 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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

765 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