View Full Version : Trying to understand CSS... question from a newbie

04-15-2008, 03:42 PM
Ok, I built a site located at www.salonfruition.com (http://www.salonfruition.com) Please take a look at it.

The "bubbles" that include home, stylists, book appt etc I would like to make "links" to. I thought I could do it with CSS and jumped right in. I am sinking! The circle with all the bubbles and text inside is a graphic I created in photoshop.

Can someone or everyone (LoL) point me in the right direction as to how to go about this?

Ugh, what did I get myself into? :roll: I should say I thought it would be as easy as making a layout table to link to the different parts, but because it is one graphic, I can't.

Death Dream
04-15-2008, 03:59 PM
Well first off you made everything one giant image which is a big no no in my book. It can still be done but you have to get the position points on the image and kind of map areas on the image to get a link area. A lot more work than what is needed IMO.

But if you want to keep it the way it is, then I suggest you look at the following tutorial: http://www.askdavetaylor.com/how_do_i_create_an_image_map_for_my_web_page.html

Edit: Also your background can contain only one circle if you really want it to, no reason on having 6 when one would give the same effect with a smaller file size.

~Death Dream~

04-15-2008, 04:10 PM
Thanks so much. Yes, as you can see, it is my first attempt at a real template. I usually download someone else's free template and then kick myself when trying to work with it. I will look at that link, thanks so much. At least there are only 6 or so "map areas" I'll need to do.

04-15-2008, 04:18 PM
Oh my gosh, that was soooooooooooooooooooo much easier than I thought. I KNEW I could count on you all to help me quickly.

04-15-2008, 10:32 PM
Ok, it's done! Go check out my "hot spots" if you wish. www.salonfruition.com (http://www.salonfruition.com) What do you think of the layout? Funky? Stylish?

Death Dream
04-16-2008, 12:09 AM
Your so screwed if someone comes to that website and has images disabled since even your body text is an image. You should really make a div with that as it's background image and then place your text above the image.

But if your happy with it, I guess that is all that matters ..... o.O ?

~Death Dream~

04-16-2008, 12:16 AM
Is there a tutorial as to how to do that? (Add the div tag and add the image as the background?) I am working on another site and would like to do it the easiest way.

Death Dream
04-16-2008, 12:24 AM
This would go in your style sheet but you have to put in the correct image location and the right sizes.

#main {
background: url(Images/Background.gif) no-repeat 0 0; /*circle image here*/

<div id="main"><p>Text goes here</p></div>

I know that is quick and doesn't explain much but I am at the airport and don't have that much time to really go to deep into this.

~Death Dream~

04-16-2008, 12:31 AM
Thanks I will look into it.