images jumping to upper corner

**questions** · 07-29-2008, 07:21 PM

Hi,

Something strange is happening in that the "first" or "leftmost images, code for which is highlighted, jump to the upper left corner of the screen and don't stay where they are supposed to. If I get rid of that code and those images, then the next in line ones disappear from where they are supposed to be and jump to the upper left corner of the screen.

Here is the web.css file script:

body {
background: white;
margin: 0;
}

body a {
text-decoration: none;
}

#left {
position: absolute;
left: 50%;
margin-left: -580px;
top: 150px;
}

#main {
overflow: auto;
position: absolute;
left: 50%;
margin-left: -500px;
top: 150px;
height: 330px;
width: 1028px;
}



#colorsr1c1 {
position: absolute;
left: 50%;
margin-left: -500px;
top: 150px;
display: block;
width: 200px;
height: 53px;
background: url(colors-acuarele.jpg);
}
#colorsr1c1:hover {
background-position: bottom;
}
#colorsr1c1 span {
display: none;
}

#colorsr1c2 {
position: absolute;
left: 50%;
margin-left: -293px;
top: 150px;
display: block;
width: 200px;
height: 53px;
background: url(colors-iridescent.jpg);
}
#colorsr1c2:hover {
background-position: bottom;
}
#colorsr1c2 span {
display: none;
}

#colorsr1c3 {
position: absolute;
left: 50%;
margin-left: -86px;
top: 150px;
display: block;
width: 200px;
height: 53px;
background: url(colors-ai.jpg);
}
#colorsr1c3:hover {
background-position: bottom;
}
#colorsr1c3 span {
display: none;
}

#colorsr1c4 {
position: absolute;
left: 50%;
margin-left: 121px;
top: 150px;
display: block;
width: 200px;
height: 53px;
background: url(colors-portraits.jpg);
}
#colorsr1c4:hover {
background-position: bottom;
}
#colorsr1c4 span {
display: none;
}

#colorsr1c5 {
position: absolute;
left: 50%;
margin-left: 328px;
top: 150px;
display: block;
width: 200px;
height: 53px;
background: url(colors-target.jpg);
}
#colorsr1c5:hover {
background-position: bottom;
}
#colorsr1c5 span {
display: none;
}



#colorsr2c1 {
position: absolute;
left: 50%;
margin-left: -500px;
top: 210px;
display: block;
width: 200px;
height: 53px;
background: url(colors-sketches.jpg);
}
#colorsr2c1:hover {
background-position: bottom;
}
#colorsr2c1 span {
display: none;
}

#colorsr2c2 {
position: absolute;
left: 50%;
margin-left: -293px;
top: 210px;
display: block;
width: 200px;
height: 53px;
background: url(colors-acuarele.jpg);
}
#colorsr2c2:hover {
background-position: bottom;
}
#colorsr2c2 span {
display: none;
}

#colorsr2c3 {
position: absolute;
left: 50%;
margin-left: -86px;
top: 210px;
display: block;
width: 200px;
height: 53px;
background: url(colors-acuarele.jpg);
}
#colorsr2c3:hover {
background-position: bottom;
}
#colorsr2c3 span {
display: none;
}

#colorsr2c4 {
position: absolute;
left: 50%;
margin-left: 121px;
top: 210px;
display: block;
width: 200px;
height: 53px;
background: url(colors-acuarele.jpg);
}
#colorsr2c4:hover {
background-position: bottom;
}
#colorsr2c4 span {
display: none;
}

#colorsr2c5 {
position: absolute;
left: 50%;
margin-left: 328px;
top: 210px;
display: block;
width: 200px;
height: 53px;
background: url(colors-acuarele.jpg);
}
#colorsr2c5:hover {
background-position: bottom;
}
#colorsr2c5 span {
display: none;
}



#menu1 {
position: absolute;
left: 50%;
margin-left: -411px;
top: 500px;
display: block;
width: 88px;
height: 24px;
background-image: url(menu-colors.gif);
}
#menu1:hover {
background-position: bottom;
}
#menu1 span {
display: none;
}

#menu2 {
position: absolute;
left: 50%;
margin-left: -411px;
top: 480px;
display: block;
width: 88px;
height: 24px;
background-image: url(menu-shapes.gif);
}
#menu2:hover {
background-position: bottom;
}
#menu2 span {
display: none;
}

#menu3 {
position: absolute;
left: 50%;
margin-left: -323px;
top: 480px;
display: block;
width: 85px;
height: 24px;
background-image: url(menu-words.gif);
}
#menu3:hover {
background-position: bottom;
}
#menu3 span {
display: none;
}

#menu4 {
position: absolute;
left: 50%;
margin-left: -238px;
top: 480px;
display: block;
width: 55px;
height: 24px;
background-image: url(menu-info.gif);
}
#menu4:hover {
background-position: bottom;
}
#menu4 span {
display: none;
}

HTML PAGE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="web.css" />

<title>......................................................................................................................................................... ................................................................................................................................................................ ................................................................................................................................................................ ...</title>
</head>

<body>

<a id="menu1" href="colors.html">COLORS</a>
<a id="menu2" href="shapes.html">SHAPES</a>
<a id="menu3" href="words.html">WORDS</a>
<a id="menu4" href="info.html">info</a>

<a id="colorsr1c1" href="#">acuarele</a>
<a id="colorsr1c2" href="#">iridescent</a>
<a id="colorsr1c3" href="#">AI</a>
<a id="colorsr1c4" href="#">target</a>
<a id="colorsr1c5" href="#">sketches</a>

<a id="colorsr2c1" href="#">portraits</a>
<a id="colorsr2c2" href="#">logos</a>

</body>
</html>

THANK YOU MUCH!

**TheJoshMan** · 07-29-2008, 10:43 PM

Need to know the location of the "images" directory to be able to create a "local" test page to work it out...

Please post a link to your page in question.

**questions** · 07-29-2008, 11:57 PM

Is there some public place to upload so I can keep my website private?
THANKS!

**TheJoshMan** · 07-30-2008, 12:13 AM

lol, I don't know of any. Is your site "top secret"?

**TheJoshMan** · 07-30-2008, 12:13 AM

i kind of thought the whole idea behind having a website was to get it recognized around the world?!

Maybe not. I don't know.

**questions** · 07-30-2008, 12:37 AM

it is but only if it looks good, which it yet doesn't...!

I uploaded here (hee hee! - just "shy")

http://www.freewebs.com/testpractic/test.html

the web.css:
http://www.freewebs.com/testpractic/web.css

the images:
http://www.freewebs.com/testpractic/colors-acuarele.jpg
http://www.freewebs.com/testpractic/menu-colors.gif
http://www.freewebs.com/testpractic/menu-info.gif
http://www.freewebs.com/testpractic/menu-shapes.gif
http://www.freewebs.com/testpractic/menu-words.gif

THANKS!

**TheJoshMan** · 07-30-2008, 12:56 AM

I'm not seeing anything jump around and I viewed in FF3 and IE7, what browser are you using?

**TheJoshMan** · 07-30-2008, 12:58 AM

Also, for SEO purposes... It's not a good idea to use images to create a text based menu. If your menu is only going to consist of "words", why not just use good old HTML and make the menu that way? Using links in an unordered list would do the same thing you're trying to do with those images.

**questions** · 07-30-2008, 01:07 AM

I want to use that particular font which doesn't exist on the web. Anyway. The images don't jump around. They are just not present. The ones highlighted in red "appear" as small image icons at the top left corner in Dreamweaver but they are invisible otherwise, probably off the page. If I take those out then the next ones in "horizontal line" move up to that corner.

<body>

<a id="menu1" href="colors.html">COLORS</a>
<a id="menu2" href="shapes.html">SHAPES</a>
<a id="menu3" href="words.html">WORDS</a>
<a id="menu4" href="info.html">info</a>

<a id="colorsr1c1" href="#">acuarele</a>
<a id="colorsr1c2" href="#">iridescent</a>
<a id="colorsr1c3" href="#">AI</a>
<a id="colorsr1c4" href="#">target</a>
<a id="colorsr1c5" href="#">sketches</a>

<a id="colorsr2c1" href="#">portraits</a>
<a id="colorsr2c2" href="#">logos</a>

</body>
</html>

THANKS!