Condividi:        

CSS e Select

Discussioni e opinioni costruttive sul mondo dell'informatica.
Per la soluzione di problemi specifici fare riferimento alle sezioni di assistenza!

Moderatori: aurelio37, Anthony47, axelrox

CSS e Select

Postdi mrblue » 05/12/02 12:32

Salve qualcuno sa come portare una SELECT in secondo piano rispetto
ad un DIV? Ho provato modificando z-index negli style ma senza risultato.
Ho un tips in un div che mi compare sotto la SELECT e non si può vedere.

Grazie e ciao
Sbagliare è umano, ma per riuscire davvero a incasinare completamente le cose ci vuole un computer.
---------------------
http://mrblue73.blogspot.com/
mrblue
Utente Senior
 
Post: 364
Iscritto il: 22/10/01 01:00
Località: Roma

Sponsor
 

Postdi s1kboy » 05/12/02 14:12

select nel senso dell'elemento form? o nel senso php/sql?

usi dreamweaver? quel programma è una figata, ti fa tutto
automaticamente. cmq se lavori con i layers, usa soltanto
i div che altrimenti nascono troppi casini; dreamweaver ha
poi la sua lista layers, i quali gestisce automaticamente. adesso
non so a memoria se c'è un jscript predefinito per cambiare
l'ordine layers, ma c'è quello per nasconderli e visualizzarli.
devi però stare attento, che i vari browser supportano 'ste
cose in modo differente.

spero di esserti stato d'aiuto :)
74 or 75, that's the question! or even 90?
s1kboy
Utente Junior
 
Post: 70
Iscritto il: 07/10/02 13:46
Località: Bolzano

Postdi mrblue » 05/12/02 14:30

La select come elemento dei form.
Anch'io uso dreamweaver ma più che nascondere la select
cercavo una proprietà dei fogli di style per ovviare a questo inconveniente, che ho solo con l'elemento select.
Se il div è su un input o un button o qualunque altro elemento va in primo piano, è solo con la select che non lo fa!! Eppure uso le stesse classi di stile.
Bhaaa
grazie comunque
Sbagliare è umano, ma per riuscire davvero a incasinare completamente le cose ci vuole un computer.
---------------------
http://mrblue73.blogspot.com/
mrblue
Utente Senior
 
Post: 364
Iscritto il: 22/10/01 01:00
Località: Roma

Postdi Frengo78 » 05/12/02 14:44

Ci avevo provato anche io una volta. Conosco il problema. Alla fine ho desistito :cry:
Knowledge is a weapon
Frengo78
Utente Senior
 
Post: 8985
Iscritto il: 16/07/02 08:41
Località: Torino

Postdi mrblue » 05/12/02 14:57

Quindi dici che devo mettermi l'anima in pace... :(
Però è molto strano...

ciao
Sbagliare è umano, ma per riuscire davvero a incasinare completamente le cose ci vuole un computer.
---------------------
http://mrblue73.blogspot.com/
mrblue
Utente Senior
 
Post: 364
Iscritto il: 22/10/01 01:00
Località: Roma

Postdi Frengo78 » 05/12/02 15:05

No, dico che avrei voluto saperlo pure io allora. Non ho la soluzione ma l'argomento mi interessa pure a me
Knowledge is a weapon
Frengo78
Utente Senior
 
Post: 8985
Iscritto il: 16/07/02 08:41
Località: Torino

Postdi Triumph Of Steel » 05/12/02 17:22

Io credo di non aver capito.. esiste online un'esempio pratico da vedere??
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Postdi piercing » 05/12/02 18:12

spiacente di darvi la triste notizia che non funziona...

la select (=menu a tendina) non si copre con un DIV... è un bug del componente ormai famoso...

puoi provare ad usare lo style visibility=hidden e poi a sovrapporre il livello...

è inutile facciate prove... le ho già fatte io per almeno un decennio...

;)
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi piercing » 05/12/02 18:25

vi do un esempietto di codice da studiare... mettetelo in un documento .htm e fate le prove... (funge solo su IE.... non ho tempo per il crossbrowsering).
In questa maniera si riesce ad ovviare al problema.

Codice: Seleziona tutto
<div id="liv1" style="position: absolute; top:50px; left:10px; width:100px; height:100px; border: 1px solid black; visibility:visible;">
Livello 1
</div>
<div id="liv2" style="position: absolute; top:50px; left:10px; width:100px; height:100px; border: 1px solid red; visibility:hidden;">
<select>
   <option>Livello2</option>
</select>
</div>
<input type="button" value="Vedi il livello 2" onclick="document.all['liv2'].style.visibility='visible'">
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi Triumph Of Steel » 05/12/02 18:35

Come diceva qualcuno... DreamWeaver ha i suoi JS...

Codice: Seleziona tutto
CROSS-BROWSER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Untitled</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 44px; top: 69px;">asdasdasdasdas</div>
<form action="#" method="post">
<input type="button" Value="Clikka per nascondere" onClick="MM_showHideLayers('Layer1','','hide')"></form>

</body>
</html>
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Postdi s1kboy » 05/12/02 19:01

poi la cosa più fikka per risolvere il tuo problema di nascondere il select è ovviamente mettere un altro layer esattamente sopra il select, con dentro qualche gif, e facendo visible quel layer quando il select non lo vuoi far vedere. semplice no? 8)
74 or 75, that's the question! or even 90?
s1kboy
Utente Junior
 
Post: 70
Iscritto il: 07/10/02 13:46
Località: Bolzano

Postdi piercing » 05/12/02 21:37

credo che anche con la gif dentro al div superiore, la select nel div inferiore resti visibile (solo la select, non tutto il livello)...

mi sbaglio?
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi Triumph Of Steel » 05/12/02 23:32

Sicuramente non avrò ancora capito... cmq...
il prb qual'è?

Riuscire a nascondere un campo SELECT di un form a seconda della situazione e/o click su qualche cosa??

Codice: Seleziona tutto
Non so se è CrossBrowser! ma su IE funziona

<!-- stesso codice di prima -->
<body OnLoad="MM_showHideLayers('Layer2','','hide');">
<form action="#" method="post">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 44px; top: 69px;">
<select name="thor">
<option>Valore 1</option>
<option>Valore 2</option>
<option>Valore 3</option>
</select></div>
<input type="button" Value="Hide Select/Show DIV" onClick="MM_showHideLayers('Layer1','','hide','Layer2','','show')">Clikka per nascondere il SELECT e visualizzare l'altro DIV<br>
<input type="button" Value="Show Select/Hide DIV" onClick="MM_showHideLayers('Layer2','','hide','Layer1','','show')">Clikka per visualizzare il SELECT e nascondere l'altro DIV<br>
</form>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:1; left: 44px; top: 69px;">Al posto del SELECT</div>
</body>

Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

un pò di chiarimenti...

Postdi mrblue » 06/12/02 09:32

Scusate forse mi sono espresso male.
Il mio problema consiste esattamente nel bug rilevato da piercing.
Ovvero ho un div che compare quando il mouse è su un determinato componente mostrandone l'utilizzo (es: clicca per uscire), ma quando il componente è vicino ad una select si vede solo un pezzo di div.
Un po tipo questo:
Codice: Seleziona tutto
<div id="Layer1" style="position:absolute; left:19px; top:15px; width:302px; height:54px; z-index:1; background-color: #0000FF; layer-background-color: #0000FF; border: 1px none #000000;" class="unnamed1">
Livello 1 
</div>
<div align "center"id="Layer2" style="position:absolute; left:39px; top:39px; width:510px; height:118px; z-index:0">
  <form name="form1" method="post" action="">
    <p>
      <input type="text" name="textfield">
    </p>
    <p>
      <select name="select">
        <option selected>Prova</option>
      </select>
    </p>
  </form>
</div>


Quindi in realtà non mi serve far sparire la select ma solo metterla in secondo piano quando è il DIV vi va sopra.
Grazie a tutti cmq.
PS:
Non ho provato se con netscape invece funziona
Sbagliare è umano, ma per riuscire davvero a incasinare completamente le cose ci vuole un computer.
---------------------
http://mrblue73.blogspot.com/
mrblue
Utente Senior
 
Post: 364
Iscritto il: 22/10/01 01:00
Località: Roma

Postdi piercing » 06/12/02 10:55

ToS... vedo di spiegartelo a parole mie... se poi serve ti butto giù due righette...

con i DIV posso praticamente creare una pagina HTML come fosse a livelli sovrapposti... il problema è che quando nel livello inferiore c'è una select, il livello superiore, SOLO SULLA SELECT, non la copre.

quindi resta un bruttissimo effetto perchè in genere si vuol coprire qualcosa che non si riesce a coprire... con il risultato che fa veramente schifo...

mi sono spiegato un pò?

per mrblue:
ho capito perfettamente il problema... ed è stato quello che mi ha insegnato il DHTML in maniera seria... te l'ho detto... l'unica cosa che puoi fare è quella di far sparire la select sull'evento richiesto... non è il massimo neanche questo graficamente.... ma non ci sono alternative...
pigliatela con MS (tanto per fare una cosa nuova).

Non ho esperienze con altri browser quindi non ti so dire che effetto avrebbe con i non IE (e comunque IE è quello che gestisce in maniera migliore i singoli componenti.... te lo dimostra anche l'infinito numero di stili di gestione della grafica, che gli altri browser neanche conoscono...).

Ciao...
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi piercing » 06/12/02 11:09

ToS... solo per te...
giocaci quanto vuoi, ed è anche dimostrazione che le immagini non coporono na mazza! ;)

Codice: Seleziona tutto
<div id="liv2" style="position: absolute; top:50px; left:10px; width:100px; height:100px; border: 1px solid red; visibility:hidden;">
   <select><option>Livello2</option></select>
   <br>
   <img src="http://www.pc-facile.com/phpBB/images/avatars/d461355e3cbae5355d2c8.gif" width="60" height="60" border="0" alt="">
</div>

<div id="liv1" style="position: absolute; top:50px; left:10px; width:100px; height:100px; border: 1px solid black; visibility:hidden;">
   <img src="http://www.pc-facile.com/phpBB/images/avatars/d5ababb73d7e8be1cb6d7.gif" width="100" height="100" border="0" alt="">
</div>

<input type="button" value="Div Sotto" onclick="if(document.all['liv2'].style.visibility=='visible') {document.all['liv2'].style.visibility='hidden'} else {document.all['liv2'].style.visibility='visible'}">
<input type="button" value="Div Sopra" onclick="if(document.all['liv1'].style.visibility=='visible') {document.all['liv1'].style.visibility='hidden'} else {document.all['liv1'].style.visibility='visible'}">


Come vedi la tua immagine viene coperta... mentre la SELECT nò...
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi mrblue » 06/12/02 11:50

Grazie piercing almeno ora so a chi dare la colpa!! :evil:
Sperendo ke in futuro la compatibilità con i CSS migliori...
Sbagliare è umano, ma per riuscire davvero a incasinare completamente le cose ci vuole un computer.
---------------------
http://mrblue73.blogspot.com/
mrblue
Utente Senior
 
Post: 364
Iscritto il: 22/10/01 01:00
Località: Roma

Postdi Triumph Of Steel » 06/12/02 16:26

Pier:

Il tuo script mi funziona.. se io clikko
Div Sotto, poi Div Sopra, e poi ancora DivSotto, la tua immagine copre tutto (pure il select) (praticamente quello che scritto io... però credo sia l'unica soluzione, togliere il SELECT per far vedere il tips, e poi rimettere il SELECT)


in ogni caso, se interessa.. la stessa cosa avviene per i flash...

i flash hanno la priorità su tutto!!!
e non vengono nascosti da nessun livello...
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Postdi piercing » 07/12/02 01:52

ToS, stavolta sono io che non ho capito te, ma va bene uguale... eheheh, l'importante è essersi capiti in generale... ;)

Del flash non lo sapevo, non l'ho mai usato...
Avatar utente
piercing
Moderatore
 
Post: 7569
Iscritto il: 10/04/02 10:34
Località: Roma

Postdi Triumph Of Steel » 07/12/02 03:03

Pier.. praticamente prima nascondi il select e fai vedere l'altro DIV, poi nascondi il DIV e fai rivedere il select.. 2 operazioni in una...

questo può essere fatto anche con un OnMouseOver piuttosto che con un OnClick...

Il flash mi ha fatto sclerare una volta.. ho dovuto cambiare la posizione del menu (cioè dello script) perchè non andasse sotto al flash!!
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00


Torna a Discussioni


Topic correlati a "CSS e Select":


Chi c’è in linea

Visitano il forum: Nessuno e 33 ospiti