[CB-lug] fottuto css

Gio 27 Apr 2006 10:54:51 CEST

On Thu, 27 Apr 2006 00:52:07 +0200
redcloud <redcloud@alice.it> wrote:

> Salve a tutti, voi che siete esperti di CSS, vedete di risolvermi sto 
> problema:
> 
> <html>
> <head>
> </head>
> <body style="margin: 0px; padding: 0px; border: 0px; height: 100%;">
>     <div style="margin: 0px auto; padding: 0px; width: 800px; height: 
> 100%; background-color: cyan; border: 2px dotted red;"></div>
> </body>
> </html>
> 
> Vorrei che il div occupasse tutta l'altezza del browser ma col bordo 
> incluso! Se il bordo lo setto a 0px, la barra laterale scompare ed è
> ciò che vorrei ottenere ma col bordo di 2px! Mi sono spiegato?

Mmmm, su che browser lo stai testando ? i css provali su
mozilla-firefox e poi li adatti a IE e compagnia bella.

Mozilla-firefox supporta i CSS cosi' come il W3C consiglia; lavora
sempre su mozilla e scarica la barra webdevelopment, e' molto utile.

Su Mozilla non da problemi ma ci sono delle proprieta' che non vanno:

1) Il body non vuole l'altezza
2) Hai inserito margin 0 e border 0, se il bordo non lo tocchi e' di
default a 0 0 0 0, puoi togliere il px, risparmi byte.

Il risultato e' questo:

<body style="margin: 0; padding: 0; ">
<div style="margin: 0 auto; padding: 0; width: 800px; height: 
100%; background-color: cyan; border: 2px dotted red;">
</div>

Mi permetto qualche consiglio; il CSS inline e' altamente
sconsigliato dal W3C, sarebbe di gran lunga piu' agevole utilizzare un
css esterno.

A questo punto chiederai al W3c, perche' ? E il W3C rispondera',
perche' con un css esterno e una riga di codice avrai la sicurezza di
standardizzare le tue pagine al tuo stile.

Cioe' ogni modifica nel foglio di stile modifichera' tutte le pagine.

Capisco bene che all'inizio avrai la sensazione che non funziona, vai
tranquillo, lo dicono tutti, ed e' normale che sia cosi'; devi entrare
nell'ottica di separare la formattazione con i contenuti.

Puro stile Xhtml da una parte e CSS dall'altra, cosi' facendo avrai
pagine pulite e codice leggibile, fidati di me!

Allora, riassumendo:
1) CSS Esterno
2) MAI al body associare l'altezza
3) Separazione tra formattazione e contenuti.

Ora scrivo una pagina html, redcloud.html e un css, test.css, ambedue
nella stessa directory, il css lo salvo come test.css ed e' il
seguente, ovviamente utilizzo il tuo cidice:

body {
	margin: 0; 
	padding: 0;
}

#contenitore {
	margin: 0 auto; 
	padding: 0; 
	width: 800px; 
	height: 100%; 
	background-color: cyan; 
	border: 2px dotted red;
}

Nella pagina html:
<html>
<head>
<link href="test.css" type="text/css" rel="stylesheet" />
</head>

<div id="contenitore">
</div>

</body>
</html>

FINITO; ogni modifica al CSS modifichera' l'output della pagina,
diciamo formattazione che e' meglio; per ora non considerare @import,
concentrati su link href. 

Un ultima cosa.

Hai utilizzato un div style generico nello stile inline, questo non va
bene, devi definire ogni singola proprieta'; non va bene non perche'
sia sbagliato ma perche', essendo generico, ogni attributo e/o elemento
figlio potra' contenere lo stile del DIV STYLE geenitore.

DIV STYLE
	-> P (subisce)
		-> P.class (NON SUBISCE se ha il css)

Se l'avessi definito sarebbe stato:
DIV CLASS PIPPO P
		-> P (Non subisce)
	-> P class PIPPO (Subisce)

Quello, a quanto ho capito, doveva essere il tuo content, giusto ? non
puo' essere altro avendo 800px d'altezza, ecco, questa e' una buona
logica.

Il corrispettivo del div style nel css esterno e' #<nome>, ora capisci
anche perche' non va bene il generico.

Attenzione ai DIV ID, devono essere unici, se invece devi utilizzare
degli elementi ripetuti fai uso di DIV CLASS ...

Hai bisogno di manuali ? dimmelo ne ho di succulenti ...

-- 
Saluti,  luca suriano
# GPG  key ID: 61334927 #
# No al  TC-Palladium!: #
# http://www.no1984.org #