elemento P flluido con float fissi

[s0r42]

      <div style="position:relative; width:100%; height:100%;">
        <div style="position:absolute; bottom:0px; left:0px;">
          <p style="height:42px; width:100px; float:left;">Link</p>
          <p style="height:42px; width:100px; float:left;">Link</p>
          <p style="height:42px; width:100px; float:left;">Link</p>
          <p style="height:42px; width:100px; float:left;">Link</p>
          <p style="height:42px; [B]width:*tutto lo spazio rimanente a destra*;[/B] float:left;">elemento vuoto, contiene solo un element grafico ripetuto</p>
        </div>
      </div> 

ho una barra dei link organizzata come mostrato sopra
i primi elementi P contengono uno sfondo grafico ed un link, vengono caricati dinamicamente da un database e non posso prevedere a priori quanti saranno e quindi quanto spazio andranno ad occupare
l'ultimo elemento P contiene solo una parte grafica (diversa dalle altre) che serve semplicemente a dare una continuità visiva ai link fino al lato destro della pagina

la domanda è: come faccio a dire all'ultimo P "prosegui fino a quando sbatti sul bordo destro senza prenderti più spazio orizontale di quanto te ne spetti"?

[Mich_]

Non e` che par caso vuoi fare un menu orizzontale? In tal caso hai sbagliato la marcatura.
Vedi questa:

<div style="position:relative; width:100%; height:100%;">
  <ul id="menu">[*]Link</p>[*]Link</p>[*]Link</p>[/list]
</div>


CSS:

#menu {
  position: relative;
  bottom:0px;      /* ???? */
  left:0px;
  backround: url(tuagrafica.gif) center right;
}
#menu li {
  margin: 0; padding: 0;
  height:42px;
  width:100px;
  float:left;
}
#menu a {
  display: block;
  width: 100%; height: 100%;
}

[s0r42]

perchè mi hai segnato bottom con i punti interrogativi?
in effetti su IE mi da un effetto strano sollevando i tag P di un pixel.

non ero stato abbastanza chiaro in effetti, è un menu orizontale
solo che a sinistra grandi vanno i link principali con una grafica di sfondo semitrasparente
poi elemento di congiunzione per la grafica
link secondari con grafica diversa e che arrivano fino al bordo destro

se può servire posso provare ad inserire uno screenshot del risultato che voglio ottenere
intanto sperimento con la soluzione che mi hai passato

[Mich_]

perchè mi hai segnato bottom con i punti interrogativi?

Perche` non ho capito che ci fa una cosa che metti all'inizio e viene posizionata in fondo alla pagina (o ho capito male?)

Io sono in linea di massima contrario ad usare position: si puo` fare (quasi) tutto senza usarlo, ed i siti vengono piu` facilmente cross-browser, cross-platform e cross-monitor/risoluzione.

E` sempre molto importante usare i marcatori per il loro significato semantico, altrimenti oltre ad avere problemi con i motori di ricerca, avrai problemi anche con browser non visuali o per dispositivi a monitor piccolo.

[s0r42]

la bozza grafica è questa
ho messo in evidenza la trasparenza del menu
nella parte blu ci andrà un'immagine, ed il menu è allineato in basso rispetto a questa immagine ma si trova sempre in alto nella pagina


come vedi non si può usare uno sfondo unico perchè i link sono dinamici e quindi non ne conosco il numero a priori


PS: ho provato ad usare uno e due list ma non va

[Mich_]

La logica dice che devi usare due liste, ambedue flottate a sinistra:

<div id="bloccomenu">
  <div>
    <ul id="menuprin">[*]...
      ....[*]...
      <li class="ultimo">[/list]
    <ul id="menusec">[*]...
      ....[*]...[/list]
  </div>
</div>

CSS:
#bloccomenu {
  height: ...
  width: 100%;          /* o altro ... */
  position: ...; /*in effetti e` necessario */
}
#bloccomenu ul, #bloccomenu li {   /* vale per ambedue i menu */
  list-style-type: none;
  margni:0;
  padding: 0;
}
#bloccomenu div {
  height: 1.3em;     /* deve essere espresso in em */
  width: 100%;  
  position: relative;
  bottom:0; left:0;
}
#bloccomenu div:after { /* oppure da qualche altra parte */
  clear: both;
}

# menuprin {
  height: 100%;
  float: left;
}
# menuprin li {
  height: 100%;
  float: left;
  border-right: 1px solid blue;
  backgound: #ccc; /* oppure una gif/png semitrasparente */
}
# menuprin .ultimo{
  height: 100%;
  float: left;
  background: url(...);  /* comprende la fine del menu princ e il pezzo chiaro del sec */
  width: ...;          /* in questo e` necessario */
}

#menusec {
  float: left;
  ...
}

Nota che i due menu (princ e sec) sono alti uguali, anche se i blocchi interni (i[*] oppure gli <a>) possono essere ad altezza diversa.
Tutte le altezze interne devono adattarsi al font usato, per cui vanno espresse in em
Nei li dovrai anche aggiungere

[s0r42]

non funge

naturalmente ho messo le definizioni dello stile all'interno del tag style nell'head

mi mostra i due elenchi in verticale uno sopra l'altro

[Mich_]

Se due oggetti non si affiancano e` perche` manca un float oppure perche` sono troppo larghi per starci (sempre che non ci siano errori nei posizionamenti).

Hai una bozza in linea? E` possibile vederla?

[s0r42]

online non ho nessuna bozza

[Mich_]

Scusa il ritardo. Sono stato impegnato in una (lunga) conversazione al telefono.

adesso sto provando a giocare un po con overflow ed il posizionamento assoluto, ma senza molto successo

Il posizionamento assoluto sarebbe da evitare, dato che poi perdi la successione dei blocchi nel layout.
Comunque se vuoi usare i posizionamenti, a mio parere sono molto illuminanti questi due articoli: I posizionamenti assoluti e Capire i posizionamenti relativi.
E` un argomento un po' ostico: ma se non capisci questi, e` difficile che riesci ad usare i posizionamenti.

Overflow puo` servire, ma solo dopo che gli altri problemi sono risolti. Semmai togli un po' di voci dei menu, in modo da non aver problemi di blocchi che escono dal loro spazio.

Prova comunque a postarte il codice HTML+CSS che stai usando.