| Autor | Zpráva | ||
|---|---|---|---|
| Filipos Profil |
#1 · Zasláno: 3. 12. 2014, 01:03:56
Dobry den,
chtel bych zmenit horni margin elementu section, ale pouze v mozille. Zkousel jsem prefix -moz-, ale nefunguje. Mam FF v.34. Funguji nejake hacky, jak toho docilit? Dekuji za pripadne rady. HTML: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<header>
</header>
<section>
<p>Ahoj</p>
</section>
</body>
</html>CSS: *{
margin: 0;
padding: 0;
}
header{
width: 800px;
height: 100px;
margin: 0 auto;
background:silver;
}
section{
width:800px;
margin:0 auto;
background:green;
} |
||
| eager_beaver Profil |
Zkusil bych toto, ale samozřejmě nepočítej s podporou v nižších verziích (předpoklad).
@-moz-document url-prefix() {
section{
margin-top: px;
}
}Tady je fiddle |
||
| juriad Profil |
#3 · Zasláno: 3. 12. 2014, 01:23:09
Filipos:
Proč to chceš? Web přece má vypadat stejně bez ohledu na to, který prohlížeč jej zobrazuje. |
||
| Filipos Profil |
#4 · Zasláno: 3. 12. 2014, 01:27:45 · Upravil/a: Filipos
juriad:
Chtel bych na jedne strance pohnout s divem, ktery se v mozille ukazuje o par desitek pixelu vyse nez v chromu... eager_beaver: Dik, funguje to. |
||
| mimochodec Profil |
#5 · Zasláno: 3. 12. 2014, 01:33:11
Filipos:
„Chtel bych na jedne strance pohnout s divem, ktery se v mozille ukazuje o par desitek pixelu vyse nez v chromu...“ Takže chceš výjimkou zaplácnout nějakou chybu. Nebylo by lepší tu chybu odstranit? Dej odkaz na stránku a určitě se to vyřeší líp. |
||
| eager_beaver Profil |
Filipos:
„Chtel bych na jedne strance pohnout s divem, ktery se v mozille ukazuje o par desitek pixelu vyse nez v chromu...“ To je ale dost zvláštní, jen ve Firefoxu? |
||
| Filipos Profil |
mimochodec:
ajkie.wz.cz Jde o umisteni toho pocitadla - snad me neukamenujete protoze se to uz nepouziva :P(Ve FF je o neco vys nez v chromu) |
||
| eager_beaver Profil |
Filipos:
Ukamenuju tě, pokud okamžitě neodstraníš to zbytečné absolutní pozicování! ;-) (které je mimochodem příčinou) |
||
| Filipos Profil |
#9 · Zasláno: 3. 12. 2014, 01:49:07
eager_beaver:
„Ukamenuju tě, pokud okamžitě neodstraníš to zbytečné absolutní pozicování! ;-)“ S radostí, pokud mi poradíš, jak to počítadlo dát do té pozice jinak :P |
||
| eager_beaver Profil |
Filipos
Udělal bych to tak, že vše co máš v patičce, bych obalil jedním divem a za ten div bych pak "uložil" počítadlo např.: <div id="footer">
<div class="first-line">
obsah patičky
</div>
<div id="pocitadlo">
...
</div>
</div>V CSS bych zapsal: #footer .first-line{
background:...; /* to co má footer */
border:...; /* to co má footer */
}#footer.
|
||
| Chamurappi Profil |
#11 · Zasláno: 3. 12. 2014, 02:12:37
Reaguji na Filipose:
„ale pouze v mozille“ Mezeru pod počítadlem vidím i v Exploreru. Tak proč hledáš hack na Mozillu a ne na Chrome? Jde to samozřejmě vyřešit i bez hacků, stejně jako drtivá většina problémů… „ <header> […] <section>“
Tyto elementy používáš jen proto, aby ti působily problémy s kompatibilitou ve starších prohlížečích, nebo mají i nějaký jiný praktický dopad? Mimochodem, v Mozille vidím menu s jinou šířkou, protože používáš box-sizing jen bez prefixů, a v Exploreru (a starších verzích ostatních prohlížečů) má klikací hlavička modrý okraj, jako každý odkazující obrázek.
|
||
| Filipos Profil |
Chamurappi:
„Tyto elementy používáš jen proto, aby ti působily problémy s kompatibilitou ve starších prohlížečích, nebo mají i nějaký jiný praktický dopad?“ Nevím, použil jsem je jen tak. Mám se tedy raději držet "divů"? Zkouším teď to, co poradil eager_beaver, ale zlobí ftp(jak neobvyklé u wz, že :P). eager_beaver: Tak jsem to udělal podle tvého návodu, ale teď mám to počítadlo pod patičkou, což jsem nechtěl... ajkie.wz.cz Předtím jsem měl to počítadlo vlevo dole v divu, kterej obsahoval další div s textem a to počítadlo..zvýrazním ten div, ve kterém to počítadlo bylo, šedou barvou... |
||
| eager_beaver Profil |
Filipos:
„Tak jsem to udělal podle tvého návodu, ale teď mám to počítadlo pod patičkou, což jsem nechtěl...“ Tomu nerozumím, přesně takto jsi to měl předtím, s tím rozdílem, že v jednom prohlížeči jsi to měl cca 10 pixelů pod obsahem "patičky" a v druhém cca 20 pixelů, takže jak by sis to představoval? Horizontální pozici si upravíš např. zadáním šířky a marginu 0 auto pro počítadlo... Každopádně udělal bych to celé přibližně takto (v případě, že bych psal statické stránky bez použití JS či PHP, ale samozřejmě každý by to napsal jinak). Našel jsem tam docela zásadní chyby, neříkám že já je nemám, ale vidím, že se s tím teprve seznamuješ, tak snad ti to aspoň trochu pomůže. S HTML5 prvky jako <head> či <section> atp., bych nepracoval vůbec (jak zmiňuje Chamurappi), stejně tak bych omezil CSS3 prvky co nejvíc, nebo alespoň to doplnil nějakým JS jako alternativu.
Poznámka: nezapomeň do přiloženého odkazu přidat tečku. Heslo je jakpsatweb. Všiml jsem si, že jsem tam zapomněl na logo, ale to by se doladilo. Jo a vzhledem k tématickému obsahu bych použil na hlavní textový obsah patkové písmo. A kdybys chtěl poradit, jak si zásadně ulehčíš práci s PHP, tak dej vědět. Poslal bych ti menší ukázku ve stylu tvojí stránky. |
||
| Filipos Profil |
eager_beaver:
„přesně takto jsi to měl předtím“ Měl jsem to tak, jak to uvidíš teď. ajkie.wz.cz. V chromu se mi to zobrazuje správně, v mozille a v IE se to počítadlo zobrazuje výš. „stejně tak bych omezil CSS3 prvky co nejvíc, nebo alespoň to doplnil nějakým JS jako alternativu.“ S JS jsem v úplných začátcích, takže vytvořit effect něco jako transition v CSS3 neumím. „Poznámka: nezapomeň do přiloženého odkazu přidat tečku. Heslo je jakpsatweb.“ když přidám tečku na konec linku, tak se mi ukáže stránka nenalezena... „A kdybys chtěl poradit, jak si zásadně ulehčíš práci s PHP, tak dej vědět. Poslal bych ti menší ukázku ve stylu tvojí stránky.“ PHP neumím vůbec... |
||
| Tomáš123 Profil |
#15 · Zasláno: 3. 12. 2014, 20:10:57
Filipos:
„když přidám tečku na konec linku, tak se mi ukáže stránka nenalezena...“ Preboha. Eager_beaver myslel medzi uloz a to, ale diskusia tento názov filtruje. Nepochopil som, kde presne chceš počítadlo umiestniť... Ide o túto medzeru (zvýraznená červenou)? Problém je v tom, že prvok poziciuješ absolútne na <body>, čo má za následok zmenu pozície pri zmene napr. výšky okna. Toto je riešenie, ktoré chceš, alebo si o tejto "chybe" nevedel? Pomocou je nastavenie relatívneho poziciovania (position: relative;) obaľovaciemu prvku. Prvok, ktorý touto vlastnosťou disponuje vytvára nový počiatok súradnicového systému, pre vnorené prvky s absolútnou pozíciou (position: absolute;).
Je možné, že niečo podobné vytvoril aj eager_beaver vo svojej ukážke. Aj keby áno, aspoň bude riešenie verejne dostupné. |
||
| Filipos Profil |
Tomáš123:
„Nepochopil som, kde presne chceš počítadlo umiestniť...“ Chtěl bych, aby to počítadlo "leželo" na patičce a dotýkalo se pravým okrajem divu s obsahem. Mně se to správně zobrazuje jen v chrome, v tvém případě „medzeru (zvýraznená červenou)“ je zase umístěno příliš dole. „Problém je v tom, že prvok poziciuješ absolútne na <body>“ Pozicování na body je to i v případě, když je to počítadlo v divu společne s divem "content"? Ono se pozicování nebere vůči nadřazenému divu? |
||
| Tomáš123 Profil |
#17 · Zasláno: 3. 12. 2014, 21:29:10
Filipos:
„je zase umístěno příliš dole.“ Za to môže to nenastavené relatívne poziciovanie. Aj keď som všetko upravil, prvok medzerou disponoval a ako môžeš vidieť, bolo to niečo ako vnútorný okraj. Vynulovať sa nedal. Zrejme je kdesi v kóde niečo zle napísané a takto si to hľadá cestu von (na riadku 23 chýba medzerník, ale to určite nespôsobuje nežiadúce správanie). Presnú príčinu pravdepodobne nenájdem. „Ono se pozicování nebere vůči nadřazenému divu?“ Nie, ak nadradenému divu neuvedieš position: relative;. Možno je prvok v chrome presne na čiare, lebo výška okna zodpovedá výške stránky (v Mozille je to rozdiel iba pár milimetrov). Skús prvku #wrapper-content nastaviť position: relative; a ak to zmení chovanie aj v Chrome, natvrdo zmeň hodnotu vlastnosti bottom pre prvok #pocitadlo.
|
||
| Filipos Profil |
#18 · Zasláno: 3. 12. 2014, 21:44:37 · Upravil/a: Filipos
Tomáš123:Nastavil jsem prvku #wrapper-content:position relative, prvku #pocitadlo:position absolute; bottom:30px; a způsobilo to
toto. Chamurappi: „Jde to samozřejmě vyřešit i bez hacků“ Jaké by bylo řešení bez hacků prosím? |
||
| Chamurappi Profil |
#19 · Zasláno: 3. 12. 2014, 22:19:37
Reaguji na Filipose:
To, na které jsem odkázal v té mé větě, kterou jsi právě odcitoval. Nevím, o čem si tu celou dobu povídají ostatní, já myslel, že chceš zrušit mezeru pod obrázkem… (← vidíš, zase ten odkaz, stačí kliknout!) |
||
| Filipos Profil |
#20 · Zasláno: 3. 12. 2014, 22:30:23
Chamurappi:
„Nevím, o čem si tu celou dobu povídají ostatní“ Mně nejde o tu 3pixelovou mezeru pod obrázkem, ale o to, že v IE a ve FF se to počítadlo zobrazuje o hodně výš než v chromu. Zkusil jsem vertical-align:bottom, ale to vyřešilo jen ty +-3 pixely, takže to nakonec v chromu opět zasahuje do patičky(neleží to na ní). Zkusil jsem img display:block, ale taky nic. |
||
| Trejpa Profil |
#21 · Zasláno: 4. 12. 2014, 00:10:33
Filipos:
„Chtěl bych, aby to počítadlo "leželo" na patičce a dotýkalo se pravým okrajem divu s obsahem.“ Do současného kódu na odkázané stránce [#7] stačí přidat wrapper-content { position: relative; } a funguje mi to podle zadání stejně v IE, FF i Chrome.
|
||
| Filipos Profil |
#22 · Zasláno: 4. 12. 2014, 00:31:12
Trejpa:
Super, děkuji mnohokrát! |
||
| Filipos Profil |
#23 · Zasláno: 4. 12. 2014, 18:56:05
Ještě malý dotaz, jak docílit, aby se v IE šířka divu content nezobrazovala větší než v ostatních prohlížečích?
|
||
| Tomáš123 Profil |
#24 · Zasláno: 4. 12. 2014, 19:25:32
Filipos:
„aby se v IE šířka divu content nezobrazovala větší než v ostatních prohlížečích“ Ak nepomôže prefix pre vlastnosť box-sizing, teda -ms-box-sizing, budeš musieť prerobiť štruktúru webu z takejto:
<div> <!-- div, ktorý má nastavený vnútorný okraj --> <nejake-prvky> <nejake-prvky> </div> na takúto: <div> <!-- určuje šírku prvku -->
<div> <!-- určuje vnútorný okraj, obaľovací prvok znemožní roztiahnutie do strán -->
<nejake-prvky>
<nejake-prvky>
</div>
</div>Pri druhom riešení už nebude box-sizing potrebný vôbec.
|
||
| Filipos Profil |
#25 · Zasláno: 4. 12. 2014, 19:28:59 · Upravil/a: Filipos
Tomáš123:
Děkuji eager_beaver: Když bys mi ukázal, jak si ulehčit práci s tím PéHáPéčkem, tak budu rád.. Ale říkám rovnou, že z něj neznám vůbec nic... |
||
|
Časová prodleva: 9 let
|
|||
0