problema con una div e un'immagine.

**foranangel** · 09-12-2009, 19:32

questo è il mio codice html

codice:

?xml version="1.0" encoding="utf-8" ?>
<!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>
<title>work in progress..</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="all" />
<link rel="shortcut icon" href="favicon.ico" type="image/png" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.pngFix.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script> 
</head>
<body>
<div id="info">
</div>
</body>
</html>

questo è il relativo foglio di stile

codice:

/*
** style.css 
*/

body,html {  background: #fff url(img/background.jpg) no-repeat; height:100%; margin:0; }

#info {
    width: 550px; height: 350px;
    background: url(img/bubble.png) no-repeat;
    position: absolute; top:50%; left:50%;
    margin: -275px 0 0 -175px;
}

l'immagine nel div, non viene centrata nella pagina? dove sbaglio?

grazie
@lessia

**Bashi** · 09-12-2009, 20:54

#info {
width: 550px; height: 350px;
background: url(img/bubble.png) no-repeat;
background-position:center;
position: absolute; top:50%; left:50%;
margin: -275px 0 0 -175px;
}

**foranangel** · 10-12-2009, 09:01

grazie Bashi!

ma inserendo background-position:center; l'immagine viene visualizzata al centro con la maggior parte dei browser?

**Bashi** · 10-12-2009, 09:26

Testato e funzionate su:

- Firefox 3.5.5
- Internet Explorer 6
- Chrome 3.0.195
- Safari 4.0.4 (su Windows)

Su internet explorer 6 ovviamente ci vuole il fix png perchè le immagini png non sono supportate.

**foranangel** · 10-12-2009, 20:56

ehm... grazie per la risposta Bashi...

ho inserito nel foglio di stile background-position:center; ma non funziona... l'immagine non è centrata nella finestra del browser

dove sbaglio?

grazie

**foranangel** · 10-12-2009, 21:22

aggiungo anche che la mia immagine di background sulla pagina (background.jpg) ha le dimensioni di 1900x1425 px e l'immagine che voglio centrare nella finestra del browser (bubble.png) ha la dimensioni 550x350px! il browser che utilizzo è safari 4.04!

**Bashi** · 11-12-2009, 13:16

usa questo codice:

#info {
width: 550px; height: 350px;
border:1px solid red;
background: url(hello.png) no-repeat;
background-position:center;
position: absolute;
top:50%;
left:50%;
margin-left:-275px;
margin-top:-175px;
}

dove il margin-left è la metà in px del width del div ed il margin-top è la metà in px del height del div.

**foranangel** · 11-12-2009, 18:45

perfetto! adesso funzione, grazie Bashi!

Discussione: problema con una div e un'immagine.

Strumenti discussione

Ricerca discussione

Visualizza

problema con una div e un'immagine.

Permessi di invio