The John Doe CSS Explosion

**John Doe** · 23-03-2005, 20.50.33

occhei...

al di la del titolo un po' ... ehm.. gasato

, apro sto topic per dibattere ( = circolo di studio) a riguardo dei css. Parto dicendo la mia, un incipit su un argomento, poi ne parliamo insieme, ne discutiamo... Per quanto riguarda il markup direi di fissarsi sull'xhtml, data la semplicità e la didatticità rispetto all'html4

interessa? boh. Proviamoci

1: WWW a blocchi

Oramai siamo abituati a vedere siti (dal punto di vista del codice) organizzati a tabelle... ovvero una tabellona che comprende al suo interno immagini, bordi, sfondi, altre tabelle, e tutte le varie amenità che il web ci ha regalato. Io invece ho imparato e sempre sviluppato siti a blocchi (impersonificati dai div), perchè secondo meil 90 % dei siti è riconducibile a livello logico a una serie di blocchi messi l'uno accanto all'altro o uno dentro l'altro, e non a una tabella dentro una tabella.
In più questo tipo di sviluppo porta a un codice più mantenibile, più corto (ahhh la banda... se fate un sito con 10k di html, ogni pagina porta via 10k. Se fate pagine da 4k di html e 3 di css, la prima pagina porta via 7k, quelle dopo porteranno via solo i 4k di html, dato che i css vengono messi in cache... fate i conti se un sito ha 40.000 accessi al mese o di più...

I blocchi: direi di partire con il creare un layout del genere, classico, come quello allegato.

**John Doe** · 23-03-2005, 21.23.38

come vedete nell'immagine, i blocchi sono 3.

top
left
content

io di solito do' ai div (come penso sia normale) degli id _capibili_. In questo caso potrei numerarli anche 1 2 3, però quando iniziate a averne 20 avere dei nomi sensati può far solo bene.

la parte xhtml è piuttosto...ehm... banale?

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 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>
	<meta name="generator" content="ViM" />
	<meta name="author" content="John Doe" />
	<meta name="copyright" content="2005 John Doe" />
	<link href="./style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
	<div id="content"></div>
	<div id="left"></div>
	<div id="top"></div>
</body>

</html>

due note sull'xhtml
i tag vanno tutti chiusi: quelli che non comprendono contenuti nel mezzo (i.e br, hr e roba simile) si chiudono con /> . è importante anche lo spazio tra l'ultimo carattere degli attributi e lo slash
Inoltre non si può innestare i tag:<div><span></div></span> è proibito.
Poi ci sono un sacco di altre regolette che scoprirete cercando di validare i vostri (capo)lavori futuri

Ora come ora salto i discorsi di base sull'xhtml, se non li sapete chiedete (tipo a che serve <head>)
Da notare ci sono ste cose:

il DOCTYPE, essendo xhtml derivato da xml questo è obbligatorio, in più io dichiaro che il mio xhtml è strict, quindi aderisco allo standard e non mi prendo licenze strane.
il tag link: questo ci permette di linkare il css a un altro file, con il media screen: media="screen" significa che quello è il css per il video, per quando l'utente guarda il sito con il browser sul monitor.

Poi i tre div. Notare, che a differenza di quello che ci verrebbe intuitivo il div top non è il primo: è il content il primo Questo per permettere l'accessibilità ai browser testuali, e per far si che il contenuto sia scaricato prima del banner.
left, che conterrà il menu', è rimasto secondo

Vulcano23 · 23-03-2005, 21.29.05

Buon lavoro John!

Ascoltatelo che quel che vi sta raccontando vale oro!

JCW · 23-03-2005, 21.36.45

Quote:

Originariamente inviato da Vulcano23
Ascoltatelo che quel che vi sta raccontando vale oro!

Io dico che vale almeno il doppio

Seguo interessato e ti ringrazio per tutto qiello che scriverai

**gasfax** · 23-03-2005, 21.57.35

ooooooooooooottimo

**John Doe** · 23-03-2005, 22.07.19

d'ora in poi mi riferirò a mozilla/gecko e a opera. IE è un po' ritardato sui css. Vedremo dopo cosa non usare per renderlo visibile anche su IE, e devo ammettere che questo sarà il grosso limite ala nostra creatività e alla facilità di programmazione del sito.

guardiamo ora il css:

per ora facciamo un contenuto fixed aggrappato alla destra.
vedremo dopo come renderlo semi fluido, liquido o centrato sia in altezza che in larghezza o altro

diciamo una larghezza totale di 800px e una altezza totale di 800px. left lo facciamo di circa 200px.

Codice:

body{
	background:black;
}

#top{
	background:blue;
	width:800px;
	height:120px;
}

#content{

	background:white;
	width:600px;
	height:680px;
	top:120px;
	left:200px;
}

#left{

	background:red;
	width:200px;
	height:680px;
	top:120px;
}

allora, prima di tutto qui ho usato due tipi di selettori

il primo è il body{ }

scrivendo a questo modo, definisco uno stile per TUTTI i tag body della pagina. Ora, dato che body è uno solo... nonho bisogno di identificarlo univocamente assegnandogli un id

approposito di id. L'attributo id, dato a un div o a un immagine o a quelcos'altro, deve essere UNICO nella pagina. ovvero solo un elemento deve chiamarsi a quel modo.

nei css se mi voglio riferirire all'elmento tramite il suo id, lo faccio con # seguito senza spazi dall'id. Facile no?

background, width, e height parlano da se come attributi nel css. Ci si può fare cosine molto più ganze, specie con background, ma per ora van bene queste
top è la distanza del div in altezza dall'origine delle coordinate, in questo caso la parte superiore della pagina. Left è la distanza _dalla_ sinistra. Ovvero il div si muove verso destra
allo stesso modo esiste right.

Però se vedete ora, con questo css, vedete che a logica ci torna... ma quello che si vede è piuttosto differente

**John Doe** · 23-03-2005, 22.09.56

Quote:

Originariamente inviato da Vulcano23
Buon lavoro John!

Ascoltatelo che quel che vi sta raccontando vale oro!

grazie :

però più che ascoltare parlate anche sennò mi stanco

Vulcano23 · 23-03-2005, 22.16.05

Quote:

Originariamente inviato da John Doe
grazie :
però più che ascoltare parlate anche sennò mi stanco

Beh, era un 'ascoltatelo' che significava 'partecipate fannulloni'!

**John Doe** · 23-03-2005, 22.20.56

la soluzione a domani mo esco che sennò la mia donzella si incacchia

**Black** · 23-03-2005, 22.35.19

iscritto

**Pana!** · 24-03-2005, 11.36.52

grande!!!! ...iscritto e sto già prendendo appunti

**John Doe** · 24-03-2005, 12.56.22

Quote:

Originariamente inviato da John Doe

Però se vedete ora, con questo css, vedete che a logica ci torna... ma quello che si vede è piuttosto differente

Allora, ecco la soluzione.
Il problema è che nel css non ho dato l'attributo position ai div

position prende di default static. Static significa che i div vengono posizionati uno sotto all'altro secondo il flusso, e ognuno occupa il posto che gli serve a seconda delle dimensioni.

position può avere diversi valori ed è in generale uno degli attributi più importanti quando si va a fare il layout.

analizziamolo

fixed : il div e fissato e anche scrollando la pagina rimane dov'è, come se fosse uno sticker sullo schermo. Ovvero ha una posizione fissata sullo schermo
absolute: in position absolute, l'oggeto ha una posizione fixata nel documento, e può quindi essere posizionato sopra un altro oggeto. E' come creare un layer. L'oggetto esce dal flusso della pagina per posizionarsi dove diciamo noi con le coordinate.
relative: il div è posizionato nel flusso naturale della pagina, ovvero si posiziona prima di quello dichiarato nell'html dopo e dopo di quello dischiarato prima. Solo si possono dare delle coordinate, l'origine delle quali è nella posizione che questo dovrebbe occupare normalmente
static: come relative solo che le coordinate sono ignorate.

secondo voi che position ci vuole qua?

Fost · 24-03-2005, 14.11.35

Quote:

Originariamente inviato da John Doe
fixed : il div e fissato e anche scrollando la pagina rimane dov'è, come se fosse uno sticker sullo schermo. Ovvero ha una posizione fissata sullo schermo

absolute: in position absolute, l'oggeto ha una posizione fixata nel documento, e può quindi essere posizionato sopra un altro oggeto. E' come creare un layer. L'oggetto esce dal flusso della pagina per posizionarsi dove diciamo noi con le coordinate.

relative: il div è posizionato nel flusso naturale della pagina, ovvero si posiziona prima di quello dichiarato nell'html dopo e dopo di quello dischiarato prima. Solo si possono dare delle coordinate, l'origine delle quali è nella posizione che questo dovrebbe occupare normalmente

static: come relative solo che le coordinate sono ignorate.

secondo voi che position ci vuole qua?

fixed lo scarterei a priori, absolute potrebbe essere perchè gli si danno le coordinate ma non ho ben capito la questione che l'oggetto può essere posizionato sopra ad un'altro, propendo di più per il relative

complimenti john e grazie per tutto questo oro

**John Doe** · 24-03-2005, 14.29.24

ragazzi grazie dei compliments ma non è che sia tutto ste cose strane

cmq, il relative... no.

Allora, vedete lo screen prima? Quello con i tre blocchi uno sotto l'altro?
Beh, quella, non avendo specificato posizione, è la static. I Div vengono piazzati uno sotto l'altro secondo come son scritti nell'htm, ovvero prima content poi left e poi top.
Se metto relative, verranno posizionati nello stesso modo, solo che i div con left saranno un po' spostati verso destra e quelli con top saranno spostati in basso rispetto alla static

Il position giusto è absolute

ecco lo screen con position:relative

**John Doe** · 24-03-2005, 14.35.53

questo lo stile "giusto"

Codice:

body{
	background:black;
}

#top{
	position:absolute;
	background:blue;
	width:400px;
	height:60px;
}

#content{
	position:absolute;
	background:white;
	width:300px;
	height:340px;
	top:60px;
	left:100px;
}

#left{
	position:absolute;
	background:red;
	width:100px;
	height:340px;
	top:60px;
}

**John Doe** · 24-03-2005, 14.36.52

provate ora a togliere il position:absolute dal div top, e ditemi che succede... e perchè succede quel che succede

Eddie · 24-03-2005, 16.33.23

Complimenti per l'iniziativa John Doe.
In questo mondo pieno di webmaster professionisti ci vuole

Brain Overclock · 24-03-2005, 18.18.10

Ciao! ho una domanda a proposito dei css... L'altro giorno il mio prof. mi ha spiegato che si devono usare i css altrimenti a seconda della macchina sulla quale vedo la pagina questa apparirà diversa. Ma se io definisco gli stili nel css non è la stessa cosa? o si può fare in modo che a seconda del browser, della risoluzione e del sistema operativo venga mandato un css diverso? mi sono spiegato? credo di no...

Grazie ciao!

Eddie · 24-03-2005, 19.00.17

Ti rimando a questa pagina che elenca i tipi di media disponibili.
http://www.w3.org/TR/REC-CSS2/media.html

**Riwa** · 24-03-2005, 19.03.45

bella John, leggo con interesse anche io

23-03-2005, 21.23.38	#2
John Doe geeked out moderator Iscritto da: 10-02-2002 Locazione: Empoli Messaggi: 6,212 Feedback: (1)	come vedete nell'immagine, i blocchi sono 3. top left content io di solito do' ai div (come penso sia normale) degli id _capibili_. In questo caso potrei numerarli anche 1 2 3, però quando iniziate a averne 20 avere dei nomi sensati può far solo bene. la parte xhtml è piuttosto...ehm... banale? Codice: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 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> <meta name="generator" content="ViM" /> <meta name="author" content="John Doe" /> <meta name="copyright" content="2005 John Doe" /> <link href="./style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="content"></div> <div id="left"></div> <div id="top"></div> </body> </html> due note sull'xhtml i tag vanno tutti chiusi: quelli che non comprendono contenuti nel mezzo (i.e br, hr e roba simile) si chiudono con /> . è importante anche lo spazio tra l'ultimo carattere degli attributi e lo slash Inoltre non si può innestare i tag:<div><span></div></span> è proibito. Poi ci sono un sacco di altre regolette che scoprirete cercando di validare i vostri (capo)lavori futuri Ora come ora salto i discorsi di base sull'xhtml, se non li sapete chiedete (tipo a che serve <head>) Da notare ci sono ste cose: il DOCTYPE, essendo xhtml derivato da xml questo è obbligatorio, in più io dichiaro che il mio xhtml è strict, quindi aderisco allo standard e non mi prendo licenze strane. il tag link: questo ci permette di linkare il css a un altro file, con il media screen: media="screen" significa che quello è il css per il video, per quando l'utente guarda il sito con il browser sul monitor. Poi i tre div. Notare, che a differenza di quello che ci verrebbe intuitivo il div top non è il primo: è il content il primo Questo per permettere l'accessibilità ai browser testuali, e per far si che il contenuto sia scaricato prima del banner. left, che conterrà il menu', è rimasto secondo __________________ GCS/MU d-- s+:+>+: !a C++>$ UL++++>$ p--- L+++ E--- W+++ N o+ !K w++@ !O M-- V- PS++@ PE+ Y+@ PGP++ !t 5? X+ R+++@ tv-- b++ Dl+ D++ G e++ h r++@ y++**

23-03-2005, 21.29.05	#3
Vulcano23 Mod Sw/Programm. Iscritto da: 28-08-2002 Locazione: Santa Monica, CA Messaggi: 6,009 Feedback: (0)	Buon lavoro John! Ascoltatelo che quel che vi sta raccontando vale oro! __________________ "In theory there is no difference between theory and practice. In practice, there is." Yogi Berra - My Website - My Blog

23-03-2005, 21.57.35	#5
gasfax Moderator ³°³·²³²¨ Iscritto da: 09-09-2001 Locazione: Como :asd: Messaggi: 10,430 Feedback: (0)	ooooooooooooottimo __________________ ««gasfax»» ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

23-03-2005, 22.20.56	#9
John Doe geeked out moderator Iscritto da: 10-02-2002 Locazione: Empoli Messaggi: 6,212 Feedback: (1)	la soluzione a domani mo esco che sennò la mia donzella si incacchia __________________ GCS/MU d-- s+:+>+: !a C++>$ UL++++>$ p--- L+++ E--- W+++ N o+ !K w++@ !O M-- V- PS++@ PE+ Y+@ PGP++ !t 5? X+ R+++@ tv-- b++ Dl+ D++ G e++ h r++@ y++**

23-03-2005, 22.35.19	#10
Black Vice fuckin' Admin Iscritto da: 01-01-2001 Locazione: Augusta Taurinorum Messaggi: 41,720 Feedback: (0)	iscritto __________________

24-03-2005, 11.36.52	#11
Pana! Lilith! Iscritto da: 21-01-2003 Locazione: Trento_Mori Messaggi: 3,664 Feedback: (0)	grande!!!! ...iscritto e sto già prendendo appunti __________________

24-03-2005, 14.36.52	#16
John Doe geeked out moderator Iscritto da: 10-02-2002 Locazione: Empoli Messaggi: 6,212 Feedback: (1)	provate ora a togliere il position:absolute dal div top, e ditemi che succede... e perchè succede quel che succede __________________ GCS/MU d-- s+:+>+: !a C++>$ UL++++>$ p--- L+++ E--- W+++ N o+ !K w++@ !O M-- V- PS++@ PE+ Y+@ PGP++ !t 5? X+ R+++@ tv-- b++ Dl+ D++ G e++ h r++@ y++**

24-03-2005, 16.33.23	#17
Eddie Firefox Enthusiast Iscritto da: 15-11-2002 Locazione: Gorizia,FvG Messaggi: 971 Feedback: (0)	Complimenti per l'iniziativa John Doe. In questo mondo pieno di webmaster professionisti ci vuole __________________ "Non siete speciali, non siete un pezzo bello unico e raro, siete materia organica che si decompone come ogni altra cosa. Siamo la canticchiante e danzante merda del mondo!"

24-03-2005, 18.18.10	#18
Brain Overclock Registered User Iscritto da: 02-06-2004 Messaggi: 309 Feedback: (0)	Ciao! ho una domanda a proposito dei css... L'altro giorno il mio prof. mi ha spiegato che si devono usare i css altrimenti a seconda della macchina sulla quale vedo la pagina questa apparirà diversa. Ma se io definisco gli stili nel css non è la stessa cosa? o si può fare in modo che a seconda del browser, della risoluzione e del sistema operativo venga mandato un css diverso? mi sono spiegato? credo di no... Grazie ciao!

24-03-2005, 19.00.17	#19
Eddie Firefox Enthusiast Iscritto da: 15-11-2002 Locazione: Gorizia,FvG Messaggi: 971 Feedback: (0)	Ti rimando a questa pagina che elenca i tipi di media disponibili. http://www.w3.org/TR/REC-CSS2/media.html __________________ "Non siete speciali, non siete un pezzo bello unico e raro, siete materia organica che si decompone come ogni altra cosa. Siamo la canticchiante e danzante merda del mondo!"

24-03-2005, 19.03.45	#20
Riwa Moderatore Iscritto da: 14-01-2001 Locazione: 127.0.0.1 Messaggi: 10,542 Feedback: (0)	bella John, leggo con interesse anche io __________________

Utenti attualmente attivi che stanno leggendo questa discussione: 1 (0 utenti e 1 visitatori)

Strumenti Discussione
Visualizza la versione stampabile Invia Pagina via Email
Modalità Visualizzazione
Modalità lineare In Modo Ibrido In Modalità elencata