Sul posizionamento assoluto di un'etichetta

**pezzo** · 27-03-2007, 19:54

Ragazzi, ho un problema che non so risolvere.

Guardate questa prova

Io vorrei che passando sul link, la finestra che si apre fosse posizionata orizzontalmente a destra del link (e fino a qua capisco come fare) mentre verticalmente dovrebbe essere centrata rispetto al link stesso... e qua nascono i problemi...

Come fare?

Spero di essermi spiegato chiaramente, casomai chiedete!

**Mich_** · 28-03-2007, 09:20

C'e` un po' di confusione nei CSS.

Il float degli span non serve: con il position:absolute il float non ci azzecca.
Invece puoi definire la posizione assoluta dello span rispetto al <body> specificando left e top nel CSS dello span

Vedi anche l'articolo: I posizionamenti assoluti

**pezzo** · 28-03-2007, 09:39

Si hai ragione, il float era sbagliato...

Sul posizionamento: se uso top, lo span sarà sempre fisso in punto... io vorrei invece che la sua posizione sia relativa a quella del link su cui sto passando...

forse mi conviene cambiare html e css e posizionare in maniera relativa un elemento rispetto ai link?

**Mich_** · 28-03-2007, 09:51

forse mi conviene cambiare html e css e posizionare in maniera relativa un elemento rispetto ai link?

Esatto!
Se usi i posizionamenti relativi la cosa e` chiaramente diversa: la posizione dello <span> e` relativa al suo contenitore, che nel tuo caso e` il link, che sta dentro il[*].

Forse devi anche dare display:block al link.

**pezzo** · 28-03-2007, 10:43

Sai però qual'è il problema di questa soluzione?

Che se i link sono nella cella di una tabella (come sarà nella applicazione che mi serve), appena andrò su un link la cella si espanderà a contenere anche l'immagine... rovinando il corretto layout della cella!

:master: :master:

Che ne pensi? :master:

**Mich_** · 28-03-2007, 10:50

In effetti ... la cosa puo` essere noiosa (non sapevo del fatto della tabella) .

Allora il posizionamento assoluto e` meglio.

Dovresti in tal caso posizionare ciascun elemento nei pressi della cella.
Puoi fare la cosa:
- in modo mauale,
- con un sistema di calcolo lato server (hai necessita` di conoscere le dimensioni delle celle, che quindi devono essere dimensionate in px),
- con un sistema automatico in JS: in tal caso il JS si puo` usare anche se la pagina deve risultare accessibile (se JS non e` abilitato tutte le immagini si apriranno nello stesso punto, senza perdere funzionalita` - chiaramente occorre pensarci un pelo, ma e` fattibile)

**pezzo** · 28-03-2007, 11:02

Scusami se forse sto andando OT con questa richiesta... ma mi spieghi questa possibilità?

con un sistema di calcolo lato server (hai necessita` di conoscere le dimensioni delle celle, che quindi devono essere dimensionate in px),

perché i link che stanno dentro la tabella e le relative immagini dentro lo span vengono generate dinamicamente via php...

**Mich_** · 28-03-2007, 11:32

Nel CSS dello <span>, quello che di default e` nascosto e che viene visualizzato all':hover, ci deve essere SEMPRE:

codice:

a {
  text-decoration: none;
}

a span {
  display: none;
  text-align: left;
  position: absolute;
  padding: 5px 10px;
  border: 1px #ccc dotted;
  background: #f4f4fc;
  color: #333;
  cursor: pointer;
}

a:hover {
  direction: ltr; /* corregge un bug di ie */
  text-decoration: none;
}

a:hover span {
  display: block;
}

Attenzione agli spazi: in qualche browser non sono accettati spazi prima dei duepunti

Poi ciascun elemento avra` una sua posizione che dipende da dove deve essere visualizzato:
#r1c1 { left: 100px; top: 10px; }
#r1c2 { left: 400px; top: 10px; }
#r1c3 { left: 600px; top: 10px; }
...
#r2c1 { left: 200px; top: 110px; }
#r2c2 { left: 400px; top: 110px; }
#r2c3 { left: 600px; top: 110px; }
...

Ho supposto che ciascuna cella sia larga esattamente 200px, e alta esattamente 100px: tu poi dovrai fare i conti in base alle tue esigenze.

Nel codice HTML ci dovra` quindi essere:

codice:

<table>
  <tr>
    <td><a ...><span id="r1c1">...</span></td>
    <td><a ...><span id="r1c2">...</span></td>
    <td><a ...><span id="r1c3">...</span></td>
  </tr>
  <tr>
    <td><a ...><span id="r2c1">...</span></td>
    <td><a ...><span id="r2c2">...</span></td>
    <td><a ...><span id="r2c3">...</span></td>
  </tr>
  ...
</table>

Come dire che l'id serve solo per definire la posizione del blocco span, mentre le altre caratteristiche vengono settate dalle regole generali.

Il CMS dovra` generare un codice HTML del tipo mostrato. Per eventuali info dovresti chiedere nel forum PHP.

Ribadisco che la cosa e` cosi` semplice perche` le celle hanno sempre altezza e larghezza espresse in una unita` di misura definita. Non poi lasciare che le dimension le sistemi il browser.
(ho usato misure in px per semplificare il concetto: misure in em sono altrettanto valide)

**pezzo** · 28-03-2007, 12:21

Hai ragione, non avevo considerato la possibilità di bloccare l'altezza della cella!

grande!

farò qualche prova e ti faccio sapere! Grazie mille Mich_!

Discussione: Sul posizionamento assoluto di un'etichetta

Strumenti discussione

Ricerca discussione

Visualizza

Sul posizionamento assoluto di un'etichetta

Permessi di invio