allineare div al centro

Kelly

Utente Attivo
5 Set 2008
112
1
18
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

Codice:
 <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

Utente Attivo
16 Set 2014
53
0
6
Torino
www.serenagraficatorino.it
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
Codice:
<div class="col1">io sono il contenuto di sinistra</div>
<div class="col2">
	<div class="elemento">io quello di destra centrato</div>
</div>

Codice:
<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

Utente Attivo
5 Set 2008
112
1
18
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
Codice:
<div class="col1">io sono il contenuto di sinistra</div>
<div class="col2">
	<div class="elemento">io quello di destra centrato</div>
</div>
SCHEMATABELLA.jpg 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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.406
339
83
La tabella vuole essere il layout della pagina o una presentazione di dati tabellari? c'è una grossa differenza tra le due cose!
 

Soulfearor

Utente Attivo
16 Set 2014
53
0
6
Torino
www.serenagraficatorino.it
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.

Codice:
<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>

Codice:
<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

Utente Attivo
5 Set 2008
112
1
18
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.

Codice:
<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>

Codice:
<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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.406
339
83
....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
 

Kelly

Utente Attivo
5 Set 2008
112
1
18
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
M allineare due box(div) affiancati HTML e CSS 19
K allineare controlli in un div HTML e CSS 3
G Allineare Div in orrizzontale con cilo for PHP PHP 1
I Allineare due righe di testo in photoshop Photoshop 2
F Allineare immagine al centro HTML e CSS 6
S Come allineare tre immagini in linea al centro HTML e CSS 1
A Allineare il testo dentro una select composta da più campi pesi da un db PHP 5
I come allineare un icona HTML e CSS 6
P Allineare data a sx dello schermo e titolo al centro HTML e CSS 16
A Allineare due colonne in una tabella HTML PHP 6
L Allineare 2 tools su sito web HTML e CSS 0
N Allineare numeri a destra. Classic ASP 2
B allineare le voci del menu con stile (Css) HTML e CSS 9
G Come allineare in alto una tabella? HTML e CSS 5
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3

Discussioni simili