div centrato rispetto risoluzione

borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.044
150
63
PR
www.borgo-italia.it
mi spiace e sono estremanete contrito, ma sembra che i bachi li trovi tutti io (o forse si tratta di mia incapacità)

sto parlando del tutorial Centrare un layer rispetto alla risoluzione

prima ho fatto un mio div con le mie misure e vi ho insrito una foto, il div viene posizionato con l'angolo in alto a Sx al CENTRO del monitor. Pensando di aver fatto un errore ho fatto copy and paste su una pagina hto del tutorial

il div appare come sopra sia su IE che su FF. Non capisco dove sbaglio o dove è sbagliato:confused:


-----------------------------------------------------
divCntrato.jpg
 
Ultima modifica:
Ciao,

da l'immagine sembra che le margine left e top non sono state tolte.

Dovrebbe avere per il tuo div:

Codice: 
position: absolute;
width: /*larghezza in px del div*/;
height: /*altezza in px del div*/;
top: 50%;
left: 50%;
margin-left: - /*meta larghezza div in px*/;
margin-top: - /*meta altezza div in px*/;

Esempio:
Codice: 
#mydiv{
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin-left: - 250px;
margin-top: -150px;
}

Se non va, sarebbe da vedere il resto del html/ccs usato.:)
 
questo è il codice completo che ho utilizzato per una pagina di prova contenente solo il div il risultato è quello della fot inviata (angolo div alto a Sx centrato sullo schermo)

Codice: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
body {
margin: 0px;
height: 100%;
}
div.LayerCentrato {
text-align: Center;
background-color: #EEEEEE;
color: #192939;
position: Absolute;
top: 50%;
left: 50%;
font-size: 12px;
font-family: Verdana;
font-weight: Bold;
width: 350px;
height: 200px;
border: Solid 1px #CCCCCC;
margin: -100px, -175px;
}
</style>

</head>

<body>
<div class="LayerCentrato">Esempio di Layer Html centrato!!!</div>
</body>
</html>

come vedi nella pagina non c'è altro è un copia incolla del tutorial accennato, anche adesso ho totato che c'è una differenza con quello postato da onsitus

margin-left: - 250px;
margin-top: -150px;
Clicca per allargare...

e quello del tutorial

margin: -100px, -175px;
Clicca per allargare...
 
Ultima modifica:
ok...
1. position: Absolute; absolute senza la A maiuscolo...sara pure un dettaglio
2. dal tutorial (che sinceramente non ho guardato...scusa)
margin: -100px, -175px;
Quello ti fa -100px di margine superiore/inferiore poi -175px di margine destra/sinistra
Invece se hai un div a dimensione fissa, devi togliere solo il margine a sinistra ed in alto.
Con la posizione 'absolute' e il top/left a 50%, ti centra il div da l'angolo sinistro in alto, di la il punto di poi togliere meta altezza/larghezza del div stesso con l'uso delle margine per centrare il tutto.
Esempio online con un div con una foto come contenuto:
http://www.onsitus.it/cssdesign/esempio/1.centrare-contenuto-orizzontale-vertcale.html
Basta guardare il sorgente della pagina per capire il tutto (sperando che non vado contro regole del forum - anche quelle non le ho guardate - lascio i mod di questa sezione intervenire se necessario)

PS: dal codice postato, direi di cambiare:
margin: -100px, -175px;
per:
margin-left: - 100px;
margin-top: -175px;
Aggiungi pure width: 100% in body
riguardo il text-align non sono sicura. Dipende di quello che vuoi fare. Boh... Piu facile da capire con un esempio online
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

napuleone
  • Bloccata
div centrato alla pagina posto sopra ai contenuti
Risposte
1
Visite
2K
HTML e CSS
Max 1
Max 1
G
Div float centrato con Firefox ed Explorer
Risposte
2
Visite
1K
HTML e CSS
ghisirds
G
I
Div class non centrato ... perchè?
Risposte
2
Visite
1K
HTML e CSS
sbobby
sbobby
E
Creare un testo trasparente dietro un div
Risposte
5
Visite
3K
HTML e CSS
WmbertSea
WmbertSea
F
Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni?
Risposte
0
Visite
580
Javascript
fede12
F
M
Accordion menu e posizione div
Risposte
0
Visite
1K
HTML e CSS
miagy
M
P
jquery refresh div non funziona
Risposte
0
Visite
925
Javascript
psicona
P
P
refresh div + scrittura/lettura dal db
Risposte
1
Visite
785
Javascript
marino51
marino51
M
Unire 2 funzioni per l'invio di un form e con l'apertura di un div
Risposte
0
Visite
1K
Javascript
maxnegri2036
M
Cosina
Nascondere div di default
Risposte
2
Visite
3K
jQuery
Cosina
Cosina
napuleone
modificare il contenitore di un div
Risposte
2
Visite
1K
Javascript
napuleone
napuleone
napuleone
  • Bloccata
modificare il contenitore di un div
Risposte
1
Visite
852
Javascript
Max 1
Max 1
A
inserire variabile php colore in div html
Risposte
2
Visite
2K
PHP
AndreaCerre
A
J
Far comparire e scomparire un div con un select
Risposte
1
Visite
3K
Javascript
Max 1
Max 1
T
Far sparire dalla pagina div che saranno inseriti successivamente
Risposte
0
Visite
3K
jQuery
the_indios
T
E
Div che scompare con scroll jquery
Risposte
0
Visite
1K
Javascript
enzo7903
E
G
Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna
Risposte
5
Visite
3K
HTML e CSS
Max 1
Max 1
Stefano Migotto
Creazione di un div con php o js
Risposte
9
Visite
3K
PHP
Tommy03
Tommy03
felino
Bootstrap alert: usare lo stesso div per due messaggi consecutivi
Risposte
1
Visite
2K
jQuery
MarcoGrazia
MarcoGrazia
S
Visibilità div in PHP
Risposte
1
Visite
1K
PHP
otto9due
otto9due
Alto Basso