Menu in css, mi aiutate a sistemare la larghezza?

[Tr|k`Tr4k]

Salve,
ho questo menu di prova clicca qui

Vorrei apportare 2 modifiche:
la prima e' che vorrei che la finestrella a destra non sia di dimensioni fisse, ma si allarghi fino a quanto e' largo il nome piu' lungo dell'hotel che deve uscire

La seconda modifica e' che vorrei inserire ogni nome hotel in una cella e non tutti gli hotel in una sola cella.

Sapete aiutarmi?

Il codice del css e' tutto presente nella pagina indicata.
Grazie

[Mich_]

Per il primo punto:
- anzitutto devi separare ul.makeMenu e ul.makeMenu ul in due blocchi distinti
- poi devi dare una larghezza diversa al sottomenu: per esempi puoi provare con width: 20em; : la larghezza in em ti permette di usare una dimensione proporzionale al carattere (e non al px, come adesso)

Per il secondo punto:
devi definire un border al[*] interno (.makeMenu ul li) eventualmente togliendolo dal li esterno

[Tr|k`Tr4k]

Originariamente inviato da Mich_
Per il primo punto:
- anzitutto devi separare ul.makeMenu e ul.makeMenu ul in due blocchi distinti
- poi devi dare una larghezza diversa al sottomenu: per esempi puoi provare con width: 20em; : la larghezza in em ti permette di usare una dimensione proporzionale al carattere (e non al px, come adesso)

Per il secondo punto:
devi definire un border al[*] interno (.makeMenu ul li) eventualmente togliendolo dal li esterno

uhm... forse non ho capito bene, ho provato a mettere 20em ma nei 5 stelle mi da il primo albergo su due linee forse perche' non ho fatto quello che dicevi qui: "devi separare ul.makeMenu e ul.makeMenu ul in due blocchi distinti"

In che modo dovrei farlo?

Come lo modifico sto codice?

<style type="text/css">

ul.makeMenu, ul.makeMenu ul, ul.makeMenu2 ul { margin: 0px; padding: 0px; }

ul.makeMenu, ul.makeMenu ul { width: 10em; border: 1px solid #006699; background-color: #e8f1ff; padding-left: 3px; cursor: default; margin-left: 30px; }
ul.makeMenu li { list-style-type: none; margin: 0px; position: relative; color: #000000; }
ul.makeMenu li > ul { display: none; position: absolute; top: 0px; left: 110px; }
ul.makeMenu li:hover, ul.makeMenu li.CSStoHighlight { background-color: #e8f1ff; color: #666666; }
ul.makeMenu ul.CSStoShow { display: block; }
ul.makeMenu li:hover > ul { display: block; }
ul.makeMenu li a { color: #000000; display: block; width: 100%; text-decoration: none; }
ul.makeMenu li a:hover { color: #666666; }
ul.makeMenu li:hover > a { color: #000000; }

ul.makeMenu *, { line-height: normal !important; } /* overriding my normal stylesheet */



</style><!--[if gt IE 5.0]>
<style type="text/css">
ul.makeMenu2, ul.makeMenu2 ul { background-color: #e8f1ff; } /* IE 5.5-7 needs this one */
</style>
<![if lt IE 7]>
<style type="text/css">
ul.makeMenu li { behavior: url( IEmen.htc ); }
ul.makeMenu ul { display: none; position: absolute; top: 2px; left: 78px; }

</style>
<![endif]><![endif]-->

[Mich_]

Ecco la pappa (quasi) pronta:

ul.makeMenu { 
  width: 12em;  
  border: 1px solid #069; 
  background-color: #e8f1ff; 
  padding-left: 3px; 
  cursor: default; 
  /*margin-left: 30px;  da verificare */
}
ul.makeMenu ul { 
  width: 30em; /* regola questa larghezza */
  border: 1px solid #069;
  background-color: #e8f1ff;
  padding-left: 3px;
  cursor: default;
  margin-left: 12em; /* dev'essere uguale a width del blocco a sinistra */
}
...
ul.makeMenu ul li { 
  border: 1px solid #069;
}

[Tr|k`Tr4k]

grazie mich

allora, ho provato come hai detto tu, solo che la larghezza del sotto menu la devo modificare io a mano, non era in automatico se l'albergo ha il nome piu' lungo.

Cmq su firefox e su explorer 7 funziona, sull'explorer piu' vecchio non pare che funzioni.

Andando per gradi, come posso fare a mettere ogni nome hotel in una cella?
Il codice come l'ho messo ora e' corretto o c'e' qualcosa che non serve?

[Mich_]

Devi fare piu` ordine nel codice HTML e nel CSS. Cosi` non e` possibile intervenire.

Anzitutto (HTML+CSS) devi usare meglio le indentazioni e gli acapo
Secondo (HTML) devi eliminare i tag <font>: interferiscono con il CSS
Terzo (CSS) devi eliminare i blocchi definiti due volte: ad esempio i seguenti si riferiscono agli stessi blocchi (nel tuo codice HTML):
ul.makeMenu li > ul
ul.makeMenu ul
E come questi, possono essercene altri (la cosa non e` sbagliata, ma crea confusione in chi deve "andarci dietro")

[Tr|k`Tr4k]

Originariamente inviato da Mich_
Devi fare piu` ordine nel codice HTML e nel CSS. Cosi` non e` possibile intervenire.

Anzitutto (HTML+CSS) devi usare meglio le indentazioni e gli acapo
Secondo (HTML) devi eliminare i tag <font>: interferiscono con il CSS
Terzo (CSS) devi eliminare i blocchi definiti due volte: ad esempio i seguenti si riferiscono agli stessi blocchi (nel tuo codice HTML):
ul.makeMenu li > ul
ul.makeMenu ul
E come questi, possono essercene altri (la cosa non e` sbagliata, ma crea confusione in chi deve "andarci dietro")

si ma eliminando i tag <font> come do la grandezza del font?

Come faccio a far funzionare tutto anche per explorer minore di 7.0?

[Mich_]

I CSS sono lo strumento per dare la formattazione. Se la formattazione la dai con gli attributi HTML i CSS vengono interpretati in modo diverso dai vari browser (possono funzionare oppure no).

Quindi per prima cosa devi ELIMINARE TUTTI gli attibuti e i tag di formattazione e trasferire la formattazione ai CSS.

Non e` questo il posto per fare un trattato su come si usano i CSS. per questo ci sono i tutorial.
Ti posso consigliare quello di HTML.it.

Perche` se non conosci niente, non possiamo avere un linguaggio comune, e perdiamo solo tempo.