Centrare un'immagine

**Nabu-nasir** · 19-08-2008, 11:12

Ciao raga, come va?

Grazie per i consigli dell'altra volta, ora sono riuscito a centrare l'immagine a destra e a sinistra con il seguente codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="it" />
<title>Terrartistica - Portale delle belle arti</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
background: url(images/sfondo.jpg) top center no-repeat;
}
</style>
</head>
<body>
</body>
</html>

Ora però si pone il problema di centrarla anche in alto e in basso perchè l'immagine deve essere circa di 800*600 e mi viene appiccicata tutta sopra.

Come si fa a centrarla rispetto al centro assoluto della pagina?

Uso Dreamweaver 8.

Grazie a tutti e buonissima giornata :-)

Giulio.

**Myaku** · 19-08-2008, 11:15

mettila come background ad un div e segui le istruzioni riportate qui

**Nabu-nasir** · 19-08-2008, 11:25

Ciao Myaku,

grazie per l'altra volta :-)

Non capisco cosa vuoi dire con 'mettila in background ad un div'...cioè?? Devo mettere <div></div> prima della riga

<style type="text/css">

oppure devo fare una cosa tipo

<div>
<style type="text/css">
...
...
</style>
</div>

Poi l'esempio che mi hai linkato parla di una textbox io qui ho una immagine. Sono completamente a digiuno di html...posso abusare della tua gentilezza e chiederti di scrivermi tu il codice corretto come l'altra volta?

Grazie infinite :-)

Giulio.

**Myaku** · 19-08-2008, 11:51

è l'immagine che va messa come background.
Il concetto riportato nel tutorial è lo stesso.

html

codice:

<div id="container">
...quello che ti pare...
</div>

css

codice:

#container {
background: url(percorso/immagine.jpg) top left no-repeat;
position:absolute;
top:50%;
left:50%;
width: larghezza_immagine_px;
height: altezza_immagine_px;
margin-left:-(larghezza_immagine/2)px;
margin-top: -(altezza_immagine/2)px;
}

ovviamente devi fare due conti.

**rebelia** · 19-08-2008, 12:21

Originariamente inviato da Nabu-nasir
Ciao raga, come va?...
Grazie a tutti e buonissima giornata :-)

Giulio.

per cortesia occhi alle sezioni: la domanda andava posta in css dove provvedo a spostarti; al prossimo giro la discussione sara' chiusa

torniamo pure in topic, grazie

**Nabu-nasir** · 20-08-2008, 11:47

Chiedo venia, non avevo idea... :-(

Devo ancora fare la prova con il codice, ma ora ho un problema con l'immagine di fondo messa in questo modo: Dreamweaver non me la rende cliccabile.

Come faccio a far si che questo codice:

<style type="text/css">
html, body {
margin: 0;
padding: 0;
background: url(images/sfondo.jpg) top center no-repeat;
}
</style>

possa anche permettermi di collegare l'immagine sfondo.jpg ad un'altra pagina cliccandoci sopra?

Grazie mille ancora :-)

**Myaku** · 20-08-2008, 14:22

Originariamente inviato da Nabu-nasir
Chiedo venia, non avevo idea... :-(

Devo ancora fare la prova con il codice, ma ora ho un problema con l'immagine di fondo messa in questo modo: Dreamweaver non me la rende cliccabile.

Come faccio a far si che questo codice:

<style type="text/css">
html, body {
margin: 0;
padding: 0;
background: url(images/sfondo.jpg) top center no-repeat;
}
</style>

possa anche permettermi di collegare l'immagine sfondo.jpg ad un'altra pagina cliccandoci sopra?

Grazie mille ancora :-)

se è un background, di per sè non è cliccabile.
Per renderla link, devi metterla come <img> da html.

Cyà

**Nabu-nasir** · 20-08-2008, 14:32

Ciao, gentilissima come sempre :-)

Dunque, ho capito, devo metterla come IMG da html...come pensavo. Però, poi, come IMG, posso centrarla al centro assoluto della pagina indipendentemente dalla risoluzione?
Perchè il problema è proprio questo: l'immagine dovrà essere sempre al centro assoluto - alto/basso destra/sinistra - quale che sia la risoluzione, e in più dovrà essere cliccabile.

Grazie mille spero un giorno di poter contraccambiare :-)

Giulio.

**Myaku** · 20-08-2008, 14:55

Originariamente inviato da Nabu-nasir
Ciao, gentilissima come sempre :-)

Dunque, ho capito, devo metterla come IMG da html...come pensavo. Però, poi, come IMG, posso centrarla al centro assoluto della pagina indipendentemente dalla risoluzione?
Perchè il problema è proprio questo: l'immagine dovrà essere sempre al centro assoluto - alto/basso destra/sinistra - quale che sia la risoluzione, e in più dovrà essere cliccabile.

Grazie mille spero un giorno di poter contraccambiare :-)

Giulio.

sì, usi lo stesso concetto dell'elemento posizionato in maniera assoluta. Es. il tuo div, a cui hai messo tale immagine come background. L'unica cosa che ti cambia è che non setti una proprietà background ma l'immagine la metti direttamente via html (occhio a fare bene i conti tra dimensioni width/height e quelli dell'immagine - eventuali altri elementi annidati e loro margini/padding. Se vuoi, azzera anche il bordo di default blu con img {border: none;}.

**Nabu-nasir** · 20-08-2008, 15:07

Non so come ringraziarti per l'aiuto che mi stai dando, veramente. Ti ho anche mandato un pvt, spero di non stare abusando della tua disponibilità.

Grazie.

Giulio.

Discussione: Centrare un'immagine

Strumenti discussione

Ricerca discussione

Visualizza

Centrare un'immagine

Re: Centrare un'immagine

Permessi di invio