|
| Precedente :: Successivo |
| Autore |
Messaggio |
Silent Runner
Supervisor sezione Chiacchiere a 360°
Registrato: 16/05/05 09:17
Messaggi: 23528
Residenza: Pianeta Terra
|
 Inviato: 15 Apr 2010 08:01 Oggetto: Codice alfa crossbrowser? |
 |
|
Salve..
Recentemente ho messo mano ad un menu in CSS e, manipolandolo un po' ho provato ad aggiungere un valore di trasparenza sulle tendine a discesa, prendendolo in prestito da un altro menu.
(Faccio presente che so poco o nulla di CSS. vado a tentativi cercando di capire quelli che sono i parametri da modificare osservandone poi i risultati sui tre browser IE, FF e Safari.)
La cosa funzione bene su IE8 ma non su Firefox e su Safari.
C'è una soluzione a questo problema?
il codice aggiunto è questo ed è un questa posizione: | Codice: | | ul#nav ul{padding: 7px 0;border: 1px solid #3B5998 opacity: 0.9; filter: alpha(opacity=80); } |
ho però notato che esiste in una stringa precedente, questa indicazione che fa riferimento a IE: | Codice: | ul#nav li li{float: none;line-height:
22px; display:block !important;display: inline; /*IE*/} |
Nota: non ho postato tutto il contenuto del file ma se fosse necessario per comprendere esattamente come è strutturato...
Fra l'altro non mi riesce di ottenere che i testi dei link presenti nel menu siano incolonnati al centro della pagina, devo sempre stabilire la distanza dal bordo sinistro.
Se ci fosse una soluzione anche per questo... 
Grazie. |
|
| Top |
|
 |
skan
Eroe
Registrato: 14/12/09 12:34
Messaggi: 61
|
| Inviato: 15 Apr 2010 11:48 Oggetto: Re: Codice alfa crossbrowser? |
|
|
al volo intanto vedo che manca un punto e virgola dopo la rules del border quindi:
| Codice: |
ul#nav ul
{padding: 7px 0;
border: 1px solid #3B5998;
opacity: 0.9;
filter: alpha(opacity=80);
-moz-opacity:.8;
}
|
poi per vecchie versioni di FF meglio aggiungere il -moz-opacity che è la rules sperimentale per l'opacità, le nuove versioni supportano anche il tag standard css3 opacity ma è sempre meglio specificarla. Se vuoi eventualmente che sia passata la validazione allora ti conviene mettere in un css esterno tutte le rules non conformi al w3C e caricare il foglio di stile via JS.
Per incolonnare al centro di solito si mette in un layer contenitore a cui si da una dimensione (o in percentuale o fissa) e poi si da all'elemento interno (in questo caso l'UL) un
margin: auto;
o margin:10 auto (10px di esempio di margine superiore ed il resto auto...e cosi via margin: UP LEFT BOTTOM RIGHT l'auto dove serve)
ma dipende anche da cosa viene specificato dalle altre regole del css...prova poi caso mai si entra nello specifico
P.s riguardo l'opacità ad essere scassacazzini per safari ci sarebbe pure
-khtml-opacity: .75;
e per IE 8 se non si ripiglia è possibile dargli la sua specifica:
-ms-filter: "alpha(opacity=75)"; |
|
| Top |
|
|
Silent Runner
Supervisor sezione Chiacchiere a 360°
Registrato: 16/05/05 09:17
Messaggi: 23528
Residenza: Pianeta Terra
|
| Inviato: 15 Apr 2010 14:18 Oggetto: |
|
|
Ok, grazie... Rapidissima risposta! 
(Tieni conto che capisco appena, perciò necessita qualche domanda in più..)
..E' vero, manca il punto e virgola.. strano, perché il CSS l'ho trovato così e pareva funzionare..
Una domanda, anzi due..
Un layer contenitore? Intendi dire un layer entro il quale mettere tutto il codice? E' un po' che non uso i layer: prima li mettevo dappertutto, adesso uso solo le tabelle (in % per adattare automaticamente alla dimensione delle pagine in caso di differenti risoluzioni o formato dello schermo).
Potresti farmi un esempio di codice completo? Altrimenti ci metto una settimana per farlo funzionare come si deve.. 
Per quanto riguarda questo suggerimento: | Citazione: | P.s riguardo l'opacità ad essere scassacazzini per safari ci sarebbe pure
-khtml-opacity: .75;
e per IE 8 se non si ripiglia è possibile dargli la sua specifica:
-ms-filter: "alpha(opacity=75)"; |
...devo aggiungere questo codice a quello già presente? Prima o dopo il codice? Oddio a quanto hai scritto credo che il codice per IE andrebbe sostituito con quello che hai indicato.. E qui già sto andando in orbita..
Sì se sei così gentile da fornirmi un codice completo forse rischio mendo di compiere errori madornali.  |
|
| Top |
|
|
Silent Runner
Supervisor sezione Chiacchiere a 360°
Registrato: 16/05/05 09:17
Messaggi: 23528
Residenza: Pianeta Terra
|
| Inviato: 15 Apr 2010 14:24 Oggetto: |
|
|
Naaaaaaaaaaaà!
E' bastato quel punto e virgola e la trasparenza adesso è presente anche su Safari e FF!
Ma guarda un po'...
Sono un bischero! 
Quanto ho copiato il codice di trasparenza ho inavvertitamente cancellato il punto e virgola! 
Evidentemente su IE non influiva.
Ultime sulla questione:
Ho scoperto inoltre che cambiando il parametro 0.9 in 0.8 entrambi i browser (FF & Safari) accettano la trasparenza in percentuale.
| Citazione: |
ul#nav ul
{padding: 7px 0;
border: 1px solid #3B5998;
opacity: 0.9;
filter: alpha(opacity=80);
-moz-opacity:.8;
} |
Ultima domanda.. [cancellata domanda idiota, avevi già risposto]
Ecco invece la domanda giusta... Cosa devo fare per inserire un codice che mi permetta di aprire in blank la pagina che chiamo attraverso il link? |
|
| Top |
|
|
skan
Eroe
Registrato: 14/12/09 12:34
Messaggi: 61
|
| Inviato: 15 Apr 2010 16:22 Oggetto: |
|
|
allora, per la prima
| Codice: |
-khtml-opacity: .75;
e per IE 8 se non si ripiglia è possibile dargli la sua specifica:
-ms-filter: "alpha(opacity=75)";
|
è ridondante, ossia se proprio vuoi garantire compatibilità con konqueror/safari metti -khtml-opacity, idem per il nuovo IE8 aggiungi -ms-filter: "alpha(opacity=75)"; ma dovrebbe non essere necessario.
Per il layer contenitore qualcosa del genere:
| Codice: |
<div id="menucontainer" style="width:99%;text-align:center;">
<ul style="margin:0 auto;">
....
</ul>
</div>
|
o anche di nuovo annidato specificando un with
| Codice: |
<div id="menucontainer" style="width:99%;text-align:center;">
<div style="width:500px;margin:0 auto">
<ul style="margin:0 auto;">
....
</ul>
</div>
</div>
|
strano perchè comunque per le tabelle (abbandona le tabelle se puoi) dovrebbe bastare un align="center" alla cella.
------------
per aprire in target blank basta aggiungere l'attributo target
| Codice: |
<a href="http:/www.dovetipare.com" target="_blank">vai dove ti pare</a>
|
L'attributo TARGET è deprecato...ma se usi le tabelle inutile essere preciso solo in senso (senno per passare la validazione si doveva rendere il target via Javascript, ma lasciamo perdere, non ti ho detto nulla va bene il target="_blank")
cia' Silent |
|
| Top |
|
|
Silent Runner
Supervisor sezione Chiacchiere a 360°
Registrato: 16/05/05 09:17
Messaggi: 23528
Residenza: Pianeta Terra
|
| Inviato: 15 Apr 2010 17:02 Oggetto: |
|
|
| skan ha scritto: | allora, per la prima
| Codice: |
-khtml-opacity: .75;
e per IE 8 se non si ripiglia è possibile dargli la sua specifica:
-ms-filter: "alpha(opacity=75)";
|
è ridondante, ossia se proprio vuoi garantire compatibilità con konqueror/safari metti -khtml-opacity, idem per il nuovo IE8 aggiungi -ms-filter: "alpha(opacity=75)"; ma dovrebbe non essere necessario. |
Ok, più tardi provo ma ho solo una versione di safari, l'ultima e già sembra funzionare bene.. Più tardi lo farò testare da chi lavora su MAC e iPod.. se c'è qualche problema, mi riaffaccio qui.
| skan ha scritto: | Per il layer contenitore qualcosa del genere:
| Codice: |
<div id="menucontainer" style="width:99%;text-align:center;">
<ul style="margin:0 auto;">
....
</ul>
</div>
|
o anche di nuovo annidato specificando un with
| Codice: |
<div id="menucontainer" style="width:99%;text-align:center;">
<div style="width:500px;margin:0 auto">
<ul style="margin:0 auto;">
....
</ul>
</div>
</div>
|
|
Mmmmh... necessita di una prova pratica perché non è che riesco a capire bene..
Il fatto è che ho un link (cieco, con i titolo principale dell'argomento: es. "gallery") che apre una tendina con i link attivi e, guardando il file CSS, mi è sembrato di entrare in un generatore di caos stocastico caduto in un frullatore strappato via da un tornado...
Perciò, le tue indicazioni al momento mi appaiono ancora oscure.. non mi riferisco al /div ma alla funzione ul.
Vedi esempio qui sotto.
| Codice: | <!-- voce 1 --> <! -- ASSOCIAZIONE -->
<li>
<a href="nomefile.htm"><strong>L'Associazione</strong></a>
<ul>
<!-- sottovoce 1.1 -->
<li>
<a href="nomefile.htm">Statuto</a>
</li>
<!-- sottovoce 1.2 -->
<li class="sep">
<a href="nomefile.htm">Iscrizione</a>
<span></span>
</li>
<!-- sottovoce 1.3 -->
<li>
<a href="nomefile.htm">Contatti</a>
</li>
<!-- sottovoce 1.4 -->
<li>
<a href="nomefile.htm">Gli Autori</a>
</li>
<!-- sottovoce 1.5 -->
<li>
<a href="nomefile.htm">I Progetti</a>
</li>
</ul>
</li> |
Credo di aver capito, così a naso, che "ul" ha valore di sottomenù.
Come ho detto mi sono riavvicinato ai CSS solo da un paio di settimane.. ero rimasto a quelli più primitivi e non mi ero spinto oltre.
Dando un'occhiata al file CSS ho notato che i codici che stabiliscono distanze e dimensioni sono lì ed io sono riuscito (con fatica) a modificare qualche parametro senza demolire il menù (spostando la prima scritta a destra in modo da simulare una quasi centratura) ma non sono stato in grado di impostare una posizione centrata.
Ok, con calma ci provo e vediamo.. se senti urlare sono io.
| skan ha scritto: | | strano perchè comunque per le tabelle (abbandona le tabelle se puoi) dovrebbe bastare un align="center" alla cella. |
Ugh.. la questione tabelle sì tabelle no mi ha sempre fatto impazzire! Ognuno ha la sua opinione, anche fra i più esperti, e non ho mai capito veramente quale sia il consiglio da seguire.
Certamente, le tabelle se ben gestite mi hanno sempre permesso di adeguare bene le proporzioni e le posizioni all'interno della pagina, cosa che i livelli (io uso una versione molto vecchia di Dreamweaver) non mi hanno mai consentito del tutto, pur restando dei magnifici strumenti di posizionamento.
| skan ha scritto: | ------------
per aprire in target blank basta aggiungere l'attributo target
| Codice: |
<a href="http:/www.dovetipare.com" target="_blank">vai dove ti pare</a>
|
L'attributo TARGET è deprecato...ma se usi le tabelle inutile essere preciso solo in senso (senno per passare la validazione si doveva rendere il target via Javascript, ma lasciamo perdere, non ti ho detto nulla va bene il target="_blank")
cia' Silent |
In effetti avevo (nell'attesa della tua riposta) provato con il target blank e ho visto che funzionava.. Sì, sarebbe meglio inserire l'istruzione nel javascript che gestisce il menù... ma semmai ne riparliamo a "centratura" sistemata.
Grazie molte, 
Doppio ciao skan! |
|
| Top |
|
|
skan
Eroe
Registrato: 14/12/09 12:34
Messaggi: 61
|
| Inviato: 15 Apr 2010 17:47 Oggetto: |
|
|
allora per gradi:
ul sta per Unordered List ossia lista non ordinata, un tag html che insieme ad OL, ordered list lista numerata permettono le liste, una con i classichi puntini (o pallini) l'altra numerica.
Poi da css molte volte viene nascosto puntino o il numero per essere utilizzato come menu (con la rules: list-style:none;)
vedo che il tuo esempio inizia con
| Codice: |
<li>
<a href="nomefile.htm"><strong>L'Associazione</strong></a>
|
ed immagino che prima di quello ci sia un <ul> di apertura altrimenti il codice è sbagliato, i tag LI (list item - elemento lista) devono essere contenuti all'interno di un <ul> oppure <ol> quindi eventualmente metti il codice completo poi bisognerà includere tutto il blocco <ul></ul> del menu in un ulteriore DIV come specificato sopra, ma facciamo prima se mi dai un link alla pagina (anche in PM)
............
per poter aprire invece in target blank puoi fare cosi, nell'HEAD metti questo:
| Codice: |
<head>
<script type="text/javascript">
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
</script>
...
</head>
|
oppure metti tutto il codice da function in poi (senza <script></script> quindi) in un file a parte chiamato per esempio "externalLinks.js" e lo richiami nell'head
| Codice: |
<head>
<script type="text/javascript" src="externalLinks"> </script>
</head>
|
e poi a tutti i link che vuoi si aprano in nuova finestra aggiungi l'attributo rel="external", poi ci penserà il javascript a trasformarlo (e puoi passare un eventuale validazione della pagina
<a href="nomefile.htm" rel="external"><strong>L'Associazione</strong></a>
P.s.
per una spiegazione estesa del target questa sopra da me scritta è semplicemente la soluzione classica a suo tempo proposta da Sitepoint un blog di riferimento per sviluppatori css/js
P.p.s per tabelle si tabelle no, non la meno sulla questione del purismo o altre stronzate, è comodo perchè l'uso di livelli ti aiuta nel posizionamento dei motori di ricerca ed è più accessibile, ma ora mira a far ciccia, poi eventualmente dal 22 dicembre 2012 in poi se va tutto bene ci fai un pensiero, ma senti prima Giacobbo per un ultima consulenza in merito
p.p.p.s mi avanza qualche p, comunque non mettere <strong></strong> all'interno dei link, dai un font-weight:bold; via CSS al tag a....solo ennesimo consiglio, vale il discorso di prima della ciccia e Sandro Giacobbo |
|
| Top |
|
|
Silent Runner
Supervisor sezione Chiacchiere a 360°
Registrato: 16/05/05 09:17
Messaggi: 23528
Residenza: Pianeta Terra
|
| Inviato: 17 Apr 2010 14:58 Oggetto: |
 |
|
Ciao Skan.. ho fatto parecchie prove e sono impazzito senza risolvere un accidente.
Il mio quasi totale digiuno di CSS non mi ha consentito nemmeno di improvvisare qualcosa di efficace... perciò è meglio se ti mando via PVT un link, così guardi che diavolo viene fuori.
In effetti il livello è del tutto inefficace. Se provo con la tua prima proposta mi si allinea tutto i testo al centro e scompare il menù a tendina. Non ho nemmeno provato con l'annidamento, dando un'occhiata così al volo mi sembra che non possa funzionare esattamente come il primo.
Ma prima di mandarti il PVT voglio chiederti una cosa..
<div id="menucontainer" style="width:99%;text-align:center;"> Questo width:99%; che cosa comporterebbe? Il text align:center, come ho detto, mi piazza al centro le scritte ma sparisce il menù a tendina...
<div style="width:500px;margin:0 auto"> e questo annidamento con 500px che cosa? Perchè dopo margin c'è questo "auto"? che funzione ha?
<ul style="margin:0 auto;"> Lo stesso per questo altro "auto"
....
</ul>
</div>
</div> ok questi sono la chiusura dei tag.
Grazie. |
|
| Top |
|
|
|
|
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
