xhtml e css, come si fa?

[iacchi]

Premetto che non ho ancora studiato i css, ed è la prima volta che li uso, però devo portare una prima parte di un lavoro fatto per lunedì.
Ho iniziato a creare un css tentando di capire il loro funzionamento da altri css, ma ho veramente bisogno di un aiuto.

La pagina che devo creare l'ho già fatta anche in html, ma impassabile dal validatore!!!

IE comunque la visualizza come voglio io (purtroppo non si vede bene con mozilla) ed è visibile a questo indirizzo:

http://iacchi.altervista.org/prove/indexhtml.html

La pagina che invece ho fatto per ora in xhtml con la dtd 1.1 è accessibile qui:

http://iacchi.altervista.org/prove/index.html

E qui c'è il relativo css:

http://iacchi.altervista.org/prove/stile.css

Mi potreste dare una mano a creare il css in modo che le due pagine diventino identiche?
Mi basta anche solo qualche piccolo consiglio.

Graize

[Mich_]

Ho dato un'occhiata alle due pagine.

Anzitutto un errore di sintassi nel css: div.nenu span.selezionato (forse doveva essere "menu").

Poi ho notato che usi due classi diverse per selezionato e noselez sullo <span>. E` piu` semplice usare le sottoclassi del tag <a> (e` automatico lo scambio, quindi il CSS e` piu` semplice).


Un'ultima cosa: dal tuo post (ma non dalle pagine) sembra che non hai una base sui CSS. Potresti guardarti un tutorial, ad esempio quello di HTML.it . Magari qualche cosa e` ovvia, ma e` una base per iniziare, e ti puo` servire.

Ciao
Michele

[iacchi]

come ho scritto e tu hai ben capito, non so praticamente niente di CSS (ho però scaricato il tutorial di html.it e sto iniziando a leggerlo) e la metà delle cose che mi hai detto non le ho capite.
Il punto è questo: come hai visto dalla pagina, è facilmente intuibile che quello che sto realizzando è un progetto scolastico, e giovedì viene una persona del comune di Firenze per valutare le potenzialità del progetto e magari, nel caso, fornirci dei finanziamenti. Sicuramente posso farle vedere la pagina "vecchia", però volevo darle già un'idea di come cambierà in meglio la realizzazione del sito; per questo non ho tempo per finire di leggere tutto il tutorial e mi serviva un aiutino da parte vostra.

[pacovox]

Cominciamo dall'intestazione:

.intestazione {
background: #BFAF96;
width: 100%;
height: 103px;
}

.logo {
float: left;
padding-left: 6px;
padding-top: 6px;
}

.foto {
float: right;
}


<div class="intestazione">[img]index_files/logo.gif[/img]
[img]index_files/foto.jpg[/img]</div>

[iacchi]

Grazie, mi hai risolto uno dei miei problemi esistenziali!!
Tuttavia dopo questa modifica mi si creano altri problemi:
il menu orizzontale l'ho rifatto a immagini, come dovrà essere, e guarda come viene ora la pagina. Dai un occhio anche al css modificato.

[pacovox]

Se nel menu metti delle immagini, attenzione che non puoi dimensionarle in percentuale.
Secondo me ti conviene fare tutto il sito ad una dimensione fissa tipo 750px di larghezza, in modo che ti crei la barra di navigazione sempre di 750px e non hai più problemi con il menu.
Comunque, ho ritoccato un poco il codice e così va meglio anche se la barra orizzontale non è come la volevi.

body {
color: #000;
background: #f8f8e0;
font-family: arial;
}

.intestazione {
background: #BFAF96;
width: 100%;
height: 103px;
}

.logo {
float: left;
padding-left: 6px;
padding-top: 6px;
}

.foto {
float: right;
}

.menu {
border-width: 2px;
border-style: solid;
border-color: #8B4513;
padding: 0;
text-align: center;
height: 32px;
}

.menu a:link, .menu a:visited {
text-decoration: none;
}

.nonselezionato {
border-width: 1px;
border-style: solid;
border-color: #8B4513;
padding: 0;
margin: 0;
}

.selezionato {
border-width: 1px;
border-style: solid;
border-color: #8B4513;
padding: 0;
margin: 0;
}



<div class="intestazione">
[img]index_files/logo.gif[/img]
[img]index_files/foto.jpg[/img]
</div>



<div class="menu">[img]index_files/home.png[/img][img]index_files/biog.png[/img][img]index_files/stor.png[/img][img]index_files/pers.png[/img][img]index_files/inte.png[/img][img]index_files/foto.png[/img][img]index_files/audi.png[/img]</div>



Attenzione che il codice dell'html sembra incasinato, ma devi usarlo così tutto su un'unica riga, altrimenti IE ma Anche Mozilla ti aggiungono degli spazi non voluti.

[iacchi]

In seguito ai tuoi consigli (di cui ti ringrazio) e alle prime pagine del tutorial di html.it, ho ritenuto necessario riscrivere completamente la struttura della pagina e il suo css: in questo modo, oltre al fatto che "mi ci ritrovo" di più, ho risolto quasi tutti i problemi. Dico quasi: infatti non ne sono riusciti a risolvere tre (che rispetto a prima sono pochi):
come faccio ad eliminare quel maxi bordo trasparente, presente solo nella parte bassa delle immagini?
Come faccio a togliere tutti quei microbordi che ci sono fra <td> e <td>?
Come faccio ad allineare verticalmente in alto il testo (ho inserito l'opzione nel css, ma non mi ha cagato)?

Grazie

[pacovox]

Ho visto che hai usato le tabelle, evita di usarle dove possibile, forse potresti usarle solo per la barra del menu.

Se usi il codice che ti ho dato io non ti lascia nessuno spazio sotto le immagini.

Il vertical-align non serve per allineare verticalmente come con "valign".
Guarda questo tutorial: http://www.constile.org/template/centrare_il_box/

[iacchi]

seguendo il tuo consiglio ho riscritto nuovamente la pagina, trovando secondo me il giusto compromesso tra div e tabelle.
Rimane però ancora un problema: se navighi il sito con mozilla (mi sono dimenticato di dirti: il browser di casa M$, come al suo solito, non supporta la metà dei comandi css che ho inserito) vedrai che sotto le immagini del menu principale, tra la fine dell'immagine e l'inizio del bordo della tabella, c'è uno spazio in cui si trova solo il colore di sfondo, mentre in teoria secondo il codice scritto finita l'immagine dovrebbe iniziare subito il bordo. Sai come risolverlo?
Questo accade quando inserisco le immagini in un tag <td>, mentre con gli altri non da questo problema. Curiosamente, questo problema non si trova su IE, che immagino dia un attributo di default diverso da mozilla per un determinato valore che non conosco.