If you have a picture that when you click on it takes you to another website (button or whatever you want to call it) and say its like on the left bottom of the page but you want it half way up and a little to the right how would you go about fixing it?

I know its something simple like top:23% right:33% because I used to be able to do it when I made graphics for a friend but ive forgotten and can't figure it out at all ya'll are probably going to think im stupid for asking this but I've been searching online an on the forms so if anyone can help e or give me a website that would help I would greatly appreciate it.! I though the form on Strange Positioning of Divs might of been similar to my problem but it didn't help me much. I appreciate the help!

I'm not sure I'm following what you need to do. You have an image on one page and you want the image to be located in a different position than it currently is?

Or are you opening a new window with javascript and you want the new window to be located in a different place than when it first opens?

I'm thinking it's the opening a new window with javascript that you want. If that's the case then this article on window.open will have what you're looking for.

If that's not what you're looking for could you describe what you want a little more and I'll be happy to try again.

I would assume you would have more than one button on the page. Do you have a link to a page we can look at? That would better help us help you.

No i can get them in new windows im just tryign to move the buttons around. Yes i have more then one button.. Well not at the moment im tryign to fix it. Heres the link http://ragdoll1607.freehosting.net/tsainfo.htm

were it says home, TSA info, technology courses, events, elected officers, photos, and oss is were the buttons are gonna go (over them currently thats just part of the background.) The home button thats actualy a button is on the bottom of the page I want to get it up to were the home on top is but I can't get the pic. to move. I don't have any of the other buttons up yet because im trying to get it to work first.

but do any of you understand what I mean now though?

Ok I understand now. What you really need is to build a layout for the entire page. Right now there's a single image for everything and it's not a good idea to keep that image if you're planning on covering up the different parts.

Do you have a way to edit images? If not we can recommend some. The easiest thing for you to do is probably crop the image so you're only left with the top portion and then develop a layout so your buttons will sit along the left side.

If you need to keep the image as it is and just place your buttons on top what you'd need to do is use css positioning.

When you create a button assign an id to the image

<img id="home" src="path-to-you-image.jpg" />

Then in your css you would use

img#home {position: absolute; top:100px; left:20px}

The number of px would need to change to match where you wanted the button images. You may also need to add a z-index to the css

img#home {position: absolute; z-index: 10; top: 100px; left: 20px}

Positioning isn't really the best way to set this up, though. Better would be to develop a layout without the one big image you currently have. The positioning above with a little bit of tweaking should work, but it's not the best approach.

If I make it with one big image like I have how can I make it so I can click the words on the sides and have them take me to another page? I'm not sure how I would go about doing that. I'm still fairly new with HTML and CSS.

Oh but do you know the program fireworks by any change? Could I use that soemhow? My Friend told me I might be able to use that to help with it but I'm not sure exactly what to do about it all. What do you think?

Thanks for all this help by the way!

i suggest you do NOT use one background image for your whole page (with buttons). You should have different divs with different elements.

For the image in the top left corner.

.topright1 {width: the width of the image plus about 30px; height: the height of the image plus about 30px; border: 1px solid black; padding: 1px; background-color: red;}

.topright2 {width: same width as above -1px; height: same height as above -1px; border: 2px solid white; background-color: red; padding:15px;}

and the html

<div class="topright1"><div class="topright2"><img src="image.jpg" border="0" /></div></div>

But you'd have to apply this to all with adjusments

Ok thank's I'm going to try to do it the way you said to first, Gilligan.
Thanks for all the help guys wish me luck!

Well so far I've not had any luck with it so if anyone else knows of some other suggestions thanks!

I agree that you'd be better to code the different parts separately instead of using the single image, but if you do want to have part of an image be clickable you'd need to create an image map. Fireworks can create them, but I don't use Fireworks so I couldn't tell you how.

I'm not sure where things went wrong with your last attempt. Could you describe what wasn't working. The page now looks better than it did previously. I do see what looks like a working navigation so I think you're making progress.

Well I was getting to aggravated with how it was before so i decided to set it up differently (plus im pressed for time.) Although now ive run into a new problem... If you look at the site now the home page, elected officers,tsa events, technology courses , photo gallery and oss buttons light up red when you click over them which I like. However if you scroll down were it says Kathleen high school and TSA it also set it up like the ones above and I don't want them like that... Also I can't center the Top buttons. I've changed the codes so it is supposed to center it but like I said before im new to CSS and HTML and I'm not that great at it.

<style type="text/css">
ul
{
float:CENTER;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:Center;
width:6em;
text-decoration:none;
color:black;
background-color:white;
padding:0.2em 0.6em;
border-right:1px solid black;
}
a:hover {background-color:FF0000}
li {display:inline}
</style> <<<<< is the style code.

Is the buttons codes>>>>>> <ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">Elected Officers</a></li>
<li><a href="#">Technology Courses</a></li>
<li><a href="#">TSA Events</a></li>
<li><a href="#">Photo Gallary</a></li>
<li><a href="#">OSS Info</a></li>
</ul>
<HR></HR><br>

<a href=" http://www2.polk-fl.net/khs/ "> Kathleen Highschool </a>
<a href=" http://www.tsaweb.org/ "> TSA </a>

What's happening is this line of css

a:hover {background-color:#FF0000}

is controlling how all the links look when you hover over them. A very easy way to fix things is to change that line of css to:

ul a:hover {background-color:#FF0000}

which says that only links inside of an unordered list get the background color when you hover over them. The links at the top are inside an unordered list, but the two links at the bottom aren't.

You might want to have the links at the bottom change in some way when you hover over them, though. May I offer a suggestion?

a:hover {color:#FF0000}
ul a:hover {color:#000000}

The first line of css above will make it so the color of the text changes to the same red when you hover over the links. The second line keeps the color of the links at the top black.

I hope that helps, but feel free to ask more questions if it doesn't.

Or create a specific div for the top and bottom.

.menutop a:hover {background-color:red;}

and

and this for the html

.menubottom a:hover {background-color:none;}

<div class="menu"><ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">Elected Officers</a></li>
<li><a href="#">Technology Courses</a></li>
<li><a href="#">TSA Events</a></li>
<li><a href="#">Photo Gallary</a></li>
<li><a href="#">OSS Info</a></li>
</ul></div>

as for the centering, the simple answer is that there is no such thing as float:center, use this instead.

 ul
{
text-align:center;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

or if you are using the css style for a:hover, then do this.

.menutop {text-align:center;}

and

.menubottom {text-align:center;}

Ok thank you guys! You have all been alot of help and i appriciate it alot!!