position relative

**lucavizzi** · 15-04-2008, 15:01

codice:

#header{
    width:800px;
	height:250px;
	background-image:url(immagini/agriturismo.jpg);
	margin:0px auto;
}
#prenotazioni{
    position:relative;
	top:20px;
	right:20px;
    width:25px;
	height:140px;
	float:right;
/*	margin-right:20px;
	margin-top:20px;
*/	background-image:url(immagini/prenotazioni.png);
	font-size:11px;
	overflow:hidden;
	z-index:20;
}
#menu{
    position:relative;
	top:200px;
	left:20px;
    width:760px;
	height:27px;
/*	margin-top:200px;
	margin-left:20px;
*/	background-image:url(immagini/bgmenu.png);
    z-index:5;
}

codice:

<div id="header">
    <div id="prenotazioni">...</div>
    <div id="menu">...</div>
</div>

I box prenotazioni e menu sono contenuti nel box header.
Il box prenotazioni è espandibile (tramite javascript) in larghezza, da 25px a 250px.
Quando però questa accade il box con il menu non resta fermo al suo posto.
Ho provato ad usare due z-index diversi ma comunque il ridimensionamento del box prenotazioni influenza il box menu.

Come ovviare?

Grazie
Luca

**Mich_** · 15-04-2008, 15:20

Attenzione che i due blocchi interni non li hai posizionati relativamente al contenitore (#header), ma rispetto al <body> (o al contenitore di header, se questo e` posizionato).
E poi che senso ha dare il float ad oggetti posizionati? E` una contraddizione.

Vedi questi due articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi

**lucavizzi** · 15-04-2008, 16:27

usando solo il float in questo modo:

codice:

#header{
    width:800px;
	height:250px;
	background-image:url(immagini/agriturismo.jpg);
	margin:0px auto;
}
#prenotazioni{
    width:25px;
	height:140px;
	float:right;
	margin-right:20px;
	margin-top:20px;
	background-image:url(immagini/prenotazioni.png);
	font-size:11px;
	overflow:hidden;
	z-index:20;
}
#menu{
    width:760px;
	height:27px;
	margin-top:200px;
	margin-left:20px;
	background-image:url(immagini/bgmenu.png);
    z-index:5;
}

tutto funziona correttamente con ie7, non funziona invece con firefoxcome puoi vedere qui:
http://www.lucavizzi.it/test/index.asp

Perchè non gira su firefox?

**Mich_** · 15-04-2008, 16:59

Ci sono alcune cose un po' assurde.
Ad esempio:
width:25px;
Cosa puo` starci in una cosa cosi` stretta? 2 caratteri? forse tre?
Certo che funziona in IE: li` non funziona il width (vale come min-width).

E poi quel JS: io sono convinto che puoi ottenere lo stesso risultato con solo CSS, giocando con gli stati :hover dei blocchi (sui browser standard si fa facilmente; forse in IE serve anche un po' di JS per ottenere la stessa cosa, ma se ti accontenti di cose piu` standard, fai tutto con i CSS anche in IE).
Credo che ti convenga farti un giro nelle raccolte di menu (ad esempio CSSPLay - trovi il riferimento tra i "link utili").

**lucavizzi** · 15-04-2008, 17:54

ne deduco che non hai visitato il link,
con :hover posso giocare solo sul display block/none, con javascript ho un effetto più fluido, andando a modificare in sequenza appunto la width=25px.

Qualcuno ha un suggerimento per il css?

**Mich_** · 15-04-2008, 18:07

Ho visitato il sito. E l'ho trovato improponibile (il mio browser e` konqueror - ma e` simile a FireFox).
I JS non funzionavano, e non si capisce nulla. Vedi immagine allegata.

E non e` vero che con l':hover puoi solo definire il display: puoi usare tutti gli attributi, compreso width e height.

**lucavizzi** · 15-04-2008, 18:17

so benissimo che non gira come vorrei nei browser stardard.
Sono qui apposta.

Discussione: position relative

Strumenti discussione

Ricerca discussione

Visualizza

position relative

Permessi di invio