4 replies [Last post]
Syntax
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2004-11-28
Posts: 2
Points: 0

Hello!

I'm in need of some help concerning inserting images with CSS. I have a website with a lot of pages and a similar layout.

Please visit http://www.swcity.net to see what the layout is like.

It is basically a large imagemap on the left that take you to various links around the site with a blue top bar and blue right bar.

I would like to use CSS to replace all the color scheme AND the navbar in the blue parts of the website. Every site has individual code for all this and I want to have it so I can quickly update anything in the navigation bar by simply editing the css sheet. I can't seem to figure out how to do it, could anyone help?

Thank you!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Help: Using CSS for an imagemap navigation bar.

Syntax,
Not sure what you mean here if you are talking about the background Color on the <td> then;

td {background-color: #fff;}

but you will need to remove the background attribute from the html
If you wanted different colors on different <td>s then you could use a class selector such as;
.tdcolor {background-color:#fff;} the class is placed in the html;
<td class="tdcolor">

If you mean you want to effect styling on the map/area elements then I don't think it's possible with those elements. CSS wont replace the image map as it's defined in the html.

I have to say that it's hard to help further as your not using a dtd thus rendering your page in Quirks mode which won't help in using CSS and solving problems there are also a fair few errors in the html it might be worth checking out the "how to" section for some explanations on these points and maybe running your page through the W3C validator.

Careful with the use of image maps as your sole means of navigation as anyone surfing with images disabled or text only browsers will have no means of navigating the site and they are really rather an outmoded method now.

hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

clay
Offline
Regular
Sydney.
Last seen: 17 years 27 weeks ago
Sydney.
Timezone: GMT+10
Joined: 2004-11-09
Posts: 15
Points: 0

Help: Using CSS for an imagemap navigation bar.

Sorry for the slight hijack here, but did you make that website solely in photoshop (with slices.) It's a very nice design! Smile

Syntax
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2004-11-28
Posts: 2
Points: 0

Help: Using CSS for an imagemap navigation bar.

Hugo wrote:
Syntax,
If you mean you want to effect styling on the map/area elements then I don't think it's possible with those elements. CSS wont replace the image map as it's defined in the html.
.

Okay, instead of having an image map, is it at all possible to make the sidebar image a css background object (after removing all the text on the graphic, leaving the "bubbles" bare) and overlaying text on the graphic using CSS which would be the links?

and I will run the site through W3C, I built it back in 2000. The site is kind of an old mix between an old site I wrote by hand and this site I worked out with Dreamweaver, theres bound to be some mistakes.

Thank you very much for your help Smile

clay wrote:
Sorry for the slight hijack here, but did you make that website solely in photoshop (with slices.) It's a very nice design!

I just made tables and did custom graphics (the corner pieces, middle piece in the main body) with corel photopaint. Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Help: Using CSS for an imagemap navigation bar.

Hi syntax,
There should be no reason that you can't turn that image map into a pure CSS navigation bar.
These links may well help you understand the options, but do use a dtd so that you are working in "standards mode".

http://css.maxdesign.com.au/listamatic/

http://www.stunicholls.myby.co.uk/menus/index.html

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me