Aiuto per CSS

15 risposte [Ultimo contenuto]

Sab, 17/09/2011 - 14:32

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

Ancora scusate, ma non soi dove postare dato che si tratta sempre di programmazione.
Sto aiutando un amico a mettere su un suo sito di vendita pesci tropicali. Il problema che riscontro riguarda sempre il famoso winzozz e il suo ultimo IE9 che combina pasticci nella visualizzazione css. Problema: una pagina don 3 colonne; nella prima (alla nostra sx) testo semplice e fisso; nella centrale testo che al passaggio del mouse fa aprire delle immagini popup (grandezza fissa) relative al testo stesso. Il testo nella colonna centrale riguarda varie specie di pesci e pertanto andrà sempre a capo.

Avevo pensato appunto a 3 colonne, proprio per poter dare lo spazio ad ogni immagine durante l'apertura, ma se fossero anche solo 2 colonne andrebbe bene ugualmente; ciò che conta più di tutto è il passaggio mouse sul testo che dà l'apertura dell'immagine. In genere uso (per velocizzare la cosa) Kompozer, che su Linux e browsers come Firefox va alla grande senza problemi, ma quando si va a vedere con IE9... sono guai, tanto che mi ha sballato tutto. Vogliamo però evitare certi escamotages del tipo codici proprietari, lightboxes, codici joomla etc, perché diviene troppo problematico per la gestione che dovrà poi avere lui (non si intende di un tubo e devo mostrargli come fare).

Sino ad oggi ho impiegato 3 giorni e ora sono in panne... ho provato con codice puro CSS, con programmi tipo Golive, e con altro, ma IE9 richiede sempre e solo il suo codice tarocco, e come sapete, essendo l'utenza di microsoft molto più abbondante ecco che non vedrebbero o sarebbe tutto spostato, mal funzionante ed altro...

C'è qualcuno che può avere un'idea? Grazie sin da ora!

Dom, 18/09/2011 - 14:32

rufus

(Monster)

Offline

Iscritto: 06/04/2005

Messaggi: 255

Ciao. Scusa non e' che io abbia capito bene cosa ti serve.
Se vuoi dare uno sguardo sul mio semplice server la vedrai che ci sono css che riguardano immagini e testo
https://diakrufus.dyndns.ws

Dom, 18/09/2011 - 21:42

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

In effetti non sono forse stato molto chiaro... colpa di questa situazione da incubo...

Ho necessità di 3 frames css in unica pagina. Il primo è per testo fisso, il secondo contiene nomi linkati che portano ad aprire delle immagini appena ci si passa sopra col mouse. Purtroppo facendolo con notepad vari o anche programmi open source, quando lo si vede con IE9 va tutto a remengo, tutto spostato o parametri contrari. Teoricamente per risolvere per IE9 (dato che mi è stato richiesto per quello) dovrei usare programmi tipo Front Page (lol) il che capirai... vorrei farlo in solo CSS senza java o altro,. ma vedo che per la compatibilità è abbastanza menoso...

Ho cliccato il link che hai messo ma è comparso avviso di non sicurezza. Posso andare tranquillo o ci sono problemi? (Allego immagine)

Attached images:

Dom, 18/09/2011 - 23:52

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

Ho provato ancora, ma IE9 è veramente una cosa assurda. Non capisco perché Kompozer sia align: left e su IE9 sia tutta a destra... ho provato a dare a Kompozer align right e su IE9 mi da left... chi ha ragione? (Però se lo vedo su FF è perfetto...)

Comunque per farti capire meglio posto questa immagine di come devo svilupparlo. La colonna con SPECIE deve riportare testo fisso non cliccabile; quella centrale invece deve avere i links che puntano ad aprire immagini nella terza ed ultima. Questa ultima anche se non si vede, o se si può abolire, non ha importanza, purché si aprano le immagini quando si passa il mouse su un link della colonna centrale.
Non mi necessitano head e foot quindi ho anche meno sbattimento...

Attached images:

Lun, 19/09/2011 - 10:46

rufus

(Monster)

Offline

Iscritto: 06/04/2005

Messaggi: 255

Ciao. Certo che puoi accedere il mio server e sotto https con chiavi create da me quindi non certificate per questo ti avvisa. Comunque veniamo al problema. Quando tu crei il css e lo metti in una pagina html nella pagina html intesta forse non metti questo !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd", naturalmente il tutto dentro < > io ho risolto cosi nella visualizzazione. Fammi sapere.

Lun, 19/09/2011 - 22:37

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

Come detto uso Kompozer per questione di velocità e anche pigrizia; poi però vado a verificare che il codice scritto sia giusto ed infatti è là che ho scoperto che su questo programma la sezione sinistra corrisponde alla destra visualizzata da IE9, cosa che non accade con FF ...
(Ti ricordo che non sono lato server, anche se la sezione è dedicata a quello; ancora non è stato acquistato il dominio quindi devo sviluppare tutto su pc)

Comunque: ho visto il sito, ma non è ciò che intendo. A me bastano anche 2 frames, celle, o come preferisci, ove in una c'è testo semplice e linkato, e nella seconda solo testo senza link. Quando passo il mouse su un link (nel 1° testo) mi deve comparire un'immagine aperta (200x200px) e come sposto il mouse quella deve sparire. Ho cercato a lungo e ancora leggo che bisogna adoperare Mootools, JQuery o simili, e per me è come chiedermi di usare FrontPAge... a questo punto sto facendo ogni cosa con due semplici frames html e un po' javascript sperando che anche questi non siano stati infettati da winzozz!

Certo che per devastare il mondo della semplicità, microzozz è specialista..!

Mar, 20/09/2011 - 13:09

mandian

(Geek)

Offline

Iscritto: 16/05/2011

Messaggi: 129

ciao fareyes, so ho capito cosa vuoi realizzare, per costruire una galleria di immagini facendo solo uso di css puoi trovare qui delle soluzioni molto interessanti da cui trarre spunto. Negli esempi l'immagine viene visualizzata vicino ad una anteprima. Puoi provare a sostituire l'anteprima con solo testo (dovrebbe essere facile) ed impostare l'immagine grande in modio che venga visualizzata nella terza colonna, ad esempio imponendo una posizione relativa alla finestra del browser piuttosto che alla pagina (c'è un po' di lavoro da fare).

ciao,
mandian

Mar, 20/09/2011 - 14:32

mcortese

(Moderatore)

Offline

Iscritto: 27/02/2009

Messaggi: 2918

Non ho capito bene quali problemi riscontri. Se parli di idiosincrasie tra Kompozer e IE non ti posso aiutare. Per fare quello che vuoi tu, bastano poche righe di HTML:

<html>
<head>
<title>Prova per fareyes</title>
<script type="text/javascript">
function showpic(url) {
	document.getElementById("mypicture").src = url;
}
function hidepic() {
	document.getElementById("mypicture").src = "empty.png";
}
</script>
</head>
<body>
<table width="90%"><tr>
<td width="20%">
	Parte fissa
</td>
<td width="30%">
Ecco un po' di pesciolini.  Passa col puntatore sul link per vedere un'anteprima.<ul>
<li><a onmouseover="showpic('mcortese.jpg')" onmouseout="hidepic()">mcortese</a></li>
<li><a onmouseover="showpic('rufus.png')" onmouseout="hidepic()">rufus</a></li>
<li><a onmouseover="showpic('fareyes.jpg')" onmouseout="hidepic()">fareyes</a></li>
</ul>
</td>
<td width="50%">
<img id="mypicture" src="empty.png" alt="Anteprima"/>
</td>
</tr></table>
</body>
</html>

Ovviamente manca qualsiasi componente stilistica (a parte lo split 20-30-50% delle colonne).

Mer, 21/09/2011 - 10:37

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

Ragazzi, grazie veramente e tanto. Oggi poi mi è andata bene per larete e il telefono che erano saltati.

@Mandrian: ho già visto quel sito, ma non c'è ciò che cerco.

@MCortese: bello quel codice, peccato che sia FF che IE non vedano il links anche se posticci... infatti ho provato a fare copia/incolla in kompozer e dopo salvato a lanciare, però non compaiono neppure i links sottolineati. Nel js che ho preparato, noto che il codice è ben differente da quello che proponi; sto infatti usando questo:
<a href="#null" onmouseover="showImg(this,'image.jpg')" onmouseout="hideImg()">SOGGETTO</a><br></br>
il #null serve a non aprire un link (ma a generarlo) vero e fare in modo che l'immagine non sia così visualizzata anche se cliccato; nota che senza quei parametri la pagina nnon funziona bene e i links danno i numeri; l'unica cosa che ora mi manca è l'inquadramento vero delle immagini (che ho stabilito debbano essere 200x200px anche se alcune non sono in proporzione); vi posto una parte di codice completo con i primi parametri inseriti dato che altri sono solo i links come sopra già descritto:

var offsetx = 0
var offsety = 0
var elementID="myImg"
 
function showImg(obj,image){
getElPos(obj)
 
if(document.createElement){
 
if(!document.getElementById(elementID)){
newImg = document.createElement('IMG')
newImg.id = elementID
newImg.style.display="none"
newImg.style.position="fixed"
document.body.appendChild(newImg)
}
 
imageDisplay = document.getElementById(elementID)
imageDisplay.src = image
imageDisplay.style.display = 'block'
 
imageDisplay.style.left=obj.offsetLeft+obj.offsetWidth-10
imageDisplay.style.top=obj.offsetTop-10
 
//imageDisplay.style.left=elPosX+obj.offsetWidth-200
//imageDisplay.style.top=elPosY+obj.offsetHeight-200
 
}
}
 
function hideImg(){
imageDisplay.style.display="none"
}
 
function getElPos(el){
elPosX = el.offsetLeft
elPosY = el.offsetTop
parent_el = el.offsetParent
 
while (parent_el != null){
elPosX += parent_el.offsetLeft
elPosY += parent_el.offsetTop
parent_el = parent_el.offsetParent
}
 
}
 
  </script>
 
  <style>
#myImg { top: 40px; left: 310px; width:200px; border:none; }
.dsR1 /*agl rulekind: base;*/ { width: 62.31%; height: 331px; }
.ds2 /*agl rulekind: base;*/ { font-family: arial; }
.ds4 /*agl rulekind: base;*/ { font-size: medium; font-family: arial; }
</style></head><body>
<table class="dsR1" style=" text-align: left; margin-right: auto; margin-left: auto;" border="0" cellpadding="2" cellspacing="2">
 
  <tbody>
    <tr>
      <td style="vertical-align: top; width: 45%;">SPECIE
      </td>
      <td style="vertical-align: top; width: 45%;">NOMI
      </td>
    </tr>

Se metto absolute al posto di fixed, mi fa un brutto scherzo sia in IE che in FF: i links aperti (immagini) vanno anche sotto la tabella e allungano la pagina senza essere visti.
(Questo è un vecchio codice che usavo tanti anni fa ma che vedo funziona ancora). Logicamente ora devo vedere "come" ricordarmi il posizionamento delle immagini in apertura... il che già mi sta facendo fondere... però non mi arrendo

Comunque se ci fosse qualche idea di come posizionare le dette immagini in apertura in zona fissa... non sarebbe male. Tenete presente che ancora il codice è "grezzo" in quanto devo sofltirlo e adattarlo per questa necessità.
Ah, dimenticavo una cosa: non sto usando 3 colonne, ma 2 perché se non ricordo male non c'è bisogno della terza per la visione delle immagini.

Mer, 21/09/2011 - 01:16

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

Mhhh... forse ho trovato una spiegazione valida per un uso cross browser resistente, visto che si parla di FF2 (ormai troppo distante da quelo attuale)e IE8, cosa che nella 9 dovrebbe dovrebbe già essere incluso.

Spero solo che non sballi le pagine di Mozilla o altri open browsers e per quello dovrò testarlo... vi passo il link caso possa servire, e anche per dargli uno sguardo. Intanto proseguo con prove e varianti... certo che se fossi riuscito a fare un semplice css compatibile a tutti i browsers, avrei alleggerito non poco la pagina e sicuramente avrebbe avuto più velocità...

Date le utlime novità provate a avedere anche a questo link che tratta HTML5; praticamente è una pagina test e dovrete abilitare java. Molto comoda...

Mer, 21/09/2011 - 13:08

#10

mcortese

(Moderatore)

Offline

Iscritto: 27/02/2009

Messaggi: 2918

fareyes ha scritto:

@MCortese: bello quel codice, peccato che sia FF che IE non vedano il links anche se posticci... infatti ho provato a fare copia/incolla in kompozer e dopo salvato a lanciare, però non compaiono neppure i links sottolineati.

Testato su IE8 e Chrome, non mi aspetto sorprese su IE9 o FF. Il fatto è che è quasi tutto HTML, che è molto standardizzato, e ha poche manipolazioni del DOM via JavaScript, che invece è dove le incompatibilità si annidano.

Ovviamente per testarlo, i file mcortese.jpg, fareyes.jpg e rufus.png li devi mettere tu nella directory corrente, se no cosa ti fa vedere? E anche empty.png che sarà un semplice quadratino vuoto o un punto interrogativo o quello che vuoi tu.

Che i link siano o non siano sottolineati è un dettaglio puramente stilistico: se vuoi essere sicuro che vengano sottolineati, aggiungi questa regola al tuo foglio di stile o in una sezione <style>:

a { text-decoration: underline; }

fareyes ha scritto:

Nel js che ho preparato, noto che il codice è ben differente da quello che proponi; sto infatti usando questo:
<a href="#null" onmouseover="showImg(this,'image.jpg')" onmouseout="hideImg()">SOGGETTO</a><br></br>

A me non sembra sostanzialmente diverso. Hai aggiunto solo un attributo href che non punta a niente. Se serve solo per far apparire la sottolineatura, allora stai commettendo un errore molto comune: stai risolvendo con del contenuto un problema di stile. La soluzione corretta è invece usare una dichiarazione di stile come suggerito sopra.

Per il resto la differenza è che il mio codice prevede un elemento img definito staticamente una volta per tutte nell'HTML, mentre il tuo lo crea ogni volta e lo riposiziona secondo un algoritmo un po' contorto e probabilmente da mettere a punto: immagino l'intenzione sia di posizionare l'immagine vicino vicino al link su cui sta passando il puntatore, ma su IE8 non funziona.

fareyes ha scritto:
Logicamente ora devo vedere "come" ricordarmi il posizionamento delle immagini in apertura... il che già mi sta facendo fondere... però non mi arrendo Comunque se ci fosse qualche idea di come posizionare le dette immagini in apertura in zona fissa... non sarebbe male.

Non ho capito. Lo scopo di tutto quel po' po' di JavaScript non è di posizionare le immagini dinamicamente?!? Se non è così, la tua showImg diventa semplicemente:

imageDisplay = document.getElementById(elementID)
imageDisplay.src = image
imageDisplay.style.display = 'block'

Ovviamente dovrai aver messo un elemento <img id="myImg"> nell'HTML nel punto in cui vuoi far comparire l'immagine.

Aiuto per CSS

Home

About

Network ILDN

Social link