[css] dubbio su grammatica

aeroxr1 · 19-04-2013, 16:45

ciao,
ho due domande che dovrebbero essere per voi semplicissime

1) per riferire un tag contenuto all'interno di una classe ,
non ho capito quando bisogna usare tag.class{} o .class tag {}

perchè ho riscontrato che vengono usati i due sopra citati metodi ,per esempio :

Codice:

<body class="pippo"> </body>

body.pippo

Codice:

<div class=pluto>
<a> </a>
</div>

.pluto a{
}

ma perchè nell'ultimo esempio non si fa

a.pluto{} ???

2) differenza tra margin-left e left ?

c'è qualcosa nella grammatica del css che mi devo essere perso per strata

wingman87 · 19-04-2013, 19:44

Quote:

Originariamente inviato da aeroxr1

ciao,
ho due domande che dovrebbero essere per voi semplicissime

1) per riferire un tag contenuto all'interno di una classe ,
non ho capito quando bisogna usare tag.class{} o .class tag {}

perchè ho riscontrato che vengono usati i due sopra citati metodi ,per esempio :

Codice:

<body class="pippo"> </body>

body.pippo

Codice:

<div class=pluto>
<a> </a>
</div>

.pluto a{
}

ma perchè nell'ultimo esempio non si fa

a.pluto{} ???

Perché nel primo caso è body ad avere la classe pippo, nel secondo caso a è un discendente di un tag avente la classe pluto.
In sostanza lo spazio significa che ciò che è a destra è discendente di ciò che è sinistra.
Vedi qui per una documentazione completa sui selettori:
http://www.w3schools.com/cssref/css_selectors.asp

Quote:

Originariamente inviato da aeroxr1

2) differenza tra margin-left e left ?

Con margin-left specifichi il margine sinistro del box. Vedi qui per il box model:
http://www.w3schools.com/css/css_boxmodel.asp

left invece ha significato solo quando position non è static.
Se position è absolute, left è la posizione del lato sinistro del box rispetto al primo contenitore "antenato" con position absolute o relative (in mancanza di tale contenitore left è relativo all'intero documento).
Se position è relative, left è la posizione del lato sinistro del box rispetto a dove si sarebbe posizionato se la sua posizione fosse stata static.
Se position è fixed, left è la posizione del lato sinistro del box rispetto alla finestra del browser.

Vedi qui per un riferimento di tutte le proprietà css:
http://www.w3schools.com/cssref/default.asp

aeroxr1 · 22-04-2013, 10:09

Quote:

Originariamente inviato da wingman87

Perché nel primo caso è body ad avere la classe pippo, nel secondo caso a è un discendente di un tag avente la classe pluto.
In sostanza lo spazio significa che ciò che è a destra è discendente di ciò che è sinistra.
Vedi qui per una documentazione completa sui selettori:
http://www.w3schools.com/cssref/css_selectors.asp

Con margin-left specifichi il margine sinistro del box. Vedi qui per il box model:
http://www.w3schools.com/css/css_boxmodel.asp

left invece ha significato solo quando position non è static.
Se position è absolute, left è la posizione del lato sinistro del box rispetto al primo contenitore "antenato" con position absolute o relative (in mancanza di tale contenitore left è relativo all'intero documento).
Se position è relative, left è la posizione del lato sinistro del box rispetto a dove si sarebbe posizionato se la sua posizione fosse stata static.
Se position è fixed, left è la posizione del lato sinistro del box rispetto alla finestra del browser.

Vedi qui per un riferimento di tutte le proprietà css:
http://www.w3schools.com/cssref/default.asp

grazie per la risposta

ma quando la posizione è absolute e vengono usati entrambe le proprietà :
left e margin-left ? magari impostando left 50% e margin-left: -100px (trucchetto usato per centrare un elementro di larghezza 200px)
mi sembrano uguali le definizioni di margin e left

cioè uno esprime il margine sinistro dal suo elemento contenitore, e l'altro la distanza a sinistra dal suo elemento contenitore.. In pratica non è la stessa cosa ?

airon · 22-04-2013, 10:20

Quote:

Originariamente inviato da aeroxr1

grazie per la risposta

ma quando la posizione è absolute e vengono usati entrambe le proprietà :
left e margin-left ?
mi sembrano uguali le definizioni di margin e left

Se le metti tutte e due si vengono usate entrambe ma solo "left" lavora col position.

Se usi left e margin-left le due proprietà si sommano.
Es.

Codice:

.contenitore {
   position: relative;
}

.box { 
   position: sbsolute:
   left: 100px;
   margin-left: 100px;
}

Con questo codice il blocco box all'interno di un blocco contenutore si sposterà dal suo margine sinistro di 200px.

aeroxr1 · 22-04-2013, 10:32

Quote:

Originariamente inviato da airon

Se le metti tutte e due si vengono usate entrambe ma solo "left" lavora col position.

Se usi left e margin-left le due proprietà si sommano.
Es.

Codice:

.contenitore {
   position: relative;
}

.box { 
   position: sbsolute:
   left: 100px;
   margin-left: 100px;
}

Con questo codice il blocco box all'interno di un blocco contenutore si sposterà dal suo margine sinistro di 200px.

che intendi dire con :

solo left lavora con il position ? margin- non si riferisce comunque alla stessa cosa ?

airon · 22-04-2013, 10:37

Quote:

Originariamente inviato da aeroxr1

che intendi dire con :

solo left lavora con il position ? margin- non si riferisce comunque alla stessa cosa ?

Che left: top: bottom: right: funzioanano solo se l'elemento padre e lo stesso elemento hanno dei position: (condizione necessaria è che ci siano due box con position: nonstatic (che è il default) che non è poco...)

Margin-left invece funziona sempre, con qualsiasi box, anche solo con se stesso.

In pratica (molto alla buona) left e margin-left hanno si lo stesso effetto, ovvero spostano il box corrente da sinistra di un certo valore, ma la teoria è completamente diversa e l'implementazione pure.

aeroxr1 · 22-04-2013, 10:52

Quote:

Originariamente inviato da airon

Che left: top: bottom: right: funzioanano solo se l'elemento padre e lo stesso elemento hanno dei position: (condizione necessaria è che ci siano due box con position: nonstatic (che è il default) che non è poco...)

Margin-left invece funziona sempre, con qualsiasi box, anche solo con se stesso.

In pratica (molto alla buona) left e margin-left hanno si lo stesso effetto, ovvero spostano il box corrente da sinistra di un certo valore, ma la teoria è completamente diversa e l'implementazione pure.

devo documentarmi un altro pochino , mi interessava capire a fondo le differenze

aeroxr1 · 22-04-2013, 11:26

si ora ho capito left,bottom,top,right funzionano con il position,
mentre i margini rappresentano il margine tra un elemento e l'elemento a lui adiacente .

QUindi se ho due div uno sotto l'altro el secondo metto margin-top : 50px si riferisce alla distanza dal div sopra , e se vi metto sempre al secondo div un top: 5000px questa è la distanza tra il div e il margine superiore dell'elemento che lo contiene . GIusto ?

In quel caso sarebbe posizionato alla somma delle distanze o solo alla più grande che contiene anche la più piccola ?

cioè 5050 o 5000 ?

airon · 22-04-2013, 13:38

Quote:

Originariamente inviato da aeroxr1

si ora ho capito left,bottom,top,right funzionano con il position,
mentre i margini rappresentano il margine tra un elemento e l'elemento a lui adiacente .

QUindi se ho due div uno sotto l'altro el secondo metto margin-top : 50px si riferisce alla distanza dal div sopra , e se vi metto sempre al secondo div un top: 5000px questa è la distanza tra il div e il margine superiore dell'elemento che lo contiene . GIusto ?

In quel caso sarebbe posizionato alla somma delle distanze o solo alla più grande che contiene anche la più piccola ?

cioè 5050 o 5000 ?

Partendo dal pressuposto che i div devono essero uno dentro l'altro per far funzionare il position della seconda parte abbiamo:

primo caso: il secondo div si posizionerà a 50px dal contenuto del div padre. (Puoi anche fare due div separati per questo caso) il secondo si posizionerà a 50px da quello precedente.
secondo caso: il secondo div si posizionerà a 5050. 5000 dato da posizionamento e 50 dal margin-top.

Ciaoo

aeroxr1 · 22-04-2013, 22:00

Quote:

Originariamente inviato da airon

Partendo dal pressuposto che i div devono essero uno dentro l'altro per far funzionare il position della seconda parte abbiamo:

primo caso: il secondo div si posizionerà a 50px dal contenuto del div padre. (Puoi anche fare due div separati per questo caso) il secondo si posizionerà a 50px da quello precedente.
secondo caso: il secondo div si posizionerà a 5050. 5000 dato da posizionamento e 50 dal margin-top.

Ciaoo

quindi margin-top non si rende conto che la distanza dal div superiore è già superiore ai 50px che richiedo con il margin-top ?

vi volevo fare un ultima domanda :
i div sono elementi di blocco eppure se creo un div con sfondo rosso e una scritta di una riga al suo interno avviene la seguente cosa :

position : static ; il colore rosso si estende per tutta la dimensione della pagina

position : relative ; il colore rosso si estende per tutta la dimensione della pagina

position : absolute; il colore rosso si estende solo per la dimensione della scritta

se lo imposto float fa la stessa cosa che se lo posiziono absolute.

Ora la domanda è , perchè se lo imposto assoluto o float si comporta quasi come un elemento inline e lo sfondo non si estende in larghezza per tutta la larghezza del contenitore ?

19-04-2013, 16:45	#1
aeroxr1 Senior Member Iscritto dal: Mar 2006 Messaggi: 2057	[css] dubbio su grammatica ciao, ho due domande che dovrebbero essere per voi semplicissime 1) per riferire un tag contenuto all'interno di una classe , non ho capito quando bisogna usare tag.class{} o .class tag {} perchè ho riscontrato che vengono usati i due sopra citati metodi ,per esempio : Codice: <body class="pippo"> </body> body.pippo Codice: <div class=pluto> <a> </a> </div> .pluto a{ } ma perchè nell'ultimo esempio non si fa a.pluto{} ??? 2) differenza tra margin-left e left ? c'è qualcosa nella grammatica del css che mi devo essere perso per strata Ultima modifica di aeroxr1 : 19-04-2013 alle 16:48.

22-04-2013, 11:26	#8
aeroxr1 Senior Member Iscritto dal: Mar 2006 Messaggi: 2057	si ora ho capito left,bottom,top,right funzionano con il position, mentre i margini rappresentano il margine tra un elemento e l'elemento a lui adiacente . QUindi se ho due div uno sotto l'altro el secondo metto margin-top : 50px si riferisce alla distanza dal div sopra , e se vi metto sempre al secondo div un top: 5000px questa è la distanza tra il div e il margine superiore dell'elemento che lo contiene . GIusto ? In quel caso sarebbe posizionato alla somma delle distanze o solo alla più grande che contiene anche la più piccola ? cioè 5050 o 5000 ?

Strumenti
Mostra una versione stampabile Invia questa pagina per email