Centrare un'immagine in una pagina

Discussioni inerenti lo sviluppo di markup XHTML e CSS validi.

Moderatori: antoscarface, Kagemitsu

Regole del forum
Per scrivere del codice all'interno di ogni post, utilizzare il tag: [syntax=il_linguaggio]codice[/syntax] sostituendo "il_linguaggio" con il linguaggio del codice che dovete inserire, ad esempio: html, css, javascript, php, asp, ecc...

Centrare un'immagine in una pagina

Messaggioda Gigi88 » venerdì 4 giugno 2010, 0:37

ciao ragazzi ho creato una pagina con al centro una sola immagine volevo chiedervi se questo metodo che ho usato (cercando un po' su internet) è adatto al mio obiettivo


Questo è il mio CSS
Sintassi: css [ Scarica ] [ Nascondi ]
  1. body {
  2.         background-attachment: fixed;
  3.         background-image: url(img/splash_bg.png);
  4. }
  5. #splash {
  6.         display: block;
  7.         left: 50%;
  8.         top: 50%;
  9.         position: absolute;
  10.         margin-top: -100px;
  11.         margin-right: 0px;
  12.         margin-bottom: 0px;
  13.         margin-left: -325px;
  14.  
  15. }
  16.  


Questo è quello che ho inserito nell'html
Sintassi: html [ Scarica ] [ Nascondi ]
  1. <div id="splash"><img src="img/splash_seeyousoon.png" width="650" height="200" /></div>
  2.  



ci sono soluzioni migliori?
Gigi88

Avatar utente
 
Messaggi: 45
Iscritto il: giovedì 3 giugno 2010, 19:35

Re: Centrare un'immagine in una pagina

Messaggioda antoscarface » venerdì 4 giugno 2010, 1:24

Scusami, il tuo obiettivo esattamente qual'è? :)
Quella immagine deve stare li come sfondo, o come immagine "oggetto"?
antoscarface

Amministratore

Avatar utente
 
Messaggi: 723
Iscritto il: giovedì 21 gennaio 2010, 1:08
Località: Siracusa

Re: Centrare un'immagine in una pagina

Messaggioda Alexain » venerdì 4 giugno 2010, 6:55

La soluzione è giusta comunque. Non ci sono altri modi che io conosca per centrare un oggetto <div> all'interno del browser.

@antonscarface: credo che lui voglia appunto centrare l'immagine "splash_seeyousoon.png" sia verticalmente sia orizzontalmente come un oggetto, visto che il resto della pagina ha un suo sfondo.
Itsuka boku ga misete ageru hikari kagayaku sekai wo.
E un giorno potrò mostrarti un mondo di luce.
Alexain

Avatar utente
 
Messaggi: 36
Iscritto il: mercoledì 2 giugno 2010, 15:50
Località: Bassano del Grappa (VI)

Re: Centrare un'immagine in una pagina

Messaggioda Gigi88 » venerdì 4 giugno 2010, 17:07

Alexain ha scritto:La soluzione è giusta comunque. Non ci sono altri modi che io conosca per centrare un oggetto <div> all'interno del browser.

@antonscarface: credo che lui voglia appunto centrare l'immagine "splash_seeyousoon.png" sia verticalmente sia orizzontalmente come un oggetto, visto che il resto della pagina ha un suo sfondo.

sì alexain hai centrato il discorso, il mio obiettivo era quello :clap:

menomale allora ho fatto bene :rofl:

ho altri due interrogativi da sottoporvi :devil:
1]Qual è l'importanza di display:block nel mio css? Che ruolo ha?
2]Se invece di inserire l'immagine come oggetto all'interno del div avessi voluto inserirlo come sfondo (dimensionando quindi il div stesso) come avrei dovuto cambiare il css per farlo?
Gigi88

Avatar utente
 
Messaggi: 45
Iscritto il: giovedì 3 giugno 2010, 19:35

Re: Centrare un'immagine in una pagina

Messaggioda Gigi88 » lunedì 7 giugno 2010, 8:43

ragazzi :call:
Gigi88

Avatar utente
 
Messaggi: 45
Iscritto il: giovedì 3 giugno 2010, 19:35

Re: Centrare un'immagine in una pagina

Messaggioda Alexain » lunedì 7 giugno 2010, 13:42

display:block lo usi per far capire alla pagine che è un elemento separato dal resto, mentre se volevi inserire l'immagine come sfondo devi modificare così i tuoi file:

Sintassi: html [ Scarica ] [ Nascondi ]
  1. <div id="splash"></div>


Sintassi: css [ Scarica ] [ Nascondi ]
  1. body {
  2.         background-attachment: fixed;
  3.         background-image: url("img/splash_bg.png");
  4. }
  5. #splash {
  6.         display: block;
  7.         left: 50%;
  8.         top: 50%;
  9.         position: absolute;
  10.         margin-top: -100px;
  11.         margin-right: 0px;
  12.         margin-bottom: 0px;
  13.         margin-left: -325px;
  14.         background-image: url("img/splash_seeyousoon.png");
  15.         width: 650px;
  16.         height: 200px;
  17. }
  18.  
Itsuka boku ga misete ageru hikari kagayaku sekai wo.
E un giorno potrò mostrarti un mondo di luce.
Alexain

Avatar utente
 
Messaggi: 36
Iscritto il: mercoledì 2 giugno 2010, 15:50
Località: Bassano del Grappa (VI)

Re: Centrare un'immagine in una pagina

Messaggioda Gigi88 » mercoledì 9 giugno 2010, 22:40

grazie alexain per il chiarimento =D
Gigi88

Avatar utente
 
Messaggi: 45
Iscritto il: giovedì 3 giugno 2010, 19:35


Torna a XHTML & CSS