Ciao a tutti,
mi stavo esercitando a creare dei layout senza utilizzare le tabelle.
Non riesco, però, ad ottenere un risultato che con i tag <tr> e <td> mi viene ad occhi chiusi. Sicuramente un modo c'è....
Posto prima tutto il codice di un esempio, poi vi spiego il problema:
STILE.CSS
PAGINA.HTMLCodice PHP:body {
background-color: #CCCCCC; text-align: center; margin-top: 5px}
#testata {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
background-color: #CCCCFF;
width: 80%;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: #FFFFFF;
border-style: dashed;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
text-align: left;
vertical-align: middle}
#corpo {
position: relative; top: 3px; width: 80%}
#elenco {
background-color: #FFCC99;
float: left;
width: 35%;
border: #FFFFFF;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
height: auto;
padding-top: 5px;
padding-bottom: 5px}
.voci {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #993300;
background-color: #FFFFCC;
text-align: left;
width: 95%;
border: 1px #FFFFFF solid;
margin-top: 3px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px}
#pagina {
background-color: #FFFFFF;
float: right;
width: 64%;
border: #000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-top: 5px;
padding-bottom: 5px}
#chiusura {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #CCCCFF;
text-align: right;
margin-top: 5px;
margin-bottom: 5px;
border: #FFFFFF;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
position: relative;
top: 3px;
width: 80%;
padding-right: 5px}
In pratica avrei bisogno che il box "elenco" diventi automaticamente della stessa altezza del box "pagina", indipendentemente da quante classi (link) metto al suo interno. Faccio presente che entrambi sono contenuti dentro al box "corpo".Codice PHP:<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="stile.css" type="text/css">
</head>
<body>
<div id="testata">
Testata del layout
</div>
<div id="corpo">
<div id="elenco">
<span class="voci">link 1</span>
<span class="voci">link 2</span>
<span class="voci">link 3</span>
<span class="voci">link 4</span>
</div>
<div id="pagina">Testo
testo
testo
testo
testo
testo
testo
testo
testo
testo
testo
</div>
</div>
<div id="chiusura">
chiusura del layout.
</div>
</body>
</html>
Come ho fatto io è come se avessi 2 tabelle annidate, per cui l'altezza di una è indipendente dall'altra.
Vorrei invece simulare, con i CSS di livello 2, due TD con due DIV.
Il codice è tanto, ma se lo ricopiate su un'editor è veramente banale.
Grazie.
Rispondi quotando
