ugrás a tartalomhoz

Diven belüli margin

erika90 · 2011. Nov. 30. (Sze), 13.49

#footer {
    background-image:url(../images/footer.jpg);
    width:774px;
    height:42px;
}

#footer p {
	width:744px;
	padding:0 15px;
	height:30px;
	color:#bdbdbd;
	margin:5px 0 0 0;
}


<footer role="contentinfo" id="footer"> <p id="aui_3_4_0_1_1500">&copy; </p> </footer>
A problémám hogy a p marginja a #footer elött lévő divet eltolja, nem pedig a #footer beljesétől tolja el az elemet. Mi erre a logikus magyarázat/megoldás?



Köszönöm!
‹ jquery dinamikus navigáció CSS vagy Javascript hiba ›
 ■
1

A margók így működnek, ez a

Hidvégi Gábor · 2011. Nov. 30. (Sze), 13.59
A margók így működnek, ez a magyarázat. Én, ahol lehet, kerülöm a őket, és helyettük padding-et használok.
2

1px padding

razielanarki · 2011. Nov. 30. (Sze), 14.11
ha adsz egy pixel paddingot, vagy 1px bordert a belső elemre nem olvadnak össze a margók:

itt találsz egy angol nyelvű segítséget arról hogy miért, hogyan:
http://reference.sitepoint.com/css/collapsingmargins
3

Akkor nem egyszerűbb csak

Hidvégi Gábor · 2011. Nov. 30. (Sze), 14.44
Akkor nem egyszerűbb csak padding-et használni? Kinézetre ugyanaz, de egy sorral kevesebb.
4

köszi ezt a cikket

lamase · 2011. Nov. 30. (Sze), 14.46
köszi ezt a cikket
5

Sajnalatos modon meg senki

Leonuh · 2011. Nov. 30. (Sze), 15.31
Sajnalatos modon meg senki nem irta de erre vannak egyszeru megoldasok: a parent elemnek inline-block-ot adsz, illetve ha kell fallback akkor display: inline; float: left;

Sok mindenre megvan megoldas... nem feltetlenul kikerulni kell ;)
6

Ezek egyáltalán nem elegáns

Hidvégi Gábor · 2011. Nov. 30. (Sze), 15.32
Ezek egyáltalán nem elegáns megoldások.
7

Pozitivum: 1.: Valid 2.:

Leonuh · 2011. Nov. 30. (Sze), 15.39
Pozitivum:
1.: Valid
2.: Mindenhol megeszi
3.: 99% hogy kesobb is jo lesz
4.: Kevesebb kod -> gyorsabb

Negativum:
1.: "Nem elegans" - ... :)
8

;)

razielanarki · 2011. Nov. 30. (Sze), 17.05
a "padding-top: 1px;" is teljesíti az 1-4-et, és nem kell hackelni IE-ben sem ;)
11

Kiveve 1 valami:

Leonuh · 2011. Nov. 30. (Sze), 17.54
Kiveve 1 valami: kepeknel/hattereknel 1 pixeles szetcsuszas lathato de alapvetoen ha elhanyagolhato ugyanugy jo lehet... Pixelpontos sitebuildeknel felejtos...
9

1, régebbi IE-k csak inline

Hidvégi Gábor · 2011. Nov. 30. (Sze), 17.30
1, régebbi IE-k csak inline elemeken értelmezik a display: inline-block-ot
2, float: left miatt valósíznűleg be kell rakni valahova egy clear: both-ot
3, mitől is kevesebb a kód?
10

Egy clearfix / cf class ami

Leonuh · 2011. Nov. 30. (Sze), 17.52
Egy clearfix / cf class ami egy jobb sitebuildben alap init.. ergo nem lettel tobb csak 2 betuvel...

De maradjunk annyiban, hogy ie8 ala max gracefull fallback kell a legtobb cegnel.

Egyebkent lenyegtelen, evek ota hasznalt technika 100%osan bevalt ;)
12

Sokan akadekoskodnak igy

Leonuh · 2011. Nov. 30. (Sze), 18.23
Sokan akadekoskodnak igy csinaltam egy kis reprezentaciot:

http://jsfiddle.net/fqXYM/

Sok szorakozast hozza -> Egyben megoldas a kerdezonek is.
13

#footer { 

Hidvégi Gábor · 2011. Nov. 30. (Sze), 18.59
#footer {
  background-image:url(../images/footer.jpg);
  width:774px;
  height:37px;
  padding-top: 5px;
}

#footer p {
  width:744px;
  padding:0 15px;
  height:30px;
  color:#bdbdbd;
  margin: 0px;
}
14

Ertem hogy mi volt a kiindulo

Leonuh · 2011. Nov. 30. (Sze), 19.13
Ertem hogy mi volt a kiindulo pont de a problema alapvetoen ugyanaz mint egy felsorolasnal.

"A problémám hogy a p marginja a #footer elött lévő divet eltolja, nem pedig a #footer beljesétől tolja el az elemet. Mi erre a logikus magyarázat/megoldás?"

Megoldasokat (technikakat) mutattam melyek kozuk valaszthat kedvere. Amit nem csak itt hanem mashol is hasznalni tud attol fugg neki mi tetszik. A szinezes az csak az en szubjektivitasom.
15

Én is értem, mit mondasz,

Hidvégi Gábor · 2011. Nov. 30. (Sze), 19.25
Én is értem, mit mondasz, csak arra próbáltam rávilágítani, hogy van olyan megoldás, aminek ugyanaz az eredménye, mint a tiednek, cserébe jóval több böngészőn működik, de ugyanúgy szabványos, és nem hack.
16

Annyiban szerintem egyet

Leonuh · 2011. Nov. 30. (Sze), 20.12
Annyiban szerintem egyet erthetunk hogy szituacio fuggo mi a helyes :) Minel tobb technikat tudunk, minel tobb oldalu a tudasunk annal tobbet erunk mi is, de ez szerintem logikus :) Ha ujat tudtok / tudnak mutatni annak csak orulok :)
17

Ebben tökéletesen egyetértünk

Hidvégi Gábor · 2011. Nov. 30. (Sze), 20.19
Ebben tökéletesen egyetértünk : )