Navigation bar fluida

[pikkio74]

Ciao a tutti,
vorrei sapere se con i css è realizzabile una navigation bar fluida cross-browser come questa

Grazie!

[Mich_]

Se ho capito giusto, vuoi un menu orizzontale fluido. Ce ne sono vari e di vario tipo gia` pronti.

Cerca nella sezione menu dei "link utili"

[pikkio74]

Ciao Mich grazie della segnalazione.

Ho passato un paio di giorni a spulciarmi i link. Ho trovato veramente di tutto ma un menu fluido orizzontale con immagini non mi sembra di averlo visto

[Mich_]

A domanda generica ... risposta generica; a domanda specifica, risposta specifica.

Fluido puo` voler dire cose leggermente diverse.
Inoltre il menu proposto, oltre a non essere fluido (io vedo uno scroll orizzontale della pagina), e` fatto a tabelle. Cio` lo mette fuori dalle possibilita` di imitarlo con una programmazione moderna.

Per una cosa che assomigli ad una tabella, dovresti:
* usare una lista non ordinata
* togliere list-style sia nel[*] che nel <ul>
* definire margin:0 e padding:0 sia nel[*] che nel <ul> (salvo ridefinizioni degli stessi)
* nel[*]
- non definire width
- definire eventualmente min-width (espresso in em)
- usare padding orizzontale auto (margin se vuoi che sia crossbrowser)
* nell'<a>
- definire width:100%; height:100%; (che in quel sito non hanno usato)

Per gli angoli arrotondati (che devi applicare all'<ul>) puoi usare i nifty corners (li trovi tra i link utili)

Ma ritengo che un menu di quel tipo ci sia tra le varie raccolte. Poi dovrai sistemare un po' la grafica e rifinire i CSS.

[Room237]

Io vorrei fare un menu orizzontale che adatti le singole voci alla larghezza, ovvero ho uno spazio di 760px e 8 voci di menu di larghezza diversa (home, dove siamo...) e vorrei che stessero belle allineate all 100% della larghezza anche se dovessero essere meno di 8 o più corte/lunghe

con una tabella basterebbe fare tante celle quante sono le voci e dare un width 100%
inoltre, al rollover dovrebbero cambiare colore di sfondo (questo è in realtà il problema più grosso, dato che non si può usare la pseudoclasse hover su un li)

[Mich_]

Senza saperlo ho gia` dato gli spunti corretti per la soluzione.

Il tuo <ul> deve essere largo 100% (chiaramente anche i blocchi che lo contengono devono avere larghezza definita)
Poi puoi giocare con i margini o padding automatici.

Il cambio colore lo devi fare sul blocco <a>, che va definito
display: block;
width: 100%
height: 100%

questo è in realtà il problema più grosso, dato che non si può usare la pseudoclasse hover su un li

In realta` e` un'affermazione sbagliata. Nei CSS2 si puo` fare, ma IE non lo supporta. In pratica e` vero: non si puo` usare l':hover su un tag diverso da <a>.

[Room237]

non si riesce a dare un padding automatico...
http://www.ildavid.com/provatab.html questa è la prova.
il css:

#container {
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-size: 11px;
	width:600px;
	left:50%;
	position:absolute;
	margin-left:-300px;
	background-color:#0066CC;
}
#container ul {
width:100%;
margin:0;
padding:0;
list-style:none;
height:20px;
}
#container ul li {
float:left;
height:100%;
}
#container ul li a {
display:block;
width:100%;
height:100%;
background-color:#FF0000;
color:#FFFFFF;
text-decoration:none;
}
#container ul li a:hover {
background-color:#CCCCCC;}

l'html

<div id="container">
  <ul>[*]Home[*]Chi siamo[*]Prodotti[*]Contatti[*]Dove siamo[*]E-commerce[*]Supporto tecnico[/list]
</div>

[Mich_]

Secondo quanto avevo scritto avresti dovuto inserire:
padding: 0 auto;
oppure margin 0 auto;
(ma forse lo hai inserito e poi tolto ...?)
Comunque prova con margin, poi se funziona passa al padding.

Forse e` anche necessario dare un float: right; all'ultimo dei[*], in modo da forzare i vari li ad occupare tutto lo spazio.

[Room237]

non cambia nulla ne con padding ne con margine, sia sul LI che sul A
e poi siamo sicuri che padding possa avere auto come valore?

[Mich_]

padding: auto e` valido, ma intanto prova con margin.
Hai provato a dare il float: right all'ultimo blocco?

E hai provato a "chiudere" correttamente i vari float con un clear? Perche` altrimenti il contenitore non racchiude i blocchi con float (restano liberi e flottanti, fuori dal contenitore).

#container ul {
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  height:20px;
}
#container ul:after {
  clear: both;
}
#container ul li {
  margin: 0 auto;
  float:left;
  height:100%;
  background: 0f0; 
}
#container ul li a {
  display:block;
  width:100%;
  height:100%;
  background-color:#F00;
  color:#FFF;
  text-decoration:none;
}
#container ul li a:hover {
  background-color:#CCC;
}