info div

spaccioman

info div

Salve ragazzi,
una domanda. Ho questo div:

<div id="cc">
...ATTENDERE TI STIAMO REGISTRANDO...
</div>
``` nel relativo foglio di stile c'è la definizione dello stile cc ```
#cc{font:Verdana, Arial, Helvetica, sans-serif;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF3300;
text-decoration:none; position:absolute;visibility:hidden;
left:38em;
top:50em;
width:350px;
height:50px; 
background-color:#FFFFFF; 
border-color:#FF3300; 
border:solid; 
padding-top:25px; 
z-index:1;}

```come potete vedere c'è definita la posizione del div sul monitor con i tag ```
left:38em;
top:50em;
```purtroppo questo tipo di definizione non va bene poiché a seconda della risoluzione dell'utente il div assume quando visibile posizioni diverse e non centrate. La soluzione sarebbe utilizzare questo javascript ```
<script language="javascript">
function dimension() {
var sw,sh;
sw=screen.width;
sh=screen.height;
sw=(sw-350)/2;
sh=(sh-50)/3;}
</script> 
```dove sh e sw sono le dimensioni per centrare il div, solo che non so dove e come inserire quelle coordinate al di fuori del css direttamente nel div. Ho provato ad inserire il tag style ma poi non so come far stampare col javascript le due variabili. Potreste aiutarmi?Grazie mille

claudioweb

Qualcosa di questo genere senza javascript forse è meglio

#cc{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF3300;
text-decoration:none;
position:relative;
visibility:hidden;
text-align:center;
height:100%;
margin: 10em auto auto auto ;
width:350px;
height:50px; 
background-color:#FFFFFF; 
border-color:#FF3300; 
border:solid; 
padding-top:25px; 
z-index:1;}

Vedi un po'. Ciao

spaccioman

grandeee claudiuzzo! Adesso mi spieghi la logica? Mucias grazias

18andlife

@spaccioman said:

grandeee claudiuzzo! Adesso mi spieghi la logica? Mucias grazias

ci provo io
se vuoi centrare un div all'interno di una pagina, è sbagliato metterlo in position:absolute con coordinate in em. Questo vincola la posizione, appunto, alla risoluzione del monitor.

per centrare un box ho sempre utilizzato questo metodo

se guardi il codice, in sostanza, "chiave" e è questa:

[HTML]width:350px; height:200px;
position:absolute;top:50%;left:50%;
margin:-100px 0 0 -175px;[/HTML]

i margini top e left sono la metà di width e height

ClaudioWeb, non ho capito come mai consigli

margin: 10em auto auto auto ;

catone

Per centrare un div è suficiente definire i margini dx e sx su auto. Poi sul css del body devi impostare il tex-align su center altrimenti explorer 5 e 5.5 non lo centrano.

il posizionamento assoluto invece può essere utile per posizionare un div centrato rispetto ad un altro div, ma non è mai la soluzione ottimale perchè in base al tipo di browser possono verificarsi degli scostamenti anche piuttosto evidenti e poi, utilizzando layout liquidi la soluzione è impraticabile.

spaccioman

Ecco, lo sapevo, facendo come mi ha indicato claudioweb con firefox non ci sono problemi ma con explorer la posizione "relative" fa si che ci sia uno spazio bianco vuoto laddove c'è il div nascosto(inizialmente), e quando appare non fa altro che riempire lo spazio. La posizione absolute invece lo fa andare in sovrimpressione sul resto della pagina! come faccio quindi?

claudioweb

@spaccioman said:

Ecco, lo sapevo, facendo come mi ha indicato claudioweb con firefox non ci sono problemi ma con explorer la posizione "relative" fa si che ci sia uno spazio bianco vuoto laddove c'è il div nascosto(inizialmente), e quando appare non fa altro che riempire lo spazio. La posizione absolute invece lo fa andare in sovrimpressione sul resto della pagina! come faccio quindi?

Sicuro?

Ho provato e persino con IE5 esce nascosto

Prova a controllare le z-index... oppure posta l'indirizzo completo della pagina