Autor Zpráva
Filipos
Profil
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
Filipos:
Proč to chceš? Web přece má vypadat stejně bez ohledu na to, který prohlížeč jej zobrazuje.
Filipos
Profil
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
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
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 */
}
Tyto vlastnosti naopak odstraň ze stylopisu pro #footer.
Chamurappi
Profil
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
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
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
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
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
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
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
Trejpa:
Super, děkuji mnohokrát!
Filipos
Profil
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
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
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...

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: