Welcome to WebmasterWorld Guest from 54.147.147.191

Forum Moderators: incrediBILL

Message Too Old, No Replies

Text alignment on a background

Firefox

     

Adam5000

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

10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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)

10+ Year Member



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)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month