PDA

View Full Version : [HTML] Centrare un elemento (scusate la niubbaggine)

VegetaSSJ5
14-05-2005, 10: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:<?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: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?
anonimizzato
14-05-2005, 10:34
body {
text-align:center;
}

#content {
text-align:left;
}
VegetaSSJ5
14-05-2005, 11:48
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, 12: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...
anonimizzato
14-05-2005, 12:07
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.
anonimizzato
14-05-2005, 12:07
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, 12:09
inoltre analizzando il css di questo sito (http://www.oswd.org/viewdesign.phtml?id=1965&referer=%2Fsearch.php%3Fsearchstring%3Dbusiness%2Bdesign%26tab%3Ddescription) (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.

nei CSS la sintassi corretta per i commenti è solo /* commento */
DOH! :doh:
anonimizzato
14-05-2005, 12: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, 12:31
funziona!!! ma porca put....!!!! :mad:
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<?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, 12: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, 13:51
sapete come si fa a segnalare questo bug alla microsoft?
VICIUS
14-05-2005, 14:54
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, 16:19
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.
anonimizzato
14-05-2005, 16:56
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, 17:44
ma sono stupidi??
perchè non supportare uno standard??
anonimizzato
14-05-2005, 19:08
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.

:rolleyes:
VegetaSSJ5
14-05-2005, 19:15
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.

:rolleyes:
scusa l'ignoranza ma cos'è nn4?
anonimizzato
15-05-2005, 11:01
Netscape Navigator 4
lombardp
15-05-2005, 11:19
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.
anonimizzato
15-05-2005, 17:53
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" :rolleyes:
VICIUS
15-05-2005, 18:40
ma sono stupidi??
perchè non supportare uno standard??
La cosa piu triste è che la Microsoft è una delle collaboratrici del W3C. Quindi ha contribuito ha creare lo standard.

ciao ;)
VegetaSSJ5
15-05-2005, 19:31
La cosa piu triste è che la Microsoft è una delle collaboratrici del W3C. Quindi ha contribuito ha creare lo standard.

ciao ;)
:rotfl:
mazzo
16-05-2005, 09:27
Da quando uso firefox il codice html risponde come voglio, però perdo più tempo a adattarlo a quella schifezza di explorer:rolleyes:
VegetaSSJ5
16-05-2005, 20:38
ragazzi utilizzo questo thread per fare una domanda. sto facendo una pagina html+css. il fatto è che viene visualizzata in maniera abbastanza diversa da firefox e da internet explorer. le pagine sono queste:
http://img66.echo.cx/img66/2143/paginafirefox0rf.th.jpg (http://img66.echo.cx/my.php?image=paginafirefox0rf.jpg) e http://img66.echo.cx/img66/2504/paginaie2mj.th.jpg (http://img66.echo.cx/my.php?image=paginaie2mj.jpg)
allora le discordanze che ci sono sono queste:

nella colonna sinistra la scritta ingredienti viene visualizzata:
- centrata in firefox (GIUSTO secondo i css);
- allineata a sinistra in IE (SBAGLIATO); --> PROBLEMA RISOLTO, errore nell'html <--

nella colonna sinistra la scritta Curiosità viene visualizzata:
- appena sotto la tabella in firefox (SBAGLIATO);
- 50 pixel sotto la tabella in IE (GIUSTO secondo i css);

nel riquadro in alto a destra (a fianco ad immagine lasagna) le informazioni vengono visualizzate:
- allineate a destra in firefox (GIUSTO secondo i css);
- a fianco dell'immagine lasagna (SBAGLIATO).

Le discordanze sono queste, ma sono decisamente troppe per una paginetta stupida. Qualcuno mi sa dire perchè è così ed eventualmente come sistemare le cose?
Questo è il codice html<!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="it">

<head>
<title>Pagina di prova</title>
<meta name="author" content="VegetaSSJ5" />
<meta name="description" content="Pagina XHTML per la prova parziale di SID" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>

<body>

<div id="content">

<div id="header">
Lasagna allo scoglio
</div>

<div id="corpo">
<div id="leftcolon">
<p id="ingrhead">Ingredienti</p>
<table id="ingr">
<tr id="ingrrow"><td id="ingrleft">Pasta fresca</td><td id="ingrright">200gr</td></tr>
<tr id="ingrrow"><td id="ingrleft">Pomodori pelati</td><td id="ingrright">800gr</td></tr>
<tr id="ingrrow"><td id="ingrleft">Piselli</td><td id="ingrright">250 gr</td></tr>
<tr id="ingrrow"><td id="ingrleft">Gamberi sgusciati</td><td id="ingrright">200 gr</td></tr>
<tr id="ingrrow"><td id="ingrleft">Seppioline</td><td id="ingrright">200 gr</td></tr>
<tr id="ingrrow"><td id="ingrleft">Salmone fresco</td><td id="ingrright">200gr</td></tr>
<tr id="ingrrow"><td id="ingrleft">Aglio</td><td id="ingrright">2 spicchi</td></tr>
<tr id="ingrrow"><td id="ingrleft">Peperoncino</td><td id="ingrtight">1</td></tr>
<tr id="ingrrow"><td id="ingrleft">Pan grattato</td><td id="ingrright">1 cucchiaio</td></tr>
<tr id="ingrrow"><td id="ingrleft">Prezzemolo</td><td id="ingrright">1 pizzico</td></tr>
<tr id="ingrrow"><td id="ingrleft">Sale</td><td id="ingrright">q.b.</td></tr>
<tr id="ingrrow"><td id="ingrleft">Olio extravergine d'oliva</td><td id="ingrright">3-4 cucchiai</td></tr>
</table>

<p id="curiosita">Curiosit&agrave;</h1>
</div>

<div id="rightel">
<div id="top">
<div id="imgl"><img src="./lasagna.jpg" alt="IMMAGINE LASAGNA" title="Lasagna" height="180" width="180" /></div>
<table id="info">
<tr id="inforow"><td id="infoleft">Per:</td><td id="inforight">4 persone</td></tr>
<tr id="inforow"><td id="infoleft">Sostanzioso</td></tr>
<tr id="inforow"><td id="infoleft">Categoria:</td><td id="inforight">primi</td></tr>
<tr id="inforow"><td id="infoleft">Costo:</td><td id="inforight">elevato</td></tr>
<tr id="inforow"><td id="infoleft">Difficolt&agrave;:</td><td id="inforight">media</td></tr>
<tr id="inforow"><td id="infoleft">Tempo di preparazione:</td><td id="inforight">65'</td></tr>
</table>
</div>

<div id="bottom">
<p id="preptitle">Preparazione</p>
<p id="preptext">Pulite, lavate e tagliate a pezzetti il pesce. Sbucciate l'aglio, tagliatelo, mettetelo con un po' di olio e peperoncino in una padella a dorare. Unite quindi le seppioline, laciate cuocere per 10 minuti mescolando con un cucchiaio di legno. Unite il pomodoro e continuate la cottura. In una teglia formate uno strato di sugo alla base, mettete sopra una sfoglia di pasta, continuate con il sugo, un'altra sfoglia, sino ad arrivare a fine ingredienti. Distribuite sulla superficie della lasagna uno strato di pan grattato. Scaldate il forno e cuocete il tutto a 200&deg;C.</p>
</div>
</div>

</div>

</body>

</html>E questo è il file cssbody {
color: #000;
background-color: #eee;
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: #fa4;
text-align: center;
font-size: 26px;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
border: 1px solid #000;
}

#corpo {
margin-top: 5px;
}

#leftcolon {
float: left;
padding: 2px;
background-color: #fc6;
width: 180px;
height: 455px;
border: 1px solid #000;
}

#rightel {
float: right;
height: 455px;
width: 568px;
}

#top {
border: 1px solid #000;
height: 180px;
width: 564px;
}

#imgl {
float: left;
}

#info {
margin-left: 161px;
}

#inforow td {
padding-top: 5px;
}

#infoleft {
width: 125px;
font-weight: bold;
text-align: right;
}

#inforight {
font-style: italic;
padding-left: 5px;
}

#bottom {
margin-top: 1px;
width: 558px;
height: 270px;
border: 1px solid #000;
padding: 3px;
}

#ingr {
float: left;
font-size: 12px;
}

#ingrhead {
text-align: center;
font-weight: bold;
font-size: 13px;
}

#ingrleft {
width: 100px;
}

#preptitle {
font-size: 16px;
font-weight: bold;
color: #00f;
}

#preptext {
text-align: justify;
}

#curiosita {
margin-top: 50px;
}