Sfida: allineamento menù fatto con <ul><li></li><ul>

[DanSky]

Sto impazzendo con un allineamento verticale.

Date un occhiata a questo menù e ditemi perchè diavolo non mi si allinea al bordo top del suo <div> contenitore !!!
Le ho provate tutte: padding top, margin top, float, etc etc etc

http://www.webalice.it/dansky/bricolarge/index.htm

Chi è il guru che può suggerirmi la soluzione ????

[xxfuma85xx]

non capisco...
a me sembra allineato...
ho fatto anke qualke prova ma mi sembra allineato giusto.

magari ho capito male, cosa deve essere allineato a cosa? (usa gli ID dei tag.)

[Sickbrain]

Salve, ho visto il contest e voglio provare a dare una risposta:

Code CSS
div#menu {
	position:relative;
	width:750px;
	z-index:4;
	margin: 0px;
	top:-16px;
	left: 15px;
	padding: 0px;
	list-style-type: none;
	}
* html div#menu {
	position:relative;
	width:750px;
	z-index:4;
	margin: 0px;
	left: 15px;
	top:0px;
	padding: 0px;
	list-style-type: none;
}

La prima parte di codice è come quello che hai scritto, eccetto che per la parte in grassetto, il quale mi permette un posizionamento all'interno di un div come voglio io. Il tag top si può utilizzare anche in negativo.
Questo codice funziona correttamente su FF, ma su IE fa schizzare il menu in alto.

La seconda parte serve per "curare" il problema di IE; infatti il selettore universale *, abinato al comando html e il div specifico, può essere interpretato solamente da IE, tutti gli altri browser lo schifano. Il selettore universale * corrisponde a qualsiasi nome di elemento nel linguaggio del documento. Se una regola non ha un selettore esplicito, il selettore universale viene dedotto.

Noterai inoltre in IE che le immagini risultano un pò staccate fra di loro, devi quindi controllare gli elementi che costituiscono il menu (li) e vedere il padding e/o margin se vanno bene.

Spero di esserti stato d'aiuto.

P.S. Il titolo di questo post parla di una sfida, una sfida presupone un premio....che ho vinto?

[DanSky]

top -16px ???
E che soluzione è ???
Dreamweaver disegna bene il menù. allineato sul bordo a 0px, come dovrebbe essere.
Mettere -16px è un barbatrucco anomalo...
Se è top=0 al top deve stare !

[Sickbrain]

Dreamweaver?
Barbatrucco?

Esiste una differenza tra gli editor HTML e i browser: i secondi fanno quello che gli pare!

Se vuoi un consiglio impara che gli editor non sono mai troppo affidabili e ti conviene sempre testare i risultati su diversi browser.

Se ti va bene il codice permette di ottenere il menu allineato in alto sia con FF che con IE, se no, pazienza.
Trova una soluzione tu....

[DanSky]

eddai non ti incazzare...
Vorrei insistere nel cercare la soluzione ideale..
Ieri lo stesso menù non dava questo problema, e non riesco ad individuare la causa che lo ha innescato !

[bagu]

*{margin:0; padding:0;}

div#menu {
position:relative;
width:750px;
z-index:4;
margin: 0px;
left: 15px;
padding: 0px;
list-style-type: none;
}
div#menu ul{margin-left:8px;}
div#menu ul li{
position:relative;

float:left;
text-align: center;
font-size: 10px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 0px;
list-style-type: none;
line-height: 25px;
margin-left:-22px;
}
div#menu a{
float:left;
width:136px;
height:26px;
background-image: url(images/buta.gif);
background-repeat:no-repeat;
color: #FFFF99;
text-decoration: none;
list-style-type: none;
}
div#menu a:hover {
background-image: url(images/butb.gif);
background-repeat:no-repeat;
color:#FF9900;
}


#content {
position:absolute;
left:41px;
top:43px;
width:auto;
height:174px;
z-index:5;
background-color: #666666;
}



con firefox è ok, ma dovrebbe andare anche con ie

[DanSky]

mmm ok risolto !
la differenza nel codice la fa
*{margin:0; padding:0;}

che significa l'asterisco ? lo applica a tutti ?

Ho provato ad applicare a tutti i selettori i parametri
margin:0px; padding:0px; ma non è la stessa cosa.
E allora che significa l'asterisco ? Cosa fa di più ?

[bagu]

posta il css intero che hai applicato o metti la pagina corretta online.
in ogni caso l'* applica a tutto le proprietà a meno che queste non vengano sovrascritte da un ordine diverso.