Buonasera, ho alcuni dubbi su un esercizio di programmazione XHTML e CSS che mi chiede di realizzare una pagina web per il rendering di un documento d'identità. In particolare ho difficoltà nel dimensionare i componenti, poichè quando effettuo uno zoom al 25% della pagina web alcuni componenti cambiano disposizione, in particolare le tabelle.
Questo è il codice XHTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title> File </title>
<link rel="stylesheet" type="text/css" title="primo" href="primo1.css" />
</head>
<body>
<div class="primapagina">
<table>
<body>
<tr><td>Cognome </td> <td>....XXX....</td></tr>
<tr><td>Nome </td> <td>........Mister......</td></tr>
<tr><td>nato il </td> <td>........12/12/12.....</td></tr>
<tr><td>nato il </td> <td>........12/12/12.......</td></tr>
<tr><td>cittadinanza </td> <td>........sconosciuta...</td></tr>
<tr><td>professione </td> <td>........sconosciuta....</td></tr>
<tr><td>stato </td> <td>........celibe...</td></tr>
</body>
</table>
</div>
<div class="secondapagina">
<img src="icons/immagine.jpg" alt="Immagine" />
<table>
<body>
<tr><td>Firma del titolare</td> <td>....Sconosciuto....</td></tr>
<tr><td>..............................</td> <td>il.....................</td></tr>
</body>
</table>
<table class="Y">
<body>
<tr><td>IL SINDACO</td></tr>
<tr><td>........................</td></tr>
<tr><td><img id="xxxx" src="icons/Immagine4.gif" alt="Immagine4" /> </td></tr>
</body>
</table>
<div class="firma">
<table class="Z" >
<tr><td> impronta del dito indice</td></tr>
<tr><td></td></tr>
</table>
</div>
</table>
</div>
</body>
</html>
Questo è il CSS:
div.primapagina {
background-image: linear-gradient(to right,beige,pink,beige);
float:left;
width: 320px;
height:416px;
margin-left: 2em;
border: 3.5px solid black;
}
img{
padding-top:1.5em;
margin-left: 4em;
width: 140px;
height:140px;
}
div.barra3 {
float:left;
background-color: white;
width: 30px;
height:46px;
border: 3.5px solid black;
}
img#xxxx{
width: 80px;
height:80px;
margin-left: 0.75em;
}
div.secondapagina {
float:left;
background-image: linear-gradient(to right,beige,pink,beige);
width: 320px;
height:416px;
margin-left: 2em;
border: 3.5px solid black;
}
table{
border: 3.5px solid black;
width:50%;
float:left;
}
table.Z{
border: 1.5px solid black;
background-color: white;
float:left;
margin-top: 2em;
padding-bottom: 5em;
padding-right: 4em;
}
div.firma{
margin-top: 2em;
width: 110px;
}
table.Y{
float:right;
margin-top: 2em;
}
}
Come posso risolvere il problema?