Hello
I also have a problem with links. Am only learning CSS. I have several divs
on my page and the links of the third and fourth (called "valikko" and
"paapalsta" ) only work if the fifth one (bottom picture) is positioned very
far down from it, something like 400 pixels. For the moment it's at the
distance I want it to be. The link in the div "paapalsta" (the words
"sivujen tekijän") curiously begins to work if I position div "bottom" very
far down.
What could be the problem? It didn't help to add a document type.
http://www.geocities.com/fennomaani
There's nothing behind the links for the moment. I have to finish the first
page before working on others. I'll paste my css here-below.
Thanks!
P.
/* basic elements */
body {
font: 10pt/10pt courier new;
color: #725712;
background: #ffffff url(tausta.jpg) repeat-y top center;
margin: 0px;
}
p {
font: 10pt/10pt courier new;
color: #725712;
margin-top: 10px;
margin-left: 15px;
margin-bottom: 5px;
text-align: justify;
}
h1 {
font: normal 18pt courier new;
font-weight: bold;
letter-spacing: 0px;
margin-top: 10px;
margin-left: 15px;
margin-bottom: 0px;
color: #725712;
text-align: center;
}
h2 {
font: normal 10pt courier new;
font-weight: bold;
letter-spacing: 0px;
margin-top: 10px;
margin-left: 15px;
margin-bottom: 0px;
color: #725712;
text-align: left;
}
ul {
list-style-type: none;
margin-top: 10px;
margin-left: 15px;
}
a:link {
font: 12pt/12pt courier new;
font-weight: bold;
text-decoration: none;
color: #725712;
}
a:visited {
font: 12pt/12pt courier new;
font-weight: bold;
text-decoration: none;
color: #ff9f2c;
}
a:hover, a:active {
font: 12pt/12pt courier new;
font-weight: bold;
text-decoration: underline;
color: #725712;
border: none;
}
div#valikko a span {
display: none;
}
div#valikko a:hover span {
display: block;
position: absolute;
width: 215px;
top: 185px;
left: 0px;
margin-left: 15px;
z-index: 100;
font: italic 10pt/10pt courier new;
text-decoration: none;
color: #725712;
background: transparent;
}
div#kielet a span {
display: none;
}
div#kielet a:hover span {
display: block;
position: absolute;
width: 215px;
top: 205px;
left: 0px;
margin-left: 15px;
z-index: 100;
font: italic 10pt/10pt courier new;
text-decoration: none;
color: #725712;
background: transparent;
}
div#paapalsta a:link {
font: 10pt/10pt courier new;
font-weight: bold;
text-decoration: none;
color: #725712;
}
div#paapalsta a:visited {
font: 10pt/10pt courier new;
font-weight: bold;
text-decoration: none;
color: #ff9f2c;
}
div#paapalsta a:hover, a:active {
font: 10pt/10pt courier new;
font-weight: bold;
text-decoration: underline;
color: #725712;
border: none;
}
div#alareuna p {
text-align: center;
}
/* specific divs */
#top {
background: url(puunrungot. jpg) no-repeat top center;
position: absolute;
top: 0px;
left: 136px;
width: 700px;
height: 255px;
margin-top: 0px;
margin-bottom: 0px;
}
#kielet {
background: #ff9f2c;
position: absolute;
top: 255px;
left: 136px;
width: 700px;
}
#valikko {
width: 230px;
position: absolute;
top: 270px;
left: 136px;
margin-top: 8px;
background: #CDCDCD;
}
#paapalsta {
width: 455px;
position: absolute;
top: 270px;
left: 366px;
margin-top: 10px;
}
#bottom {
background: url(puunrungot2 .jpg) no-repeat bottom center;
position: absolute;
left: 136px;
top: 440px;
width: 700px;
height: 900px;
}
#alareuna {
background: #ff9f2c;
position: absolute;
top: 1340px;
left: 136px;
width: 700px;
}