Forums

irmikeyb

Member

From: USA

Registered: 2008-06-30

Posts: 156

css help

Alright I am making a site and i have run into a problem.

when I use this code in my style sheet:

.left_block {
    background:url(../img/style/icon.gif) no-repeat left top;
    float:left;
    width:390px;
}

and this code in my index file:

<div class="left_block">
content here.
</div>

the image is displayed which is what I want. but i have to use multiple left blocks that are going to be using different images for each block so im trying to use this method below.

In my style sheet I have:

.left_block {
    float:left;
    width:390px;
}

then in my index I have:

<div class="right_block" style="background:url(../img/style/icon.gif) no-repeat left top;">
content here.
</div>

Only problem is that the image doesnt display. Im not sure as to why so I am asking if anyone could explain to me please.

I have tested other things such as just using like style="border:1px solid #000;" and that works correctly so why not this background line?

Thanks to anyone and everyone who helps.

Reines

Lead developer

From: Scotland

Registered: 2008-05-11

Posts: 3,165

Website

Re: css help

When in your CSS the path to the image is relative to your CSS file. When in the HTML the path to the image is relative to your HTML file. Is that the correct path?

Paul

Developer

From: Wales, UK

Registered: 2008-04-27

Posts: 1,630

Re: css help

A better method would be to give each div two classes e.g.
<div class ="left_block image_1">
<div class="left_block image_2">

---

The only thing worse than finding a bug is knowing I created it in the first place.

irmikeyb

Member

From: USA

Registered: 2008-06-30

Posts: 156

Re: css help

When in your CSS the path to the image is relative to your CSS file. When in the HTML the path to the image is relative to your HTML file. Is that the correct path?

yes it is the correct path. I tested to be sure.

And paul I have 6 total boxes I will be displaying and all have a different image. So are you suggesting that I make a total of 6 total classes so each one has its own then. If so thats what I am currently using.

Also thanks for the help both of you.

Last edited by irmikeyb (2009-11-10 06:16:20)

Paul

Developer

From: Wales, UK

Registered: 2008-04-27

Posts: 1,630

Re: css help

Not quite. You do this

.left_block {
   float:left;
   width: 390px;
   background-position: top left;
   background-repeat: no-repeat
   }

.image_1 {background-image: url(whatever)}
.image_2 {background-image: url(whatever)}

By using two classes you only need to declare the bits that are common to all the boxes once.

---

The only thing worse than finding a bug is knowing I created it in the first place.

irmikeyb

Member

From: USA

Registered: 2008-06-30

Posts: 156

Re: css help

ahh I got it. Didnt think of it that way. Thanks alot again for the help.