riga vuota

[Sonikag]

Ho questo css:

#desc1, #desc2, #desc3, #desc4, #desc5{
  display: none;
}

e questo codice:

<div id="desc1">descrizione1</div>
<div id="desc2">descrizione2</div>
<div id="desc3">descrizione3</div>
</p>

quando tramite javascript faccio apparire uno di quei div il resto della pagina mi shifta giù, mentre vorrei che rimanesse una riga vuota, che si riempie.

(Sostituire il display none con un visible non posso per altri motivi)

[pierofix]

Invece di usare display potresti usare text-indent:-9999px in modo da far scomparire il testo a sinistra.

Con javascript poi lo imposti a zero e il gioco è (dovrebbe ) fatto.

[Sonikag]

mmmm altre idee???
ci ho messo 2gg per fare quel js....

[pierofix]

Che vuol dire? Non capisco. Se è solo per modificare una stringa nel js non credo ci siano problemi: credo tu abbia previsto l'inserimento di stringhe o istruzioni ripetitive in variabili o funzioni, no?

Altrimenti prova a descrivere meglio il contesto e i limiti (hai accennato a un'impossibilità nell'utilizzo di visibility).

[Sonikag]

HTML
Foto piccole linkate:

[img]img/foto/Imm007p.jpg[/img]

Javascript:

function mostra (cosa, liv) {
  if(cosa.length>2) {
	document.getElementById('immagine').src = cosa;
    document.getElementById('foto').style.visibility = 'visible';
	document.getElementById(liv).style.display = 'block'; 

  } else {
    document.getElementById('foto').style.visibility = 'hidden';
 	document.getElementById(liv).style.display = 'none';
  }
}

livelli che si vedo/nonvedo

<div id="foto">[img]QUALCOSA[/img]</div>



<h3>
<div id="desc1">descrizione1</div>
<div id="desc2">descrizione2</div>
<div id="desc3">descrizione3</div>
<div id="desc4">descrizione4</div>
</h3>
</p>

CSS:

#foto {
  visibility:hidden;
}
#desc1, #desc2, #desc3, #desc4, #desc5{
  display: none;
}

[pierofix]

Ops, noto un po' di caos nel markup, oltre a cose che non capisco nel js.

1. Questo è ridondante: basterebbe il secondo.

else {
   document.getElementById('foto').style.visibility = 'hidden';
   document.getElementById(liv).style.display = 'none';
}

2. Non puoi inserire un h3 come figlio di p: questo non è consentito dalla sintassi del linguaggio.

Mmm, forse è da ripensare il meccanismo (e valutarne la reale utilità): sei agli sgoccioli con il tempo?

[Sonikag]

Quello che voglio è una cosa del genere:

Immagini piccole, all'hover del mouse appaiono le immagini grandi con sotto la relativa descrizione.

per le immagini non ci sono problemi il tutto appare in un box con delle dimensioni prefissate.

l'else mi serve per il mouse out.

[pierofix]

Cioè tu vuoi un rollover disgiunto, giusto?

[pierofix]

Mmm, pensandoci si potrebbe semplificare un po'.

<div id="anteprime">
   [img]...[/img]
   [img]...[/img]
   
</div>

<div id="scheda">
   [img]vuoto.gif[/img]
   <p id="desc"></p>
</div>

var foto = document.getElementById("foto");
var descrizione = document.getElementById("desc");
function mostra (img,d) {
   foto.src = img;
   descrizione.innerHTML = d;
}
function nascondi() {
   foto.src = "vuoto.gif";
   descrizione.innerHTML = "";
}

Una cosa del genere?

[Sonikag]

Spe... tieni presente che di js so poco nulla...

la funzione inizia così? niente richiamo di variabili?


il css???