Pagina con sfondo e immagine cliccabile [Era: css]

**oKa** · 15-02-2008, 19:14

ciao,
siamo due ragazze completamente inesperte di tutto questo mondo...
Abbiamo un problema: dovremmo fare la pagina iniziale di un sito composta da un immagine di fondo e sopra un immagine dove, cliccandoci sopra, si accede alle pagine successive. Ci è stato detto di fare nel CSS una classe e un div ma in qualsiasi modo la rigiriamo non ci fa il collegamento alla pagina successiva e/o non ci fa vedere le immagini......
Questo è quello che abbiamo scritto noi (che a quanto pare è assolutamente sbagliato!!!):
#index{
width: 800px;
height: 600px;
background: url(images/intro.jpg)
}
index {
position: fixed;
right: 50px;
bottom: 50px;
display: block;
width: 200px;
height: 200px;
background: url(intro.jpg) top left no-repeat;
}
Qualche anima gentile potrebbe spiegarci cosa fare? dove sbagliamo?
GRAZIE!!!!!

**fcaldera** · 15-02-2008, 21:15

Benvenute nel forum.

Essendo il primo messaggio edito il titolo, ma vi suggerisco di leggere molto attentamente il regolamento (secondo thread in cima nell'elenco) prima di aprirne altri

In base a quanto descrivete potete usare un codice xhtml del genere

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <title>Titolo</title>
</head>
<body>
   <div>
     <a href="pagina_da_collegare.html">
     [img]images/immagine_cliccabile.jpg[/img]</a>
  </div>
</body>
</html>

e il css

codice:

div {
   width: 800px;
   height: 600px; 
   background: url(images/intro.jpg);
}

per come ho scritto quest'esempio
immagine_cliccabile.jpg e intro.jpg dovranno trovarsi nella stessa cartella (images)

**oKa** · 16-02-2008, 10:58

Anche noi avevamo fato così... e nella nostra ignoranza ci sembrava la cosa più logica!!!
Il problema è che il sito è per un esame e il professore ci ha detto che non vuole il codice in questo modo!

Questa è la cosa incomprensibile per noi che ci scrive il professore:

"...le immagini vengono impostate attraverso il css.
Per posizionarlo dove volete comunque suggerisco di creare una classe tipo <a class="intro"></a> e nel css implementare qualcosa del genere:

#container a.intro {
position: fixed;
right: 50px;
bottom: 50px;
display: block; width: 200px;
height: 200px;
background: url(intro.jpg) top left no-repeat;
}"

Ora noi ci chiediamo:
che cos'è quel conteiner a.intro??? e a cosa serve? è un semplice div?

**Myaku** · 16-02-2008, 11:37

Originariamente inviato da oKa
Anche noi avevamo fato così... e nella nostra ignoranza ci sembrava la cosa più logica!!!
Il problema è che il sito è per un esame e il professore ci ha detto che non vuole il codice in questo modo!

spero non mi arrivi il cazziatone dai mod, ma forse il vostro prof non ha capito che spesso ad una soluzione ci si può arrivare prendendo diverse strade

Questa è la cosa incomprensibile per noi che ci scrive il professore:

"...le immagini vengono impostate attraverso il css.

dipende da qual è il significato di tali immagini. Se sono parte del layout, ok, ma se rappresentano un contenuto imho starebbero meglio nell'html

Per posizionarlo dove volete comunque suggerisco di creare una classe tipo <a class="intro"></a> e nel css implementare qualcosa del genere:

#container a.intro {
position: fixed;

che guardacaso non è supportato da IE6. Se poi in questo caso il display:block c'entri qualcosa a funzionare come una sorta di workaround, non mi sono documentata. Anzi, sarei grata se qualcuno potesse illuminarmi

Ora noi ci chiediamo:
che cos'è quel conteiner a.intro??? e a cosa serve? è un semplice div?

significa che deve applicare lo stile agli elementi <a> con classe "intro" contenuti nell'elemento con id "container".

Discussione: Pagina con sfondo e immagine cliccabile [Era: css]

Strumenti discussione

Ricerca discussione

Visualizza

css

Permessi di invio