ugrás a tartalomhoz

Negatív margin, miez?

totony · 2010. Júl. 1. (Cs), 16.53
Sziasztok!

A kérdésem a CSS Rating tutorial után fogalmazódott meg. Még soha nem használtam negatív margint, pedig már pár éve foglalkozok a témával. Elvégre egy margin-left:10px az #elem divet balról eltolja, akkor ennek a negatívja a margin-right, ami attól jobbra lévő elemeket tolja el, nem? Hogy van ez?

Másik dolog valaki magyarázza már el legyen szíves nekem (lehet miután megtudom mi is ez a margin negatív már tudni fogom..), hogy a tutorialban lévő kód, hogyan képes arra, hogy a mögötte lévő elemeket, amik szintén hover állapotba hozza?

.rating a:hover {

background:url(images/star.jpg) center;

width:115px;

margin-left:-92px;

position:static;

}


<ul class="rating">
	<li><a href="#" title="1 Star">1</a></li>

    <li><a href="#" title="2 Stars">2</a></li>
    <li><a href="#" title="3 Stars">3</a></li>
    <li><a href="#" title="4 Stars">4</a></li>
    <li><a href="#" title="5 Stars">5</a></li>
</ul>
Válaszokat köszönöm, és elnézést hogy az időtöket raboltam!
‹ frame görgető Összes O betű lecserélese egy oldalon ›
 ■
1

a negativ margin

neogee · 2010. Júl. 1. (Cs), 17.19
Nos a negatív margin nem az amit írtál. A marin-left tulajdonság pozitív érték esetén balról jobbra tolja az adott elem BAL OLDALÁT, míg negatív érték esetén pont hogy balra tolja.
Fontos különbség a margin-left: -100px és a mrgin-right: 100px; között, hogy a margin-right csak az elem jobb oldalát érinti a margin-left pedig csak a bal oldalát!
Nincsen hatással az egész elemre. Attól hogy a baloldali szélt negativba tolod, azaz a balra mellette lévő elemhez közelíted, attól a jobboldali margót nem feltétlenül kell állítanod.

Remélem nagyjából érthető:)
2

rátolhatom a balra lévő elemre..

totony · 2010. Júl. 1. (Cs), 17.28
Nagyjából már értem, tehát a következő kód hatására rátolhatom az első elemre a középsőt.

#div_1 {
	width:150px;
	height:150px;
	background-color:red;
	float:left;
	margin-left:-100px;
	margin-right:10px;
}

.div_2 {
	width:150px;
	height:150px;
	background-color:#999;
	float:left;
}


<div class="div_2">dasdas</div>
<div id="div_1">dasdas</div>
<div class="div_2">dasdas</div>
Bár azt nem értem mikor használhatnám ezt, leszámítva az említett csillagos értékelő dolgot, ha valamire ráakarom vinni akkor ott a position:absolute és a top,left.

Az viszont még mindig nem tiszta, hogy a

.rating a:hover {
    background:url("images/star.jpg") repeat scroll center top transparent;
    margin-left:-52px;
    position:static;
    width:65px;
}
hogy képes arra, hogy a elem fölé húzva az egeret, hogy lesz az összes a elem egyszerre hover állapotban. Elméletileg annak kellene történnie, hogy az az elem amire az egeret ráhúztam elmászik 52pixellel balra. Nagyon hülye vagyok? :)
3

nem vagy

neogee · 2010. Júl. 1. (Cs), 17.54
nem vagy... elméletileg tényleg annak kellene történnie... nemtudom miért csinálhatja azt, ha adsz egy linket meglesem talán ki tudom silabizálni :)

Vissza a negatív margóhoz:

Amit mondasz ezzel kapcsolatban, hogy position absolute,az teljesen mást csinál... :)
Az abszolut, ahogyan a neve is mutatja egy abszolut poziciót ad az adott elemnek. :)
A negatív margó viszont egy másik elemhez viszonyítva taszigálja odább :) de próbáld ki... írj egy példakódot mindkettőre, és észre fogod venni a különbséget :)

A példakódra ami másoltál, arra csak akkor igaz az állítás, hogy "rátolod az első elemre a középsőt" ha a div2 van a baloldalon és a div1 a jobboldalon, hiszen a div1 baloldalát tolod negatív irányba :)
4

itt az url köszi előre is.

totony · 2010. Júl. 1. (Cs), 18.07
itt az url köszi előre is. Ígyvan, azt azért raktam oda, mert amúgy nem lett volna olyan látványos, és a képernyőről tolnám le:) Negatív margint te hol szoktál használni?
5

hmmm érdekes

neogee · 2010. Júl. 1. (Cs), 18.43
Érdekes... :D megmondom neked őszintén halovány lila gőzöm nincsen hogy miért igy működik:S szerintem ott a háttérképek kitöltésével van valami, mert nincsen lekorlátozva az x dimenziós kitöltés sem, de pontosan nem értem én sem:s
Én általában ilyesmire javascriptet használok... viszont ebben van egy két furcsaság... biztosan ismered a FireBug nevű FF fejlesztő plugint:) valamiért csak az utolso csillagra tekinti érvényesnek a .rating a:hover szabályt... :D a többire nem...:D nem nagyon értem miért:S

de biztosan jönnek majd nálam sokkal okosabb emberek is, és segítenek neked :))
7

nekem is volt ilyen, csak

totony · 2010. Júl. 1. (Cs), 18.45
nekem is volt ilyen, csak nekem az utolsó elöttire jelezte, most viszont már az összesre. Remélem az okosoknak sikerül ezt megfejteni, mert nagyon idegesít hogy nem értem. Ki képes egy ilyen cucc megírására??? :)
6

annyi észrevételem még lenne,

totony · 2010. Júl. 1. (Cs), 18.43
annyi észrevételem még lenne, hogy a hover eseményre az 5db csillagot ami az én verzióban 65pixel, azt tolja el 52 pixellel balra, de még mindig nem világos az hogy akkor a csillagok hogy lehetnek aktivak, aki ezt megfejti.. kap egy nagy cuppanósat :o
8

semmi fekete mágia

Endyl · 2010. Júl. 1. (Cs), 19.09
Hover állapotban az aktuális anchor felveszi a lista szélességét, a negatív margó pedig pont annyival tolja balrább, hogy az utána következő elemeket ne takarja el, az előtte lévőket pedig az automatikus z-index miatt szépen elfedi a saját háttérképével.

Cuppanós helyett a sör is megteszi.
9

jár a sör, de ha a negativ

totony · 2010. Júl. 1. (Cs), 19.31
jár a sör, de ha a negativ margin mindig fix, akkor hogy-hogy jól pozicionál mindig?
csináltam egy ábrát, én így értelmezem, lehet ezért nem értem az egészet

Ilusztráció

Azért raktam az <a> -t fölé hogy jól látszódjon, valójában ugye az benne van az <ul> -ban
10

más pozícióból indul

Endyl · 2010. Júl. 1. (Cs), 19.51
Azért működik, mert mindig az adott anchor kezdőpontjától tolja el, ami ugye folyton nő az egyre későbbieknél.
11

azt hiszem értem, tehát a

totony · 2010. Júl. 1. (Cs), 20.24
azt hiszem értem, tehát a méretét az adott <a> tól veszi fel, és onnan tolja balra visszafelé. ha hülyeség amit írtam szóljatoK:)
12

nem a méretét

Endyl · 2010. Júl. 1. (Cs), 22.42
A méretet a css adja az aktuális <a>-nak a ".rating a" és ".rating a:hover" alapján. A kezdő pozíciója ("left") az <a>-knak a normál boxmodell szerint alakul [meg az őket tartalmazó <li>-knek is] (első <a> 0px, második 24px, harmadik 47px, stb., az <a> mérete alapján). Ezt a "left" pozíciót "húzza vissza" a negatív "margin-left".
13

értem! köszi:)

totony · 2010. Júl. 1. (Cs), 22.45
értem! köszi:)