allineare div al centro

[Kelly]

Salve,


Ho una tabella grande che occupa tutta la pagina web, questa tabella l'ho divisa in 2 celle (row)
Nella cella di destra ho inserito un div che vorrei centrare rispetto alla cella sempre di destra,
il problema è che il div si posiziona al centro di tutta la tabella.
Riporto il codice magari qualcuno sa spiegarmi perchè dal momento che la cella dovrebbe essere
il contenitore del div.

Il div che mi interessa centrare rispetto alla cella è 'divinsord', e nei css della cella tdtabellaart
ho inserito text-align:center;

grazie in anticipo

 <td class="tdtabellaart">
                   
                    <div id= 'divinsord' class='divinsord'>
     					<div id='descrart' class='descrart'></div>
         				<img id='imgart'src='' alt='01' class='imgart'/>  
        				<div id='objinslbl' class='objinslbl'>
        					<div id='divean' class='divean'></div>
        					<label for="imballo" class="imballo">Pezzi per imballo:</label><label for="txtlblimballo" id="txtlblimballo" class="txtlblimballo"></label><br>
        					<label for="minord" class="minord">Minimo Ord.:</label><label for="txtlblminord" id="txtlblminord" class="txtlblminord"></label><br>
        					<label for="qtdisp" class="qtdisp">Qt.Disp.:</label><label for="txtqtdisp" id="txtqtdisp" class="txtqtdisp"></label><br><br>
        					<label for="qt" class="qt">Qt:</label><input type="text" id="txtqt1" class="txtqt1" onkeyup="controllalunghezza(document.getElementById('txtqt1').value,6,3,11)" onkeydown="return Controllatesto(event,3,11);"/><br>
        					<label for="note" class="note">Note:</label><input type="text" id="txtnote" class="txtnote" onkeyup="controllalunghezza(document.getElementById('txtnote').value,15,4,11)" onkeydown="return Controllatesto(event,4,11);"/><br><br>
        					<div id='prezzoart' class='prezzoart'></div>
        					<input onclick= "InsArticolo()" type="button" name="insart" id="insart" value="INSERISCI" class="insart"/>
        					<input onclick= "chiudidettart(11)" type="button" id="annullainsart" value="ANNULLA" class="annullainsart"/>
        				</div>
    				</div>	
                    
                   <div id="info"></div> 
                </td>

 

[Soulfearor]

Perchè usi i "td"? non puoi usare i "div" che sono molto più comodi e versatili? inoltre non vedo nessun "tr"

Prova a vedere se questo esempio si avvicina alla tua richiesta

<div class="col1">io sono il contenuto di sinistra</div>
<div class="col2">
	<div class="elemento">io quello di destra centrato</div>
</div>

<style type="text/css">	
                .col1 {
		width:500px;
		display:block;
		float:left;
		border:1px solid #000;
	}
	
	.col2 {
		width:500px;
		display:block;
		float:left;
		border:1px solid #000;
	}
	
	.elemento {
		width:200px;
		margin:auto;
		border:1px solid #000;
		text-align:center;
	}
</style>

Ciao

 

[Kelly]

Ho scelto la tabella perchè pensavo fosse piu idonea.
Posso suddividere il div cosi come ho fatto con la tabella in allegato?
non vorrei poi trovarmi dei problemi che con la tabella non ho.
Perchè dovrei cambiare tutto.


grazie mille

Perchè usi i "td"? non puoi usare i "div" che sono molto più comodi e versatili? inoltre non vedo nessun "tr"

Prova a vedere se questo esempio si avvicina alla tua richiesta

<div class="col1">io sono il contenuto di sinistra</div>
<div class="col2">
	<div class="elemento">io quello di destra centrato</div>
</div>

width:500px;
display:block;
float:left;
border:1px solid #000;
}

.col2 {
width:500px;
display:block;
float:left;
border:1px solid #000;
}

.elemento {
width:200px;
margin:auto;
border:1px solid #000;
text-align:center;
}
</style>[/CODE]

Ciao

 

[Max 1]

La tabella vuole essere il layout della pagina o una presentazione di dati tabellari? c'è una grossa differenza tra le due cose!

 

[Soulfearor]

Dal mio punto di vista e da quello che ho imparato:
- le tabelle sono problematiche nell'ambito responsive
- i div sono più adattabili e modificabili perchè puoi assegnargli tutti gli attributi che vuoi
- le tabelle sono utili sono nelle email

Per quanto riguarda i problemi futuri devi valutare te se questo metodo può tornarti utile o meno, considerando anche il tempo che ci metti a fare le modifiche.
Io lavoro sempre così e mi trovo bene ma è soggettivo penso.
inoltre quel codice l'ho scritto in 5 minuti neanche e posso cambiare o modificare velocemente tutto il contenuto.

<div class="intestazione"> INTESTAZIONE </div>
<div class="col1">
	<div class="bl1sx"> FILTRO A</div>
    <div class="bl2sx"> ELENCO ARTICOLI </div>
    <div class="bl3sx"> TABELLA ARTICOLI MAGAZZINO </div>
</div>
<div class="col2">
    <div class="bl1dx"> FILTRO B </div>
    <div class="bl2dx"> ORDINE IN CORSO </div>
    <div class="bl3dx"> TABELLA ARTICOLI ORDINATI </div>
</div>
<div class="fine"> FINE </div>
<div style="clear:both;"></div>

<style type="text/css">
.intestazione {
	width:100%;
	display:block;
	float:left;
	text-align:center;
	border:1px solid #000;
}

.col1 {
	display:block;
	float:left;
	width:48%;
	border:1px solid #000;
}

.bl1sx {
	width:100%;
	float:left;
	display:block;
	padding:5px;
}

.bl2sx, .bl3sx {
	width:100%;
	float:left;
	display:block;
	padding:5px;
	text-align:center;
}

.col2 {
	display:block;
	float:right;
	width:48%;
	border:1px solid #000;
}

.bl1dx {
	width:100%;
	float:left;
	display:block;
	padding:5px;
}

.bl2dx, .bl3dx {
	width:100%;
	float:left;
	display:block;
	padding:5px;
	text-align:center;
}

.fine {
	width:100%;
	display:block;
	float:left;
	text-align:center;
	border:1px solid #000;
}
</style>

Se hai altre domande sarà lieto di risponderti, ciao

 

[Kelly]

ok grazie mille....ora provo anche il tuo codice e poi prenderò una decisione....

Nel frattempo ho capito perchè non mi si posiziona il divA al centro della cellaA.

....in quest'ultima visualizzo una tabella con degli articoli, se clicco in una delle
colonne visualizzo il famoso divA che inizialmente nascondo e che visualizzo se lo richiamo.
....e bene la tabella e il divA fanno a cazzotti perchè se tolgo la tabella degli articoli, il divA mi si posiziona
al centro.....forse posso aggiungere qualche proprietà ? al div?

Dal mio punto di vista e da quello che ho imparato:
- le tabelle sono problematiche nell'ambito responsive
- i div sono più adattabili e modificabili perchè puoi assegnargli tutti gli attributi che vuoi
- le tabelle sono utili sono nelle email

Per quanto riguarda i problemi futuri devi valutare te se questo metodo può tornarti utile o meno, considerando anche il tempo che ci metti a fare le modifiche.
Io lavoro sempre così e mi trovo bene ma è soggettivo penso.
inoltre quel codice l'ho scritto in 5 minuti neanche e posso cambiare o modificare velocemente tutto il contenuto.

<div class="intestazione"> INTESTAZIONE </div>
<div class="col1">
	<div class="bl1sx"> FILTRO A</div>
    <div class="bl2sx"> ELENCO ARTICOLI </div>
    <div class="bl3sx"> TABELLA ARTICOLI MAGAZZINO </div>
</div>
<div class="col2">
    <div class="bl1dx"> FILTRO B </div>
    <div class="bl2dx"> ORDINE IN CORSO </div>
    <div class="bl3dx"> TABELLA ARTICOLI ORDINATI </div>
</div>
<div class="fine"> FINE </div>
<div style="clear:both;"></div>

<style type="text/css">
.intestazione {
	width:100%;
	display:block;
	float:left;
	text-align:center;
	border:1px solid #000;
}

.col1 {
	display:block;
	float:left;
	width:48%;
	border:1px solid #000;
}

.bl1sx {
	width:100%;
	float:left;
	display:block;
	padding:5px;
}

.bl2sx, .bl3sx {
	width:100%;
	float:left;
	display:block;
	padding:5px;
	text-align:center;
}

.col2 {
	display:block;
	float:right;
	width:48%;
	border:1px solid #000;
}

.bl1dx {
	width:100%;
	float:left;
	display:block;
	padding:5px;
}

.bl2dx, .bl3dx {
	width:100%;
	float:left;
	display:block;
	padding:5px;
	text-align:center;
}

.fine {
	width:100%;
	display:block;
	float:left;
	text-align:center;
	border:1px solid #000;
}
</style>

Se hai altre domande sarà lieto di risponderti, ciao

 

[Max 1]

....da quello che ho imparato:....
- le tabelle sono utili sono nelle email

Ci sono delle regole! Ci sono delle regole per quanto riguarda la semantica e per ciò che bisogna usare nelle varie occasioni:

1. Non è assolutamente vero che le tabelle vanno bene solo nelle e-mail!
2. Le tabelle si debbono usare e sono state create esclusivamente per dati tabellari e per questo devono essere usate in qualsiasi occasione di tali dati.
3. I div sono box o elementi di blocco e vanno usati per fare i layout, o in qualsiasi momenti si voglia includere o posizionare contenuti o elementi che non siano dati tabellari.
4. I div non vanno usati per formare tabelle come le tabelle non vanno usate per formare layout

Per ogni uso e regola va seguito le indicazioni di w3cschool e SEO

 

[Soulfearor]

Naturalmente .. ho condiviso semplicemente un metodo, tenendo conto delle informazioni lette e della mia esperienza in quest'ambito .. è sempre il programmatore che deve scegliere il metodo più comodo e adatto.

 

[Kelly]

credo che Soulfearor preferisca i div alle tabelle dove possono andare bene più o meno entrambi,
non credo utilizzi i div per visualizzare dati ad esempio.....

cmq grazie a tutti

Ci sono delle regole! Ci sono delle regole per quanto riguarda la semantica e per ciò che bisogna usare nelle varie occasioni:

1. Non è assolutamente vero che le tabelle vanno bene solo nelle e-mail!
2. Le tabelle si debbono usare e sono state create esclusivamente per dati tabellari e per questo devono essere usate in qualsiasi occasione di tali dati.
3. I div sono box o elementi di blocco e vanno usati per fare i layout, o in qualsiasi momenti si voglia includere o posizionare contenuti o elementi che non siano dati tabellari.
4. I div non vanno usati per formare tabelle come le tabelle non vanno usate per formare layout

Per ogni uso e regola va seguito le indicazioni di w3cschool e SEO

 

[cory]

il tuo è un form quindi potresti / dovresti usare
form
fieldset
label