[CSS] Problemino...

[Jonny32]

Ho un DIV che ha una certa "height" e una certa "width" che vorrei posizionare centrato verticalmente nella pagina...
E' possibile?

Ecco il codice:

#extraDiv {
	width: 124px;
	height: 288px;
	position: absolute;
	position: fixed;
        vertical-align: middle;
	left: 460px;
	background: url(back-right.png) no-repeat center center;
}

Il problema è che così nn mi visualizza niente ...

Qualche idea?

[]DaLcA[]

Prova a mettere (variando la percentuale a scelta)

top: 33%;

al posto di vertical-align: middle; non sarà il massimo della vita ma dovrebbe funzionare

[VegetaSSJ5]

margin-left: auto;
margin-right: auto;

[Jonny32]

Originariamente inviato da ]DaLcA[

Prova a mettere (variando la percentuale a scelta)

top: 33%;

al posto di vertical-align: middle; non sarà il massimo della vita ma dovrebbe funzionare

avevo già provato...
è la cosa che si avvicina di piùperò siccome dovrei far combaciare due immagini mi servirebbe proprio il centro preciso (se faccio così se allargo la pagina nn funziona più )....

Cmq se nn metto l'istruzione "top: qualcosa" nn mi visualizza proprio il div.
Perchè?

[]DaLcA[]

Le immagini devono combaciare verticalmente o orizzontalmente? Potresti giocare con i float e con i clear, solo che sarebbe meglio dare prima un'occhiata alla struttura della pagina.

Strano che non te lo visualizzi, a me funziona con IE6, Opera 8 e Firefox 1.0.4 sia con che senza il top

[Jonny32]

Originariamente inviato da ]DaLcA[

Le immagini devono combaciare verticalmente o orizzontalmente? Potresti giocare con i float e con i clear, solo che sarebbe meglio dare prima un'occhiata alla struttura della pagina.

Strano che non te lo visualizzi, a me funziona con IE6, Opera 8 e Firefox 1.0.4 sia con che senza il top

Cmq ora che c'ho fatto caso il div me lo visualizza però infondo alla pagina quindi nn lo vedo...

Questi float e clear come fungono?

[]DaLcA[]

Spiegare il funzionamento del float e del claer è un po' complicato, magari dà un'occhiata qua: http://www.html.it/css/guida_css_26.htm e se li trovi interessanti cerca con google


Appare addirittura in fondo alla pagina? Puoi postare il codice html (e css) della struttura della pagina così faccio qualche prova?

[Jonny32]

Originariamente inviato da ]DaLcA[

Spiegare il funzionamento del float e del claer è un po' complicato, magari dà un'occhiata qua: http://www.html.it/css/guida_css_26.htm e se li trovi interessanti cerca con google


Appare addirittura in fondo alla pagina? Puoi postare il codice html (e css) della struttura della pagina così faccio qualche prova?

Ho messo il sito qui:
http://edt.altervista.org/Main.htm

PS: con IE il sito è una tragedia, aprilo con Mozilla Please (se magari hai installato l'estensione "Web developer" è ancora meglio)

PPS: il div in questione è "extraDiv" lo trovi infondo.

PPPS: il sito l'ho fatto partendo da uno stile di csszengarden (qui)

[]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):

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 */
}

#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

[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.

<!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>

[Jonny32]

Intanto vorrei ringraziare tutti per la collaborazione...

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):

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 */
}

#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

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.

<!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

[lombardp]

Originariamente inviato da Jonny32

Intanto vorrei ringraziare tutti per la collaborazione...


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

Bello !!!

Complimenti per l'effetto, ti è venuto davvero bene!


Se devo essere sincero, non avevo capito cosa volevi ottenere, l'ho visto solo adesso.