[Table to Div]: l'equivalente di questa tabella con i Div

**cipcip** · 17-12-2005, 19:35

ciao,
devo trasformare la seqente tabella

codice:

	<table border="0" cellpadding="5" cellspacing="0" width="100%">
		<tr>
			<td>cella che si allarga</td>
			<td width="50">cella fissa</td>
		</tr>
	</table>

in una cosa equivalente uilizzando pero solo il tag div,
questa tabella in praticaha una cella sinistra che si allarga a e restringe a seconda del resize della pagina
mentre ha una cella di destra che è fissa

grazie

Robert

**floyd46** · 17-12-2005, 20:30

ciao
se provassi a studiare 1 pò i CSS, no è?
Floyd

**cipcip** · 18-12-2005, 02:21

i css li ho studiato e non son oriuscito a trovare una soluzione valida compatibile con tutti i browser

**cipcip** · 18-12-2005, 02:36

se tu sei cosi bravo perche' non mi aiuti come farei io al tuo posto per te

non ci vuole uno scienziato per i css io ho provato i vari tipi di display,float,width,min e maxwidth ma non esce niente di lontanamente vicino a quello che mi serve.

Chi sa darmi un suggerimento lo ringrazio in anticipo

grazie

**awd** · 18-12-2005, 15:53

così a mente direi un div flottato a destra largo 50px e un semplice div senza larghezza definita che si pone alla sua sinistra! ricorda che il div flottato va sempre prima nel codice!

**cipcip** · 19-12-2005, 00:39

il problema con i float e che il div di destra quando l finestra si ridimensiona finisce sotto la colonna di centro,
qualcun osa dirmi come si puo fare ad evitare cio',in moto che i div anche al ridimesioanmento rimangan oallineati come avvien nelle tabelle?

codice:

<html>
<head>
<title>prova</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">

div.container{width:100%}
div.navigation{float: left;width: 170px;}
div.extra{float: right; width:170px;}
div.content{margin: 0 170px; border:1px solid #ccc;}

</style>

</head>
<body>
<div class="container">
    <div class="navigation" style="background-color: #FFFF00">
         sinistra
    </div>
    
    <div class="extra" style="background-color: #000080">
         centro
    </div>
    
    <div class="content" style="background-color: #00FF00">
        destra
    </div>
</div>

</body>
</html>

**awd** · 19-12-2005, 17:01

non riscontro il problema che segnali! (a parte che il testo "centro" devi metterlo sul content e "destra" sull'extra)
Inoltre per i div strutturali (unici nella pagina) è meglio definirli con un ID.
se hai difficoltà ti consiglio una lettura http://www.html.it/layout_css/layout_css_23.htm

**cipcip** · 19-12-2005, 17:19

si ho invertito i nomi ma il problema c'e e come infatti se si osserva l'immagine che ho allegato a questa risposta
si vede come sia in fireFox che in ie quando la finestra viene rimpicciolita lateralmente le "colonne" si invertono e non deve accadere quello che a me serve è un effetto tabella cioe appunto come accade nella tabella le colonne non vanno a scombinarsi al resize,
ho provato varie soluzioni tra cui l'utlizzo di min-width e l'equivalente in ie ma non cambia nulla semblicemente la cella di destra anziche andare sotto copre quella di centro una volta raggiunto la min-width

come si fa?

Il tutorial lo conosco gia, ma non aggiunge niente di nuovo per questo problema infatti andando a testare il file di esempio anche li i contenuti si sovrappongono

**awd** · 19-12-2005, 23:31

va beh, a quel livello tutto i layout a larghezza variabile più o meno si sputtanano!
Cmq credo sia un problema di contenimento del float. Se non sai come si fa leggi qui http://pro.html.it/articoli/id_607/i...pag_2/pag.html

Discussione: [Table to Div]: l'equivalente di questa tabella con i Div

Strumenti discussione

Ricerca discussione

Visualizza

[Table to Div]: l'equivalente di questa tabella con i Div

Re: [Table to Div]: l'equivalente di questa tabella con i Div

Permessi di invio