CSS image not showing up as wanted, plz help

**Miikee713** · 04-13-2008, 06:55 PM

Thanks for veiwing.

This is the first time I've ever written anything in CSS, or HTML. So it is going to be messy. I'm writing a template for eBay listings, so I would like the background images to conform to different sizes of text, such as in titles and in paragraphs, and be very verstile because I plan to use it for all my listings.

The images that is not showing up properly (in firefox) are the "DescriptionBody.png" and the "DescriptionTitle2.png"

After messing with it for hours, and placing the image in divs and other spots, and placing a fixed attachment to the image. I've been able to see that the images get placed in the top right hand corner of the page. I would just do a background-position code, but the length of text may change where these images should be.

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">

</style>

<title>Miikee713 eBay Auction</title>
</head>
<body>

<div id="" banner="" align="center"> <img
alt="Banner"
src="http://i254.photobucket.com/albums/hh116/Miikee713/Ebay/images/BlueBanner.gif"
title="BannerPic" align="middle" height="60"
width="100%" /></div>
<div id="title" align="center">
<h1>Item Title</h1>
<p>Item Subtitle</p>
</div>

<div id="lsidebar">
<h2>Welcome</h2>
<a href="">This is the LSideBar</a>
</div>
<div id="rsidebar">
<h2>Welcome</h2>
<a href="">This is the RSideBar</a>
</div>
-->
<div id="page">
<div id="iinfo" float="left">
<h3>Item Description:</h3>
<p>Enter the item description here.</p>
</div>

<div id="pics">
<h3 float="left">Pictures:</h3>
<br />
<div id="images"> <img src=""
alt="Images did not load properly!" height="" width="" />
</div>
</div>
<br />
<hr />
<div id="pinfo" float="left">
<h3>Policies/Other Info:</h3>
<p>Enter Policies and other information here.</p>
</div>

<div id="sinfo" float="left">
<h3>Shipping Info:</h3>
<p>Enter all shipping information here.</p>
</div>

<div id="mystuff">
<center> <a href="http://myworld.ebay.com/miikee713/"
title="Visit Miikee713's eBay Page">Visit My eBay Page</a>
<br />
<a href="http://search.ebay.com/_W0QQsassZmiikee713"
title="See other items for sale by Miikee713">Check Out My
Other Items</a> </center>
</div>
</div>
</body>
</html>

I know there is probably alot of dumb coding in there, but this is my first code and everything has been trial and error.

Thank you very much for your help, I've been messing with this thing for hours. The DescriptionBody.png is not as important, I can just replace it with color. Also, I'm trying to put a border (also a .png) around the p and h3. is this possible with the css, and what would be the best way to do this?

**LadynRed** · 07:24 PM

Ok, here are some problems:

float: top; - no such thing. Properties are left, right, or none - that's it.

align: center; - not valid. If you want to center text, the correct property is text-align: center.

border-width: 0px; - completely unnecessary unless you have actually defined a border somewhere else. If you haven't, then there is no need to do this.

border: ridge medium; - invalid - you must define a width if you're going to define a border. Also, some browsers won't render all border styles.

Quote:

text-decoration: underline;
text-decoration: bolder;

The first one is ok, the 2nd one is not. If you want something bolder, you have to use the font-style property.

Background-attachment: fixed - is NOT going to work in IE6.

Quote:

#images img {
align: center; }

Again, align:center is NOT valid, and in this case text-align: center won't work. If you want images to center, try this instead:

#images img{display: block; margin: 0 auto;}

Quote:

When you float an element, you MUST give it a width. Your styles should also not be in-line but in your CSS.

<center></center> - should NOT be used, it's deprecated, and it's presentational, which means it should be in your CSS if you want to center something.

You should not be using images for text, you should be using TEXT. It's ok to make a background IMAGE on a P or Hx tag, but you should never replace that real text with an image.

This would be a whole lot easier to debug if we could SEE the page itself. Code helps, but w/o the images to work with, it's hard to duplicate your problem.

Nice try, glad you're going with CSS. Here's a super CSS reference so you can use VALID css properties

http://reference.sitepoint.com/css

Also, make sure your document has a proper DOCTYPE on it, or all your hard work will be for naught.

**NYChaoS** · 04-13-2008, 08:40 PM

you could also goto http://jigsaw.w3.org/css-validator/ and validate your css to see if there are any errors

**Miikee713** · 04-13-2008, 09:09 PM

Thank you very much for going through the entire document and helping me with it. It is extremely helpful. I will work on changing the the parts that need changing.

I wanted to try and understand somethings better though. At the same time, I am also reading through the websites suggested.

How would I go about providing the images for this forum? I figured that they would be provided because they are linked through the CSS to photobucket.

Also, I have the css written in the same document as the html because I can't upload any other files to the eBay website besides just this text.

I don't understand where I'm setting an image in place of text. My intentions are for all the images in the p and h3 selectors to be background-image. Or is that exactly what you mean.

Also, what should I be using to align divs and align images?

I try to read as much as possible (several, several hours), but after a long time it becomes exhausting and disheartening.
Thank you for the help.

**Miikee713** · 04-13-2008, 09:23 PM

Somehow the background-image "descriptionTitle2.png" has begun to show up properly. I was wondering, is there any way to adjust this background image's width and height via CSS? Or am I going to have to do this for every listing inside an image editor.
The main thing is that I'm just trying to background images that will grow along with the size and length of my paragraphs. And also change with the length of my headings.

**LadynRed** · 04-13-2008, 10:17 PM

Ok, you can't scale background images with CSS. You should try an image that will tile horizontally and vertically so as the div grows with it's content, the background will fill the space.

To center, there are different methods depending on what it is that you're centering. To center text, text-align: center in the CSS works. I did explain how to center images. To center the divs - look at the stickies in the forum, there is one there about centering your site.

I'm not clear on why you'd want a background image on paragraphs. I did misunderstand what you were doing there, sorry.