Salve a tutti è da un bel pò che non ci sentiamo, ho cercato in lungo e in largo ma non sono riuscito a trovare niente o non ho trovato quello che cercavo esplicato in modo chiaro e semplice. Vorrei trasformare il mio vecchio sito fisso in responsive, posto il codice html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta http-equiv="content-type" content="text/html" />
<link rel="stylesheet" href="type.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="contenitore">
<header>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#8298ce">
<tr>
<div id="logo">
<td rowspan="2" align="right" valign="bottom"><img src="/1024/images/scacco_lato_sx.jpg"></td>
<td rowspan="2" align="left" valign="bottom"><img src="/1024/images/logo.jpg"></td>
</div>
<div id="menu">
<td align="left">
<table align="left" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/1024/images/azienda1_CLICK.jpg" alt="AZIENDA" name="Azienda" id="azienda"></td>
</tr>
<tr>
<td><a href="/1024/prodotti.htm" target="_self" onMouseOver="MM_swapImage('Image58','','/1024/images/prodotti1_click.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="/1024/images/prodotti1.jpg" alt="PRODOTTI" name="Image58" id="Image58"></a></td>
</tr>
<tr>
<td><a href="/1024/contatti.htm" target="_self" onMouseOver="MM_swapImage('Image47','','/1024/images/contatti1_click.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="/1024/images/contatti1.jpg" alt="CONTATTI" id="Image47"></a></td>
</tr>
<tr>
<td><img src="/1024/images/area1.jpg" alt="AREA CLIENTI" name="Area" id="Area"></td>
</tr>
<tr>
<td><a href="/download.htm" target="_self" onMouseOver="MM_swapImage('Download','','/1024/images/download1_click.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="/1024/images/download1.jpg" alt="AREA DOWNLOAD" name="Download" id="Download"></a></td>
</tr>
<tr>
<td height="29" class="scrittaContenitori">CONTENITORI METALLICI</td>
</tr>
</table>
</td>
</div>
</tr>
<tr>
<td align="left" bgcolor="#FFFFFF" class="scrittaRifiuti" valign="top">PER RIFIUTI INDUSTRIALI E URBANI</td>
</tr>
</table>
</header>
</div>
</body>
Questo è il codice type.css
body {
padding:0;
margin:0;
}
img {
padding: 0;
margin: 0;
height: auto;
width: 100%;
}
#contenitore{
max-width:60em; /*960px / 16px = 60em */
margin:0 auto;
background:#fff;
}
header{
width: 100%;
height: 213px;
vertical-align: bottom;
background: #8298ce;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
#logo{
width: 44.8%; /*424px / 960px = 0.4416 */
float: left;
color: #8298ce;
vertical-align: bottom;
margin: 0px;
padding: 0px;
}
#menu{
width: 54.8%; /*526px / 960px = 0.5479 */
float: left;
color: #8298ce;
vertical-align: bottom;
margin: 0px;
padding: 0px;
}
Grazie a tutti per la collaborazione
Rispondi quotando
