DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   Negative Margins (http://www.devprotalk.com/showthread.php?t=1533)

andrej 21. 09. 2006. 20:15

Negative Margins
 
Interesuje me na koji nacin, u ovom textu, radi sledeci code:

Kôd:

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

Kao i ovo gde on kaze:
Citat:

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. 21: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. 21: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. 02:15

Citat:

Originalno napisao andrej
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 :)


Vreme je GMT +2. Trenutno vreme je 01:13.

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.