images jumping to upper corner [Archive]

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"><span>COLORS</span></a>
<a id="menu2" href="shapes.html"><span>SHAPES</span></a>
<a id="menu3" href="words.html"><span>WORDS</span></a>
<a id="menu4" href="info.html"><span>info</span></a>

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

<a id="colorsr2c1" href="#"><span>portraits</span></a>
<a id="colorsr2c2" href="#"><span>logos</span></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"><span>COLORS</span></a>
<a id="menu2" href="shapes.html"><span>SHAPES</span></a>
<a id="menu3" href="words.html"><span>WORDS</span></a>
<a id="menu4" href="info.html"><span>info</span></a>

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

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

</body>
</html>

THANKS!

questions

07-30-2008, 01:10 AM

It has some 12 errors, maybe that's what's wrong...
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freewebs.com%2Ftestpractic%2Ftest.html&charset=(detect+automatically)&doctype=Inline&group=0

TheJoshMan

07-30-2008, 01:22 AM

Most of those errors you are getting from the validator is because you are using a "HTML" doctype, but your code is in "XHTML"

Have a look at this and give it a go on your PC... See what you think. It's not the best, I only put about 5 minutes worth of effort into it, but it does the same thing you're trying to do.

<!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" />
<style type="text/css">

body {
background: #ffffff;
margin: 0;
color:#ffffff;
font-family:verdana;
text-transform:uppercase;
font-weight:normal;
font-size:12px;
}

a:link, a:active, a:visited{
font-family:verdana;
font-size:12px;
color:white;
font-weight:normal;
text-decoration:none;
text-transform:uppercase;
}
a:hover{
color:#EE3825;
}

#menu{
background:#000000;
width:100%;
padding:3px;
text-align:center;
height:auto;
}
#menu ul li{
list-style-type:none;
display:inline;
float:left;
padding-right:8px;
}
#menu2{
background:#000000;
width:100%;
padding:3px;
text-align:center;
height:auto;
}
#menu2 ul li{
list-style-type:none;
display:inline;
float:left;
padding-right:8px;
}
#menu3{
background:#000000;
width:100%;
padding:3px;
text-align:center;
height:auto;
}
#menu3 ul li{
list-style-type:none;
display:inline;
float:left;
padding-right:8px;
}

</style>

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

<body>

<div id="menu">
<ul>
<li>/<a href="#">  colors    </a></li>
<li>/<a href="#">  shapes  </a></li>
<li>/<a href="#">  words  </a></li>
<li>/<a href="#">  info  </a></li>
</ul>
</div>
<div id="menu2">
<ul>
<li>/<a href="#">  acuarele  </a></li>
<li>/<a href="#">  iridescent  </a></li>
<li>/<a href="#">  ai  </a></li>
<li>/<a href="#">  target  </a></li>
<li>/<a href="#">  sketches  </a></li>
</ul>
</div>
<div id="menu3">
<ul>
<li>/<a href="#">  portraits  </a></li>
<li>/<a href="#">  logos  </a></li>
</ul>
</div>

</body>
</html>

questions

07-30-2008, 02:15 AM

THANKS.

NOW, WHAT ABOUT THIS, WHERE I DO WANT IMAGES TO SWAP, AND I WANT THE IMAGES IN A TABLE. BASIC IDEA IS TO HAVE 1 IMAGE WITH THE SWAP INSIDE OF IT. THE TOP OF THE IMAGE SHOWS WHEN NORMAL AND THE 'HIDDEN' BOTTOM PART OF THE IMAGE SHOWS WHEN HOVERING.

CSS CODE
a.colorsr1c1 {
display: block;
width: 200px;
height: 53px;
background: url("colors-acuarele.jpg") top;
text-decoration: none;
}
a:hover.colorsr1c1 {
background-position: bottom;
}

HTML CODE

<tr height="60" valign="top">
<td width="207"><a class="colorsr1c1" href="#"> </a></td>
<td width="207"><a class="colorsr1c2" href="#"> </a></td>
<td width="207"><a class="colorsr1c3" href="#"> </a></td>
<td width="207"><a class="colorsr1c4" href="#"> </a></td>
<td width="200"><a class="colorsr1c5" href="#"> </a></td>
</tr>

SOMETHING IS NOT WORKING WITH THEM. DOES SOMETHING LOOK WRONG TO YOU?
Must I put the "a" here or can I put anything down?

a.colorsr1c1 {

THANKS!

TheJoshMan

07-30-2008, 02:28 AM

I'm not sure what browser you are seeing problems in, but I just used the code you posted and it works fine for me in FF3 and IE7. The code doesn't look wrong to me, but I'm no expert by any means. LOL

questions

07-30-2008, 02:30 AM

OR, IF I DO THIS:
CSS

#colorsr1c1 {
display: block;
width: 200px;
height: 53px;
background: url(colors-acuarele.jpg) top;
text-decoration: none;
}
#colorsr1c1:hover {
background-position: bottom;
}

HTML

<tr height="60" valign="top">
<td width="207"><a href="#" id="colorsr1c1"> </a></td>
</tr>

NOTHING SHOWS UP?

THANKS!

questions

07-30-2008, 02:32 AM

Thanks. I can't figure it out at all. Nothing shows up in Dreamweaver, in Firefox or in IE...

questions

07-30-2008, 02:37 AM

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

example

questions

07-30-2008, 02:37 AM

the css for this one is here
http://www.freewebs.com/testpractic/web2.css

TheJoshMan

07-30-2008, 02:38 AM

are you making sure without a shadow of a doubt that the path to the images is correct? If testing it locally, but the images are on your server, then you should put a direct path to the images.

instead of: image.jpg

try: http://www.yourserver.com/image.jpg

I really can't help much if I can't recreate the problem. I'm really at a loss on this one, I've tested it every which way I can think of but I can't get the same results you say you're having.

Sorry

questions

07-30-2008, 02:40 AM

I'm going to make this a new post about images rolling over.

THANKS!

questions

07-30-2008, 02:42 AM

are you making sure without a shadow of a doubt that the path to the images is correct? If testing it locally, but the images are on your server, then you should put a direct path to the images.

instead of: image.jpg

try: http://www.yourserver.com/image.jpg

I really can't help much if I can't recreate the problem. I'm really at a loss on this one, I've tested it every which way I can think of but I can't get the same results you say you're having.

Sorry

Thanks a lot. It doesn't make any sense. If the images are in the same folder... shouldn't they show up just by saying this:
background: url(colors-acuarele.jpg);

TheJoshMan

07-30-2008, 02:43 AM

Ok, so let me make sure I fully understand you.

All you really want is ONE image which consists of two images put together, you want half of it hidden until the mouse hovers over it, right?

If so, there is a MUCH simpler way to achieve this than using all of that jumbled up CSS you have.

questions

07-30-2008, 02:45 AM

I tried putting in the whole image path but it didn't make a difference.
http://www.freewebs.com/testpractic/test3.html
http://www.freewebs.com/testpractic/web3.css

TheJoshMan

07-30-2008, 03:01 AM

try using something like this:

<html>
<head>
<title>Blah</title>
<style type="text/css">
.rollover a:link, .rollover a:active, .rollover a:visited {
display: block;
width: 127px;
height:25px;
line-height: 25px;
color: #000;
text-decoration: none;
background: #fc0 url('http://www.m-pulsedesigns.com/Testing/rollover_image.png') no-repeat left top;
text-indent: 25px;
}
.rollover a:hover {
/* background: #c00; */
background-position: right top;
color: #fff;
}

</style>
</head>
<body>
<div class="rollover">
<a href="#"></a>
</div>
</body>
</html>