immagine link

[elenagb]

Qualcuno mi sa dire come posso far cambiare, quando il mouse ci passa sopra,
i bordi ad una immagine che fa da link ad una pagina? Vorrei farli diventare più chiari perchè si capisca che è un link.

[fcaldera]

se l'immagine è dentro il link

a:hover img {
border: ....
}

[elenagb]

L'immagine è lo sfondo di un h3 di un <div id="content">

#content h3{
background-image: url(geometria.gif);
background-repeat: no-repeat;
width: 500px;
height: 224px;
padding: 0px;
margin-bottom: 0px;
z-index: 4;
position: relative;
}

[Mich_]

In questo pezzo di CSS non posti nessuna formattazione oper il link, mentre nel primo post parlavi di link.

Posta il codice HTML di tutto il pezzo <div id="content">, ed il CSS corrispondente.
Dovresti anche dire quale DTD usi e in quali browser la cosa deve funzionare.

[elenagb]

Abbi pietà, per farmi un sito sto studiando html e css. Faccio domande all'impazzata, lo so,
ma questo non è il mio mestiere anche se mi piace tanto.
Ti posto tutto ma non so cos'è un DTD. .
Il sito dovrebbe funzionare ovunque, per ora lo testo in IE e Firefox. Ho guardato i codici di esempio di zen garden e mi è venuta fuori una cosa di questo tipo:

<div id="content">

<h1><span>Gallerie Fotografiche</span></h1>
<h2><img src=geometria.gif border="0" ></h3>
<p class="p3"><span></span></p3>
<h3><img src=tribu.gif border="0" ></h4>
<p class="p3"><span></span></p3>
<h4><img src=saliscendi.gif border="0" ></h5>
<p class="p3"><span></span></p3>

evito i p3 (troppo lunghi e solo testo)

#content {
background-image: url(content.gif);
background-repeat: repeat;
background-color:#000000;
width: 25.2em;
border-right: 0.1em solid #009999;
border-left: 0.1em solid #009999;
text-align: center;
font-size: 1em;
padding-top: 1em;
padding-bottom: 1em;
position: relative;
z-index: 2;
}

#content h1{
background-image: url(gallerie-fotografiche.gif);
background-repeat: no-repeat;
background-color:#000000;
width: 25.2em;
hight: 3.8em;
text-align: center;
font-size: 1em;
padding-top: 3em;
padding-bottom: 2em;
position: relative;
z-index: 2;
}

#content h1 span {
display: none;
}

Le immagini di href sono delle thumbnails che aprono la pagina delle gallerie fotografiche.
Per i link della navigazione ho messo:

a:link {
color: #33cccc;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: none;
}
a:hover, a:active {
color: #ffffff;
text-decoration: none;
}

Volevo mettere un bordo bianco anche per l'hover di queste thumb, se si può fare
ma non recupero da nessuna parte il codice. Ho notato inoltre che, con firefox, comunque compare la cornice a puntini sulle thumbnails anche se il visited non lo dichiara. Puoi aiutarmi? Grazie.

[Mich_]

Ti posto tutto ma non so cos'è un DTD.

Questo e` un problema.
La DTD (Document Type Definition) viene dichiarata nel DOCTYPE. Se manca, i brwoser interpretano come vogliono, per cui e` impossibile imporre una formattazione. Vedi qualsiasi guida su HTML o CSS alla voce DOCTYPE

Ho guardato i codici di esempio di zen garden

Zen garden e` un bellissimo esempio di cosa si puo` fare con i CSS, ma non e` un esempio da imitare: per poter sfruttare a fondo i CSS utilizza dei trucchi "sporchi" nell'HTML, che non sono proprio da imitare.

Personalmente non condivido il modo che hai usato per sostiutire i titoli con immagini: un elemento con display:none puo` dare fastidio ai motori di ricerca ed anche ai lettori di schermo, per cui e` da evitare.

E anche l'attributo border="0" e` un attributo di formattazione inserito nel codice HTML: puo` andare in conflitto con la formattazione CSS, per cui e` da evitare (al suo posto inserisci un border: none nel CSS). Credo che il tuo problema nasca proprio da questo attributo.

Comunque per la formattazione dei bordi delle immagini, i selettori da usare potrebbero essere:
#content a img { ... }
#content a:visited img { ... }
#content a:hover img { ... }

Oppure, se vuoi essere piu` specifico (non so se ci sono altri link con immagini fuori dai titoli):
#content hX a img { ... }
#content hX a:visited img { ... }
#content hX a:hover img { ... }
dove al posto della X ci metti 1, 2, 3, ecc a seconda del titolo che vuoi formattare

[elenagb]

Mi sono letta che cos'è il DTD.
Il problema è che non è semplice fare la scelta giusta per chi non ha l'esperienza e la malizia di anni di lavoro. Quello che ho messo nel mio sito l'ho recuperato da sito che ho preso come esempio (http://www.csszengarden.com/?cssfile=213/213.css). Confesso che ho fatto un semplice copia e incolla.
Ho letto alcuni tutorials sulla questione e mi sono trovata in mezzo alla guerra dei browser e dei Roses e non credo di essere in grado di definire il dtd che può essere adatto al mio sito.
Non ne ho la competenza. So solo che il mio sito con questo dtd copiato funziona.
Questo è l'indirizzo: http://www.annodareconstile.altervista.org/index.htm. E' tutto ancora in allestimento e quindi provvisorio. Ho corretto la questione del bordo come hai detto tu e sto ragionando sulla scelta delle immagini link.
Il problema è che il sito vorrebbe essere un fumetto un po' surreale (mi hanno detto che deve rappresentare il suo proprietario) ed è così che lo vorrei.
Ti ringrazio tanto per le tue critiche e, se ti ritrovi qualche minuto da spendere, me ne aspetto altre.

[Mich_]

Le DTD da scegliere non sono poi molte.

Visto che inizi un sito nuovo, io Sconsiglierei una DTD transitional: queste sono state inserite per i siti vecchi che non possono passare ad una DTD di tipo Strict.
A questo punto la scelta e` fra
HTML 4.0
XHTML 1.0
XHTML 1.1
HTML 5

XHTML 1.1 non e` supportato da IE6 ne` IE7; inoltre anche gli altri browser vecchi di qualche anno non lo interpretano correttamente. Quindi a mio parere e` un po' troppo evoluto per il momento attuale.

HTML 5 Inizia ad essere supportato dai browser piu` recenti, ed e` molto quotato (dai produttori di browser). Potrebbe essere una buona scelta; io personalmente lo conosco poco, dato che e` uscito solo quest'anno

Per quanto riguarda gli altri (HTML4 Strict e XHTML 1.0 Strict), sono molto simili dal punto di vista del programmatore: pero` visto che con XHTML 1.0 Strict servono meno della meta` degli hack per IE, la mia scelta sarebbe per XHTML 1.0 Strict.
Occorre tener presente che occorre essere molto precisi nella formulazione delle istruzioni, ed e` necessario validare sempre la pagina: un errore potrebbe trarre in inganno i browser (da questo punto di vista HTML5 e` piu` comodo: in tale DTD e` specificato come i browser devono reagire ad eventuali errori del programmatore)

PS: il tuo sito non e` piu` visibile a quell'indirizzo.

[elenagb]

Inconsapevolmente ho fatto la scelta giusta. Il sito è www.annodareconstile.altervista.org
con dtd XHTML 1.0 Strict.
Non l'ho ancora sottoposto a validazione: non è ancora finito e devo studiare bene come
fare a validarlo e a renderlo visibile. Ho visto che gli altri siti ultilizzano meta "content" con delle parole chiave. L'ho fatto anche io ma devo ancora prendere consapevolezza della parte finale del mio lavoro. Il sito ha ancora dei difetti e prima devo lavorare su quelli.
A questo punto però, viste le tue spiegazioni, sono più tranquilla almeno per il dtd.
Grazie mille ancora e se puoi indicarmi degli errori grossolani te ne sono veramente grata.

[Mich_]

Non ti conviene aspettare la fine per validare: se hai lasciato errori, e` poi piu` difficile toglierli: ti conviene validare ad ogni modifica importante che fai. Tra i "link utili" trovi i riferimenti per i validatori.

Il CSS andrebbe inserito tramite il tag <link>: con la DTD che usi non puoi inserire sintassi CSS all'interno del tag <style>. Se hai usato l'import per l'hack di NN4, credo che puoi ignorare quel browser.

Nel CSS ho visto un altro errore di logica: le pseudoclassi vanno inserite in un ordine definito: :link, :visited, :hover, :active, mentre nel a img hai usato l'ordine errato.
Inoltre di solito se si vuole mettere un bordo che si veda all':hover, conviene metterlo anche nella condizione rilassata, altrimenti si creano degli spostamenti del resto della pagina: il bordo va messo sempre, ma il colore puo` essere cambiato (puo` essere uguale al colore di sfondo, in modo da essere invisibile).

Vedo inoltre che usi i posizionamenti: in linea di massima questi creano piu` problemi di quanti ne risolvono (sovrapposizione di elementi in alcune circostanze): se puoi non usarli ne guadagni in tempo e in fegato in futuro.

Occhio al display: none; per nascondere i titoli sostituiti da immagini: non piace ai motori di ricerca, e non piace neppure ai lettori di schermo: meglio un margin-left: 1000px; o cose analoghe.