MegaLab.it

Inviato: **sab set 15, 2007 8:32 pm**

Salve a tutti, ennesimo problema con i CSS: io avrei bisogno di impostare che al centro di una schermata ci sia un riquadro con una foto solo che non so come impostare il "centrale".

Inviato: **dom set 16, 2007 10:56 am**

allora..poniamo che questo è il riquadro della tua foto

Codice: Seleziona tutto: <div id="foto"> <img src="images/foto.jpg" alt="Descrizione Foto" height="300" width="240" /> </div>

dobbiamo andare a creare un css che mi centri in verticale ed in altezza il div suddetto

Codice: Seleziona tutto: #foto{ position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -120px; }

in questo modo cosa facciamo?
in soldoni..
* impostiamo la posizione assoluta in modo che sia indipendente dal resto della pagina
* diciamo che l'angolo in alto a sinistra del blocco deve stare al 50% dal top della pagina e al 50% dalla sinistra della pagina
* con i margin andiamo a centrare il blocco spostandolo a sinistra di metà della sua larghezza e in altro di metà della sua altezza. Prima infatti era centrato l'angolo in altro a sinistra..non il blocco

è un concetto matematico..spero di essere stato chiaro altrimenti chiedi pure..intanto prova e vedi se funziona

Inviato: **dom set 16, 2007 5:41 pm**

Ok, grazie, sei stato chiarissimo. Ho capito il concetto. Ora lo riadatto alla mia situazione e lo provo.

Inviato: **lun set 17, 2007 1:50 pm**

AIUTO!! Sono giorni che provo a sistemarmi il CSS solo che sbaglio ancora da qualche parte: gli elementi mi vengono uno sotto l'altro, non rispettano le distanze dai bordi, mi si mettono a scaletta e cose così. Io sto impazzendo!
Ora allego uno schema di come dovrebbe essere, qualcuno di voi sarebbe così gentile da darmi qualche direttiva?
Grazie infinite.
Immagine

Inviato: **mar set 18, 2007 7:11 pm**

Io sono arrivato a questo solo che c'è qualche cosa di sbagliato.

Codice: Seleziona tutto: #ME1 { float:left; margin: 5px 0 0 5px; width: 90px; height: 90px; z-index: 3; } #ME2 { float:right; margin: 5px 5px 0 0; width: 90px; height: 90px; z-index: 3; } #BannerVerticaleSX { margin: 110px 0 0 5px; width: 120px; height: 600px; z-index: 2; } #BannerVerticaleDX { float:right; margin-top: 110px; margin-right: 5px; width: 120px; height: 600px; z-index: 2; } #TRC1 { float:right; margin: 205px 5px 0 0; width: 120px; height: 70px; z-index: 3; } #TRC2 { float:left; margin: 205px 0 0 5px; width: 120px; height: 70px; z-index: 3; } #FotoTRC { position:absolute; left: 50%; margin: 500px 0 0 -300px; z-index: 3; } #BannerOrizzontale { position:absolute; left: 50%; margin: 5px 0 0 -364px; height: 90px; width: 728px; z-index: 1; } #ScrittaTRC { position:relative; left: 50%; margin: 100px 0 0 -364px; z-index: 2; } #Corpo { margin-top: 100px; margin-left: 130px; margin-right: 130px; height: 778px; z-index: 1; } #Copy { margin-bottom: 0; margin-left: 130px; margin-right: 130px; }

E questo come codice html:

Codice: Seleziona tutto: <!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=iso-8859-1" /> <title>Documento senza titolo</title> <style type="text/css"> @import url(css.css); </style> <link rel="stylesheet" type="text/css" href="css.css"> <body bgcolor="#000000"> </head> <body> <div id="ME1"> </div> <div id="ME2"> </div> <div id="BannerOrizzontale"> </div> <div id="BannerVerticaleDX"> </div> <div id="BannerVerticaleSX"> </div> <div id="Corpo"> <div id="FotoTRC"> </div> <div id="ScrittaTRC"> </div> </div> <div id="TRC1"> </div> <div id="TRC2"> </div> <div id="Copy"> </div> </body> </html>

Per favore aiutatemi!

Inviato: **mer set 19, 2007 6:57 pm**

Nessuno riesce a capire dove ho sbagliato? Appena ci riesco posto uno screenshot di come mi viene visualizzata la pagina.

Inviato: **ven set 21, 2007 2:03 pm**

Inutile, la pagina, per come si dispongono gli elementi, è troppo larga per entrare in uno screenshot.

MegaLab.it

CSS problema

CSS problema