homepage Welcome to WebmasterWorld Guest from 54.205.242.179
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Text alignment on a background
Firefox
Adam5000




msg:4390367
 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




msg:4390441
 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




msg:4390462
 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




msg:4390566
 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




msg:4391050
 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




msg:4391544
 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.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved