Perchè mozilla no?

**web3** · 15-06-2004, 10.13.59

Ho creato (e messo online come prova) un menu con sothink dhtml menu.
Sul loro sito dice che è compatibile con la maggior parte det browsers (mozilla incluso) http://www.sothink.com/webtools/dhtm...patibility.htm....
Invece con ie lo vedo e con mozilla no!
Ho sbagliato io a inserire il codice o racontano balle loro?

15-06-2004, 10.17.48

con quale Mozilla?

15-06-2004, 10.19.20

Qui devi tornare al discorso validazione W3C già iniziato in un'altro thread.
Vai qui controlla, e quando avrai l'ok, avrai un sito visibile da tutti i browser.

**web3** · 15-06-2004, 10.44.57

Originalmente inviato da skatepeppe46

con quale Mozilla?

firefox 0.8 (ma il mototre nn è lo stesso x tutti?)

x serverplus... Non mi interessa la validazione, (il mio sito è empiricamente ben visibile su ie, firefox, opera) vorrei solo sapere perchè il menu dhtml nn funzia con mozilla tutto qui

**makpaolo** · 15-06-2004, 10.45.12

link della prova?

**web3** · 15-06-2004, 17.46.23

Originalmente inviato da makpaolo

link della prova?

prova?
Il sito in questione è nescio,has.it

15-06-2004, 19.08.38

Perche' insistete a fare i menu' a scomparsa con javascript quando si possono fare con il css?

http://www.csszengarden.com/?cssfile...css&page=6

**web3** · 15-06-2004, 20.17.12

Originalmente inviato da CoD

Perche' insistete a fare i menu' a scomparsa con javascript quando si possono fare con il css?

http://www.csszengarden.com/?cssfile...css&page=6

Dici che posso fregare il css da li?

(p.s il menu è compatibile con firefox, infatti se andate su www.web3.altervista.org/nuke/menu/menu.htm si vede correttamente...qualcuno sa spiefarmi perchè?)

**heracleum** · 15-06-2004, 20.33.11

Mio Dio quanta confiuscion :)

Siamo riusciti a tirare in ballo tutte le tecnologie possibili, pure la validazione w3g (che in effetti non c'entra nulla con il funzionamento). Menu in CSS senza Javascript? bah, e su quanti browser si vedranno? su Mozilla 1.6 li vedo ma su explorer 5.5 non funge nulla.
Dunque almeno per oggetti e eventi DHTML è sempre meglio usare javascript come si conviene (almeno per un altro paio di anni..).

Per es. hai capito come funge quella select di zen garden?

**web3** · 15-06-2004, 20.37.26

correggo la validazione è w3c!

Io comunque nn sono confuso....
Solo nn mi spiego perchè il dhtml in pagina singola va con ie e firefox e inserito nella pagina principale del mio sito va solo con ie!

15-06-2004, 22.01.49

Originalmente inviato da heracleum

Menu in CSS senza Javascript? bah, e su quanti browser si vedranno? su Mozilla 1.6 li vedo ma su explorer 5.5 non funge nulla.

Si vedranno su tutti i browser che cupportano CSS 2.0, senza contare che su quelli che non lo supportano il menu' sara' comunque accessibile in maniera tutta espansa.

E' questione di gusti.

**web3** · 15-06-2004, 22.41.43

Originalmente inviato da CoD

Si vedranno su tutti i browser che cupportano CSS 2.0, senza contare che su quelli che non lo supportano il menu' sara' comunque accessibile in maniera tutta espansa.

E' questione di gusti.

cod dici che posso copiare il codice di quel menu?

16-06-2004, 08.58.41

Non mi pare ci voglia moltissimo per copiare il codice.

Lui crea una serie di div uno dentro all'altro, perche' ha piu' di un menu' a scomparsa, ecco il codice:

Codice HTML:

<div id="linkList">
		<div id="linkList2">

			<div id="lselect">
				<h3 class="select"><span>Select a Design:</span></h3>
				<ul>
					<li><a href="?cssfile=/106/106.css&amp;page=0" title="AccessKey: a" accesskey="a">Mediterranean</a> by <a href="http://www.basseq.com/" class="c">John Whittet</a></li>
					<li><a href="?cssfile=/105/105.css&amp;page=0" title="AccessKey: b" accesskey="b">Austrian’s Dark Side</a> by <a href="http://www.grassegger.at/" class="c">Rene Grassegger</a></li>

					<li><a href="?cssfile=/104/104.css&amp;page=0" title="AccessKey: c" accesskey="c">Invitation</a> by <a href="http://www.bradleyboy.com/" class="c">Brad Daily</a></li>
					<li><a href="?cssfile=/103/103.css&amp;page=0" title="AccessKey: d" accesskey="d">Odyssey</a> by <a href="http://www.liquidarch.com/" class="c">Terrence Conley</a></li>
					<li><a href="?cssfile=/102/102.css&amp;page=0" title="AccessKey: e" accesskey="e">Revolution!</a> by <a href="http://www.monc.se/" class="c">David Hellsing</a></li>

					<li><a href="?cssfile=/101/101.css&amp;page=0" title="AccessKey: f" accesskey="f">punkass</a> by <a href="http://www.mikhel.com/" class="c">Mikhel Proulx</a></li>
					<li><a href="?cssfile=/100/100.css&amp;page=0" title="AccessKey: g" accesskey="g">15 Petals</a> by <a href="http://www.meyerweb.com/" class="c">Eric Meyer &amp; Dave Shea</a></li>
					<li><a href="?cssfile=/099/099.css&amp;page=0" title="AccessKey: h" accesskey="h">Wiggles the Wonderworm</a> by <a href="http://www.make-believe.org/" class="c">Joseph Pearson</a></li>

				</ul>
			</div>

			<div id="larchives">
				<h3 class="archives"><span>Archives:</span></h3>
				<ul>
					<li><a href="?cssfile=/057/057.css&amp;page=1" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs &raquo;</a></li>
					<li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>

				</ul>
			</div>
			
			<div id="lresources">
				<h3 class="resources"><span>Resources:</span></h3>
				<ul>
					<li><a href="/057/057.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"><span class="accesskey">V</span>iew This Design’s <acronym title="Cascading Style Sheets">CSS</acronym></a></li>					<li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r" accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li>

					<li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q" accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a></li>
					<li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li>
					<li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span>ranslations</a></li>
				</ul>
			</div>
		</div>

	</div>

Nel CSS imposta le varie proprieta' in questo modo:

Codice:

/**/
#lselect 	{ position: absolute; top: 324px; left: 105px; }
#lresources { position: absolute; top: 714px; left: 105px; }
#larchives	{ position: absolute; top: 902px; left: 105px; }
#lfavorites { position: absolute; top: 1030px; left: 105px; }

/**/
div[id="lselect"] 	 { top: 292px !important; left: 105px !important; background: url(button_select_design.gif) no-repeat; width: 149px; height: 37px; z-index: 300; }
div[id="lresources"] { top: 358px !important; left: 105px !important; background: url(button_resources.gif) no-repeat; width: 149px; height: 37px; z-index: 200; }
div[id="lfavorites"] { top: 443px !important; left: 105px !important; background: url(button_favorites.gif) no-repeat; width: 149px; height: 37px; z-index: 150; }
/**/

#lselect h3,
#lresources h3,
#larchives h3,
#lfavorites h3 { 
	position: absolute; top: -28px; left: 0px; 
	background: url(bg_menu_thin_top.gif) no-repeat; 
	width: 149px; height: 28px; line-height: 28px;
	padding-top: 5px;
	overflow: hidden;
	margin: 0;
	padding: 0 18px;
	color: #333;
	font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif; font-size: 9px;
	}
/**/
div[id="lselect"]>h3,
div[id="lresources"]>h3,
div[id="larchives"]>h3,
div[id="lfavorites"]>h3 { top: -1000px !important; left: -1000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

#lselect:hover h3,
#lresources:hover h3,
#lfavorites:hover h3 { position: absolute; top: 5px !important; left: 5px !important; background: url(bg_menu_top.png) no-repeat; width: 203px !important; height: 0px !important; padding-top: 5px; margin: 0; }
/**/

#lselect ul,
#lresources ul,
#larchives ul,
#lfavorites ul {
	background: url(bg_menu_thin.gif) left bottom no-repeat;
	margin: 0;
	padding: 0 0 5px;
	list-style: none;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 149px;
	}

/**/
div[id="lselect"]>ul,
div[id="lresources"]>ul,
div[id="lfavorites"]>ul { position: absolute; top: -1000px; left: -1000px; width: 203px !important; background: url(bg_menu.png) left bottom no-repeat !important; }

#lselect:hover ul,
#lresources:hover ul,
#lfavorites:hover ul { position: absolute; top: 10px; left: 5px; }
/**/


#lselect li,
#lresources li,
#larchives li,
#lfavorites li {
	font-size: 9px; 
	color: #8B8C8C; 
	background: url(bg_menu_separator_thin.gif) no-repeat;
	padding: 8px 18px;
	}

@media tty { /* Mid pass to square away some IE 5 PC hinkyness. */
	i{content:"\";/*" "*/}} #lselect li,#lresources li,#larchives li,#lfavorites li { width: 149px; padding: 6px 18px; } /*";}
 	}/* */

/**/
div[id="lselect"]>ul>li,
div[id="lresources"]>ul>li,
div[id="lfavorites"]>ul>li { background: url(bg_menu_separator.png) no-repeat !important; }


div[id="lselect"]>ul>li:first-child,
div[id="lresources"]>ul>li:first-child ,
div[id="lfavorites"]>ul>li:first-child { padding-top: 5px; background: url(o.gif) no-repeat !important; }
#lselect li:hover,
#lresources li:hover,
#lfavorites li:hover { background: url(bg_menu_over.png) no-repeat !important; }

div[id="larchives"] { position: absolute; top: 400px !important; left: 100px !important; background: url(well_design_archives.gif) 5px 0px no-repeat; width: 164px !important; height: 44px; z-index: 100; }
div[id="larchives"]>ul, div[id="larchives"]>ul>li { margin: 0; padding: 0; list-style: none; background: url(o.gif) no-repeat !important; }
#larchives a[accesskey="n"] { background: url(button_next.gif) no-repeat; position: absolute; top: 14px; left: 50px; width: 45px; height: 0px; padding-top: 21px; overflow: hidden; z-index: 1; }
#larchives a[accesskey="p"] { background: url(button_prev.gif) no-repeat; position: absolute; top: 14px; left: 7px; width: 44px; height: 0px; padding-top: 21px; overflow: hidden; z-index: 2; }
#larchives a[accesskey="w"] { background: url(button_view_all.gif) no-repeat; position: absolute; top: 14px; left: 99px; width: 53px; height: 0px; padding-top: 21px; overflow: hidden; }
#larchives a[accesskey="n"]:hover { background: url(button_next_over.gif) no-repeat; }
#larchives a[accesskey="p"]:hover { background: url(button_prev_over.gif) no-repeat; }
#larchives a[accesskey="w"]:hover { background: url(button_view_all_over.gif) no-repeat; }

/**/

#lselect a,
#lfavorites a { display: block; }
#lselect a.c,
#lfavorites a.c { display:inline; font-size: 9px; text-transform: lowercase; }

#linkList { font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif; font-size: 9px; }
#linkList a,
#linkList a:link,
#linkList a:visited { font-size: 10px; color: #444; text-decoration: none; }
#linkList a:hover { color: #A51A0A; }

#linkList a.c,
#linkList a.c:link,
#linkList a.c:visited { color: #8B8C8C;}
#linkList a.c:hover { color: #A51A0A; }

Ora non ho sinceramente tempo, ma credo che il css si possa semplificare moltissimo.
Bisognerebbe vedere quali trucchi ha usato (mi pare ce ne siano almeno due) perche' quelli magari vanno lasciati.

In caso di buio totale: chiedete al mitico sugandbibi

16-06-2004, 09.01.53

Scusate il doppio post ma mi sembrava piu' adeguato.

Ho torvato questo sito che semplifica DECISAMENTE le cose (2 righe di CSS) http://www.evolt.org/article/How_to_...menu/17/52030/

**web3** · 16-06-2004, 09.54.32

Originalmente inviato da CoD

Scusate il doppio post ma mi sembrava piu' adeguato.

Ho torvato questo sito che semplifica DECISAMENTE le cose (2 righe di CSS) http://www.evolt.org/article/How_to_...menu/17/52030/

Cod non hai risposto alla mia domanda

Non ti chiedevo come ti chiedevo se posso (cioè quel sito è fatto apposta x prendere codice o è scorretto?)

16-06-2004, 10.43.17

Ehm non ne ho la piu' pallida idea. Prova a chiedere a loro

**heracleum** · 16-06-2004, 14.05.06

Non penso vi ci vorrà molto - una volta giunti di fronte alla cruda realtà pratica - per cambiare idea e rivalutare il mio consiglio.. e se passaste nelle aree tecniche -dove tra l'altro dovrebbe essere spostato questo thread - scoprireste che so bene cosa sia w3c e anche qualcos'altro.

Se leggete bene l'ultimo link dice subito che funzionerà bene solo su Mozilla (su IE e Opera non si vedrà NULLA):

Unfortunately, this only works on browsers that can render hover styles on arbitrary elements, so Netscape and Mozilla users, crow over your IE counterparts for once. It will not work on Opera either.

Valutate voi..

**web3** · 16-06-2004, 14.10.05

Non ho mai dubitato che tu nn sapessi cos'era la valutazione w3c! :grin:
Anzi tu sei moooolto più bravo di me....
Effettivamente appena mi sono messo al lavoro x i css ho visto che con IE nn funzionanp...

Certo che però è strano... lo stesso menu inserito in modo identico in una pagina funziona e nell'altra no! :?????:

**heracleum** · 16-06-2004, 14.35.51

Originalmente inviato da web3

Certo che però è strano... lo stesso menu inserito in modo identico in una pagina funziona e nell'altra no! :?????:

Sì questa stranezza l'ho notata pure io, con mozilla, la pagina col menu da solo funzionava perfettamente mentre nella home no. Dico strana soprattutto perché la console javascript di Mozilla non mi ha segnalato nessun errore.. :?????:
dunque l'unica cosa che sospetto è che ci sia un conflitto con qualche altro script (e ne hai parecchi ho visto) della home, conflitti tipo un nome di div in comune, una variabile e cose simili.
Poi visto che stavate propendendo per una "strada" diversa (e impervia a mio parere) non sono andato ad approfondire... :grin:
ora do uno sguardo..

(Nessun moderatore che sposti la discussione in Livello 1??)

Discussione: Perchè mozilla no?

LinkBack

Strumenti discussione

Display

Perchè mozilla no?

Regole di scrittura