TEMPLATE con css

[SolidSnake4]

Salve a tutti ho creato un template con css e ovviamente mi sono imbattuto nei tipici errori di compatibilità tra i browser IE e FF, comunque, volevo chiedere se qualcuno mi poteva dare diciamo così un "giudizio" sul codice se sta bene oppure no ? Prima di postare qualsiasi allegato aspetto una risposta 0

 

[www]

Ciao. Beh, se metti il link o scrivi comunque l'indirizzo ci dai modo di dare un'occhiata. Qualcuno che ha qualcosa da dire lo trovi sicuramente.

 

[SolidSnake4]

questo è il link, siate pure chairi e schetti sui commenti e in caso cercherò di migliorarlo

 

[www]

Sul codice della pagina (ma il css in realtà non sono andato a brucarlo) ti dico che con un paio di ritocchi minimi lo fai diventare xhtml transitional.

Se ti interessa esporre la dichiarazione etc etc.
Basta correggere i tag <br> (<br/> in xhtml) e trovare una soluzione alternativa al tag <marque> che usi per il riquadro con il testo a scorrimento (che detto tra noi dicono non piaccia particolarmente a google...).

Poi graficamente sei ancora under construction.

Bello compatto. Ottima premessa.

 

[SolidSnake4]

ok l'ho passato a xhtml transition, ora se posto il codice css mi dici cosa eventualmente posso migliorare o togliere ? 0

style.css

body
{
    margin: 0px;
    background-color: #EEEEEE;
    color: #000000;
}
div
{
    font-size: 11px;
    font-family: verdana;
}
{ padding: 0; margin: 0; }

/* ----- ----- ----- ----- ----- */

#MAIN
{
    text-align: left;
    width: 800px;
}
#corpo {
    background: url(body.jpg);
    margin-bottom: 5px;
    overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
    width= 800px;
}
#HEADER
{
    padding: 45px;
    background-color: #FFCC00;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
}
#BANNER
{
    padding: 25px;
    background-color: #c3c4c6;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
}
#TOP
{
    text-align: left;
    background-color: #336699;
    border-right: Solid 1px #000000;
    border-left: Solid 1px #000000;
    border-bottom: solid 1px #000000;
}
#CAT
{
    text-align: center;
    padding: 4px;
    background-color: #820101;
    border-right: Solid 1px #000000;
    border-left: Solid 1px #000000;
    border-bottom: solid 1px #000000;
}
#MENUSX
{
    float: left;
    width: 146px;
}
#MENUDX
{
    float: left;
    width: 146px;
}
#CONTENT
{
    float: left;
    width: 507px;
    text-align: center;
}
#rilievo
{
    width: 491px;
    height: 175px;
    margin-top: 10px;
    margin-left: 7px;
    background-color: #FFFFFF;
}
#articolo
{
    float: left;
    width: 245px;
    height: 330px;
    margin-top: 10px;
    margin-left: 7px;
    background-color: #FFFFFF;
}
#articolodx
{
    float: left;
    width: 240px;
    height: 160px;
    margin-top: 10px;
    margin-left: 7px;
    background-color: #FFFFFF;
}
#bannerfondo
{
    clear: left;
    margin-top: 20px;
    margin-left: 155px;
    margin-right: 8px;
    
}
#FOOTER
{
    clear: left;
    border-top: solid 1px #000000;
    border-right: Solid 1px #000000;
    border-left: Solid 1px #000000;
    border-bottom: solid 1px #000000;
}
#sfondor
{
    float: left;
    width: 489px;
    height: 200px;
    margin-top: 
    margin-left: 7px;
    background-color: #FFFFFF;
    border-right: Solid 1px #820101;
    border-left: Solid 1px #820101;
    border-bottom: solid 1px #820101;

}

classi.css

/* CSS Document */

.tmenu {
	font-size: 1.0em;
	color: #333;
}

.tmenu a:link {
	color: #fff;
	text-decoration: none;
}
.tmenu a:visited {
	text-decoration: none;
	color: #fff;
}
.tmenu a:hover {
	text-decoration: none;
	color: #bd7e03;
}
.tmenu a:active {
	text-decoration: none;
}
.cmenu {
	font-size: 0.9em;
	color: #333;
}

.cmenu a:link {
	color: #000;
	text-decoration: none;
}
.cmenu a:visited {
	text-decoration: none;
	color: #000;
}
.cmenu a:hover {
	text-decoration: none;
	color: #820101;
}
.cmenu a:active {
	text-decoration: none;
}
.imenu {
	position:relative;
	font-weight: bold;
	font-size:0.8em;
      text-align: center;
	width:141px;
	height:13px;
      margin-top: 2px;
      margin-left: 2px;
	padding-left: 10x;
      background: url(sf.jpg);
      border-top: Solid 1px #820101;
	border-right: Solid 1px #820101;
      border-left: Solid 1px #820101;
      border-bottom: solid 1px #820101;
}
.smenu {
	position:relative;
	font-weight: bold;
	font-size:0.9em;
      text-align: center;
	width:136px;
	height:13px;
      margin-top: 1px;
      margin-left: 4px;
	padding-left: 10x;
      background-color: #FFFFFF;
      border-top: Solid 1px #FFFFFF;
	border-right: Solid 1px #FFFFFF;
      border-left: Solid 1px #FFFFFF;
      border-bottom: solid 1px #FFFFFF;
}
.rmenu {
	position:relative;
	font-weight: bold;
	font-size:1.8em;
      text-align: center;
	width:495px;
	height:25px;
      margin-top: 5px;
      margin-left: 5px;
	padding-left: 10x;
      background-color: #820101;
      border-top: Solid 1px #820101;
	border-right: Solid 1px #820101;
      border-left: Solid 1px #820101;
      border-bottom: solid 1px #820101;
}
.fmenu {
	float: left;
	font-weight: bold;
	font-size:1.8em;
      text-align: center;
	width:230px;
	height:153px;
      margin-top: 10px;
      margin-left: 7px;
	padding-left: 10x;
      background-color: #c3c4c6;
      border-top: Solid 1px #c3c4c6;
	border-right: Solid 1px #c3c4c6;
      border-left: Solid 1px #c3c4c6;
      border-bottom: solid 1px #c3c4c6;
}
.tril {
      float: left;
	font-weight: bold;
	font-size:1.8em;
      text-align: left;
	width:240px;
	height:153px; 
      margin-left: 4px;
      margin-top: 10px;
	padding-left: 10x;
      background-color: #FFFFFF;
      border-top: Solid 1px #FFFFFF;
	border-right: Solid 1px #FFFFFF;
      border-bottom: solid 1px #FFFFFF;
}
.sart {
      float: left;
	font-weight: bold;
	font-size:1.8em;
      text-align: left;
	width:231px;
	height:153px; 
      margin-left: 7px;
	padding-left: 10x;
      background-color: #FFFFFF;
      border-top: Solid 1px #FFFFFF;
	border-right: Solid 1px #FFFFFF;
      border-bottom: solid 1px #FFFFFF;
}
.titolofondo {
	position:relative;
	font-weight: bold;
	font-size:1.2em;
      text-align: center;
	width:489;
	height:15px;
      margin-top: 2px;
	padding-left: 10x;
      background: url(sf.jpg);
      border-top: Solid 1px #820101;
	border-right: Solid 1px #820101;
      border-left: Solid 1px #820101;
      border-bottom: solid 1px #820101;
}

 

[www]

Si, a occhio mi sembra ordinato.

Però non so che tipo di suggerimento chiedi.

Se è una questione "formale":
prova a validarlo presso il w3c (dopo aver validato la pagina di cui sopra e seguendo i link proposti per la validazione del foglio di stile dallo stesso w3c).

Se è una questione grafica: sorry, non sono un grafico rifinito, e poi tutto dipende da come vorrai formattare i contenuti ancora non presenti on page.

Se è una questione sull'incompatibilità FF / IE7, che resiste e prescinde dalla validazione formale di un codice xhtml, la cosa è ben diversa.
Un codice può essere lindo e perfetto ma incontrare comunque bug in un browser piuttosto che un altro, per un determinato tag.

A questo punto, se vuoi testare questo fattore, ti invito a cercare di fare dei veri e propri "test browser".
Trovi dei tool online (e non mi ricordo quello che usa il mio grafico... ovviamente è tutto in inglese, devi cercare un po...).
Che fanno? ti aprono delle finestre di prova per farti vedere la visualizzazione della tua pagina (da url a tua scelta) secondo browser e risoluzioni del monitor differenti.


Con questi tool verifichi automaticamente bug e difformità.
Come sanarle?

Caso per caso, una volta individuate.

Ma ti consiglio i finire/rifinire prima il layout e la formattazione dei testi (e inserire anche gli adsense o gli altri script che pensi di mettere).


Il ccs l'hai "fatto a mano", un bel lavorone. Perchè pensi che abbia problemi?
O sai già quali sono?

Prova a seguire l'iter della validazione w3c. Serve anche per verificare "malformazioni" in corso d'opera...

 

[SolidSnake4]

si i css li ho fatti a mano, il problema ora che mi dà riguarda più che altro le dimensioni dei riquadri, per esempio su mozilla il riquadro dove c'è la notizia in orizzontale è centrato con IE invece è leggermente spostato sulla destra e quindi non è neanche allineato con le due colonne sottostanti, poi questo l'ho visto ora il tag marquee con FF va bene, mentre con IE mi taglia il testo a metà, credo che dipenda dall'altezza o della tabella oppure del riquadro, poi ci sono altri erorri sempre legati a proporzioni di riquadri e margini. Cmq non è che per caso ti ricordi questo tool online per il test browser ?

 

[www]

Si, guarda, te l'ho cercato apposta.

E' spartano, in apparenza, ma molto utile ed efficiente.
http://browsershots.org/

Se selezioni troppe risoluzioni ci mette fino a mezz'ora per caricarsi tutte le visualizzazioni.

Ti consiglio di farlo partire in una finestra del browser e di aspettare che abbia finito. Ti avverte in corso d'opera e puoi navigare i vari test.

 

[SolidSnake4]

ma non c'è IE tra i browser come mai ? A senti ho provato a fare la validazione dei css ho corretto gli errori però mi escono degli avvisi del tipo "Hai utilizzato lo stesso colore per il valore di color e per il valore di background-color in due contesti: #articolodx e .tmenu a:link" secondo te è meglio correggere anche questi o alla fine sono solo dei warning ?