PDA

View Full Version : [HTML] DIV --> centrare un'immagine

WorcesterSauce
22-05-2010, 16:57
Ho messo su una pagina Myspace un'immagine in alto, prima del banner e prima del body della pagina, come vedete qui:

http://img18.imageshack.us/img18/8351/immaginepcz.th.jpg (http://img18.imageshack.us/i/immaginepcz.jpg/)


Il problema è che non so come centrarla orizzontalmente... gli unici attributi che vedo nel codice relativo all'immagine sono "top" e "left"... quel left non mi è d'aiuto.

Tutto il codice relativo a quell'immagine è:

div.topbanner {top: 0; left: 0; height: 800px; position: absolute; }

<div class="topbanner">
<div align="center">
<img src="http://indirizzoimmagine" />
</div>
</div>

suggerimenti?

grazie
nicfio
22-05-2010, 18:47
Ho messo su una pagina Myspace un'immagine in alto, prima del banner e prima del body della pagina, come vedete qui:

http://img18.imageshack.us/img18/8351/immaginepcz.th.jpg (http://img18.imageshack.us/i/immaginepcz.jpg/)


Il problema è che non so come centrarla orizzontalmente... gli unici attributi che vedo nel codice relativo all'immagine sono "top" e "left"... quel left non mi è d'aiuto.

Tutto il codice relativo a quell'immagine è:

div.topbanner {top: 0; left: 0; height: 800px; position: absolute; }

<div class="topbanner">
<div align="center">
<img src="http://indirizzoimmagine" />
</div>
</div>

suggerimenti?

grazie

Prova a fare così:

<style type="text/css">
#da_centrare
{ margin: 0 auto; }
</style>

<html>
<body>
<div id="da_centrare">(quà il contenuto)</div>
</body>
</html>

Così dovrebbe andare.....
WorcesterSauce
22-05-2010, 20:13
umh scusa ma non capisco cosa va inserito al posto di "da_centrare" e cosa intendi per contenuto... abbi pazienza
WorcesterSauce
22-05-2010, 20:59
risolto, è bastato usare "left: 0; right: 0;"
MaxArt
23-05-2010, 12:01
umh scusa ma non capisco cosa va inserito al posto di "da_centrare" e cosa intendi per contenuto... abbi pazienza"da_centrare" è l'id dell'elemento <div>, non ci devi mettere nulla se proprio non vuoi cambiare l'id.
Per "contenuto" immagino volesse dire l'immagine, cioè l'elemento <img>.

risolto, è bastato usare "left: 0; right: 0;"In teoria questa soluzione non dovrebbe funzionare. Probabilmente c'è ben altro rispetto al foglio di stile che hai postato.
WorcesterSauce
23-05-2010, 12:19
Ti incollo il codice dall'inizio alla fine, così per capire cos'è che lo rende funzionante:

<style>
body{ margin-top: 390px;}
div.topbanner { top: 20; left: 0; right: 0; height: 350px; position: absolute; }

table, tr, td {
background-color:transparent;
border:none;
border-width:0px;
}

table table table {
width:100%; max-width: 800px; } table table table table { width:100%;;
}

body, .bodyContent {
background-image:url(http://indirizzosfondo/sfondo.jpg);
background-position:Center Center;
background-attachment:fixed;
background-repeat:repeat-x;
border-width:0px;
border-style:Solid;
}

table table {
border:0px;
}

table table table table {
border:0px;
background-image:none;
background-color:transparent;
}

table table table {
border-style:Solid;
border-width:1px;
border-color:ffffff;
background-attachment:fixed;
}

table table table td {
background-color:208cdf;
}

.nametext {
font-weight:bold;
}

.contactTable {
width:300px!important;
height:150px!important; padding:0px!important; background-image:url(http://indirizzocontact/contact.jpg); background-attachment:scroll; background-position:center center; background-repeat:no-repeat; background-color:transparent;}.contactTable table, table.contactTable td {padding:0px !important; border:0px; background-color:transparent; background-image:none;}.contactTable a img {visibility:hidden; border:0px!important;}.contactTable a {display:block; height:28px; width:115px;background-color:transparent!important;}.contactTable .text {font-size:1px!important;}.contactTable .text, .contactTable a, .contactTable img {filter:none!important;background-color:none!important;} .contactTable .whitetext12 {display:none;;
}
</style>

<div class="topbanner">
<div align="center">
<img src="http://indirizzoimmagine/immagine.jpg" />
</div>
</div>
</p>