Salve a tutti, sto realizzando un sito con dei div cliccabili. Nella mia homepage è presente un div privo di bordo con all'interno altri 4 div con delle immagini come background, tramite i css ho fatto in modo (con l'istruzione hover) di cambiare l'immagine quando ci si clicca sopra per poi venire indirizzati in un'altra pagina del sito. Fin qui tutto ok, il primo div rimane fermo ma quando cerco di applicare il link tramite il tag <a href> anche agli altri div, questi si spostano, mi spiego, appena scrivo l'istruzione quando controllo sul browser noto che si sono spostati più in basso(e di tanto),l'hover e il link funzionano ma non riesco a riposizionare gli altri tre div, ho provato a inserire nei css dove ho messo l'hover, gli stessi parametri del div quando non è linkato ma nulla, cosa mi sfugge?ho seguito dei tutorial per farlo quindi non capisco dove stia il problema. Vi posto il codice:
codice html:
<body>
<div class="contenitore">
<a href="pagina.html">
<div class="pagina1"></div>
</a>
</div>
.pagina1{
position:relative;width:245px;height:670px;left:7%;top:2%; border: 2px solid black;
background-image:url(immagine.jpg);
background-repeat:no-repeat;
background-position:center center;
}
.pagina1 a {
color:#FFFFFF;
}
.pagina1:hover {
background-image:url(immaginechiara.jpg);
position:relative;width:245px;height:670px;left:7%;top:2%; border: 2px solid black;
background-repeat:no-repeat;
background-position:center center;
}
codice html:
<body>
<div class="contenitore">
<a href="pagina.html">
<div class="pagina1"></div>
</a>
</div>
.pagina1{
position:relative;width:245px;height:670px;left:7%;top:2%; border: 2px solid black;
background-image:url(immagine.jpg);
background-repeat:no-repeat;
background-position:center center;
}
.pagina1 a {
color:#FFFFFF;
}
.pagina1:hover {
background-image:url(immaginechiara.jpg);
position:relative;width:245px;height:670px;left:7%;top:2%; border: 2px solid black;
background-repeat:no-repeat;
background-position:center center;
}
Ultima modifica:
