Search code examples
cssimagepositionfixed

css images are not showing up

I can't figure out why images in bottom of the page are not visible. One is in the right corner and others are those in drop menu in middle. Here's the page: http://nettisivut.eu5.org/set2/glassy.php

html right corner:

<div id="yhteys">

<img class="bottom" src="/img/ota yhteyttäx.gif" width="109px" height="42px">
<img class="top" src="/img/ota yhteyttä.gif" width="109px" height="42px">

css:

#yhteys {
position:fixed;
bottom:0px;
left:4%;
height:42px;
width:11%;
z-index:9999;
}

#yhteys img {
position: fixed;
left: 4%;
bottom: -0px;
-webkit-transition: opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-o-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}

#yhteys img.top:hover {
opacity:0;
}
Solution

  • I experimented one case and found out that you're using the wrong extension src="/img/otayhteyttä.png" worked in one case. You should confirm the file extensions. Check it and report!

    EDITED

    change 

    <div id="yhteys">
    <img class="bottom" width="109px" height="42px" src="/img/otayhteyttax.gif"></img>
    <img class="top" width="109px" height="42px" src="/img/otayhteytta.gif"></img>

    to the following

    <div id="yhteys">
    <img class="bottom" width="109px" height="42px" src="img/otayhteyttax.gif"></img>
    <img class="top" width="109px" height="42px" src="img/otayhteytta.gif"></img>

    what you're doing wrong is you are trying to access /imgs directory that is nettisivut.eu5.org/imgs/ which doesn't exist or doesn't include your files. to access the imgs directory in the set2 directory, refer to imgs/. This is called a relative address and it is interpreted starting from the current directory, i.e set2. But the former one is absolute address and it is interpreted starting form the root of the website.

    I hope it is clearer now?