riquadri con css..ancora problemi

29-11-2003, 09.59.48

ho notato che ci sono ancora dei problemi per la creazione di riquadri con i css.
Riassunto delle puntate precedenti: grazie al grande contributo di gve siamo arrivati ad accentrare il riquadro e fare in modo che i riquadri secondari non uscissero dai bordi del riquadro principale usando browser come netscape.
Come prova avevo usato un esempio di questo tipo (che mi risolveva i problemi suddetti):

.body{text-align:center;}
.box_area{width:760px;border:1px solid #CC0000;padding:0;margin:auto;overflow:auto;}
.box_area_sx {width:150px;float:left; background-color:#FFCCCC;padding:0;margin:0;}
.box_area_dx {width:150px;float:left; background-color:#FFCCCC;padding:0;margin:0;}
.box_area_x{width:458px;float:left;background-color:#FFFFFF;padding:0;margin:auto;overflow:auto; }

<body class="body">
<div class="box_area">
<div class="box_area_sx">&nbsp;</div>
<div class="box_area_x">&nbsp;</div>
<div class="box_area_dx">&nbsp;</div>
</div>
</body>

ora ... altri problemi che ho notato:

1) netscape nella definizione della larghezza dei riquadri non tiene conto dei bordi, come fanno invece gli altri browser. Quindi il riquadro di 458px dovrebbe diventare 460px per netscape (altrimenti in fondo a destra rimane uno spazietto in più di giusto 2px, cioè i bordi).
Se visualizzate la pagina http://www.richialbum.altervista.org/prova/prob1.htm con netscape lo notate.
Ho provato a non mettere il width o a mettere 100% invece della larghezza giusta ma si incasina tutto. Secondo voi come si risolve questo?

2) sempre con netscape ho problemi nel modificare i valori dei padding dei vari box.

a) prima di tutto il padding me lo fa solo sopra e lateralmente, mentre gli altri browser lo fanno anche sul lato inferiore.
Ad esempio modificando così il box esterno:
.box_area{width:760px;border:1px solid #CC0000;padding:5;margin:auto;overflow:auto;}
l'effetto visualizzato con netscape è questo http://www.richialbum.altervista.org/prova/prob2a.htm

b) se modifico i padding di quelli interni noto che netscape propone un problema opposto a quello dei bordi. Per cui (mentre per i bordi nei 760px con compresi anche i 1+1px dei bordi laterali) nei 150px dei box interni non sono compresi i padding. Quindi se voglio fissare un padding di 5px ad un box interno devo scrivere:

.box_area_sx {width:140px;float:left; background-color:#FFCCCC;padding:5;margin:0;}

e se tenessi il 150px per farlo visualizzare bene da ie ed opera (che altrimenti vedono il box troppo corto), netscape si incasina e va oltre la lunghezza del box esterno quindi visualizza tutto incasinato con una barra di scorrimento, come potete notare su questa pagina: http://www.richialbum.altervista.org/prova/prob2b.htm

questo cavolo di netscape rompe parecchio ... come faccio con questi tre problemi? avete delle idee?
grazie

29-11-2003, 11.31.58

Purtroppo il problema del box model e' un problema spinosissimo.

Margin e' la proprieta' che imposta il margine esterno, mentre padding quello interno.

IE sbaglia a leggere il css e somma i valori di margin e padding e li mette (se non ricordo male) tutti all'interno.

Il nocciolo della questione e' che nessun browser e' seriamente 100% compliant con css 2.0 , IE men che meno.
Fino a IE 5.5 si poteva ovviare questo problema usando un piccolo hack: si era scoperto infatti che IE smetteva di leggere le proprieta' di un elemento se trovava: "voice-family: "\"}\"";". Questo permetteva di settare prima le prorieta' di IE e poi di annullarle con quelle per gli altri borwser, tipo:

[code:1:dd8fe368b8]
div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
[/code:1:dd8fe368b8]

Purtroppo con IE 6.0 questo bug e' stato corretto, ma intenzionalmente non e' stata corretta la gestione del box model, visto che M$ vuole che il web diventi una cosa SCRITTA PER il loro IE.

Di fatto non esiste soluzione unica.

CSS 3.0 sta lavorando anche a questo, ma.... spetta sempre alle ditte implementare delle soluzioni adeguate.

Il mio consiglio e' di provare a dare delle dimensioni in % e non in px, io ho risolto cosi' con un paio di box e funzionano quasi ovunque.

Se mi viene in mente altro ti faccio sapere

Per il box model hack vedi qui:
http://www.tantek.com/CSS/Examples/boxmodelhack.html

29-11-2003, 11.49.31

ok ... intanto grazie per questa prima risposta. Se non ci fosse un modo per settare un file css unico, io avrei pensato ad uno script che rimanda ad un file diverso per netscape ... ma io non sono in grado di farmelo da solo. Magari provo a cercare un po' in giro ... 8)

**gve** · 29-11-2003, 12.13.28

Originalmente inviato da richialbum

[...] io avrei pensato ad uno script che rimanda ad un file diverso per netscape ... ma io non sono in grado di farmelo da solo. [...]

richi conosci un po' il php?

Io ho provato di recente (e ho visto che funge) a creare un css in php.

Quello che devi fare è dare estensione .php al file css, che sarà quindi linkato così:
<link rel="stylesheet" type="text/css" href="style.php" />

La cosa funge, e col php puoi individuare il browser dell'utente usando la funzione get_browser() (non so dirti come farlo al meglio, io lo avevo provato per altri scopi, ma in un'altro post so che poco fa ne stavano parlando del riconoscimento del browser).

29-11-2003, 14.50.14

buona la soluzione delle % ... infatti in alcuni casi ero già ricorso a quel metodo, ma ci sono box per i quali preferisco definire il width in px e per questo mi sto sbattendo con sto problema di netscape.

Comunque ...
... una possibile soluzione che ho trovato sulla rete è quella di usare un box per le dimensioni ed un box_content in cui settare bordi e padding per ovviare al problema del diverso comportamento di alcuni browser.

.body{text-align:center;}
.box_area{width:760px;padding:0;margin:auto;overfl ow:auto;background-color:#000000;}
.box_area_sx{width:150px;float:left;}
.box_area_dx{width:150px;float:left;}
.box_area_x{width:460px;float:left;}
.content_area_sx{background-color:#FFCCCC;padding:5;margin:0;border:1px solid #CC0000;border-right:none;}
.content_area_x{background-color:#FFFFFF;padding:5 0;margin:0;border:1px solid #CC0000;border-left:none;border-right:none;}
.content_area_dx{background-color:#FFCCCC;padding:5;margin:0;border:1px solid #CC0000;border-left:none;}

... il background-color:#000000 nel box_area l'ho messo apposta per vedere bene se netscape crea ancora casini.

<body class="body">
<div class="box_area">
<div class="box_area_sx"><div class="content_area_sx">sinistra</div></div>
<div class="box_area_x"><div class="content_area_x">centro</div></div>
<div class="box_area_dx"><div class="content_area_dx">destra</div></div>
</div>
</body>

chiaramente il codice html si allunga un pelo perchè si aggiunge un sotto-box, ma è un prezzo che sono disposto a pagare pur di avere qualcosa di compatibile per tutti i browser.
Secondo voi com'è come soluzione? buona o incasino troppo la pagina? oppure ditemi se ci vedete qualcosa che potrebbe causare problemi ...
Sono pronto a sentire anche soluzioni alternative ... Questa è l'unica che ho trovato per avere un lavoro che poi è visualizzato uguale da tutti i browser. Mentre, ricorrendo alle % delle volte ci possono essere delle piccole differenze (minime ma ci sono).

per gve ... al php non avevo pensato ... buona idea, ma per ora vorrei creare qualcosa di universale con i css ... se proprio non riesco uso il get_browser() di php per definire stili diversi
comunque tu cosa ne pensi della soluzione che spiego poco sopra?

**gve** · 29-11-2003, 20.51.27

Funziona? Allora è buona, anche se il livello di incasinamento cresce; credo che evitare il php per queste cose sia più sicuro al fine dei risultati finali: il contenuto dell'identificativo dei browser è non standardizzato, e se la cosa non è fatta bene potrebbe creare problemi, quindi sono d'accordo con te sul fatto che se si può evitare è meglio.

Come dicevo, io lo ho provato per un'altra finalità: rendere personalizzabili dall'utente certi aspetti del layout della pagina, tipo dimensione caratteri o altro.

30-11-2003, 21.41.23

per avere il tipo di browser la cosa più semplice da farsi era utilizzare la funzione di riconoscimento della stringa e non getbrowser, per esempio usare:

[code]
$agent = getenv("HTTP_USER_AGENT");

if (preg_match("/Win/i", $agent)) {

if (preg_match("/MSIE/i", $agent)) {

print ("<link rel='stylesheet' type='text/css' href='indexIE.css' media='screen' />\n");

} else print '<link rel="stylesheet" type="text/css" href="indexMOZ.css" media="screen" />' . "\n";

} else if (preg_match("/Linux/i", $agent)) {

print '<link rel="stylesheet" type="text/css" href="indexMOZ.css" media="screen" />' . "\n";

} else if (preg_match("/Mac/i", $agent)) {

if (preg_match("/MSIE/i", $agent)) {

print ("<link rel='stylesheet' type='text/css' href='indexIE.css' media='screen' />\n");

} else print '<link rel="stylesheet" type="text/css" href="indexMOZ.css" media="screen" />' . "\n";

}
?>
La quale oltre che a verificare il tipo di browser identifica anche il sistema operativo.

La cosa che però non capisco è il tuo modo di usare le classi, per esempio perchè utilizzare una classe per elementi unici, per esempio la classe per l'elemento body è inutile, perchè body è unico nella pagina quindi non ha bisogno di una classe.
Ma non solo, non dimenticare che di sole classi si vive, esistono anche gli identificatori, in pratica un box dovrebbe essere identificato da un ID univoco e dentro vi possono essere delle classi.
Se crei solo classi, il motore di rendering del browser penserà che tutte facciano parte dello stesso identificatore (in questo caso l'elemento padre ovvero la finestra <body> per capirci) e tratta tutti gli elementi come discendenti da questa, tu oltre tutto hai definito anche body come classe, così il motore deve prendere come elemento padre <html>, la cosa migliore sarebbe stata prendere un elemento contenitore, farlo diventare padre (ID) e fargli contenere le classi discendenti da esso.

Ciao alla prossima.

**gve** · 30-11-2003, 23.34.52

Originalmente inviato da sugandbibi

La cosa che però non capisco è il tuo modo di usare le classi, per esempio perchè utilizzare una classe per elementi unici, per esempio la classe per l'elemento body è inutile, perchè body è unico nella pagina quindi non ha bisogno di una classe.
Ma non solo, non dimenticare che di sole classi si vive, esistono anche gli identificatori, in pratica un box dovrebbe essere identificato da un ID univoco e dentro vi possono essere delle classi.
Se crei solo classi, il motore di rendering del browser penserà che tutte facciano parte dello stesso identificatore (in questo caso l'elemento padre ovvero la finestra <body> per capirci) e tratta tutti gli elementi come discendenti da questa, tu oltre tutto hai definito anche body come classe, così il motore deve prendere come elemento padre <html>, la cosa migliore sarebbe stata prendere un elemento contenitore, farlo diventare padre (ID) e fargli contenere le classi discendenti da esso.

Ciao alla prossima.

:? Non ho capto bene ...
Ok, son d'accordo che è inutile usare una classe per <body> (ma secondo me è inutile anche usare un id, basta fare body {...}, o no?), però mi non capisco perchè crea problemi al motore di rendering del browser.
Ovvero, se ho capito bene quello che dici non ne ho trovato alcun riscontro, se guardo nella reference (ad esempio http://www.w3.org/TR/CSS21/selector.html#class-html ) non trovo che class ha necessità di un elemento padre, almeno non più di id o body {...}: è solo un mezzo di identificazione per indicare a cosa applicare gli elementi di formattazione indicati.

01-12-2003, 10.37.33

grazie sugandbibi per lo script che mi hai passato...
Quindi, correggimi se sbaglio...io ora posso creare due file .css (uno per IE e uno per MOZ), un file "stili.php" con lo script che mi hai dato e poi inserire nell'<head> delle pagine una cosa tipo:
<?PHP include("stili.php");?>
...ho visto che così mi funzia...dimmi se c'è un modo più curato per farlo.

ma dammi anche un chiarimento: tutti i browser che hanno come agente Mozilla presentano lo stesso comportamento di netscape per quanto riguarda padding e bordi dei box (che in pratica sono il mio problema). Oppure lo fa solo netscape? ...forse la vedi come una domanda scema, ma serve per chiarirmi le idee (data l'inesperienza).

Per quanto riguarda le classi, come hai potuto notare, sono un po' ignorante anche lì.
Io non ho proprio usato gli id e non comprendo ancora la distinzione precisa. Cioè spiegami meglio il meccanismo di gerarchia tra id e classi (magari fai riferimento all'esempio sopra).
Come avrei dovuto impostare le caratteristiche di body (che oltre all'allineamento centrato avrebbe nella praticha altre caratteristiche, ad esempio scroll, sfondo, tipo caratt ecc)?? Per quali box usare id e per quali class??

01-12-2003, 11.55.21

Se vi consola nemmeno io sapevo questa cosa.

Diciamo che queste cose non sono mai spiegate :?

Ora ho capito perche' non mi funzionava niente!

Sugandbibi illuminaci!

**gve** · 01-12-2003, 12.36.50

Altra domanda che mi sorge guardando il tuo codice sugandbibi:
che differenza c'è (se c'è differenza) tra usare getenv('HTTP_USER_AGENT') e $_SERVER['HTTP_USER_AGENT']?

01-12-2003, 14.50.53

Nell'attesa di una risposta di sugandbibi, mi sono documentato meglio (HTML.it) sulla distinzione tra id e class. Da quello che ho capito l'utilizzo è lo stesso: assegnare degli attributi ad un elemento. L'unica differenza è che id lo posso usare una sola volta per uno specifico elemento, mentre class lo posso usare su più elementi della medesima pagina.
Per cui mi verrebbe da dire che conviente ricorrere alle classi perchè così so che potrò utilizzare quegli attributi anche per altri oggetti della pagina. Ma chiaramente ci sarà ancora qualcosa che mi sfugge ... che rende importante anche id.

01-12-2003, 19.43.36

Intanto vi dico che ho ripreso a lavorare sul mio sito e ho ritoccato le box.

Per farle risultare uguali su firebird e IE 5.5 (ma non so come le veda IE 6 che e' quello che da' piu' problemi) ho usato non una tabella ma un div, e ho impostato:

[code:1:b6f416d8dd]
div.Box_Pr {
margin-left: 20%;
margin-right:20%;
padding: 0.5%;
border: 2px solid #b9b4c4;
background-color: #8c8894;
text-align: justify;
font-size: 90%;
color: #000000;
}
[/code:1:b6f416d8dd]

Come vedete ho messo i margini ma non la width, perche' altrimenti IE andava in palla e mi faceva una box strettissima.

Il risultato lo potete vedere qui:
http://cod.altervista.org/Home.php?lang=it

Per la domanda sul php rispondo io (posso sugan?

)

getenv si puo' usare sempre, ma dalla versione 4.1.0 sono state introdotte delle variabil dette superglobali perche' sono automaticamente presenti ovunque.

Queste variabili sono degli array, e sono:

$GLOBALS
Contiene tutte le variabili globali dello script.

$_SERVER
Identico al veccho $HTTP_SERVER_VARS che e' deprecato ma usabile

$_GET
idem per $HTTP_GET_VARS

$_POST
idem per $HTTP_POST_VARS

$_COOKIE
idem per $HTTP_COOKIE_VARS

$_FILES
idem per $HTTP_POST_FILES

$_ENV
idem per $HTTP_ENV_VARS

$_SESSION
idem per $HTTP_SESSION_VARS

$_REQUEST
Nuovo in 4.1.0.
Contiene tutte le variabili passate per GET, POST, o COOKIE.
attenzione: dal PHP 4.3.0, la variabile FILE di $_FILES non e' in $_REQUEST.

01-12-2003, 22.38.57

Allora:
Non sto qui a spiegare tutto il meccanismo che lega class e id perchè lungo e tedioso, ma forse COd che conosce bene la programmazione dei linguaggi saprà spiegare bene cosa è un oggetto e come si implementa.

Posso dire una cosa riguardo all'HTML e quindi ai suoi elementi (tag) ovvero che tutto li dentro è un oggetto implementato dal DOM (Document Object Model) quindi il genitore di una pagina web è sempre <html> e seguenti, ma il padre di tutto è sempre lui.
L'html è strutturato peggio del cobol nel senso che ci sono delle "cose" che possono stare in certe sezioni e certe altre no, altre ancora possono stare un po dovunque.
Per esempio:
<head> è figlio di <html> ma segue un ramo diverso da <body> che pure è figlio di <html> (immaginatevi una pianta in cui <html> è il fusto e poi si dirama), <title> ad esempio è figlio di <head> ma non di <body>, come pure <meta> e <style>, cosa vuol dire ciò: che questi elementi possono stare nell'intestazione (<head> = <testa>) ma non nel corpo (<body> = <corpo>, grande Tim, aveva intrapreso gli elementi del linguaggio come parti di un corpo e io non me ne ero ancora accorto :? ).

Bene cosa vuol dire ciò:
Alcuni elementi sono univoci, cioè non ce ne possono essere più di uno nella stessa pagina, tra questi <body> che è uno e solo uno, quindi implementare una classe per esso è inutile, anche se funziona, questo perchè i metodi di quella classe dovrebbero essere soecifici solo per <body> e solo per lui.
Purtroppo o per fortuna tutti gli elementi che seguono <body> sono suoi figli, perciò tutto ciò che fate a <body> lo fate a loro (

mi sento DIO

)
Ad esempio se date a <body> un colore per il testo ed uno per lo sfondo, questo si riperquote per tutto il documento, a badate bene sia che usate i fogli di stile, sia che usate i normali attributi previsti dal linguaggio.
Perchè: i fogli di stile sono "cambiati" dal motore di rendering del browser per essere interpretati e ridefiniti in termini di punti e colori, al browser non gliene frega nulla se scrivete <body text='black'> o definite uno stile per dirgli che color deve essere nero, a lui gli importa solo sapere che il testo deve renderlo nero, punto e basta, la lingua che usate e affare vostro, tutto il resto non conta.

Ora veniamo a quegli elelemtni che non sono unici nel documento, ovvero a tutti i figli di <body> cioè: <img>, <a>, <div>, <span> e chi più se ne ricorda ne metta.

La classe non è un privilegio, Id è un privilegio, far divenire PADRE un elemento non è solo un nobile sentimento del creatore, ma serve a dare certi privilegi all'elemento.
Ovviamente non è affatto necessario, un padre (anzi un patriarca) lo abbiamo già è <body> (tralasciamo <html> per ora, ma a volte è interessante e importante avere un elemento padre all'interno della stessa discendenza.

Mettiamo un caso, volete creare un layer contenitore per una serie di altri contenitori e porlo al centro della pagina, conviene definirlo come un identificatore, perchè è il genitore di una serie di figli (o anche nessuno non fa nulla), quindi lo definisco così:
[code:1:9c564707a2]
div#corpo {
margin: 10px auto; /* lo centro alla grande */
height: 300px;
width: 90%;
border: 1px solid red;
}
[/code:1:9c564707a2]

Quindi lo implemento nella pagina come figlio di <body>

[code:1:9c564707a2]
<div id='corpo'>
... bla bla ...
</div>
[/code:1:9c564707a2]

Ok, ora ho un box bordato di rosso che mi gira sulla pagina (de gustibus ... )

Poi voglio che dentro questo box ci sia un header <h> figlio di questo e non globale, perchè voglio che le impostazioni per questo elemento rimangano legate a quel liello e non ad altri, quindi:

[code:1:9c564707a2]
segue da sopra

div#corpo h1 {
font-size: 1.8em;
text-align: center;
text-decoration: underline;
}
[/code:1:9c564707a2]

Quindi nel codice della pagina:

[code:1:9c564707a2]
<div id='corpo'>
<h1>Bello grande e sottolineato!</h1>
</div>
[/code:1:9c564707a2]

Cosa succede ora?
Che h1 ha preso i metodi (object oriented programming) di "corpo" e si è adattato a quelle "impostazioni" che avevamo creato per lui.
Se scriviamo:

[code:1:9c564707a2]
<div id='corpo'>
<h1>Bello grande e sottolineato!</h1>
</div>
<h1>Brutto e zoppo</h1>
[/code:1:9c564707a2]
Ecco che quello in fondo risulta essere proprio brutto e zoppo perchè è un orfanello senza un padre, come direbbe aiazzone: provare per credere.
Questo codicillo l'ho sviluppato per vedere se stavo dicendo cavolate o profonde verità:

[code:1:9c564707a2]
<html>
<head>
<style style='text/css' media='screen'>
body {
text-align: center;
background-color: white;
color: black;
font-size: 1.0em;
}
div#corpo {
width: 90%;
height: 300px;
border: 1px solid red;
margin: 1em auto;
color: maroon;
}
div#corpo h1 {
font-size: 1.8em;
text-align: center;
color: blue;
}
</style>
</head>
<body>
<div id='corpo'>
<h1>Ciao</h1>
Ciao bello.
</div>
<h1>Bello</h1>
</body>
</html>
[/code:1:9c564707a2]

Invece funziona!

Cosa si evince da tutto ciò: che le classi non possono avere figli delle medesime, ovvero non si possono generare figli di questo genere:

[code:1:9c564707a2]
div.figlio {}

div.figlio h1 {}
[/code:1:9c564707a2]

Non funzionerebbe, così come è impensabile per ora (non siamo in inghilterra

) di generare un padre con altri padri al suo interno:

[code:1:9c564707a2]
div#padre {}

div#padre h1#k {}
[/code:1:9c564707a2]

No, si incavolano davvero tanto!
Mente è giusta la sintassi seguente:

[code:1:9c564707a2]
div#padre {}

div#padre h1.k {}
[/code:1:9c564707a2]
In quanto la classe K è figlia del padre.

Spero di essermi spiegato a sufficienza, ad ogni buon conto eccovi due o tre links come di solito faccio in questi casi:

Black Wolf, lui il mitico dei forum di html.it con cui ho fatto mille litigate

Constile un must dei fogli di stile all'italiana. Ex html.it (pure lui).
la bibbia? No, non credo ma ci assomiglia.
La bibbia certamente, la bibbia.
Eric Meyer un vangelo

Tantek un'altro vangelo.

Ecco lo sapevo ne è venuto fuori un cerotto, anzi quasi una sutura.
Do il permesso ai mod di farci ciò che vogliono, forza della comunicazione libera e della birra (hic!).

Ciao Marco.

**gve** · 02-12-2003, 02.07.15

Per CoD: Ho capito, grazie; dunque le due cose sono equivalenti, è fondamentalmente una questione di portabilità: con getenv() dal PHP 3 in poi su qualsiasi server non ho problemi, mentre gli array superglobali sono disponibili solo da PHP 4.1.0 .

Per sugandbibi: A te ci ritorno domani ... alcune cose non mi quadrano ... ma forse son solo i fumi della birra ...

02-12-2003, 21.21.19

ok sugandbibi ... grazie della tua illuminazione ... Ma il tuo cerotto lascia fuori un'ultima cosa ... Io nel pieno della mia ignoranza avevo scritto:

Originalmente inviato da richialbum

ma dammi anche un chiarimento: tutti i browser che hanno come agente Mozilla presentano lo stesso comportamento di netscape per quanto riguarda padding e bordi dei box (che in pratica sono il mio problema). Oppure lo fa solo netscape? ...forse la vedi come una domanda scema, ma serve per chiarirmi le idee (data l'inesperienza).

Ho visto che Opera si comporta più o meno come IE ... infatti il tuo script php assegna ad Opera il file indexIE.css. Pertanto mi chiedo ... il file indexMOZ.css oltre a netscape a quali altri browser viene assegnato? e questi hanno lo stesso comportamento di netscape in fatto di padding e bordi dei box?

**gve** · 03-12-2003, 14.56.35

Alfine sugandbibi eccoti le mie osservazioni (

):

Originalmente inviato da sugandbibi

Ora veniamo a quegli elelemtni che non sono unici nel documento, ovvero a tutti i figli di <body> cioè: <img>, <a>, <div>, <span> e chi più se ne ricorda ne metta.

La classe non è un privilegio, Id è un privilegio, far divenire PADRE un elemento non è solo un nobile sentimento del creatore, ma serve a dare certi privilegi all'elemento.
Ovviamente non è affatto necessario, un padre (anzi un patriarca) lo abbiamo già è <body> (tralasciamo <html> per ora, ma a volte è interessante e importante avere un elemento padre all'interno della stessa discendenza.

Mettiamo un caso, volete creare un layer contenitore per una serie di altri contenitori e porlo al centro della pagina, conviene definirlo come un identificatore, perchè è il genitore di una serie di figli (o anche nessuno non fa nulla), quindi lo definisco così:

Codice:

div#corpo {
margin: 10px auto; /* lo centro alla grande */
height: 300px;
width: 90%;
border: 1px solid red;
}

Quindi lo implemento nella pagina come figlio di <body>

Codice:

<div id='corpo'>
... bla bla ...
</div>

Ok, ora ho un box bordato di rosso che mi gira sulla pagina (de gustibus ... )

Poi voglio che dentro questo box ci sia un header <h> figlio di questo e non globale, perchè voglio che le impostazioni per questo elemento rimangano legate a quel liello e non ad altri, quindi:

Codice:

segue da sopra

div#corpo h1 {
font-size: 1.8em;
text-align: center;
text-decoration: underline;
}

Quindi nel codice della pagina:

Codice:

<div id='corpo'>
<h1>Bello grande e sottolineato!</h1>
</div>

Cosa succede ora?
Che h1 ha preso i metodi (object oriented programming) di "corpo" e si è adattato a quelle "impostazioni" che avevamo creato per lui.
Se scriviamo:

Codice:

<div id='corpo'>
<h1>Bello grande e sottolineato!</h1>
</div>
<h1>Brutto e zoppo</h1>

[...]

Qua tutto OK ... più o meno.
Nel senso che secondo me sbagli quando affermi che è attribuirgli l'ID che rende un elemento padre di un'altro: secondo me un elemento è padre di un'altro nel momento stesso in cui è il containing-block (terminologia del W3C) di un'altro, ovvero il padre è semplicemente il tag all'interno del quale è definito il tag figlio, indipendentemente dalle proprietà (class, id, ...) che questo ha.

Ma procediamo che forse diventa più chiara la cosa (poi metterò anch'io qualche link)

Originalmente inviato da sugandbibi

Cosa si evince da tutto ciò: che le classi non possono avere figli delle medesime, ovvero non si possono generare figli di questo genere:

Codice:

div.figlio {}

div.figlio h1 {}

Non funzionerebbe, così come è impensabile per ora (non siamo in inghilterra ) di generare un padre con altri padri al suo interno:

Codice:

div#padre {}

div#padre h1#k {}

Invece sono perfettamente validi (e funzionano, questo è certo, visto che il primo caso lo ho usato personalmente varie volte senza problemi).

Il primo è equivalente a applicare quanto contenuto nelle parentesi a ogni <h1> discendente da un <div> con class="figlio".

Eccovi i link dal W3C:
http://www.w3.org/TR/CSS21/selector.html
e, per ulteriori dettagli:
definizione del già citato containing-block
struttura del documento: glossario - definizioni

Per quanto riguarda il secondo caso è analogo ma non ha molto senso dato che gli ID dovrebbero essere unici. In realtà ho visto che IE, Opera e Mozilla se ne sbattono della regola sull'unicità degli id (altri non so, mai verificato).
Con ciò non voglio dire che si può ignorare, visto che il significato degli ID non è solo legato ai css (basta pensare ai form ... immagina che casino!) è ovvio che è buona norma rispettare tale regola.

03-12-2003, 22.03.11

No non è solo una norma ma una regola ben precisa.
E' vero che da un padre discende un figlio (è normale), quindi a rigore hai ragione tu, ma dipende dal livello di nidificazione a cui vuoi arrivare.

Certo puoi eccome mettere un identificatore dentro un altro, e poi dentro magari altre classi.
E' valido ma è meglio non nificare delle classi.

L'esempio che ti ho postato era banale perchè non avevo certo intenzione di scrivere un libro, ma se lo leggi bene c'è dentro tutto.
Il tag h1 non ha una classe, ma siccome è compreso dentro corpo, le regole si applicano solo a questo in questo caso e solo in questo.
Infatti nell'esempio finale, c'era un altro h1 in fondo alla pagina, fuori da #corpo e non prendeva le regole dell'altro h1.
body infine è come un identificatore padre di tutti gli elementi presenti nella pagina.

Quello che hai fatto tu è esattamente ciò che ho fatto io, cioè nidificare gli elelementi di stile, mentre nell'esempio postato da richialbum non c'era nidificazione se non a partire dall'elementi <html>.
Daccordo funziona, ma aumenta la complessità.
Ogni elemento deve avere la sua classe altrimenti non funziona, mentre a rigore se gli elementi dentro l'identificatore #corpo non hanno opzioni specifiche possono tranquillamente ereditare solo le impostazioni di #corpo senza avere a loro volta altro tipo di impostazioni o senza ereditare altre classi.

Perchè è importante ciò? Per due motivi essenzialmente, la prima ovviamente è di non incasinarsi con una serie infinita di classi di cui prima o poi si perde la cognizione, la seconda pure importante è quella di non incasinare la vita dei browser.
Infatti ogni livello di eredità, alloca una parte di memoria che il browser deve usare per ricordare tali imlementazioni, uno dei problemi maggiori è dato proprio dalla famigerata famiglia di internet explorer che ha problemi a gestire la memoria, in pratica bastano tre livelli complessi di annidamento con molte modifiche allo stile per farlo piantare.
Ecco perchè è importante fare attenzione al numero di classi usate nel foglio, anche se teoricamente tutto è possibile.

**gve** · 03-12-2003, 22.52.57

Originalmente inviato da sugandbibi

No non è solo una norma ma una regola ben precisa.
E' vero che da un padre discende un figlio (è normale), quindi a rigore hai ragione tu, ma dipende dal livello di nidificazione a cui vuoi arrivare.

Certo puoi eccome mettere un identificatore dentro un altro, e poi dentro magari altre classi.
E' valido ma è meglio non nificare delle classi.

OK, su questo son perfettamente d'accordo, inutile nidificare gli id, e in generale meglio evitare anche con le classi. Rende solo più contorto e complesso il codice. La mie ultime righe erano solo un'osservazione sul comportamento dei browser.

Pure non ho niente da dire su quanto dici alla fine relativamente a non complicare la vita al browser (e, aggiungerei, mantenere il codice il più semplice possibile).

Passiamo alla pare che resta ancora da chiarire:

Originalmente inviato da sugandbibi

L'esempio che ti ho postato era banale perchè non avevo certo intenzione di scrivere un libro, ma se lo leggi bene c'è dentro tutto.
Il tag h1 non ha una classe, ma siccome è compreso dentro corpo, le regole si applicano solo a questo in questo caso e solo in questo.
Infatti nell'esempio finale, c'era un altro h1 in fondo alla pagina, fuori da #corpo e non prendeva le regole dell'altro h1.
body infine è come un identificatore padre di tutti gli elementi presenti nella pagina.

Questo e OK (e sulla faccenda ho capito che in parte ti avevo interpretato male).
Quello che secondo me sbagli è questo:

Originalmente inviato da sugandbibi

Cosa si evince da tutto ciò: che le classi non possono avere figli delle medesime, ovvero non si possono generare figli di questo genere:

Codice:

div.figlio {}

div.figlio h1 {}

Questo è esattamente uguale, dal punto di vista del css, a quello che hai fatto tu con gli id; ovviamente modificando anche il html:

[code:1:92a745ed74]<div class='figlio'>
<h1>Bello grande e sottolineato!</h1>
</div>
<h1>Brutto e zoppo</h1>[/code:1:92a745ed74]

Certo, se l'elemento deve comparire una sola volta con quelle proprietà meglio usare l'id, più che altro per chiarezza.

Il fatto è che tu affermi che questo esempio è sbagliato e non funzionerebbe, mentre (a parte che funziona benissimo) è perfettamente corretto, e anche un buon utilizzo.

Almeno per come ho compreso io la reference del w3c ...

04-12-2003, 19.33.17

Sto seguendo con interesse la vostra discussione ... e sto imparando diverse cose su id e class...ma vorrei ricordare che a me interessava più il problema del differente comportamento di netscape (che ho deciso di risolvere con un doppio file .css e lo script php di sugandbibi) ... e che avevo scritto questa cosa in merito alla quale non ho ricevuto risposta:

Originalmente inviato da richialbum

ok sugandbibi ... grazie della tua illuminazione ... Ma il tuo cerotto lascia fuori un'ultima cosa ... Io nel pieno della mia ignoranza avevo scritto:

Originalmente inviato da richialbum

ma dammi anche un chiarimento: tutti i browser che hanno come agente Mozilla presentano lo stesso comportamento di netscape per quanto riguarda padding e bordi dei box (che in pratica sono il mio problema). Oppure lo fa solo netscape? ...forse la vedi come una domanda scema, ma serve per chiarirmi le idee (data l'inesperienza).

Ho visto che Opera si comporta più o meno come IE ... infatti il tuo script php assegna ad Opera il file indexIE.css. Pertanto mi chiedo ... il file indexMOZ.css oltre a netscape a quali altri browser viene assegnato? e questi hanno lo stesso comportamento di netscape in fatto di padding e bordi dei box?

...credo di meritarmi un accenno al mio dubbio dato che ho aperto io i fuochi d'artificio relativamente ai box

**gve** · 04-12-2003, 19.47.52

Originalmente inviato da richialbum

ok sugandbibi ... grazie della tua illuminazione ... Ma il tuo cerotto lascia fuori un'ultima cosa ... Io nel pieno della mia ignoranza avevo scritto:

Originalmente inviato da richialbum

ma dammi anche un chiarimento: tutti i browser che hanno come agente Mozilla presentano lo stesso comportamento di netscape per quanto riguarda padding e bordi dei box (che in pratica sono il mio problema). Oppure lo fa solo netscape? ...forse la vedi come una domanda scema, ma serve per chiarirmi le idee (data l'inesperienza).

Ho visto che Opera si comporta più o meno come IE ... infatti il tuo script php assegna ad Opera il file indexIE.css. Pertanto mi chiedo ... il file indexMOZ.css oltre a netscape a quali altri browser viene assegnato? e questi hanno lo stesso comportamento di netscape in fatto di padding e bordi dei box?

Nella foga della discussione la tua domanda è rimasta irrisolta ... provvediamo subito, nell'attesa che sugandbibi si faccia vivo riguardo il problema class vs div:

Mozilla, Firebird, e Netscape si comportano allo stesso modo.
Non so cosa faccia Konqueror o altri browser linux (non tutti sono basati su Mozilla, o meglio Gegko se non erro, e Konqueror è di questi per quelò che ricordo).

Per quanto riguarda Opera ... in realtà si comporta in modo intermedio: come IE per quanto riguarda i bordi, ma come Mozilla per quanto riguarda il padding (quello discusso nell'altro thread).

04-12-2003, 19.48.12

Chiaro che funziona, ma non è corretto a rigore.

Ti spiego: secondo il W3C non è vietato mettere altri genitori-figlio dentro un genitore, la cosa importante è che nella pagina non dovrebbero comparire mai due volte lo stesso genitore.
Ovvero sempre secondo il W3C non è possibile fare questo:
[code:1:bf7696fada]
<div id='pippo'>

</div>
<div id='pippo'>

</div>
[/code:1:bf7696fada]
questo perchè pippo deve essere univoco.

E' possibile però mettere un altro genitore dentro pippo ma considera che esso sarà figlio di pippo, e può servire a nidificare un sublivello con sue proprie caratteristiche, ad esempio un menù in un sotto layer dentro un altro layer:
[code:1:bf7696fada]
<div id='pippo'>
<h1>Pippo Page</h1>
<div id='menu-di-pippo'>
<ul class='menu'>
<li><a href='#'>home</a></li>
<li><a href='#'>garage</a></li>
</ul>
</div>
<p>Questo è di pippo ma non del menù</p>
</div>
<h1>Qui siamo fuori di pippo e non eredito nulla da esso</h1>
[/code:1:bf7696fada]
Analizzo il codice che ho esposto:
un identificatore viene chiamato pippo, esso può dare certe caratteristiche come ad esempio il tipo e il colore del testo e la posizione nella finestra (viewport) del layer che lo supporta.
Ma non solo stabilisce anche un'nestazione (h1) ed un paragrafo (p) e infine dove deve posizionarsi un altro livello chiamato menu-di-pippo, ma non ciò che c'è dentro a menu-di-pippo.
Menu-di-pippo è un nuovo identficatore, dentro c'è definito un modo per far apparire un menù a cascata con colori e grafica sua.
Esso eredita tutto da pippo, ma non esporta nulla, magari posso ridefinire certe proprietà proprie di pippo in modo che qui appaiano differenti, per esempio se pippo ha un colore di sfondo bianco, qui lo voglio grigio.
Infine fuori da pippo c'è una seconda intestazione (h1) che eredita solo da body.

Capisci ora che è importante definire un giusto livello di nidificazione perchè così puoi gestire meglio gli elementi, come avevate iniziato voi, funzionavaa meraviglia nel vostro caso, ma era legato solo a quel caso con quella pagina, e in essa ogni elemento aveva la sua classe perfettamente definita, ma la classe serviva solo a modificare certe caratteristeche che l'elemento ereditava dalla classe maggiore cioè body nel caso specifico.
L'assurdo era che avevate definito classe proprio body che è il padre assoluto degli elementi che ponete dentro di esso.
E' come dire che tu hai si un padre, ma tu ti metti al suo stesso livello e metti al suo livello anche i tuoi figli, mentre per lui quelli sono i nipoti, non ha senso, anche se in questo caso funziona.

Guarda i fogli di stile si dicono a cascata proprio per questo, perchè un figlio eredita dal padre le sue caratteristiche, poi ne modifica alcune se vuole, anzi generalmente si procrea (

) proprio perchè i figli devono modificare certe caratteristiche come nell'esempio di cui sopra, altrimenti non avrebbero senso.

**gve** · 04-12-2003, 20.04.46

Forse non mi sono spiegato bene (in alternativa potrei non aver capito niente della tua ultima risposta).

La questione che ancora mi sfugge è la differenza tra:
[code:1:7647a96bbf]
<div id='pippo'>
<h1>...</h1>
</div>
<h1>...</h1>
[/code:1:7647a96bbf]
e:
[code:1:7647a96bbf]
<div class='pippo'>
<h1>...</h1>
</div>
<h1>...</h1>
[/code:1:7647a96bbf]
Secondo me, a parte il dettaglio che se uso id deve essere unico mentre con class potrei avere più "fratelli" omonimi, sono equivalenti.

Mentre tu hai detto che il secondo è errato, e non riesco a capire perchè (... sarò una crapa dura, ma è così).

Non è una cosa fondamentale certo, ma io mi perdo detro a queste questioni "concettuali".

Mi riguarderò anche la reference un'altra volta dove parla dei selectors nell'attesa della risposta.

04-12-2003, 20.19.23

No, no avevo solo detto che gli identificatori devono essere univoci, le classi no.

Ti do una dritta, installati ciò : http://devedge.netscape.com/viewsour...oolbar-ticker/

E se hai un news reader ti consiglio vivamente questo link: http://devedge.netscape.com/viewsource/rss-new_en.xml

**gve** · 05-12-2003, 12.02.49

OK sugfandbibi, allora avevo capito male ... però anche tu ti eri spiegato un po' maluccio :P

Grazie dei link, molto interessanti, me li guarderò con calma (non ho mai fatto niente con il xml ...).

Una domanda: ma devo avere per forza netscape installato? Io pensavo di poterlo usare anche in firebird, ma non sembra funzionare l'installazione ...

05-12-2003, 16.10.40

Ho cercato di mettere assieme le info della vostra discussione ... ma non riesco ancora a rendere ottimale il mio sito.
La parte più contorta è quella del corpo perchè ha parecchio box uno dentro l'altro e non riesco proprio ad evitare di mettere una class dentro l'altra.
Vi spiego (faccio riferimento ad un foglio css creato per IE...e chiaramente quello per MOZ è diverso per il problema bordi e padding):

Ho una sezione corpo accentrata alla pagina e divisa in due parti in questo modo:
[code:1:ab950842ea]
#box_corpo{width:760px;background-color:#E1E1FF;border:1px solid #CC0000;padding:0;margin:auto;overflow&#58 ;auto;}
.box_corpo_sx{width:180px;float:left; padding:0px 20px 0px 0px;margin:0;}
.box_corpo_dx{width:580px;float:left; padding:0;margin:0;}
[/code:1:ab950842ea]

il problema è che quelle due sezioni (sx e dx) che nella pagina vado a visualizzare con <div class="box_corpo_sx"></div> a loro volta contengono dei box interni per cui avrò:
[code:1:ab950842ea]
.box1{width:100%;background-color:#EAFFFF;border:1px solid #CC0000;padding:0;margin:0px 0px 10px 0px;text-align:center;}
.barra11{width:100%;height:11px;borde r:1px solid #CC0000;background-image: url(img_grafic/b_r_9.gif);}
[/code:1:ab950842ea]
e nella pagina per la sezione di sinistra una cosa del genere:
[code:1:ab950842ea]
<div class="box_corpo_sx">
<div class="barra11"></div>
<div class="box1">bla bla bla</div>
<div class="barra11"></div>
<div class="box1">clap clap clap</div> 
</div>
[/code:1:ab950842ea]

...e se ho capito qualcosa delle vostra discussioni so già che sugandbibi di sicuro si incazza perchè mi ha già detto che non posso mettere una classe dentro un'altra classe.
Ma allora mi chiedo come cavolo faccio a mettere dei sottobox nella sezione sx se non posso nidificare le classi. Forse non mastico ancora bene questi id e classi e non ci arrivo.
Va beh ... e non vi dico che casino c'è nella sezione dx dove capitano dei box di un livello ancora inferiore ... Per capirci ... riferendosi alla sx ... è come se in questa box1 avesse un ulteriore sottobox.

ok mi direte ... chi te lo fa fare a mettere tutti questi box nidificati ... ma a me servono ... Quindi se mi dite come risolvere il problema della sezione sx e poi anche di quella dx (che ha un livello in più).

P.S. Vi dico anche che non è che non mi funzia (viene visualizzato corretto già così), ma vorrei fare le cose bene e rendere il tutto meno articolato ... E poi non voglio far incavolare sugandbibi

05-12-2003, 18.43.54

Ma no che non mi incavolo affatto, ma scherziamo?
Siamo su un forum mica in una piazza (

forum = piazza?)

Comunque non preoccuparti le nostre sono discussioni accademiche, quindi:
puoi certamente nidificare delle classi, però ricordati che ogni gruppo di nidificazioni mangia memoria, ora questo non è un grosso problema negli altri browser, ma in IE sì fino a farlo andare in crash.
Se vuoi saperne di più ti consiglio uno dei link che ho postato nel mio primo post, anche perchè è in italiano: http://www.lucamascaro.info/articoli.selettori.xsp#top

Discussione: riquadri con css..ancora problemi

LinkBack

Strumenti discussione

Display

Regole di scrittura