div centrato rispetto risoluzione

borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
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:
onsitus

onsitus

Utente Attivo
9 Apr 2005
47
0
0
Nettuno
www.onsitus.it
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.:)
 
borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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:
onsitus

onsitus

Utente Attivo
9 Apr 2005
47
0
0
Nettuno
www.onsitus.it
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
Autore Titolo Forum Risposte Data
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
G Div float centrato con Firefox ed Explorer HTML e CSS 2
I Div class non centrato ... perchè? HTML e CSS 2
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5

Discussioni simili

Alto Basso