Discussione: [CSS] Problemino...
View Single Post
Old 14-06-2005, 15:37   #11
Jonny32
Senior Member
 
L'Avatar di Jonny32
 
Iscritto dal: Jan 2003
Città: Lucca
Messaggi: 2165
Intanto vorrei ringraziare tutti per la collaborazione...

Quote:
Originariamente inviato da ]DaLcA[
Ok, ho fatto un po' di prove e forse ho risolto

Con IE non funziona manco a parlarne ma non mi dispiace perchè non lo considero proprio

Ecco cosa ho modificato (con commenti inclusi nel codice):
Codice:
body {
	font: 0.7em Verdana, Verdana;
	background: #000 url(back0000.jpg) -10px center no-repeat fixed;
	color: #CCCCCC;
	margin: 0 0 0 460px;	/* prima era 470 */
	padding: 0;		/* ho invertito margin con padding, */
				/* a me piace di più così :p */
}
Codice:
#extraDiv {
	width: 124px;
	height: 288px;
	/*max-height: 288px;*/
	/*position: absolute;*/	/* non serve, viene "sovrascritto" dal prossimo */ 
	position: fixed;
	top: 27.5%;		/* così funziona con Opera 8, per Firefox metti 26.5 */
	background: url(back-rig.png) no-repeat center center;
}
Come avrai letto l'ho perfezionato per Opera (uso l'8 se non si era capito ) e per Firefox basta cambiare la percentuale di top. Ci sarà sicuramente qualche modo per farlo andar bene con entrambi i browser contemporaneamente ma non lo conosco purtroppo...

Bella l'idea dei petali comunque
con il metodo top avevo già provato e in effetti era la maniera più vicina a come volevo fare... il problema è che se ridimensionavi la pagina verticalmente vedevi che nn andava bene...

Per il discorso del browser per me è già tanto che lo leggano in due (Opera e Mozilla)... per IE farò un'altro sito se ne ho voglia


Quote:
Originariamente inviato da lombardp
Questo un esempio di come centrare verticalmente e orizzontalmente un blocco DIV, dovrebbe funzionare su tutti i browser.

Il codice è un po' particolare ma funziona bene.

Spero possa esserti d'aiuto.

Codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><style>
#centrato {
   position: absolute;
   left: 0px; top: 50%;
   height: 1px; width: 100%;
   overflow: visible;
   }
#contenuto {
   position: absolute;
   margin-left: -50px;
   top: -25px; left: 50%;
   width: 100px; height: 50px;
   background-color: #ffeeee;
   }
</style></head>
<body>
<div id="centrato"><div id="contenuto">SONO AL CENTRO</div></div>
Content content content content content content content content content<br /><br /><br />
Content content content content content content content content content<br /><br /><br />
Content content content content content content content content content<br /><br /><br />
Content content content content content content content content content<br /><br /><br />
Content content content content content content content content content<br /><br /><br />
Content content content content content content content content content<br /><br /><br />
Content content content content content content content content content<br /><br /><br />
</body>
</html>
Sì usando questo metodo funziona bene... Grazie 1000mila!!!

Ecco il sito proprio come lo volevo fare (ho sovrascritto quello di prima):
http://edt.altervista.org/Main.htm
__________________
Intel G1820T | Asus H87-Pro | 8Gb DDR3 1333Mhz | Crucial M4 64Gb | WD Green 2Tb | Xonar Essence ST
My pictures on 500px

Ultima modifica di Jonny32 : 14-06-2005 alle 15:45.
Jonny32 è offline   Rispondi citando il messaggio o parte di esso