Problem je u ćelijama u kojima se nalaze linkovi sa slikama, jer prilikom hovera dolazi do promene slike koja je veća od originala i nema dovoljno mesta u ćeliji tabele i tom prilikom tu istu ćeliju povećava i gura ostale ćelije sa ostalim linkovima. Jedno od rešenja je da povećaš ćelije tabele u kojima se nalaze linkovi sa slikama, tako da veće slike imaju dovoljno mesta. A možda bolje rešenje je da izbaciš tabele i koristiš div-ove koje ćeš pozicionirati pomoću CSS-a. Nešto na brzinu:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>M-portfolio</title>
<style type="text/css">
body {
background-color: #191919;
margin: 0;
padding: 0;
font-family:Georgia, "Times New Roman", Times, serif;
}
#page {
width:1024px;
height:768px;
background:url(img/m-portfolio.png) no-repeat #000;
position: relative;
}
#biografija span, #radovi span, #kontakt span {
display: none;
}
#biografija {
position: absolute;
top: 195px;
left: 190px;
width: 124px;
height: 198px;
background-image: url('img/biografija1.png');
background-repeat: no-repeat;
}
#biografija:hover {
background-image: url('img/biografija2.png');
}
#radovi {
position: absolute;
top: 195px;
left: 500px;
width: 87px;
height: 218px;
background-image: url('img/radovi1.png');
background-repeat: no-repeat;
}
#radovi:hover {
background-image: url('img/radovi2.png');
}
#kontakt {
position: absolute;
top: 195px;
left: 755px;
width: 115px;
height: 224px;
background-image: url('img/kontakt1.png');
background-repeat: no-repeat;
}
#kontakt:hover {
background-image: url('img/kontakt2.png');
}
</style>
</head>
<body>
<div id="page">
<a href="#" id="biografija"><span>Biografija</span></a>
<a href="radovi.html" id="radovi"><span>Radovi</span></a>
<a href="kontakt.html" id="kontakt"><span>Kontakt</span></a>
</div>
</body>
</html>
Naravno i ovo moje rešenje nije baš najbolje i ima greški, ovo je samo primer.
Pozdrav
Banned - Not available