The John Doe CSS Explosion

[gasfax]

Originariamente inviato da Brain Overclock
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!

fondamentalmente il concetto che sta alla base dell'utilizzo di xhtml e css è quello della compatibilità su più piattaforme.... praticamente un pagina scritta con xhtml una volta disattivato il css è visualizzabile anche con browser non convenzionali (pda,smartphone,screenreader) e lo sarà nel futuro...
i css creano il layout l'xhtml i contenuti... seguendo le direttive del w3c (world wide web consortium) scriveremo delle pagine corrette e accessibili
per quanto riguarda la tua domanda: utilizzando il css senza componenti proprietari le tue pagine saranno visualizzate da quasi tutti i browser più rencenti allo stesso modo.. anche se nn c sarà mai identicità pixel per pixel.. ma è già un passo avanti rispetto al tipico "sito visualizzabile con ie 5.5 a 640*480"

[John Doe]

purtroppo il problema maggiore è IE che implementa solo il 90% dei css1, una piccolissima parte dei css2 e nulla dei css3... opera è il più avanzato a riguardo, seguito vicinissimo da mozilla, e da safari/konnqueror

cmq, come servire un css per ogni tipo di browser lo vedremo forse poi... è una cosa che secondo come ti fa esplodere il codice. Ci vuole un monte di js per riconoscere il browser...

però nessuno mi ha detto che succede a togliere dal div top il position:absolute

[Fost]

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

succede quello in immagine, perchè........................bho

[gasfax]

bhe a naso , togliendo absolute, position diventa static.. di conseguenza passerà in secondo piano rispetto agli altri 2 div..

[John Doe]

yes, come dice gasfax...

togliendo absolute il div passa in static, e, dato che non c'è nessun altro div prima di lui (dato che i div in absolute sono fuori dal flusso normale) viene renderizzato in testa. Ora, se notate mozilla mette già della spaziatura tra l'inizio della pagina e l'inizio del primo div, sia in alto che a sinistra, mentre noi abbiamo specificato la posizione dei div in absolute senza comprendere la spaziatura automatica... ecco perchè i div non sono precisamente allineati

Per risolvere il problema basta andare un po' a fondo nella spaziatura tra div. (prox post)

[John Doe]

Allora, quando voi dichiarate un box (div) avete diversi fattori da considerare
[list=1][*]dimensioni[*]posizione[*]bordo[*]spaziatura da altri blocchi[*]spaziatura dal bordo al testo DENTRO il blocco[/list=1]

che si dentificano in

1. width,height
2. position, top, right, left
3. border
4. margin
5. padding

questa immagine vi potrà aiutare



allora: la parte margin non conta nelle dimensioni del width ed è SEMPRE trasparente. Potete impostare sia in pixel che in percentuale, e potete definire diverse cose

margin-left: 10px;
margin-top: 10%;
margin-right: 0px;
margin-bottom: 5px;

che è uguale a definire

margin: 10% 0px 5px 10px;

se date

margin: 20px;

ogni lato (top, right, bottom,left) avrà 20 px di margine.

se specificare un width e un height, questi non sono influenzati dal margin.

Il padding invece (si può dare padding-top, padding-left ecc ecc allo stesso modo) è dello stesso colore del background del div, e influenza la dimensione

se date

padding: 20px;
width:400px;
height:300px;

il div NON sarà 400x300 ma 440x340 !!! perchè al width ci viene sommato anche il padding-left e il padding-right... ad es se date il padding in percentuale non potete mai sapere quanto è largo o alto il vostro div.

allo stesso modo potete usare border... c'è border-top, border-right ecc ecc
border ha diverse proprieta

border-width (oppure border-top-width, border-right-width ecc ecc) sia in pixel che con le parole
thin
medium
thick

border-color (o border-top-color ecc ecc) è il colore del bordo

border-style è lo stile del bordo

• dotted: a puntini
• solid: una riga
• dasched: un riga tratteggiata
• double: due righe con dello spazio nel mezzo. la larghezza delle righe più la larghezza dello spazio è = a border-width
• none (forza il border-width a 0; utile per le immagini con collegamento.

potete specificare anche

border-top: <border-top-width> <border-top-style> <border-top-color>

i.e

border-top: 1px solid black;
border-bottom: 4px double black;

oppure se tutti i lati hanno lo stesso bordo

border: 3px solid white;

quindi, dopo tutto ciò, se aggiungete allo stylesheet nel selettore body

margin:0px;


otterete l'effetto voluto

[Eddie]

Se posso aggiungere una nota riguardo al border.
Se fate un box largo 300px ed il border di 10px (O_O) avrete un box grande 310px (200px di contenuto più 10px del bordo).


Da notare comunque che con <IE55 il boxmodelling e scorretto quindi cosi facendo avremmo un box di 300px invece di 310.

[Riwa]

Originariamente inviato da Eddie
Se posso aggiungere una nota riguardo al border.
Se fate un box largo 300px ed il border di 10px (O_O) avrete un box grande 310px (200px di contenuto più 10px del bordo).


Da notare comunque che con <IE55 il boxmodelling e scorretto quindi cosi facendo avremmo un box di 300px invece di 310.

scusa... se hai un box di 300 con border di 10... la larghezza totale non è 320?

[John Doe]

no, ha ragione eddie il border (almeno secondo la w3c) è contato una volta

[Riwa]

Originariamente inviato da John Doe
no, ha ragione eddie il border (almeno secondo la w3c) è contato una volta

ok, come non detto

[Pana!]

Originariamente inviato da John Doe
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?

domandina da grafico: ...l'attributo absolute è gagliardo, diciamo che per le sue proprietà di layer è possibile sovrapporre + oggetti ...è possibile per esempio creare un div absolute contenente un immagine sovrapposta al resto della grafica per fare un effetto 3d?

drlpna

[John Doe]

si. i layer si sovrappongono con z-index:n

z-index:0 è il livello base di default

con n>1 vai in su, verso l'utente, diciamo

[Eddie]

Originariamente inviato da John Doe
no, ha ragione eddie il border (almeno secondo la w3c) è contato una volta

A misurarlo però sono 320px (doh! my fault doh).
cmq non divaghiamo troppo che altrimenti il corso va a rilento

[John Doe]

Ok, iniziamo a dare un po' di grazia al norstro layout

Intanto, sarebbe carino centrarlo almeno orizontalmente

per farlo è semplicissimo
basta mettere un div (chiamato wrap) che contenga i nostri div definiti fin'ora.

<!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="wrap">
	<div id="content"></div>
	<div id="left"></div>
	<div id="top"></div>
	</div>
</body>

</html>

Dopodichè diamo al div wrap il position relative. Così facendo definiamo una nuova origine delle coordinate per tutti i div che stanno dentro che hanno position:absolute.
Diamogli delle dimensioni appropriate e ... tac, fatto
Per farlo stare nel mezzo, basta specificare margin-top:0 e margin-right:auto.
la seconda definizione del margin è quella che ci permette di centrarlo

body{
	background:black;
	margin:0px;
}

#wrap{
	position:relative;
	margin: 0 auto;
	width: 800px;
	height: 600px;
}

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

#content{
	position:absolute;
	background:white;
	width:600px;
	height:480px;
	top:120px;
	left:200px;
}

#left{
	position:absolute;
	background:red;
	width:200px;
	height:480px;
	top:120px;
}

[Fost]

scusa john volevo chiederti che differenza c'è fra margin-top e top, li ho provati e a me sembra nessuna, però chiedo

[John Doe]

top è la distanza dall'origine degli assi.
margin-top è la distanza dall'oggetto che sta sopra... che può essere un altro div

[Eddie]

Però di default i DIV sono STATIC e quindi per notare la differenza devi cambiare l'attributo altrimenti TOP non modifica la posizione del DIV

[Fost]

Originariamente inviato da John Doe
top è la distanza dall'origine degli assi.
margin-top è la distanza dall'oggetto che sta sopra... che può essere un altro div

capito grazie

[John Doe]

Originariamente inviato da Eddie
Però di default i DIV sono STATIC e quindi per notare la differenza devi cambiare l'attributo altrimenti TOP non modifica la posizione del DIV

esattamente
se vuoi che conservi le proprietà di static ma usi l'attributo top lo devi mettere a relative

[Black]

questo topic merita di essere in rilievo