PDA

View Full Version : [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 :

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

body.pippo

<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 :stordita: :mc: :muro:
wingman87
19-04-2013, 19:44
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 :

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

body.pippo

<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

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
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 :confused: :stordita: 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
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 :confused: :stordita:

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.

.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
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.

.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
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
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 ? :D
airon
22-04-2013, 13:38
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 ? :D

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
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 ?