Autor Zpráva
venclj
Profil
#1 · Zasláno: 6. 9. 2006, 17:24:57
Odpovědět Citovat
Dlouhá léta se s tím setkávám, ale dosud jsem nepřišel na pořádně řešení. Firefox mi od horního okraje stránky dává asi 10px padding. To by mi nevadilo, kdyby to nešlo stáhnout na nulu. Dosud jsem to řešil pozicováním a mínusovým marginem. Neexistuje nějaké elegantnější řešení?
Gappa
Profil
#2 · Zasláno: 6. 9. 2006, 17:27:51
Odpovědět Citovat
Tak tedy nevím, ale mě se tohle teda nestává :)

zkus to vynulovat pro jistotu takle:

html, body {
padding: 0;
margin: 0;
}
venclj
Profil
#3 · Zasláno: 6. 9. 2006, 17:36:46 · Upravil/a: venclj
Odpovědět Citovat
zkus to vynulovat pro jistotu takle:

html, body {
padding: 0;
margin: 0;
}

Tak už jsem na to přišel. Může za to margin h1 
<body>

   <div id="header">

     <h1>Základní layout</h1>

...

Horní margin nerespektuje horní okraj rodičovského elementu. Vzpomínám si, že už se mi to někde stalo. IE to nedělá. Jaké chování je správné?
Knopi
Profil
#4 · Zasláno: 6. 9. 2006, 18:22:58 · Upravil/a: Knopi
Odpovědět Citovat
venclj: Jaké chování je správné?
Každý prohlížeč se v tomto směru chová jinak. Má automaticky nastavené okraje - s tím je potřeba počítat. Musíte si to nastavit vy sám. Nejlepší řešení je, že okraje (vnější, vnitřní) vynulujete všem prvkům na stránce. Usnadníte si nejenom moho práce, ale také si spřehledníte, zmenšíte kód a vždy když na Vás bude zívat podobný problém - CHYBA BUDE NĚKDE JINDE.

* {
margin: 0;
padding: 0;
border: 0; /* timto take nic nezkazite */
}

Žádnou vědu v tom nehledejte, máme vynulováno. Teď již můžete s úsměvem jen nastavovat okraje.
tiso
Profil
#5 · Zasláno: 6. 9. 2006, 18:44:29 · Upravil/a: tiso
Odpovědět Citovat
Knopi
Ja viem že sa to veľa ľudí používa ale nerobil by som to! Nastav margin a padding na 0 prvkom pri ktorých to potrebuješ (body, h1(ako súčasť hlavičky), a, caption), potom netreba nastavovať marginy pre prvky ktoré ho potrebujú (p, h2-h6, formuláre, tabuľky)... Tie default hodnoty tam nie sú zo srandy...
venclj
Profil
#6 · Zasláno: 6. 9. 2006, 19:25:39 · Upravil/a: venclj
Odpovědět Citovat
Knopi:
Každý prohlížeč se v tomto směru chová jinak.
Asi jsem špatně vysvětlil otázku. máme-li např. h1 v divu (viz kód výše) a h1 má margin, proč ve FF utíká mimo oblast rodičovského divu? Chtěl jsem se zeptat, jestli někdo neví, jaké chování je správné a osobně si myslím, že se nyní správně chová IE. Mám za to, že by se k tomu nějak měl vyjadřovat standard CSS. Pokud se tam o tom nemluví, zřejmě by se mělo.

Téměř vždycky se dá vymyslet, jak to obejít. Vždycky se najde nějakej hack. Ale když už máme ty standardy...
tiso
Profil
#7 · Zasláno: 6. 9. 2006, 20:07:18 · Upravil/a: tiso
Odpovědět Citovat
Tu máš CSS, môžeš sa hrať:
html{background: Yellow, none;}
body{background: Orange, none;/*margin: 0;*//*padding: 0*/}
header{background: Red, none;}
h1{background: Blue, none;/*margin-top: 0*/}

Čo sa správneho chovania týka, tak si pozri časť o zlučovaní marginov v špecifikácii...
Bubák
Profil
#8 · Zasláno: 6. 9. 2006, 20:33:02
Odpovědět Citovat
venclj: Jaké chování je správné?
Stačí zjistit http://www.w3.org/TR/CSS21/sample.html
Porovnej s tím, kde máš instalovaný Firefox\res\html.css
Některé odlišnosti jsou kosmetické, jiné zásadnější

Čo sa správneho chovania týka, tak si pozri časť o zlučovaní marginov v špecifikácii...
To je důležité znát. Mám dojem, že Yuhů na to má obrázek, ale nemůžu ho najít. Zjednodušení - větší vyhraje.
Knopi
Profil
#9 · Zasláno: 6. 9. 2006, 22:42:17
Odpovědět Citovat
tiso: Tie default hodnoty tam nie sú zo srandy...
To skutečně nejsou. Při vypnutých stylech se stránka formátuje o tyto nastavené hodnoty. Upřímně tímhle si práci neulehčíš. Psát u každého druhého prvku margin: 0; . Když si to na začátku vynuluješ, pak jen nastavíš danému prvku, kde okraj chceš mít. Nicméně je to každého věc a každému vyhovuje něco jiného. Mě se to třeba zamlouvá... :-)


venclj: O marginu (slučování) Petr Staníček http://www.webtip.cz/art/wt_tech_html/wt_cssserial_007.html .
tiso
Profil
#10 · Zasláno: 6. 9. 2006, 22:51:23 · Upravil/a: tiso
Odpovědět Citovat
Knopi
Ja som myslel jednu definíciu na vynulovanie: body, h1, a, caption {margin: 0;padding: 0;} - viem čo som vynuloval, nie je problém niečo pridať či ubrať... Vynulujem si skrátka prvky ktoré by som musel nulovať zvlášť, lebo mi ich default margin/padding vadí v layoute...
venclj
Profil
#11 · Zasláno: 7. 9. 2006, 13:24:39
Odpovědět Citovat
Knopi:O marginu (slučování) Petr Staníček http://www.webtip.cz/art/wt_tech_html/wt_cssserial_007.html .
Za tohle díky. To je to, co jsem hledal. Firefox se ale tak nechová!

http://www.webtip.cz/art/wt_tech_html/wt_cssserial_007.html
Pozn. 2: Pokud za sebou následují dva boxy (a nejsou-li absolutně či relativně pozicované), jejich sousedící okraje margin-bottom a margin-top se spojí: tak, aby vzniklá mezera mezi rámečky obou boxů byla o velikosti větší z obou hodnot. Okraje se spojují tehdy, mají-li oba boxy stejný nadřazený box - nezáleží však na jejich vzájemném vztahu: druhý box může být na stejné úrovni jako první, ale může mu být nadřazený i podřazený (např. odsazená položka v UL seznamu). Horizontální okraje (margin-left a margin-right) se nespojují.

U mě dochází, jak jsem psal, ke slučování marginu u divu a v něm vnořenému h1, což by, jak jsem pochopil z článku nemělo nastat (jestliže se ovšen nemyslí přímo nadřízený element. Pak by všechny elementy měly html). V článku PS je psáno o sousedících okrajích margin-bottom a margin-top. Mě se ale spojují dva margin-top (jeden je druhému nadřazený). Jedná se tedy o chybu Firefoxu?

Kód ještě jednou: 
<body>

  <div id="header">

    <h1>Základní layout</h1>

  </div>

...


CSS: 
body {

  background-color: grey;

  }

div {

  margin: 0px;

  background-color: green;

  }

h1 {

  margin: 20px;

  }
tiso
Profil
#12 · Zasláno: 7. 9. 2006, 16:30:42
Odpovědět Citovat
venclj Horní margin nerespektuje horní okraj rodičovského elementu.
Čo si chcel vlastne týmto povedať?

Sorry za to zlučovanie marginov, to samozrejme platí pre susediace prvky, nejak som si to neuvedomil keď som to písal...
Plaváček
Profil
#13 · Zasláno: 7. 9. 2006, 18:07:14 · Upravil/a: Plaváček
Odpovědět Citovat
Možná jsem nepochopil správně otázku, ale mě se nic podobného jako 10px navíc neprojevuje (původní styl jsem ponechal, upravil jsem pouze styl pro BODY - margin:0, padding: 0 a orámoval H1), viz http://klient.plavacek.net/margin.html

Takže fakt nevím, v čem je vlastně problém.

P.S. lepší je asi psát backround-color: gray.
venclj
Profil
#14 · Zasláno: 7. 9. 2006, 22:04:56 · Upravil/a: venclj
Odpovědět Citovat
Plaváček: http://klient.plavacek.net/margin.html


Posílám screen. Jedná se mi o tu mezeru mezi horním okrajem stránky a zeleným divem. Mezera je způsobena marginem vnořené h1, takže by podle mé logiky měla být taky zelená. To je standard? Proč se to takhle chová?
tiso
Profil
#15 · Zasláno: 7. 9. 2006, 22:11:16
Odpovědět Citovat
venclj
Margin je odsadenie prvku od ostatných prvkov, nemá byť zelený! Naštuduj si boxmodel...
Knopi
Profil
#16 · Zasláno: 7. 9. 2006, 22:33:59 · Upravil/a: Knopi
Odpovědět Citovat
venclj: Jestli jsem tě teď teda až dobře pochopil, tak ti jde:
margin - vnější okraj
padding - vnitřní okraj, pokud by jsi to odsadil paddingem, budeš mít zelené i to odsazení! Vnější okraj nezahrnuje vnitřek.
venclj
Profil
#17 · Zasláno: 7. 9. 2006, 22:46:46
Odpovědět Citovat
Knopi
Jasně, to vím. Ale očekával bych od marginu stejné chování, jako na bocích (viz. screen). Ano, margin je mezera mezi daným prvkem a ostatními, ale podle mě patří tomu danému objektu a neměnit vlastnosti objektu nadřazeného. Jinými slovy: Zelený by měl být větší, neboť obsahuje h1 s nastaveným marginem. Ne, že margin bude de facto měnit vlastnosti nadřazeného elementu.

P.S. Nejde mi o konkrétní použití. Vždycky to jde nějak obejít. Snažím se tady zjistit, jak to má správně fungovat. A jestli tohle je standardní chování, tak i důvod.
Plaváček
Profil
#18 · Zasláno: 8. 9. 2006, 07:55:10
Odpovědět Citovat
venclj


Aha, už chápu, co máš na mysli. Jedná se skutečně o standardní chování a říká se tomů prolínání okrajů. Za všechno může neexistující rámeček kolem nadřazeného bloku DIV. Přidáš-li border, funguje vše korektně, viz http://klient.plavacek.net/margin1.html

Zde máš vědecké zdůvodnění http://www.kit.vslib.cz/~satrapa/www/kurs/margin.html a zde máš zajímavý příklad, který ti problém osvětlí http://www.kit.vslib.cz/~satrapa/www/kurs/p-okraj1.html

Proto je mnohem lepší pro H1 použít padding místo marginu a je vystaráno.
Plaváček
Profil
#19 · Zasláno: 8. 9. 2006, 07:56:07
Odpovědět Citovat
venclj

Ještě doplním, že prolínání se týká výhradně horních a dolních okrajů, levé a pravé okraje se neprolínají.
tiso
Profil
#20 · Zasláno: 8. 9. 2006, 09:59:42
Odpovědět Citovat
Plaváček
Ďakujem aj ja za doplnenie obzorov...
venclj
Profil
#21 · Zasláno: 8. 9. 2006, 10:04:31
Odpovědět Citovat
Plaváček Taky děkuju. Tohle jsem netušil
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0