DIV --> non riesco a centrare un'immagine

**bard** · 22-05-2010, 19:38

Ciao
ho una pagina Myspace dove ho inserito un'immagine in alto, prima del banner e prima del body della pagina, come vedete qui:

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. (e come intuirete non sono dell'ambiente

)

Tutto il codice relativo a quell'immagine è:

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

<div class="topbanner">
<div align="center">

</div>
</div>

suggerimenti?

grazie

**Mich_** · 24-05-2010, 09:26

suggerimenti?

Un giretto tra i "link utili" del forum (prima pagina, in evidenza)

**bard** · 24-05-2010, 16:11

L'ho fatto. C'è un link su come centrare i box, pensavo potesse tornarmi utile ma non funziona (il link).

Vorrei sapere se è possibile (qualora ci sia qualcuno in grado di darmi una risposta ovviamente) ottenere un aiuto senza studiarsi interi manuali di css dal momento che non mi interessa l'argomento nella sua interezza, non è il mio lavoro, e devo solo aggiustare una pagina di myspace senza impiegare mesi per studiarmi tutto.
Poi se è un forum rivolto solo agli addetti del settore basta dirlo... ma secondo me sarebbe più utile dare un aiuto anche a chi deve risolvere solo 1 problema.

Se mi sbaglio, ovvero se in uno di quei link c'è la soluzione diretta al mio problema, fammelo notare.

**Mich_** · 25-05-2010, 08:36

OOOppps il sito di constile non funziona piu`.
Era un sito fondamentale per tutta una serie di problematiche CSS.

Comunque per centrare solo in orizzontale, basta usare i margini automatici: se fai una ricerca nel forum (bottone in alto) trovi anche molti esempi.
Per centrare dei blocchi anche in verticale, invece, occorre usare i posizionamenti, come consigliato nel secondo link tra quelli dei "link utili".

Esempio:

codice:

HTML
<body>
  <div id="header">
    qui il contenuto del primo blocco
  </div>
  <div id="corpo">
    contenuto del secondo blocco
  </div>
</body>

CSS:
html, body {
  width: 100%;           /* necessario per poter dare i margini auto all'interno */
  text-align: center;    /* questo serve solo per IE vecchi */
}
#header, #corpo {
  margin: 0 auto;       /* centra il blocco nel suo contenitore */
  text-align: left;           /* ripristina allineamento interno */
}

**bard** · 29-05-2010, 10:12

Magari bastasse... Margin: 0 auto non sortisce alcun effetto.

Se invece uso left:0; right:0 l'immagine si centra perfettamente... ma solo con browser che non siano Internet Explorer! con il quale rimane inchiodata a sinistra.

Vi incollo il codice dall'inizio alla fine come è adesso (ho provato a fare correzioni varie ma senza risultato)... se avete idee e potete dirmi quali modifiche apportare ve ne sarei grato.. (in rosso le parti relative all'immagine da centrare)

<style>
body { margin-top: 450px;
}

div.topbanner { top: 50; left: 0; right: 0; height: 350px; position: absolute;
margin: 0 auto;
text-align: left;
}

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

table table table {
width:450px; } table table table table { width:100%;
}

body, .bodyContent {
background-image:url(http://indirizzoimmagine/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;
}

.whitetext12, .orangetext15 {
color:ffffff;
}

.lightbluetext8 {
color:000000;
}

.nametext {
font-weight:bold;
}

.text {
color:ffffff;
font-family:Verdana;
font-style:italic;
}

.contactTable {
width:450px!important;
height:150px!important; padding:0px!important; background-image:url(http://http://indirizzoimmagine/contacttable.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">

</div>
</div>

**bard** · 29-05-2010, 10:58

ok trovato la soluzione definitiva:

left: 50%;
margin: -0px 0 0 -350px;

quei 350 sarebbero la larghezza dell'immagine diviso 2...

Discussione: DIV --> non riesco a centrare un'immagine

Strumenti discussione

Ricerca discussione

Visualizza

DIV --> non riesco a centrare un'immagine

Permessi di invio