Ciao ilpluto72, anche con Firefox i link vanno a spasso, colpa di quei posizionamenti assoluti delle o nelle celle. Alcuni consigli per semplificarti la vita: ritaglia innanzitutto l'immagine di sfondo eliminando i margini laterali bianchi così che poi tu possa inserirla come sfondo di un contenitore di dimensioni precise e posizionarvi i tuoi contenuti sopra senza inserire ulteriori margini inutili; crea una nuova immagina con il riquadro stondato che deve fare da sfondo al link (cancella gli stessi riquadri nell'immagine principale coprendoli di bianco); assegna ai link, opportunamente impostati, il nuovo sfondo.
Le tabelle sono assolutamente da evitare per costruire un layout, se proprio le vuoi, questo potrebbe essere uno schema (ho tenuto conto di un'immagine di sfondo che ha dimensioni 827x568, la tua senza margini, e del riquadro stondato 127x46 salvato come bgLink.jpg che trovi nel codice)
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<title>Titolo</title>
<meta name="description" content="stampa su tessuti">
<meta name="keywords" content="stampa, tessuti">
<style type="text/css">
<!--
body {
text-align:center;
}
table {
border-collapse:collapse;
width:827px;
background-image:url(sfondo_index.jpg); /* immagine ritagliata, le dimensioni della tabella dovranno essere eguali alle sue */
background-repeat:no-repeat;
margin:0 auto;
}
td {
padding:0;
vertical-align:top;
}
#tdMenu {
width:190px;
height:568px;
}
#menu {
padding-top:160px; /* per abbassare i link all'altezza voluta */
padding-left:30px; /* per spostare i link verso destra, da regolare a piacimento */
}
#menu a{
display:block;
width:127px; /* la larghezza del link deve corrispondere a quella dell'immagine che le farà da sfondo */
height:46px; /* l'altezza del link deve corrispondere a quella dell'immagine che le farà da sfondo */
text-decoration:none;
font-family:Arial, Helvetica;
font-size:16px;
font-weight:bold;
color:#fff;
text-align:center;
line-height:46px; /* deve corrispondere all'altezza del link così il testo sarà centrato verticalmente */
margin-bottom:10px; /* per distanziare i link */
background-image:url(bgLink.jpg); /* riquadro blu stondato */
background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td id="tdMenu">
<div id="menu">
Home
Azienda
Lavorazioni
Dove Siamo
Contatti
</div>
</td>
<td width="637"></td>
</tr>
<tr>
<td colspan="2">qui quanto apparirà sotto l'immagine di sfondo</td>
</tr>
</table>
</body>
</html>
Rispondi quotando
