[magusbuckley]

Hello:

Wow, I really had trouble coming up with a title for this topic. I promise, I'm not as crazy as I seem this far. Ha.

What I did:

I created a single layout with a header, a banner, a main content area, and a footer and enclosed all of this inside a wrapper. I used the same code to produce multiple pages. In my banner, I'm keeping text on the left and am using a wide photo across the background. Since I used the same code for all of my pages, the DIV for the banner is quite simply "banner". As such, the banner on all of my pages demonstrate the exact same features down to the background photo.

What I'm trying to do:

I'm trying to use a different background photo in the banner for each of my pages. However, since they are all set as DIV "banner", they all get the same background photo.

The Question:

Is there a way to make all of my banners share on set of instructions from my Style Sheet for size, border, etc. but change the background photo for each banner in a seperate set of instructions in my Style Sheet?

What I've tried:

I tried calling the banner for the services page "#banner_services" and set the background for that DIV but it doesn't pick up any of the other instructions from the "#banner" instructions in my Style Sheet.

I'm using Dreamweaver CS4.

I'm sure this is an easy fix, it's just that I'm relatively new to CSS.

Any and all information will be greatly appreciated.

Thanks,

Magus

[Advertisements]

Well folks, I beat you to it! Ha.

I wound up creating a class for each of my banners. In the class, I assign a background pic and let the "banner" div code take care of the other formatting. In doing this, I can make changes to the banners without having to make so many changes.

It works for now I suppose.

I'm still open to suggestions if any of you know a better way to accomplish this task.

Thanks,

Magus

[magusbuckley]

Well folks, I beat you to it! Ha.

I wound up creating a class for each of my banners. In the class, I assign a background pic and let the "banner" div code take care of the other formatting. In doing this, I can make changes to the banners without having to make so many changes.

It works for now I suppose.

I'm still open to suggestions if any of you know a better way to accomplish this task.

Thanks,

Magus

[Major Payne]

Basically was going to suggest something similar. For ALL common CSS on your banners, use a class. For individual banners, use an id. The div can have both. Something maybe like this:

CSS...

.banner {
width: XXpx;
height: YYpx;
margin: 0 auto; /* centers */
border: 0;
}

#banner_page_name1 {
background: #fff url(path to bg image1) no-repeat center scroll;
}

#banner_page_name2 {
background: #fff url(path to bg image2) no-repeat center scroll;
}

Add whatever other CSS properties you are using that I left out.

Then div for each page might be...

<div class="banner" id="banner_page_name1"></div>

for page 1

<div class="banner" id="banner_page_name2"></div>

for page 2

[magusbuckley]

Thanks Ron!

Yep, looks like pretty much the same thing, only in reverse. I don't suppose there are any pros or cons to doing it one way or another, eh?

No, no, now that I think about it, I think I like your way better. I can see myself editing background info more quickly from a DIV than from a class.

Hmm, I already uploaded this code yesterday but may switch it out this afternoon.

Hope things are well your way. I'm still here on the coast working at Boomtown. My oldest daughter just turned five. In other news, I want one of those new camaros...but can't afford it. Ha.

Take care and thanks for the information.

Later,

Brian

[Major Payne]

You're welcome, Brian. Still being moved around. In a MEMA cottage here. Trying to buy the cottage now. Been moved 17 times. Might be one more time.

I remember the site you did for your daughter years ago. Lost URL. Bet she's as cute as can be.

Safe Halloween to all.

[magusbuckley]

Ron:

It's funny to hear you remember that site. It was babybonline and has been off the web for more than a year now. That site was for our first child, Jasmine. She's five now and yes, she is cute. I created that site with FrontPage and never felt I could get it to work the way I wanted it to. It became a hobby as I found myself thirsty to know how to code "cool" pages. Ha. Our family, all out of town, also enjoyed the work. I took the site down about a year after our second child, Ava, was born because as she approached a year in age, I found I had little time to work on such a thing and also had noted that many people had finally, after all those years, stopped visiting the site.

I finally broke down and purchased Dreamweaver a few months ago and started teaching myself CSS. I was soooo afraid it would be difficult, but it's actually MUCH easier to work with. I think it's SUPER EASY to learn, but could be difficult to master. Oh well, I'm up for the challenge. Now, I do computer work on the side and so have created a new site for advertisement. Hmm, I'd send you the link here but I think it's against policy to link back to a computer service center or something. At any rate, this site looks much better than any of the others I've ever created. I'm really proud of this one. As time goes by, I add little things here and there and can see myself adding more pages in the near future.

Sorry to hear you are being moved around so much. I didn't realize it was that bad. We now live in St. Martin. This house is larger than our apartment, but the mortgage is the same as our rent so I guess you can't beat that, eh? The inside needs a million small fixes, but the outside and the yard are quite nice. Luckily the yard is fenced in so we can easily let the girls and the pets out to play.

Take Care...

Brian

[Major Payne]

Great update on news. Can PM or email me. Guess I should have made that visit when I could walk over to the apartment.