Ciao Parov, è semplicemente costruita male la tabella. Se vai a specificare un'altezza per la cella dell'ultima riga (che deve essere eguale all'altezza della tabella meno la somma delle altezze delle altre righe) il problema scomparirà. Ma, a parte i limiti e le controindicazioni di un layout costruito con le tabelle, ci sono altre cose che non vanno. Innanzitutto i contenuti testuali passati attraverso le immagini e quindi inaccessibili, anche ai motori di ricerca. Restando con la tua tabella, che potrà poi facilmente essere sostituita con dei div, puoi ridurre a una sola le tre celle della prima riga (dopo aver creato un'immagine di sfondo con la barra grigia su sfondo nero) e inserire i link distanziandoli con un padding. Creare poi due celle affiancate sulla seconda riga, una con tutti i link, evitando una cella per ciascun link (questi ultimi possono essere inseriti testualmente, usando il solo pallino come immagine di sfondo) e l'altra con i contenuti, ottenendo un codice come questo con le nuove immagini
codice:
<!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=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
border:0;
}
body {
font-family: "Helvetica Neue Light", Helvetica, sans-serif;
color: #fff;
background-color: #000;
background-image: url(img/fondo.png);
text-align:center;
margin-top:20px;
}
#myTable {
width:800px;
border-collapse:collapse;
background-image: url(img/servizi/fondo_servizi_003.jpg); /* eliminare il testo dall'immagine di sfondo */
background-repeat: no-repeat;
margin:0 auto;
text-align:left;
}
#first {
height:56px;
background-image: url(barraGrigia.jpg); /* creare immagine di sfondo con la sola barra grigia su fondo nero, altezza 56px larghezza 800px */
background-repeat:no-repeat;
text-align:center;
vertical-align:middle;
}
#tdVmenu {
width:345px;
height:362px;
vertical-align:middle;
}
#tdContent {
width:455px;
height:362px;
vertical-align:middle;
}
a {
text-decoration:none;
}
#hMenu a{
color:#000;
font-size:20px;
padding-left:20px;
padding-right:20px;
}
#hMenu a:hover{
color:#fff; /* se si vuole un colore di rollover diverso, altrimenti eliminare */
}
#vMenu {
width: 345px;
}
#vMenu a {
display:block;
background-image: url(pallino.jpg); /* creare immagine col solo pallino e regolare il padding-left più in basso in base alle sue dimensioni, ho tenuto conto di un'immagine larga una ventina di pixel */
background-repeat: no-repeat;
background-position:center left;
margin-left:70px;
margin-bottom:3px;
padding-left:25px;
color:#fff;
font-size:16px;
}
#vMenu a:hover {
color:#ccc; /* se si vuole un colore di rollover diverso, altrimenti eliminare */
}
#divContent {
font-size:16px;
padding-left:10px;
padding-right:70px;
}
-->
</style>
</head>
<body>
<table id="myTable">
<tr>
<td id="first" colspan="2">
<div id="hMenu">
Home
Servizi
Contatti
</div>
</td>
</tr>
<tr>
<td id="tdVmenu">
<div id="vMenu">
STAMPA DIGITALE
STAMPA SERIGRAFICA
TAMPOGRAFIA
RICAVI
PREMIAZIONI SPORTIVE
STAMPA SUBLIMATICA
INSEGNE LUMINOSE
DECORAZIONI AUTOMEZZI
</div>
</td>
<td id="tdContent">
<div id="divContent">L'azienda offre vari servizi... bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</td>
</tr>
<tr>
<td height="90" colspan="2"></td>
</tr>
</table>
</body>
</html>
Rispondi quotando
