PDA

View Full Version : Migliorare XHTML+CSS

mslvm
25-12-2005, 18:19
un mio amico ha fatto il layout e io l'ho impaginato... siccome è la prima volta che uso questa tecnica al posto delle tabelle, vorrei sapere cosa ho sbagliato e cosa dovrei migliorare (sopratutto il menu, ho impiegato molto testo)... ecco il link: http://www.gamelost.altervista.org/ ... grazie...!
andbin
25-12-2005, 18:55
un mio amico ha fatto il layout e io l'ho impaginato... siccome è la prima volta che uso questa tecnica al posto delle tabelle, vorrei sapere cosa ho sbagliato e cosa dovrei migliorare (sopratutto il menu, ho impiegato molto testo)... ecco il link: http://www.gamelost.altervista.org/ ... grazie...!
Ciao, intanto auguri!
Alcune cose mi sono subito saltate all'occhio osservando il codice html/css. La prima è che il menù è stato creato usando dei div. Non ho visto link <a> al momento (penso li metterai in seguito) ma in ogni caso ogni elemento del menù è un div. Questo non è molto giusto. In genere il modo "pulito" ed elegante per fare un menù è:
<div id="menu">
<ul>
<li><a href="pagina1.php">Pagina 1</a></li>
<li><a href="pagina2.php">Pagina 2</a></li>
ecc...
</ul>
</div>
cioè tramite le liste non ordinate, opportunamente stilizzate tramite CSS.

La seconda cosa che ho notato è l'uso del nome di font "Geneva". Tieni presente che moltissima gente (me compreso, ad esempio) non ha quel font e quindi si dovrebbe evitare l'uso di font strani se non in casi davvero eccezionali.
mslvm
26-12-2005, 00:16
Ciao, intanto auguri!
Alcune cose mi sono subito saltate all'occhio osservando il codice html/css. La prima è che il menù è stato creato usando dei div. Non ho visto link <a> al momento (penso li metterai in seguito) ma in ogni caso ogni elemento del menù è un div. Questo non è molto giusto. In genere il modo "pulito" ed elegante per fare un menù è:
<div id="menu">
<ul>
<li><a href="pagina1.php">Pagina 1</a></li>
<li><a href="pagina2.php">Pagina 2</a></li>
ecc...
</ul>
</div>
cioè tramite le liste non ordinate, opportunamente stilizzate tramite CSS.

La seconda cosa che ho notato è l'uso del nome di font "Geneva". Tieni presente che moltissima gente (me compreso, ad esempio) non ha quel font e quindi si dovrebbe evitare l'uso di font strani se non in casi davvero eccezionali.

grazie auguri anche a te ^^ ero molto scettico su quel menu, l'ho creato nell'unico modo che conoscevo, posizionando ogni div al proprio posto ma ho notato subito che il metodo non era per niente buono, in quanto ho dovuto creare ben 6 div molto simili se non per la posizione dal margine sinistro :mc: ora comunque provo col metodo che mi hai proposto, grazie mille ^^ (ma per ottenere un effetto come quello che ho fatto io con tutti quegli id come dovrei fare? cioè ho fatto così:



<div id="MenuContest">
<ul>
<li>News</li>
<li>Organizzazione</li>
<li>Hardware</li>
<li>Forum</li>
<li>Software</li>
<li>Recensioni</li>
</ul>
</div>


e poi l'id MenuContest e MenuContest:hover come dovrebbe essere? grazie ancora :D
andbin
26-12-2005, 12:32
Nell'allegato ci sono 4 file (1 html, 1 css e 2 immagini) che mostrano come realizzare un menù orizzontale usando le liste non ordinate e i CSS. Ho creato 2 immagini (2 gradienti invertiti, tanto per fare qualcosa) della stessa dimensione come nel tuo sito (173x38). Nel CSS ho messo anche dei commenti in modo che fosse un po' più chiaro.
Comunque se hai dei dubbi o non capisci qualcosa, chiedi pure! Ciao
mslvm
26-12-2005, 13:07
Nell'allegato ci sono 4 file (1 html, 1 css e 2 immagini) che mostrano come realizzare un menù orizzontale usando le liste non ordinate e i CSS. Ho creato 2 immagini (2 gradienti invertiti, tanto per fare qualcosa) della stessa dimensione come nel tuo sito (173x38). Nel CSS ho messo anche dei commenti in modo che fosse un po' più chiaro.
Comunque se hai dei dubbi o non capisci qualcosa, chiedi pure! Ciao
grazie infinite, ora è perfetto :D stavo abbozzando anche io un menu così con qualche ricerca su internet, ma quando l'ho finito ho visto che con firefox era perfetto ma con ie l'effetto non c'era :confused: ul.nav, .nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}

ul.nav{
display: table;
}

ul.nav>li{
display: table-cell;
position:relative;
padding: 2px 6px;
width: 130px;
text-align: center;
vertical-align: middle;
background-image: url("../Img/nav_normal.png");
height: 38px;
}

ul.nav>li:hover{
background-image: url("../Img/nav_over.png");
}
anonimizzato
26-12-2005, 14:27
le proprietà relative a:

display: table-cell

che permettono di simulare un layout tabellare senza utilizzare il codice per le tabelle di dati non è ancora supportato da IE.
andbin
26-12-2005, 18:44
ul.nav>li:hover{
background-image: url("../Img/nav_over.png");
}
la pseudo-classe hover è bene applicarla solo ai tag <A>.
mslvm
26-12-2005, 19:44
la pseudo-classe hover è bene applicarla solo ai tag <A>.
si infatti ie non me la supportava applicata alle tabelle... siccome adesso mi sto interessando di nuove tecniche XHTML/CSS stavo pensando se e come potessi convertire xhtml di quella pagina lì in XML, per magari implementare poi l'FML per le form (ho letto proprio adesso un articolo ma non trovo il dtd associato)... mi conviene? cosa potrei fare? grazie ^^
andbin
26-12-2005, 21:38
si infatti ie non me la supportava applicata alle tabelle... siccome adesso mi sto interessando di nuove tecniche XHTML/CSS stavo pensando se e come potessi convertire xhtml di quella pagina lì in XML, per magari implementare poi l'FML per le form (ho letto proprio adesso un articolo ma non trovo il dtd associato)... mi conviene? cosa potrei fare? grazie ^^
Guarda che XHTML è già una "rivisitazione" in chiave XML dell'HTML. Poi non ha senso dire "convertire una pagina xhtml in xml", dal momento che i browser tipicamente capiscono (X)HTML. In realtà alcune casi particolari ci sono. Mozilla e simili sono già in grado di visualizzare documenti XML ma solo con l'uso combinato dei CSS. In pratica tu puoi creare un tag del tipo <titolo> e associare a quel tag degli stili tramite CSS (ovviamente questo ha dei limiti, nel senso che non puoi fare trasformazioni complesse).
Internet Explorer mi sembra che possa anche visualizzare XML ma bisogna mettere (spero di ricordarmi bene) delle "isole" di dati XML dentro alla pagina HTML ed usare il DOM tramite Javascript per convertirle in HTML.

Riguardo a FML (Form Markup Language) ... io, a dire il vero, non l'avevo mai sentito. Facendo una veloce ricerca ho scoperto che è un linguaggio (inventato da una azienda di nome Mozquito) che estende XHTML per gestire in chiave XML i form delle pagine web. Non ho capito bene tutto ma siccome nessun browser (almeno al momento) "capisce" 'sto FML, suppongo che debba essere trasformato comunque, in qualche modo, in XHTML!

Il mio consiglio che ti posso dare è quello di lasciare perdere queste cose che personalmente ritengo molto "esotiche" e poco pratiche e/o standard.
Se vuoi creare dei siti validi, penso che possa bastare una buona pagina in XHTML (che rispetti ad esempio XHTML 1.0 Strict) con l'uso dei CSS. Cercando ovviamente di evitare le tabelle per il layout, tenendo separati i contenuti dalla presentazione e considerando i vari criteri per l'accessibilità.
mslvm
26-12-2005, 22:54
Guarda che XHTML è già una "rivisitazione" in chiave XML dell'HTML. Poi non ha senso dire "convertire una pagina xhtml in xml", dal momento che i browser tipicamente capiscono (X)HTML. In realtà alcune casi particolari ci sono. Mozilla e simili sono già in grado di visualizzare documenti XML ma solo con l'uso combinato dei CSS. In pratica tu puoi creare un tag del tipo <titolo> e associare a quel tag degli stili tramite CSS (ovviamente questo ha dei limiti, nel senso che non puoi fare trasformazioni complesse).
Internet Explorer mi sembra che possa anche visualizzare XML ma bisogna mettere (spero di ricordarmi bene) delle "isole" di dati XML dentro alla pagina HTML ed usare il DOM tramite Javascript per convertirle in HTML.
(cut)
http://www.w3.org/MarkUp/Forms/Test/chapter3.xml ho avuto questa idea passando per questa pagina, che con firefox si vede perfettamente ma con ie è uno schifo :cry: va be', dovrò continuerò ad usare xhtml in attesa del supporto completo di xml e degli altri linguaggi interessanti tipo FML :D
mslvm
27-12-2005, 13:26
scusate ho un altro piccolo problema con le liste non ordinate :mc: dovrei fare un menu, un menu con l'apertura in alto e al centro un colore monocromatico, gestibile con gli esadecimali... (ho allegato un'immagine del menu). Allora ho pensato ad una lista non ordinata, tagliando l'intestazione del menu (anzichè posizionare con tanti div ogni elemento del menu). Quindi:



<ul>
<li class="menuHead"><span id="txtHead">Intestazione Menu</span></li>
<li class="menuBody"><span id="txtBody">Testo dentro al menu...</span></li>
</ul>


e gli stili css associati dovrebbero essere:

.MenuHead
{
list-style: none;
float: left;
height: 38px;
padding: 0px;
margin: 0px;
background-image: url("../Img/menuHead.png");
background-repeat: no-repeat;
width: 180px;


}
.menuBody
{
list-style: none;
float: left;
height: 38px;
padding: 0px;
margin: 0px;
background-color: #dfdfdf;
width: 180px;

}
andbin
27-12-2005, 14:42
scusate ho un altro piccolo problema con le liste non ordinate :mc: dovrei fare un menu, un menu con l'apertura in alto e al centro un colore monocromatico, gestibile con gli esadecimali... (ho allegato un'immagine del menu). Allora ho pensato ad una lista non ordinata, tagliando l'intestazione del menu (anzichè posizionare con tanti div ogni elemento del menu).Se intendi fare un menù verticale, allora il "float: left" lo devi sicuramente togliere. Ma magari non ho capito bene io. ;)
mslvm
27-12-2005, 16:22
Se intendi fare un menù verticale, allora il "float: left" lo devi sicuramente togliere. Ma magari non ho capito bene io. ;)
si l'ho tolto adesso ma resta il problema che a sinistra c'è uno spazio per ogni <li> (come se ci fosse un pallino che non si vede) ma io quello spazio non lo voglio....
andbin
27-12-2005, 16:31
si l'ho tolto adesso ma resta il problema che a sinistra c'è uno spazio per ogni <li> (come se ci fosse un pallino che non si vede) ma io quello spazio non lo voglio....
Allora metti:
padding: 0px;
margin: 0px;anche per <ul>.
mslvm
27-12-2005, 23:00
scusate se vi disturbo ancora ma ho un altro problema serio con il sito... ora che ho aggiornato l'xhtml utilizzando i css con un altro metodo per posizionare il background e tutto il resto, con ie si vede uno schifo, mentre con firefox è perfetto...


(aprire in una nuova finestra/scheda)

La pagina XHTML:
http://gamelost.altervista.org/

Il foglio di stile per il menu/barra centrale
http://gamelost.altervista.org/rendering/central.css

Il foglio di stile per i menu laterali
http://gamelost.altervista.org/rendering/lateral.css

Il foglio di stile per le altre cose (logo, sfondo, finestra centrale)
http://gamelost.altervista.org/rendering/general.css



grazie ancora ve ne sarà infinitamente grato non so più come fare per queste incompatibilità :help:
mslvm
05-01-2006, 20:24
nessuno mi può aiutare? :mc: so che è un po' difficile ma abbiate un po' di pazienza :cry: