homepage Welcome to WebmasterWorld Guest from 54.197.94.241
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Divs with text and background-image
Mallefitzo




msg:3842197
 3:47 pm on Feb 4, 2009 (gmt 0)

Hi,

I am trying to get 4 divs 46px height and 600px width with a background-image.

<div style="font-size: 1.5em; background-image: url('tabelle_hintergrund.jpg'); background-repeat: no-repeat; background-position: center center; vertical-align: middle; width: 600px; height: 46px; padding-top: 20px">
Tu amigo consigue <b>15</b> SP &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tu recompensa: <b>$10</b>
</div>


<div style="font-size: 1.5em; background-image: url('tabelle_hintergrund.jpg'); background-repeat: no-repeat; background-position: center center; vertical-align: middle; width: 600px; height: 46px; padding-top: 20px">
Tu amigo consigue <b>100</b> SP &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tu recompensa: <b>$10</b>
</div>


<div style="font-size: 1.5em; background-image: url('tabelle_hintergrund.jpg'); background-repeat: no-repeat; background-position: center center; vertical-align: middle; width: 600px; height: 46px; padding-top: 20px; margin-bottom: 10px">
Tu amigo consigue <b>5.000</b> SP &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tu recompensa: <b>$10</b>
</div>

<div style="font-size: 1.5em; background-image: url('tabelle_hintergrund.jpg'); background-repeat: no-repeat; background-position: center center; vertical-align: middle; width: 600px; height: 46px; padding-top: 10px">
Recompensa total por amigo &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; <span style="font-size: 1.7em"><b>$100</b></span>

So I have got a few problems: How can I center the text so that it lies directly in the middle in the image and not to high o two low? I tried it with padding-top and it works for firefox but not with IE.

And another problem is with the text: To have a space between the text I added notbreakable spaces but of course this solution is not elegant. Could you help me with that?

P.D. I know the coding might not be the best but I am a newbie so be nice :D

 

simonuk




msg:3842218
 4:10 pm on Feb 4, 2009 (gmt 0)

Welcome to WebmasterWorld

If it is tabular data you are displaying then use a table to display it, there is nothing wrong doing it that way.

If not then you need to give the content it's own element (like a P) so you can control the behavior easier. It is easier to control the element inside the parent instead of trying to make the parent do all the work.

Moby_Dim




msg:3842222
 4:12 pm on Feb 4, 2009 (gmt 0)

Use additional divs for texts to solve both problems may be.

Global Options:
 top home search open messages active posts  
 

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

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved