[HTML] Centrare un elemento (scusate la niubbaggine)

VegetaSSJ5 · 14-05-2005, 11:31

Salve a tutti, ho da poco cominciato a vedere l'html, ma con questo non voglio giustificare la niubbaggine e l'imbecillità della domanda...

).
Devo consegnare entro qualche giorno una pagina per un parziale all'università. Questa pagina deve essere solo in html e css (in 2 files distinti). Io volevo fare una semplicissima pagina dove il contenuto è lungo tipo 750 pixel ed è centrato. Ora arriva la domanda niubba..... Come si centra??? Da quello che ho potuto capire anche esaminando altri siti devo impostare nel css il margin ad auto, vi posto un po' di codice di esempio, questo è l'html:

Codice:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<title>Pagina di prova</title>
	<link rel="stylesheet" href="./style.css" />
</head>

<body>

<div id="content">

	<div id="header">
		Header
	</div>

	<div id="leftcolon">
		Colonna sinistra
	</div>

</div>

</body>

</html>

e questo è il css:

Codice:

body {
	color: #000000;
	background-color: #eeeeee;
	font-family: verdana, sans-serif;
}

#content {
	width: 760px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
}

#header {
	padding: 20px;
	background-color: #ffcc66;
	text-align: center;
	font-size: 22px;
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	border: 1px solid #000000;
}

#leftcolon {
	padding: 2px;
	background-color: #ffaa44;
	width: 180px;
	height: 450px;
	border-top: 5px solid #000000;
}

Con firefox in realtà funziona bene! Cioè l'elemento è centrato, ma con IE no!!! Con ie viene visualizzato a sinistra. Come posso risolvere?

14-05-2005, 11:34

body {
text-align:center;
}

#content {
text-align:left;
}

VegetaSSJ5 · 14-05-2005, 12:48

Quote:

Originariamente inviato da Sgurbat

body {
text-align:center;
}

#content {
text-align:left;
}

ho provato e funziona. ma perchè questa cosa dipende dall'allineamento del testo? non dovrebbe dipendere dall'opzione margin o qualcosa del genere?
e inoltre perchè firefox invece me lo centra automaticamente????

VegetaSSJ5 · 14-05-2005, 13:04

allora ho provato a fare delle prove con IE e ho scoperto che non accetta i commenti di una singola linea, cioè del tipo //COMMENTO
infatti mettendo l'opzione //text-align: center; (commentata) lui l'accetta lo stesso...

14-05-2005, 13:07

Quote:

Originariamente inviato da VegetaSSJ5

ho provato e funziona. ma perchè questa cosa dipende dall'allineamento del testo? non dovrebbe dipendere dall'opzione margin o qualcosa del genere?
e inoltre perchè firefox invece me lo centra automaticamente????

la sintassi corretta per centrare un elemento rispetto al suo contenitore è margin-right:auto; margin-left:auto;

tuttavia IE non è esente da BUG e interpretazioni particolari dei CSS (come pure gli altri browsers), quindi è necessario utilizzare questo piccolo trucco per centrare un elemento all'interno della pagina.

14-05-2005, 13:07

Quote:

Originariamente inviato da VegetaSSJ5

allora ho provato a fare delle prove con IE e ho scoperto che non accetta i commenti di una singola linea, cioè del tipo //COMMENTO
infatti mettendo l'opzione //text-align: center; (commentata) lui l'accetta lo stesso...

nei CSS la sintassi corretta per i commenti è solo /* commento */

VegetaSSJ5 · 14-05-2005, 13:09

inoltre analizzando il css di questo sito (che si può scaricare dal link download in alto a destra) non c'è nessuna opzione text-align nè nel body nè nel contenuto eppure il contenuto del sito è centrato anche con IE.

Quote:

Originariamente inviato da Sgurbat

nei CSS la sintassi corretta per i commenti è solo /* commento */

DOH!

14-05-2005, 13:20

errore mio.

La centratura con text-align:center rimane valida solo con IE5.

Nel caso del tuo codice ciò che crea problemi è il prologo XML
<?xml version="1.0" encoding="UTF-8"?>

toglilo e vedrai che funziona subito.

tale prologo, anche se corretto, è meglio non metterlo in quanto crea problemi con diversi browser

VegetaSSJ5 · 14-05-2005, 13:31

funziona!!! ma porca put....!!!!

siccome è richiesto che la pagina sia validata xhtml 1.1 alora ho scaricato le specifiche xhtml1.1 dal w3c e c'è scritto che l'intestazione di un documento xhtml1.1 deve essere appunto

Codice:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ora ho tolto l'intestazione xml e funziona, ma sarà possibile validare la pagina secondo quelle specifiche?? provo subito...

VegetaSSJ5 · 14-05-2005, 13:35

E' STATO POSSIBILE VALIDARE LA PAGINA!!! per farlo però ho dovuto aggiungere il seguente tag meta per impostare la codifica. senza questo tag il validatore dà errore.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

VegetaSSJ5 · 14-05-2005, 14:51

sapete come si fa a segnalare questo bug alla microsoft?

VICIUS · 14-05-2005, 15:54

Quote:

Originariamente inviato da VegetaSSJ5

sapete come si fa a segnalare questo bug alla microsoft?

Il bug lo hanno gia segnalato migliaia di persone negli scorsi anni, come decine di altri bug che riguardano i CSS, ma pare che microsoft non sia interessata a correggerli.

ciao

lombardp · 14-05-2005, 17:19

Quote:

Originariamente inviato da VegetaSSJ5

sapete come si fa a segnalare questo bug alla microsoft?

Vicius ha ragione, M$ si guarda bene dal conformarsi agli standard, preferisce far diventare standard quello che fa lei.

Il supporto di M$ a CSS-2 ha molti bachi e inconsistenze, e la stessa M$ ha dichiarato che con IE7.0 non ci sarà ancora il supporto completo.

14-05-2005, 17:56

Quote:

Originariamente inviato da lombardp

Vicius ha ragione, M$ si guarda bene dal conformarsi agli standard, preferisce far diventare standard quello che fa lei.

Il supporto di M$ a CSS-2 ha molti bachi e inconsistenze, e la stessa M$ ha dichiarato che con IE7.0 non ci sarà ancora il supporto completo.

esatto, purtroppo IE sotto questo profilo è molto carente, tuttavia nemmeno Opera e Firefox hanno la "coscienza pulita".

VegetaSSJ5 · 14-05-2005, 18:44

ma sono stupidi??
perchè non supportare uno standard??

14-05-2005, 20:08

Quote:

Originariamente inviato da VegetaSSJ5

ma sono stupidi??
perchè non supportare uno standard??

e vallo a sapere.

Figurati che ancora oggi IE6 porta con se un BUG di visualizzazione che risale ai tempi di NN4 di cui ne fu preso il codice.

VegetaSSJ5 · 14-05-2005, 20:15

Quote:

Originariamente inviato da Sgurbat

e vallo a sapere.

Figurati che ancora oggi IE6 porta con se un BUG di visualizzazione che risale ai tempi di NN4 di cui ne fu preso il codice.

scusa l'ignoranza ma cos'è nn4?

15-05-2005, 12:01

Netscape Navigator 4

lombardp · 15-05-2005, 12:19

Quote:

Originariamente inviato da VegetaSSJ5

ma sono stupidi??
perchè non supportare uno standard??

Sul vocabolario in uso alla M$, la definizione della parola "standard" è "come implementato su un prodotto M$". E da loro punto di vista hanno anche ragione: con una fetta di mercato superiore al 90%, M$=standard.

15-05-2005, 18:53

Quote:

Originariamente inviato da lombardp

Sul vocabolario in uso alla M$, la definizione della parola "standard" è "come implementato su un prodotto M$". E da loro punto di vista hanno anche ragione: con una fetta di mercato superiore al 90%, M$=standard.

se vogliamo parlare in termini statistici allora non è uno "standard" quello di MS ma una "moda"

14-05-2005, 11:31	#1
VegetaSSJ5 Senior Member Iscritto dal: Sep 2002 Città: Celano (AQ) Segno_Zodiacale: Leone Ascendente: Cammello Segni_Particolari: Quello Messaggi: 9571	[HTML] Centrare un elemento (scusate la niubbaggine) Salve a tutti, ho da poco cominciato a vedere l'html, ma con questo non voglio giustificare la niubbaggine e l'imbecillità della domanda...). Devo consegnare entro qualche giorno una pagina per un parziale all'università. Questa pagina deve essere solo in html e css (in 2 files distinti). Io volevo fare una semplicissima pagina dove il contenuto è lungo tipo 750 pixel ed è centrato. Ora arriva la domanda niubba..... Come si centra??? Da quello che ho potuto capire anche esaminando altri siti devo impostare nel css il margin ad auto, vi posto un po' di codice di esempio, questo è l'html: Codice: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Pagina di prova</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <div id="content"> <div id="header"> Header </div> <div id="leftcolon"> Colonna sinistra </div> </div> </body> </html> e questo è il css: Codice: body { color: #000000; background-color: #eeeeee; font-family: verdana, sans-serif; } #content { width: 760px; margin-top: 10px; margin-left: auto; margin-right: auto; margin-bottom: auto; } #header { padding: 20px; background-color: #ffcc66; text-align: center; font-size: 22px; font-style: italic; font-variant: small-caps; font-weight: bold; border: 1px solid #000000; } #leftcolon { padding: 2px; background-color: #ffaa44; width: 180px; height: 450px; border-top: 5px solid #000000; } Con firefox in realtà funziona bene! Cioè l'elemento è centrato, ma con IE no!!! Con ie viene visualizzato a sinistra. Come posso risolvere?

14-05-2005, 11:34	#2
anonimizzato Messaggi: n/a	body { text-align:center; } #content { text-align:left; } Ultima modifica di anonimizzato : 14-05-2005 alle 11:36.

14-05-2005, 13:31	#9
VegetaSSJ5 Senior Member Iscritto dal: Sep 2002 Città: Celano (AQ) Segno_Zodiacale: Leone Ascendente: Cammello Segni_Particolari: Quello Messaggi: 9571	funziona!!! ma porca put....!!!! siccome è richiesto che la pagina sia validata xhtml 1.1 alora ho scaricato le specifiche xhtml1.1 dal w3c e c'è scritto che l'intestazione di un documento xhtml1.1 deve essere appunto Codice: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ora ho tolto l'intestazione xml e funziona, ma sarà possibile validare la pagina secondo quelle specifiche?? provo subito...

14-05-2005, 13:04	#4
VegetaSSJ5 Senior Member Iscritto dal: Sep 2002 Città: Celano (AQ) Segno_Zodiacale: Leone Ascendente: Cammello Segni_Particolari: Quello Messaggi: 9571	allora ho provato a fare delle prove con IE e ho scoperto che non accetta i commenti di una singola linea, cioè del tipo //COMMENTO infatti mettendo l'opzione //text-align: center; (commentata) lui l'accetta lo stesso...

14-05-2005, 13:20	#8
anonimizzato Messaggi: n/a	errore mio. La centratura con text-align:center rimane valida solo con IE5. Nel caso del tuo codice ciò che crea problemi è il prologo XML <?xml version="1.0" encoding="UTF-8"?> toglilo e vedrai che funziona subito. tale prologo, anche se corretto, è meglio non metterlo in quanto crea problemi con diversi browser

14-05-2005, 13:35	#10
VegetaSSJ5 Senior Member Iscritto dal: Sep 2002 Città: Celano (AQ) Segno_Zodiacale: Leone Ascendente: Cammello Segni_Particolari: Quello Messaggi: 9571	E' STATO POSSIBILE VALIDARE LA PAGINA!!! per farlo però ho dovuto aggiungere il seguente tag meta per impostare la codifica. senza questo tag il validatore dà errore. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

14-05-2005, 14:51	#11
VegetaSSJ5 Senior Member Iscritto dal: Sep 2002 Città: Celano (AQ) Segno_Zodiacale: Leone Ascendente: Cammello Segni_Particolari: Quello Messaggi: 9571	sapete come si fa a segnalare questo bug alla microsoft?

14-05-2005, 18:44	#15
VegetaSSJ5 Senior Member Iscritto dal: Sep 2002 Città: Celano (AQ) Segno_Zodiacale: Leone Ascendente: Cammello Segni_Particolari: Quello Messaggi: 9571	ma sono stupidi?? perchè non supportare uno standard??

15-05-2005, 12:01	#18
anonimizzato Messaggi: n/a	Netscape Navigator 4

Strumenti
Mostra una versione stampabile Invia questa pagina per email