PDA

Pogčedajte punu verziju : Negative Margins


andrej
21. 09. 2006., 21:15
Interesuje me na koji nacin, u ovom textu (http://www.alistapart.com/articles/negativemargins), radi sledeci code:


#container {
width: 100%;
float: left;
margin-right: -200px;
}


Kao i ovo gde on kaze:

It is very important that we float this element, as margins (and thus, negative margins) are handled differently for floated and inline elements than they are for non-floated block-level elements.


Na koji nacin se konkretno razlikuju margine kod float i non-float elemenata?

bluesman
21. 09. 2006., 22:34
To je samo zato da bi mogao da se "zguzne" onaj desni sidebar. Kada bi ostavio samo width:100%; desni sidebar bi se izvukao ispod, jer je u kodu prvo content pa onda sidebar.

Ovo se radi da bi #container dosao u kodu ispred sidebar, konvencionalnim tehnikama, ako se stavi da sidebar bude float:right, onda bi on morao da ide ispred containera. Ovako moze slobodno i iza, odnosno da prvo ide container, sto je bolje za SEO i gomilu slicnihi "gluposti". Mada, ovo sve je moglo i drugacije da se odradi... kao i sve u ovom poslu - moze na vise nacina.

andrej
21. 09. 2006., 22:44
Da, shvatio sam problematiku, medjutim pitanje je bilo vise tehnicke prirode oko css-a.

Po meni, logicno bi bilo da je stavio margin-right: 200px, kako bi omakao od desne strane i napravio prostor, a ne -200px. Ali to ne radi, pa se pitam zasto?

//ovo drugo sam sam skapirao... :)

ivanhoe
22. 09. 2006., 03:15
Da, shvatio sam problematiku, medjutim pitanje je bilo vise tehnicke prirode oko css-a.

Po meni, logicno bi bilo da je stavio margin-right: 200px, kako bi omakao od desne strane i napravio prostor, a ne -200px. Ali to ne radi, pa se pitam zasto?

//ovo drugo sam sam skapirao... :)

Zato sto je stavio width:100%, odnosno taj floated element zauzima punu sirinu ekrana. Seti se da po W3C box modelu margine se dodaju na sirinu, odnosno kad bi ti stavio tih +200px margine, onda bi ti kontejner zauzimao 100% + 200px, a ti zelis suprotno, ti zelis da oslobodis prostor za desne strane. Znaci treba da oduzmes 200px sa desne strane, tj. ispada da ti je right-margin:-200px, a bounding box elementa nam je onda 100%-200px.
QED :)