- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Tabella e colonne solo con i div
-
Tabella e colonne solo con i div
amici,, sto riprogrammando la parte html del mio sito, in modo tale da poterla gestire piu facilmente tramite css..
quindi ho intenzione di scrivere la struttura html basilare tramite DIV volendo ottenere uno schema come questo
h t t p://img189.imageshack.us/img189/7364/schemaf.jpg
avevo provato cosi :
<div>
<div>TOP SN</div>
<div>TOP DS</div>
<div>SIN</div>
<div>DS</div>
</div>con le opportune classi e sintassi CSS, usando float, ma non riesco a posizionare le colonne a destra in TOP, ma si spostano giu all aumentare della lunghezza delle colonne di sinistra ...
grazie amici, grazie in anticipo
-
Una cosa cosi può andare bene?
Non l'ho testata perfettamente.[PHP]
<html>
<head>
<title>test</title>
<script type="text/javascript">
</script>
<style type="text/css">
html,body
{
margin:20px 0px 0px 0px;
padding:0px;
text-align:center;
}
#contenitore
{
height:700px;
width:800px;
margin:0px auto;
padding:0px;
}
#topsin
{
background:#AAD4FF;
width:300px;
height:200px;
float:left;
margin:0px;
padding:0px;
}
#topdes
{
background:#FF7FD4;
width:500px;
height:200px;
float:left;
margin:0px;
padding:0px;
}
#colonnasin
{
background:#AA55FF;
width:300px;
height:500px;
float:left;
margin:0px;
padding:0px;
}
#colonnades
{
background:#D4D4FF;
width:500px;
height:500px;
float:left;
margin:0px;
padding:0px;
}
#footer
{
background:#FFFF7F;
width:800px;
height:50px;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div id="contenitore">
<div id="topsin" class="voce">TOPSIN</div>
<div id="topdes" class="voce">TOPDES</div>
<div style="clear:both" />
<div id="colonnasin" class="voce">COLONNASIN</div>
<div id="colonnades" class="voce">COLONNADES</div>
<div style="clear:both" />
<div id="footer">FOOTER</div>
</div>
</body>
</html>
[/PHP]
-
La soluzione proposta da Marco è sicuramente valida ma io farei piuttosto due colonne all'interno delle quali inserisci la parte superiore e inferiore, cioè qualcosa tipo:
[html]<div id="sx">
<div id="alto-sx" class="alto"></div>
<div id="basso-sx" class="basso"></div>
</div>
<div id="dx">
<div id="alto-dx" class="alto"></div>
<div id="basso-dx" class="basso"></div>
</div>[/html]con un CSS tipo
[html]#sx {
float: left;
width: 300px;
}
#dx {
float: left;
width: 500px;
}
.alto {
height: 200px;
}
.basso {
height: 500px;
}[/html]così hai il vantaggio di raggruppare gli elementi delle colonne se dovessi mai aggiungere altri elementi (li aggiungi semplicemente nella colonna) e non ti devi ricordare di cambiare le larghezze di tutti se decidi di cambiare il layout
-
Vero.
Dipende quindi dalle esigenze che ha...
Una birra per uno fa male a nessuno ah ah...
