Text alignment on a background

Forum Moderators: open

Message Too Old, No Replies

Text alignment on a background

Firefox

Adam5000

5:46 pm on Nov 23, 2011 (gmt 0)

I'm making a web page using a picture frame as a background and repeating it vertically. And then I'm writing text effectively inside the picture frame. What appears on the screen is a picture frame with text inside it. Then when I get to the bottom of the first copy of the picture frame I insert some break tags <br> that add enough space to line up the rest of the text in the next copy of the picture frame.

When it's lined up in IE, the picture frame looks a line short in Firefox. When it's lined up in IE, in Firefox the last line of the text appears on the bottom of the picture frame.

I'm not sure what's causing it but it's the same code opened with two different browsers. Or in other words, I got it working with IE and then said to myself, I should check it with Firefox. And when I did, the last line of the text appeared on the picture frame.

Help!

tedster

8:26 pm on Nov 23, 2011 (gmt 0)

Lining up foreground text with background images can be a hopeless cause - because there are hundreds of slightly different versions of common fonts in different browsers and systems. I'd say try to recreate a similar visual effect without trying for pixel perfect alignment.

lucy24

9:02 pm on Nov 23, 2011 (gmt 0)

I insert some break tags <br> that add enough space to line up the rest of the text in the next copy of the picture frame.

Do not do this. It only works on your own browser with your own settings, because it depends on the pixel size of your chosen font. No use forcing a font and size, because many fonts exist in different versions with different sizes and proportions. And the <br> itself may or may not correspond to your text's stated line-height.

Instead, each iteration of the text needs to be positioned relative to the top of the picture.

Edit: Oops, overlapped Tedster. Fortunately we said roughly the same thing ;)

Adam5000

2:10 am on Nov 24, 2011 (gmt 0)

Smile. "Do not do this. It only works on your own browser with your own settings." I kinda suspected something like that and hoping I was wrong. Thanks for your input tedster and lucy. I'll likely go with my original idea then, which is putting the text in a table cell and then adding some padding along with a double border around it.

rocknbil

5:17 pm on Nov 25, 2011 (gmt 0)

No don't resort to tables, tables are for tabular data . . . .

I'm making a web page using a picture frame as a background and repeating it vertically. And then I'm writing text effectively inside the picture frame. What appears on the screen is a picture frame with text inside it. Then when I get to the bottom of the first copy of the picture frame I insert some break tags [strike]<br> that add enough space to line up the rest of the text in the next copy of the picture frame.[/strike]

(LOL @ the irony of "strike" not working there haha . . . )

Also you're going to have problems with different viewport sizes - put the background in a div to control it instead, maybe.

In my example below, I've set it up so there's three across, but you can probably kill the floats for a single set of vertical rows and just apply it to the outer containers.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
 <style type="text/css"> 
 #container { width: 620px; margin: 24px auto; } 
 /* let it repeat, without height, image is 200 X 200, so 160+padding=200*/ 
 /* My "frame" is 10px wide, resorting to pixel fonts due to the pixel based BG */ 
 #container p {  
 width: 160px;  
 height: 160px;  
 padding:20px; 
 float: left;  
 margin-right:10px;  
 background:url(frame.jpg);  
 font-size: 14px; 
 overflow: hidden; /* J.I.C.*/ 
 }  
 #container p.last { margin-right:0; } 
 </style> 
 </head> 
<body> 
<div id="container"> 
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  
 dolore magna aliqua.....</p> 
 <p> ..... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
 consequat.... Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat  
 nulla pariatur. ... </p> 
 <p class="last"> ..... Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia  
 deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco....</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  
 dolore magna aliqua.....</p> 
 <p> ..... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
 consequat.... Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat  
 nulla pariatur. ... </p> 
 <p class="last"> ..... Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia  
 deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco....</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  
 dolore magna aliqua.....</p> 
 <p> ..... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
 consequat.... Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat  
 nulla pariatur. ... </p> 
 <p class="last"> ..... Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia  
 deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco....</p> 
 <p> ..... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
 consequat.... Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat  
 nulla pariatur. ... </p> 
</div> 
</body> 
</html>

alt131

12:43 am on Nov 28, 2011 (gmt 0)

Adam, if this is the same situation as you have asked about in css [webmasterworld.com] then this:

What appears on the screen is a picture frame with text inside it.

suggests that what you actually want is border-image.