Newsgroup: it.lavoro.professioni.webmaster
Titolo: TEST: quanto conoscete CSS e XHTML strict?

Questo post nasce in seguito ad una discussione scaturita in un altro
post.
Voglio estendere il problema a tutti.
Ci vogliono 2 minuti... Provateci.
Osservate la seguente pagina XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it" lang="it">
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"
/>
</head>
<body>
<div id="header">header: 700px per 100px<br /></div>
<div id="container">
<div id="main">main: 700px per 300px<br /></div>
</div>
<div id="bottom">bottom: 700px per 50px<br /></div>
</body>
</html>
Siete in grado di creare il file style.css affinché la pagina
risultante sia come l'immagine seguente?
- 
http://nuke.daguanno.it/Portals/0/006.GIF
NB:
1) i margini bianchi attorno ai box non sono importanti. Contano solo i
box.
2) le misure sono riferite al contenuto (piccolo aiuto: fate attenzione
a "padding", al "margin" ed al "border")
2) il doppi bordi che si creano fra il box rosso ed il verde, e quello
che si crea tra il verde ed il blu sono voluti
3) Il file css deve contenere le impostazioni "necessarie e
sufficienti" allo scopo (necessarie: senza le quali lo scopo non
sarebbe riaggiunto; sufficienti: le impostazioni minime affinché lo
scopo sia raggiunto)
Che abbia inizio la sfida...

scopo sia raggiunto)
--------------
#header, #main,#bottom	{ width:700px; background:red; border: 1px
solid #000}
#header {height: 100px;}
#main { height: 300px; background: green;}
#bottom { height: 50px; background: blue;}
-------------------
così è già troppo ridondante:-)

scusa ho avuto un'idea migliore:
body {background: url(
http://nuke.daguanno.it/Portals/0/006.GIF
) top
left no-repeat;}

Clepy wrote:

rotfl
-- 
non stare in buco, sono spine

Clepy wrote:

ahahaha!
-- 
ThereIn

Voi ridete e vi rotolate sul pavimento dalla risate, ma m4r10 in un
altro post ha risolto così:
 body {
 text-align: center;
 margin: 0 auto 0 auto;}
 div#header {
 background-color: #ff0000;
 border: 1px #000000 solid;
 height: 100px;
 text-align: left;
 margin: 0 auto 0 auto;
 width: 698px !important;
 width/**/: 700px;}
 div#container {
 border: 0px #000000 solid;
 margin: 0 auto 0 auto;
 padding:0px;
 text-align: left;
 width: 700px;}
 div#main {
 background-color: #00ff00;
 border: 1px #000000 solid;
 float: left;
 height: 300px;
 padding:0px;
 text-align: left;
 width: 698px !important;
 width/**/: 700px;}
 div#bottom {
 background-color: #0000ff;
 border: 1px #000000 solid;
 clear: both;
 height: 50px;
 margin: 0 auto 0 auto;
 text-align: left;
 width: 698px !important;
 width/**/: 700px;
 }
Se non capite cosa c'è scritto non vi allarmate, di sicuro site
abituati ad usare Dreamweaver o Frontpage per creare siti web...
ROTFL^100

 [cut]
Non so se ci sei o ci fai. Io non ho risulto nulla.
Le tecniche per far fronte ai problemi di box model sono note da anni. Chi 
si occupa di webdesign le applica quotidianamente, quindi non puoi lanciare 
una *sfida* del genere e pretendere di non essere deriso.
Per il futuro, qualora avessi altre difficoltà, ti suggerisco di postare su 
un ng o su un forum web più consono all'argomento html/css. Per cominciare 
leggiti una buona guida.
Mario. 

abituati ad usare Dreamweaver o Frontpage per creare siti web...
Scusami, sinceramente cosě decontestualizzato, non ho capito il senso
del tuo post..
Era per porre un problema di interpretazione tra i vari browser?
Ciao
Clepy

 Era per porre un problema di interpretazione tra i vari browser?
No, è solo che sviluppo applicazioni web (non siti, ma applicazioni
web) da anni, però di fronte ai piccoli problemi (piccoli per così
dire) di pixel non mi ero mai soffermato più di tanto.
Ora che ho un po' di tempo a disposizione mi sono preso i documenti
relativi a XHTML 1 e CSS 2 (dal sito w3c) e li sto spulciando da cima a
fondo. Parlando con addetti del settore (addetti è un parolone), mi
sono reso conto che il 90% di loro non si è mai posto il problema
(come d'altronde ho fatto io fino ad ora).
Volevo vedere quanta gente aveva già avuto il mio problema, quanta
gente aveva cercato di affrontarlo, ma soprattutto quanta gente lo
aveva risolto. Dall'esiguo numero di risposte potrei tirar fuori due
dati discordanti:
1) Sono pochi quelli che hanno avuto, affrontato e saputo risolvere il
problema (e quindi non hanno risposto perché incapaci)
2) Sono tantissimi quelli che hanno avuto, affrontato e saputo
risolvere il problema (e quindi non hanno risposto perché lo
consideravano una banalità)
Ciao.

 ROTFL^100
Io ridevo per una risposta geniale, tutto qua.
Per il resto: davvero non capisco qual'è il problema. Lo schema che hai
proposto non contiente alcuna difficoltà. Ci puoi spiegare il problema,
magari?
-- 
ThereIn

dag wrote:

Ma... QUALE problema?
Sarò duro ma non mi è chiaro...
Il box model?
-- 
ThereIn

Il box model?
Non so le ho pensate tutte:-)
Forse al fatto che IE 5.5 e 6 in quirks mode sottrae  bordi e  padding
dalla larghezza e dall'altezza totale del box.
Ma con un po' di elasticità l'ho sempre risolto senza ricorrere a
complicatissimi hacks.
Ciao
Clepy

Clepy wrote:

No, perchè per rispondere alla domanda pari pari come è stata posta, io
gli hack non ce li metto. Cioè, io faccio il codice come dio comanda,
gli hack sono una aggiunta che ha utilità pratica, ma non teorica.
-- 
ThereIn

 ha scritto nel messaggio 
news:1166655517.8...@48g2000cwx.googlegroups.com...







------------------------------------------------------
Non mi sembra sia qualcosa di complicato, il css risultante è il seguente:
<style type="text/css" media="screen">
  #header {
      background-color: #ff0000;   /* Oppure: red al posto di #ff0000; */
      border: 1px solid #000000;   /* Oppure: black al posto di #000000; */
      height: 100px;
      width: 700px;
    }
  #main {
      background-color: #00ff00;   /* Oppure: green al posto di #00ff00; */
      border: 1px solid #000000;   /* Oppure: black al posto di #000000; */
      height: 300px;
      width: 700px;
    }
  #bottom {
      background-color: #0000ff;   /* Oppure: blue al posto di #0000ff; */
      border: 1px solid #000000;   /* Oppure: black al posto di #000000; */
      height: 50px;
      width: 700px;
    }
</style>
E controllando la gif col risultato ottenuto mi sembra che coincidino alla 
perfezione.Ho pure controllato generando l'immagine con photoshop e 
confrontandole entrambe, e direi che sono identiche.
Ipotizzo, e forse credo che il problema reale sia questo per te, che con 
versioni precedenti dei browser IE/FF lo stesso css produca risultati 
diversi, ma questo è ovvio.
In questo caso si può tranquillamente intervenire dinamicamente rilevando la 
versione del browser tramite javascript e successivamente generando lato 
server il css relativo, ovvero su misura per quella versione di browser.
Ma è un approccio inutile e non vale la pena neanche perderci tempo (non mi 
riferisco a me, ma in generale).
E' più comodo invece, per i browser datati, mostrare il sito internet nella 
sua forma testuale, ovvero privo del suo css, e in questo caso l'utente 
vedrà l'essenziale testuale in modo chiaro e semplice purchè sia stato fatto 
correttamente.
L'approccio è come quello precedente, si rileva la versione di browser e il 
browser e se datato dinamicamente si evita di includere il css.
Informando l'utente che il sito è mostrato in modalità ridotta (solo testo) 
e per vederlo nella sua forma integrale, deve provvedere ad aggiornare il 
browser all'ultima versione disponibile per due motivi: 1) perchè è vecchio, 
superato e pieno di bug;  2) perchè il sito internet è stato progettato per 
essere correttamente visibile a partire dalla versione XXX (ovvero la più 
vecchia in tuo possesso).
Personalmente non testo siti internet per versioni precedenti alla 6 di 
internet explorer, e firefox; per il semplice fatto che nessuno più con xp 
usa versioni di ie precedenti alla 6, dal momento che essendo superate 
vengono aggiornate automaticamente con xp alla versione ultima.
Nulla di complicato quindi, e in ogni caso è un problema di chi ha la 
versione vecchia aggiornare per vedere correttamente, non di chi sviluppa, 
assicurarsi che si veda bene anche su internet explorer 1.0.
Cooper.
PS: Per ottenere l'effetto voluto i padding e i margin non sono stati 
necessari.
-- 
www.blueware.it
www.italchat.it

 assicurarsi che si veda bene anche su internet explorer 1.0.
Anche io sostengo questa tesi da tempo, dagli albori della diffusione
dei CSS (non della invenzione, eh, ma della diffusione, ben più
recente). Noto con piacere che questo modo di vedere le cose si sta
diffondendo. Qualche anno fa se non preparavi un CSS pieno di hacks o
sistemi javascript per il browser detect eri assolutamente out, anche
se questo significava creare un codice sporchissimo e dalla vita breve.
Io mi limito, e solo in certi casi, al box model hack. Eccezioni le
faccio per i clienti che espressamente lo chiedono (li informo sempre
della questione prima di iniziare i lavori).
-- 
ThereIn

consideravano una banalità)
Ancora però non hai risposto: quale problema?
Guarda che i problemi di box model sono proprio l'abc (a dir tanto) di
chi fa questo mestiere (io non mi metto in questa categoria). 
Quindi stai sicuro che chiunque qui si confronta quotidianamente con
problemi esponenzialmente più complessi. 
Ciao