Ennesimo Problema di Centratura

[MM88]

Ciao ragazzi, volevo creare un semplice sito in CSS che avesse un body di 760px centrato.

Nel foglio di stile ho inserito:


body {
margin: 0px;
height: 100%;
}

#centrato {
text-align: Center;
background-color: #EEEEEE;
color: #192939;
position: Absolute;
top: 50%;
left: 50%;
font-size: 12px;
font-family: Verdana;
font-weight: Bold;
width: 760px;
border: Solid 1px #CCCCCC;
margin:-100px 0 0 -175px;

}


Ho due problemi:

1 - se metto "top: 0px", il div mi schizza in alto superando il margine

2 - appena inserisco un contenuto (come una img) il box appare spostato sulla destra e non centrato.


Vorrei ottenere semplicemente un div centrato, largo 760 px che parte dal margine superiore.



grazie.

[Myaku]

http://forum.html.it/forum/showthrea...entrare+layout

Cyà

[MM88]

Grazie per il link.

Ora tutto è perfettamente centrato e parte dall'alto.

L'unica cosa che non capisco è la presenza della barra orizzontale, come se ci fosse un contenuto che supera le dimensioni della finestra.

Il CSS ora è:

html, body {
  text-align: center;    /* per far contento IE6- */
  font-size: 100%;
  width: 100%;           /* altrimenti il margin sotto non ha riferimenti */
}

#tutto {
  margin: 0 auto;      /* centrare nei browser standard */
  text-align: center;        /* per correggere il center del body */
   background-color: #EEEEEE;
   color: #192939;
   font-size: 12px;
   font-family: Verdana;
   font-weight: Bold;
   width: 760px;
   border: Solid 1px #CCCCCC;
}

grazie

[MM88]

Se elimino il "width: 100%;" dal primo riferimento nel foglio di stile, la barra orizzontale scompare.

Potrebbero esserci dei problemi con alcuni browser?

Posso sostiuire questo dato in un altro modo?


grazie

[Mich_]

Se togli il width dal body potresti avere problemi in qualche browser...

Prova invece a lasciare il width, ed aggiungere anche:
margin: 0;
padding: 0;
border: 0;
al body e html

[MM88]

Funziona perfettamente, ti ringrazio.


Però Ponendo un menu (listato) molto semplice all'interno di questo div principale, tende ad andare a sx invece di rimanere centrato:

HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one[*]Item two[*]Item three[*]Item four[*]Item five[/list]
</div>

CSS

#navcontainer
{
margin-bottom: 1em;
overflow: hidden;
width: 460px;
}

#navlist
{
list-style-type: none;
margin: 0;
padding: 0;
}

#navlist li
{
border-left: 1px solid #000;
float: left;
line-height: 1.1em;
margin: 0 .5em 0 -.5em;
padding: 0 .5em 0 .5em;
}

Cosa sbaglio?


grazie

[Mich_]

Cosa e` che "tende" ad andare a sinistra? Quale oggetto?

Mi par di capire che e` un menu orizzontale, in cui hai definito una larghezza fissa in px al #navcontainer.

Comunque ti consiglio vivamente di dare dei colori di sfondo diversi per tutti gli oggetti, in modo da capire cosa si sposta (solo per le prove, ma senza non riesci a capire cosa stai facendo).

PS: non vedo il clear: se manca potrebbe generare comportamenti strani nel contenitore dei blocchi floattati.
PS2: occhio ad usare il padding: e` interpretato in modo diverso da IE

[MM88]

Originariamente inviato da Mich_
Cosa e` che "tende" ad andare a sinistra? Quale oggetto?

Mi par di capire che e` un menu orizzontale, in cui hai definito una larghezza fissa in px al #navcontainer.

Comunque ti consiglio vivamente di dare dei colori di sfondo diversi per tutti gli oggetti, in modo da capire cosa si sposta (solo per le prove, ma senza non riesci a capire cosa stai facendo).

PS: non vedo il clear: se manca potrebbe generare comportamenti strani nel contenitore dei blocchi floattati.
PS2: occhio ad usare il padding: e` interpretato in modo diverso da IE

1 - il menu orizzontale si sposta tutto a sx.

2 - cosa è il CLEAR?

3 - cosa dovrei utilizzare al posto del padding?


grazie

[Mich_]

1 - il menu orizzontale si sposta tutto a sx.

Ma a quale oggetto HTML si riferisce? Dal contesto non si riesce a discriminare tra il #navcontainer e il #navlist. Vedi il consiglio di prima sui colori di sfondo.

2 - cosa è il CLEAR?

Questo e` un forum di discussione, non una spiegazione passo-passo di cosa sono gli attributi CSS. Trovi spiegazioni in qualsisasi tutorial sui CSS (ad esempio quello di HTML.it); e trovi un esempio nella pillola sul clearing di fcaldera (vedi tra i "link utili").

3 - cosa dovrei utilizzare al posto del padding?

Dipende dal contesto. Se puoi evitare il padding hai meno problemi di compatibilta` con IE; altrimenti devi inserire dei commenti condizionali per "correggere" le misure per IE.

[MM88]

Originariamente inviato da Mich_
Ma a quale oggetto HTML si riferisce? Dal contesto non si riesce a discriminare tra il #navcontainer e il #navlist. Vedi il consiglio di prima sui colori di sfondo.

Sta all'interno del div "tutto".

Se hai la gentilezza di controllarlo, ti posto il codice HTML qui di seguito:

<body>
 <div id="tutto">
  <div id="navcontainer">
<ul id="navlist">
<li id="active">1[*]2[*]3[*]4[/list]
</div>   
 </div>
</body>

Originariamente inviato da Mich_
Questo e` un forum di discussione, non una spiegazione passo-passo di cosa sono gli attributi CSS. Trovi spiegazioni in qualsisasi tutorial sui CSS (ad esempio quello di HTML.it); e trovi un esempio nella pillola sul clearing di fcaldera (vedi tra i "link utili").

Senza ombra di dubbio, ma si affronta una discussione proprio per apprendere qualcosa di nuovo.
Cerco il link che suggerisci. Grazie.

Originariamente inviato da Mich_
Dipende dal contesto. Se puoi evitare il padding hai meno problemi di compatibilta` con IE; altrimenti devi inserire dei commenti condizionali per "correggere" le misure per IE.

a causa della mia ristrezza conoscenza dei CSS, non saprei come sostituire un padding, se non ripensando a TAG ormai deprecate.


grazie