• 0

simple div, background w image question


Question

This is probably something really simple to answer but I'm jiggered if I can find out how to do it.

I'm putting a few things up for sale on eBay. Using garagesale on the mac I choose a template, and uploaded the item, went into ebay and copied the source to a template. Reason for all this effort is that it showed me how to use CSS with an eBay template.

What Im trying to do is create a class that will do the following

for the line of text (probably in a div) place a background image that repeats on X (managed to do that bit myself :D)

Place an image at the start of the div and indent text a little.

Does that make sense?

I could do it with a 3 column table type thing but I'm trying to learn better practices

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

This is the way I would do it:

Markup:

<div class="my-repeating-background-class"><span>My super-awesome text about stuff that I know you're going to love, so you should read this.</span></div>

CSS:

.my-repeating-background-class {background: url("path/to/my-repeating-background.gif") repeat-x;}
.my-repeating-background-class span {background: url("path/to/my-icon.png") 10px 50% no-repeat; padding-left: 30px;}

From your post, it sounds like the first line of CSS you've already got down.

The second line adds a background to the span 10px from the left and 50% down (X axis Y axis) and doesn't repeat. It also adds 30px of padding to the left to indent it. This should be enough to compensate for the 10px gap on the left and a 16px wide icon.

If your icon is larger, or you don't want the icon to be that far in you will need to change the numbers. Since the icon is a background image and not an actual image on the page it doesn't push the text at all, so you need to add padding to create a sort of fake physicality.

Hope that helps.

Link to comment
Share on other sites

  • 0

Thanks for the help with this. For some reason tho the icon on the left isn't showing.

Code that I used.

.my-repeating-background-class {background: url("http://lh5.ggpht.com/_DrebATzV7Ng/TIfDcZEsFII/AAAAAAAAARE/Z7YJEl3NGqg/s800/rssbar-bg.png") repeat-x;}

.my-repeating-background-class span {background: url("http://lh4.ggpht.com/_DrebATzV7Ng/TIfDc3hpkSI/AAAAAAAAARI/5_LPl_xMoW8/s800/rssbar-left.png") 10px 50% no-repeat; padding-left: 70px;}

The icon that Im using for the left hand side is 70px by 30px

Actually I take that back, its dreamweaver that's the problem not showing the css properly. However the next thing Im trying to crack is to get the text centered in the middle on the vertical axis

Link to comment
Share on other sites

  • 0

Don't use Dreamweaver to preview your code, ever. Just use it a code editor and preview your site in a real browser.

you can still use dreamweaver and use the code view AND design view AND use the browsers test.

Link to comment
Share on other sites

  • 0

However the next thing Im trying to crack is to get the text centered in the middle on the vertical axis

Vertically centering something in CSS is a PITA, there's no "one size fits all" method which can center anything.

If you only have one line of text which you want to center vertically, you're in luck. Simply set the line-height to the height of the container and your single line of text will be centered in its container:

<div id="centered-line"><p>This line of text is vertically centered.</p></div>

#centered-line { height: 250px; }
#centered-line p { line-height: 250px; }

When the text in the paragraph gets too long and some of the text appears on another line, the paragraph will overflow its container. Therefore, make sure that it always stays on a single line.

If the element which needs centering has a fixed height, you can achieve vertically centering by juggling with the margins:

<div id="centered-fixed"><p>This paragraph is 250px tall and is vertically centered.</p></div>

#centered-fixed { position: relative; }
#centered-fixed p { position: relative; top: 50%; height: 250px; margin-top: -125px; }

Basically, you position the paragraph with its top left corner halfway the container and then move it up half its height. (margin-top: -(height / 2))

There are some other techniques as well (have a look) but they tend to be really hacky and inconsistent across different browsers. If you can't achieve vertical centering with one of the techniques mentioned above, you're better off not trying to center it at all.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.