Newsgroup: it.comp.www.html
Titolo: Come caricare un altro css oltre quello di tamplate?

Nel mio sito c'è il css di template che viene richiaamto in ogni pagina
(siccome non è dinamico ma xhtml + css2).
Ora io ho necessita' di includere nel blocco centrale un altro css cioè mi
spiego meglio
nel blocco centrale devo mettere una galleria di immagini che caricano un
altro css.
Potrei mischiare i 2 css ma non mi va di confondere e mischiare quello di
template (perfetto cosi' come è ora)con tutti quelli che mi serviranno per
le singole sezioni.
Come fare richiamare dunque SOLO per la colonna centrale (classico layout a
3 colonne fluido con destra e sinistra sempre fisse e il centro che si
reloada diversamente) un altro CSS style esterno?
Ho cercato sulla documentazione ufficiale ma non sono riuscito a trovare la
soluzione
Chi mi aiuta?
Danke

 le singole sezioni.
e' semplicissimo, attacca *solo* a quella pagina della galleria
di immagini un altro css, cioe':
<head>
   ...
   <link rel="stylesheet" type="text/css" href="template.css">
   <link rel="stylesheet" type="text/css" href="gallery.css">
   ...
</head>
l'ordine di inserimento e' importante. in gallery.css puoi
sovrascrivere qualsiasi stile impostato nel piu' generico template.css
avrai dato un nome alla colonna centrale, giusto? quindi in gallery.css
puoi intervenire "chirurgicamente" con selector tipo:
#middle p {
   margin: 1em 0px;
}
cosi comunichi al browser: "tutti i paragrafi della colonna centrale ora 
hanno un margin verticale di 1em, invece di quello che ti ho detto 
prima, capito stronzo?" (i browser bisogna trattarli male, altrimenti
fanno quel cazzo che vogliono).
oppure puoi aggiungere  selector che hanno senso solo per la gallery, 
tipo attributi sulle immagini a via discorrendo.
ciao.
-- 
email: goldicus1970 AT 
yahoo.it
web: 
http://www.deelan.com

 Serse wrote:
Grazie molte deelan a dire il vero io avevo fatto come hai detto te solo che
essendo stupido mi ero dimenticato di correggere il link al css!!!! cioè era
sbagliato nell'head  il LINK HREF :)))
Ora pero' ho sistemato il sito ma ho un po' di problemi
Premetto che ho seguito il tuo consiglio di progettare i siti secondo
standard e per mozilla/gecko based browsers.
Detto cio' il sito è valido XHTML e CSS 2. Su mozilla si vede perfetto..
E' su ie6 che non si vede perfettamente...
Ora...per farti capire..guarda la sezione fotografia.
Intanto RINGRAZIO SANTAKLAUSS per l'ideona della galleria di immagini senza
tabelle. Guardate come è carina diminuendo un po' la dimensione delle foto
(e se uno volesse pure i margini colorati). Certo dovete stare attenti a
quanti caratteri utilizzate per il commento sotto la foto in grigino perchè
a seconda dei caratteri c'è un diverso margin tra le foto. Ho risolto
mettendo identica scritta sotto ogni foto e mettendo nell'alt la descrizione
della foto (considerando che molta gente vedrà il sito su IE che fa la
scrittina gialla che appare sulla immagine presente no?)
Ora il problema è centrare le foto nel box centrale!
Con i div alla fine ci ero riuscito mettendo POSITION: STATIC
e a quanto sembra si va a leggere i margini dell'elemento contenitore COLO03
A buffo (tipica espressione romana..) !!!
Vabo' ... ho provato a fare la stessa cosa mettendo un position : static nei
div contenitori sperando che andasse a leggere i margin come i div delle
news in homepage ma nada. non se li pija. ho provato un po' tutto. letto
anche il paragrafo 9 della guida css 2 di w3g ma nada.
Come risolvere? :))))
2 problema :
In mozilla perfettamente le colonne laterali scendono lunghe come il box
centrale (stara' poi a me riempirle in qualche modo ma ho in mente di fare
il sito NON SCROLLABILE a dimensione massima a 1024, cioè che non si debba
scendere per leggere ma cliccare su in link per proseguire la lettura in
caso si necessitasse + spazio in lunghezza).
In IE 6 invece no! Le colonne si bloccano fisse mentre il blocco centrale
prosegue giustamente.
Come farlo compatibile anche con IE6?
E per ora i miei dubbi sono questi :)
Attendetevene degli altri... :)
Ric.

 Attendetevene degli altri... :)
dove sta il link della gallery?


 dove sta il link della gallery?
beh sempre nella homepage link fotografia a sinistra
www.sabbatucci.it

Serse ha scritto:
| Ora...per farti capire..guarda la sezione fotografia.
| Intanto RINGRAZIO SANTAKLAUSS per l'ideona della galleria di immagini senza
| tabelle.
Ciao Serse,
    grazie a te, riconoscenza e gratitudine sono rare al giorno d' oggi.
C'e' da puntualizzare che l' idea iniziale non è mia, ho preso spunto
da una tecnica già diffusa. Ho solo aggiunto l' effetto rullino, tutto qui.
Link alla pagina per chi se l' è persa:
http://members.xoom.virgilio.it/santaklauss/filmgallery.html
| Guardate come è carina diminuendo un po' la dimensione delle foto
| (e se uno volesse pure i margini colorati). Certo dovete stare attenti a
| quanti caratteri utilizzate per il commento sotto la foto in grigino perchè
| a seconda dei caratteri c'è un diverso margin tra le foto.
Non è una questione di margini, il fatto è che il div che contiene foto e didascalia
si allarga se la didascalia eccede la larghezza della foto. Si può ovviare al problema
così (sulla pagina avevo scritto che ci stavo lavorando.. solo che poi non ci ho più
pensato..). Se sai che userai thumbnails della stessa dimensione, ti basta attribuire
quella dimensione al div con classe imgcontainer, e un altezza capace di contenere
la foto con didascalia più lunga:
div.imgcontainer{
    float: left;
    width: 90px; /* questo da aggiungere*/
    height: 140px; /*anche questo*/
    margin: 20px 0;
    padding-top: 12px;
    background: transparent url("film.gif") repeat-x top right;
    text-align: center
    }
In questo modo la didascalia si distribuirà su più righe se necessario e non ci
saranno problemi di layout.
| Ho risolto mettendo identica scritta sotto ogni foto e mettendo nell'alt
|la descrizione della foto (considerando che molta gente vedrà il sito su IE che fa la
| scrittina gialla che appare sulla immagine presente no?)
Sappi che non è buona norma basarsi solo su IE.. anzi. L' attributo da usare
per il tooltip è "title", che viene visualizzato anche per gli altri browsers.
L' attributo "alt" serve per la spiegazione a persone con problemi visivi attraverso
speech browsers: 
www.diveintoaccessibility.org
 spiega bene la differenza.
Inoltre la stessa didascalia per ogni foto è inutile.
| Ora il problema è centrare le foto nel box centrale!
| Con i div alla fine ci ero riuscito mettendo POSITION: STATIC
| e a quanto sembra si va a leggere i margini dell'elemento contenitore COLO03
| A buffo (tipica espressione romana..) !!!
| Vabo' ... ho provato a fare la stessa cosa mettendo un position : static nei
| div contenitori sperando che andasse a leggere i margin come i div delle
| news in homepage ma nada. non se li pija. ho provato un po' tutto. letto
| anche il paragrafo 9 della guida css 2 di w3g ma nada.
| Come risolvere? :))))
Non ho capito la domanda.. ma sappi che position:static, a meno che tu lo usi
come workaround per risolvere un bug di qualche browser, è il "normal behaviour"
di tutti gli elementi in una pagina html. E' come dichiarare width: auto, cioè superfluo.
| 2 problema :
| In mozilla perfettamente le colonne laterali scendono lunghe come il box
| centrale (stara' poi a me riempirle in qualche modo ma ho in mente di fare
| il sito NON SCROLLABILE a dimensione massima a 1024, cioè che non si debba
| scendere per leggere ma cliccare su in link per proseguire la lettura in
| caso si necessitasse + spazio in lunghezza).
| In IE 6 invece no! Le colonne si bloccano fisse mentre il blocco centrale
| prosegue giustamente.
| Come farlo compatibile anche con IE6?
Non so come hai realizzato il layout, ma puoi dare uno sguardo qui se la tua
intenzione è di avere le colonne laterali che si estendono in colore/lunghezza
fino al footer: 
http://www.redmelon.net/tstme/polycol/
Oppure, molto + semplicemente dato che le due colonne laterali hanno lo stesso
colore, ti basta usare un div che contiene le tre colonne e attribuirgli come
background-color quello delle due colonne laterali, mentre quello centrale
lo definisci bianco.
Ciao,
    SantaKlauss

 
http://members.xoom.virgilio.it/santaklauss/filmgallery.html
ah:
http://www.deelan.com/reflex/2003/08/amsterdam
libera re-interpretazione, fluido non e' perche' ho impostato
la larghezza del div principale.
cmq gran bel metodo, l'avevo letto anch'io su ALA.


 
www.sabbatucci.it
ecco, mi mancava proprio tutto l'indirizzo del sito. la prox
volta riportalo nel messaggio se voi che sia piu' facile
aiutarti!
cmq c'ha gia' pensato babbo natale a darti una mano.
ciao.


deelan ha scritto:
| ah:
| 
http://www.deelan.com/reflex/2003/08/amsterdam
| libera re-interpretazione, fluido non e' perche' ho impostato
| la larghezza del div principale.
| cmq gran bel metodo, l'avevo letto anch'io su ALA.
Molto carina, l' unica cosa è una scelta implementativa che avrei fatto
diversamente: il clearer lo avrei messo alla fine di ogni riga e non
per contenerle, il risultato è lo stesso ed eviti di annidare div.
Pensa se decidessi in un futuro di mettere cinque foto per riga invece
di quattro: dovresti togliere tutti i div con classe "cut" e reimpostarli
per contenere cinque tag <img> invece di quattro.
Invece che spostare solo una riga, questa:
<div class="cut"></div>
Foto stupende, è come se fossi stato dinuovo ad Amsterdam.
Ciao,
    SantaKlauss

 Foto stupende, è come se fossi stato dinuovo ad Amsterdam.
grazie. :)
ciao.

SantaKlauss wrote:
| > Molto carina, l' unica cosa è una scelta implementativa che avrei fatto
| > diversamente: il clearer lo avrei messo alla fine di ogni riga e non
| > per contenerle, il risultato è lo stesso ed eviti di annidare div.
deelan replied:
| c'e' un motivo per quei div, e qui volevo chiederti una cosa
| magari tu hai risolto in maniera + furba... inzialmente avevo
| usato un "clear:both" per forzare l'a-capo, come suggerisci tu,
| poi pero' mi sono accorto che ingrandendo il font mi si
| sballava tutto, anzi mi si sballava tutto anche se un titolo
| era troppo lungo. visto che non voglio forzare l'height di ogni
| singolo <div> l'unica soluzione "ragionevole" e' stata quella
| di inserire quei <div class="row">, bruttino, ma piu' robusto.
Se non vuoi impostare l' altezza di ogni div che contiene foto e
didascalia, mi sa che non ci sono alternative. O almeno, ora non mi
vengono in mente.
| > Pensa se decidessi in un futuro di mettere cinque foto per riga invece
| > di quattro: dovresti togliere tutti i div con classe "cut" e reimpostarli
| > per contenere cinque tag <img> invece di quattro.
| quello non sarebbe nemmeno un problema, quelle pagine sono generate da
| uno script.
Allora non ci sono problemi, dato che ti basterebbe cambiare solo lo script.
| ciao.
Ciao,
    SantaKlauss

     SantaKlauss
Ric

 ciao.
Grazie anche a te!
Ho esposto i miei nuovi quesiti in risposta al post di Klauss!
Byez!
Ric.

 CENTER?!?! :)) Altri soluzioni che non conosco?
rispondo a questa, ma credo che tu gia' conosca la risposta, un <div> 
riesci a centrarlo in automatico rispetto all'elemento padre impostando 
un width a questo e poi con il magico margin --> auto.
copia e incolla:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
   "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>Center the div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#box {
   width: 300px; /*  oppure in percentuale.... */
   border: 1px solid black;
   margin: 20px auto;
}
</style>
</head>
<body>
<div id="box">
blah blah
</div>
</body>
</html>
inzio delle buone notizie:
impostando margin: auto per il margine dx e sx e conoscendo la misura 
del div il browser riesce a centrarti il div in orizzontale, il trucco
NON funziona in verticale.
fine delle buone notizia
inzio delle cattive notizie:
non funzia con IE5.x, solo da IE6+
link d'obbbligo:
http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html
c'e' qualche possibilita' di vedere quelle foto ingrandite?


Serse ha scritto:
| Innanzitutto mi scuso per la risposta un po' in ritardo ma tra il blackout
| di sabato-domenica, un incidente che mi ha condotto al pronto soccorso e
| altri casini vari prima non mi è stato possibile
Spero niente di grave.
| > L' attributo "alt" serve per la spiegazione a persone con problemi visivi
| attraverso
| > speech browsers: 
www.diveintoaccessibility.org
 spiega bene la differenza.
| > Inoltre la stessa didascalia per ogni foto è inutile.
|
| Si ora mi ricordo... mi guardero' il sito... il dubbio mio è ... metto sia
| title che alt ? è meglio?
Si, entrambi. Per le immagini non decorative, il title è quello che sarebbe il titolo.
L' alt è una descrizione che compare se l' immagine non è disponibile sul server
oppure serve per i dispositivi palmari o i browser x persone ipovedenti.
Per le immagini decorative, tipo linee, spacer e cose simili (anche se è decisamente
meglio  impostarle come background di elementi tipo div) basta mettere
<img src="..." alt=""> dato che l' alt è un attributo necessario x la validazione.
| Ora il problema è centrare le foto nel box centrale!
Le foto essendo immagini dichiarate float: left mi sa che non puoi centrarle.
Però forse puoi metterle in un div centrato, anche se non so se funziona.
| la mia domanda è dunque: per centrare i div con i css come fare??? solo
| mettendo i margini sinistra e destra uguali?!? ma non potevano mettere un
| CENTER?!?! :)) Altri soluzioni che non conosco?
Come ti ha scritto deelan, basta l' uso dei margini. Una piccola aggiunta:
ie non capisce il valore auto per i margini.
Quindi va usato il text-align: center sul contenitore dell' elemento da centrare.
Avrò scritto almeno cinque-sei post sull' argomento... fai una ricerca con google
gruppi: "santaklauss centrare div" e li trovi.
| per quanto riguarda questo problema.
| Il tuo link è perfetto SOLO se riempio tanto il blocco centrale! Prova a
| riempire la colonna sinistra di contenuti in modo che sia più lunga di
| quella centrale... è il panico! Almeno con IE6! Se invece riempio la colonna
|centrale + delle altre 2 è ok.
Credo che la magiorparte dei layout a tre colonne tenga per buono il fatto
che la colonna centrale è quella dei contenuti principali ed è la più lunga.
Non mi è mai capitato di trovare un sito con layout a tre colonne con una colonna
laterale + lunga di quella centrale.
Da qualche parte ho letto di un layout che non presenta problemi di questo
tipo. Era un sito inglese, e non l' ho bookmarkato.
Trovi un sacco di layout qui:
http://nemesis1.f2o.org/
http://webhost.bridgew.edu/etribou/layouts/index.html
Anche su 
www.constile.org
 trovi qualcosa.
Oppure Listamatic, segnalato da deelan di recente qui sul ng.
| Il metodo del div contenitore non funziona. Se metto lo sfondo al div
| contenitore al menu' di sinistra appare un pochettino di sfondo in + e mi
| scombussola il layout.
Dipende da come hai implementato il layout. Credo sia una questione
di margini e/o padding. Secondo me può funzionare senza problemi.
Io l' ho usato per un layout sperimentale, ma credo possa andare sia
con un layout fatto con i float che con posizionamento assoluto.
Se hai Opera7 dai uno sguardo qui (è solo un layout "accademico" e non
ha utilità pratica dato che non si vede nei browsers diversi da Opera):
http://members.xoom.virgilio.it/santaklauss/ib.html
| Grazie ancora!
Figurati! Ciao,
    SantaKlauss

 -- 
Ric.

 di margini e/o padding. Secondo me può funzionare senza problemi.
Non potrebbe essere anche lo javascript presente in HEAD? Cmq ora faro' un
po' di tentativi con il padding e i margin :)
Grazie
Serse

Serse ha scritto:
| Con IE 6 le immagini non sono centrate. Tantomeno con Mozilla 1.4.
| E il css dovrebbe essere corretto.
| Non c'è nulla da fare?
Credo proprio di no. A meno che tu non usi una tabella.
| Ora il problema del centrare verticalmente i div
| Ho trovato in un tuo post questa parte di testo
[...cut...]
| Non ho capito l'ultima frase... praticamente il codice esempio è sbagliato?
| Oppure è scritta male l'ultima frase?
L' ultima frase è giusta, il codice è sbagliato (capita...) Ho scritto una
rettifica tempo fa sul ng. Per fare le cose per bene, avrei dovuto
accodarla al thread originale. Eccola:
____
Se le dimensioni del div da centrare sono in percentuale,
ecco come fare:
<style type="text-css">
div#container{
    position: relative; /*serve per consentire il posizionamento assoluto degli elementi al suo interno*/
    /*ecc...*/
    }
div#container div#centered{
    position: absolute;
    top: 30%;
    left: 20%;
    width: 60%;
    height: 40%;
    border: 1px solid #f00
    }
</style>
Nota che 2*left+width deve darti 100%, cosi come 2*top+height.
____
Ciao,
    SantaKlauss

 Nota che 2*left+width deve darti 100%, cosi come 2*top+height.
Ok grazie ancora :)
Bye
Serse

Allora :)
Visto che il modello con float neanche dentro ad una tabella si centra
(perchè anche dentro la tabella mi floata a sinistra :) - neologismo!) ho
dovuto abbandonare la tua image-collection (peraltro molto bella se non è
necessario centrarla) e ricorrere a una tabella.
Ora io vorrei un effetto anche su IE6 o IE 5.5 come quello che appare con
MOZILLA 1.4 e compatibili a questo link
www.sabbatucci.it/pippo.html
cioè che all'hover sul td cambi lo sfondo del td dietro all'immagine.
Come farlo compatibile su IE since non funziona il selettore :hover se non
su <A> ?
Grazie e buon sabato sera
Serse

Serse ha scritto:

Ciao Serse,
    ti basta aggiungere nell' html:
<table id="gallery">
<!-- supponiamo che tu la tabella l' abbia identificata "gallery" -->
<!--ecc... -->
    <td>
        <a href="#">
            <img src="..">
        </a>
    </td>
</table>
e lo stile td:hover lo sposti su a:hover aggiungendo display: block.
table#gallery td a:hover{
    display: block;
    background-color: #666
    }
Funziona anche su ie, anche se causa html extra. Nota cmq che i link
ti serviranno nel caso in cui vorrai mostrare le foto ingrandite in una popup
(è una funzione di poche righe in javascript).
Cambiando discorso...oggi su un ng in inglese ho trovato un thread interessante,
e ho pensato che le soluzioni + semplici spesso vengono all' ultimo.
Se ci tieni a non usare le tabelle, e soprattutto a conservare fluidità della galleria
rinunciando però alla descrizione delle thumbnails, e disporre le immagini centrate...
ecco come fare:
**css**
div#gallery{ /*è il div che contiene le foto*/
    background-color: #fc9;
    text-align: center /*this is the key!*/
    }
div#gallery img{
    margin: 5px;
    border: 1px solid #fff;
    }
**html**
<div id="gallery">
    <img src="thumb.gif">
    <img src="thumb.gif">
    <img src="thumb.gif">
    <!-- eccetera -->
</div>
Tutto qui. Puoi togliere la tabella ora. Se poi vuoi l' effetto rollover inserisci le
immagini in un link con il padding a 5px per esempio. In questo caso però non
mettere display:block.
| Grazie e buon sabato sera
Anche a te. Ciao,
    SantaKlauss

     }
No scusa ho fatto come dici, ripulito il codice, validato il tutto ma ora
l'hover non me lo da neanche su mozilla :)
Dove ho sbagliato?
www.sabbatucci.it/pippo.html
la parte di codice interessata è
-----------
table#immagini {
 width: 768px;
 margin: auto;
}
table#immagini td {
 width: 96px;
 height: 74px;
}
table#immagini td {
border: 1px solid #000000;
}
table#immagini td a:hover {
display: block;
background-color: #FFA500;
}
img {
border: 0px;
width: 90px;
height: 68px;
}
--------------

Quando ho tempo provo anche questa :) Per ora tabella non ho molto tempo!
Grazie ancora
Ric.

| No scusa ho fatto come dici, ripulito il codice, validato il tutto ma ora
| l'hover non me lo da neanche su mozilla :)
| Dove ho sbagliato?
| 
www.sabbatucci.it/pippo.html
|
| la parte di codice interessata č
[... cut...]
Ok forse mi ero spiegato male.. non credo possa funzionare assegnare
display: block solo sullo stato :hover di un link.
Ecco le due regole che ci vanno:
table#immagini td a{  display: block  }
table#immagini td a:hover{  background-color: #FFA500    }
Il display: block va sulla a, non su a:hover che cosě cmq
lo eredita da a. Cosě dovrebbe andare.
Ciao,
    SantaKlauss

     SantaKlauss
Scusa ancora :)
Ric.

| Boh non va ancora :))
| 
www.sabbatucci.it/pippo.html
| Ho modificato il tutto ed è ok pero' non funziona l'hover... e poi su IE non
| è neanche centrata e con il "trucco" margin:auto non lo centra.
| Perchè? uhmmmmm eppure il codice dovrebbe essere giusto!
Aggiungi un po' di padding su a
a{
    display: block;
    padding: 5px
    }
e togli le dimensioni da td e/o img. Così dovrebbe andare.
Per centrare qualcosa con ie, il discorso è vecchio...
Ti basta aggiungere un text-align: center nell' elemento da
centrare, in questo caso il body credo:
body{
    text-align: center
    }
table#immagini{
    margin: 0px auto
    }
Ciao,
    SantaKlauss