[CSS] Esercizio XHTML e CSS

da **cyrus** » 13/01/2019, 19:26

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?

[CSS] Esercizio XHTML e CSS

[CSS] Esercizio XHTML e CSS

Chi c’è in linea