aggiungere un div ad una colonna centrata

**pettedemon** · 08-09-2009, 12:56

ciao a tutti!
il mio sito è centrato rispetto alla pagina, ecco il codice

Codice PHP:


body

{         margin: 0; 

    padding: 0;  

   text-align: center; 

    background-color: #333;   

  padding-top: 20px;      }  

  #centralone {         width: 640px;  

   height: 625px;  

        margin: auto;

     background: url("../images/home.png")no-repeat; }

adesso io vorrei aggiungere un div a destra del mio corpo centrato in modo che rimanga centrato solo il corpo e il mio nuovo div venga spostato a destra...
come posso fare ?

**Mich_** · 08-09-2009, 16:10

Puoi dare al nuovo blocco
float: right;
ed inserirlo DOPO quello gia` presente.
SE lo spazio e` sufficiente (e questo dipende dalla finestra del browser) il nuovo viene messo a destra, altrimenti viene inserito sotto.

NOTA: nel tuo codice manca:
html, body {
width: 100%;
}
altrimenti in qualche browser non verra` centrato, ma allineato a sinistra.

**pettedemon** · 08-09-2009, 16:24

Ti ringrazio per la risposgta ma non funziona, ti rimetto il codice css

Codice PHP:


body{

margin: 0; 

padding: 0;

text-align: center;

background-color: #333;

padding-top: 20px;

} 

 html, body { width: 100%; } 

 #centralone_home {

width: 640px;

height: 625px;

margin: auto;

background: url("../images/home.png")no-repeat;  }

#centralone_abbonati {

width: 640px;

height: 625px;

margin: auto;

background: url("../images/abbonati.png")no-repeat;  }

#sponsor {

float: right;

width: 175px;

height: 120px;

background-color: white; }

e il codice nella pagina

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>StupendoMag</title>

<link rel="stylesheet" type="text/css" href="css/stile.css" />

</head>

<body>

<div id="centralone_home">

<div id="prima_parte_home"></div>

</div>

<div id="sponsor"></div>

</body>

</html>

**Mich_** · 08-09-2009, 16:56

Difficile leggere un codice non formattato ...
E difficile rispondere ad un semplice "non funziona": devi dire l'effetto ottenuto, altrimenti non si puo` capire.

Comunque ci sono blocchi vuoti: i brwoser possono non visualizzare tali blocchi.

**pettedemon** · 08-09-2009, 17:12

Scusami, hai ragione, ho riformattato il codice, è stato un problema di copia e incolla.
Il risultato che ottengo è il blocco sponsor sotto al blocco #centralone_home

Grazie

**Mich_** · 08-09-2009, 17:37

Qui c'e` un errore di sintassi: manca uno spazio (e le virgolette non fanno parte della sintassi, anche se i browser di solito lo accettano lo stesso)
background: url("../images/home.png")no-repeat;

Per il fatto di andare sotto, lo avevo previsto: devi avere spazio sufficiente.
Dato che #centralone_home e` largo 640px, ed ha margini automatici in orizzontale, e che il blocco da mettere a destra e` largo 175px, hai necessita` di almeno 990px di spazio utile. Non e` facile trovarlo.

Puoi comunque provare a dare
width: 1000px;
a body e html, al posto del width:100%.
A quel punto se va ancora sotto, vuol dire che non e` possibile farlo con il metodo proposto, e devi agire tramite JS.

**pettedemon** · 09-09-2009, 09:49

ciao,
se provo a mettere larghezza 1000 px come mi hai detto il nuovo blocco viene sempre spostato a destra e in basso...
cosa dovrei cercare per posizionarlo tramite js ?
Grazie!

**Mich_** · 09-09-2009, 10:33

Schema del codice JS necessario:

codice:

 function posiziona () {
  var lartot = ...;
  var marg = (lartot - 640) / 2;
  document.getElementById('centralone_home').style.marginLeft = marg;
}

Non ricordo come si faccia a leggere la larghezza del body (ma dovresti trovare esempi nel forum JS).

Poi devi modificare il CSS in questo modo:
dare float:left al blocco #centralone_home
dare float:right al blocco sponsor
togliere i margini da ambedue i blocchi.

Chi non ha JS abilitato vede il blocco centrale a sinistra e sponsor a destra (sulla stessa riga, se ci stanno), chi ha JS vede come vorresti.

La funzione va chiamata all' onload della pagina e ad ogni evento onresize.

Se hai problemi con JS, fa' un nuovo trhread in tale form: questa discussione e` ormai un po' lunga e non di immediata comprensione per chi ti puo` aiutare in JS.
Nella nuova discussione, metti il coidce HTML essenziale (solo i blocchi principali), il CSS relativo, e la bozza del JS, con le richieste degli eventi. Potresti anche far riferimento a questa discussione.

**pettedemon** · 09-09-2009, 11:23

Ti ringrazio,
qui ho postato la discussione nella sezione javascript

Discussione: aggiungere un div ad una colonna centrata

Strumenti discussione

Ricerca discussione

Visualizza

aggiungere un div ad una colonna centrata

Permessi di invio