CSS Lyout pro zobrazení v hlavních prohlížečích

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod Gooorila 8. 8. 2015 12:50

Zdravím

Nejsem tvůrce webových stránek a moc se v tom neorientuji. Před pár lety jsem si nějakou stránku udělal a již tehdy jsem narážel na problém zobrazení CSS v různých prohlížečích, kdy IE zobrazoval jinak než Firefox a podobně. Řešilo se to různými pomocnými kódy a podobně.

Nyní potřebuji vytvořit jakési sledování ve výrobě a ovládací rozhraní je webová stránka, která bude zobrazena jak na PC, tak na tabletu, možná využiji nějakou distribuci na Raspberry Pi. Udělal jsem jen základní layout a doufal jsem, že s novými verzemi prohlížečů je problém vyřešen, takže jsem pomocí CSS poskládal různě veliké boxy vedle sebe, jak potřebuji.

Tvořím v editoru a zobrazuji výsledek v jeho prohlížeči, kde je vše OK a teď jsem zkusil kouknout na to v chrome a je to samozřejmě rozházené.

Můj dotaz zní, zda jde nějak jednoduše vytvořit layout, který správně interpretují webové prohlížeče. Třeba nějaký WYSIWYG editor CSS kódu? Nebo nějaká obezlička, která vynuluje nastavení prohlížečů a nastaví jim všem stejné?
Gooorila
Junior

Odeslat příspěvekod kostal.david8 8. 8. 2015 14:21

Co je to za editor?
kostal.david8
Kolemjdoucí

Odeslat příspěvekod Just_jo 8. 8. 2015 16:03

Řekl bych, že kromě dřívějších problémů u IE kdy u formátu png zobrazoval mírně odlišné barvy, je vše zobrazeno téměř stejně.

Máš pár řešení:
1. Nechat to na někom, kdo se tomu věnuje
2. Trápit se a naučit se to
3. Poslat to sem a řešit konkrétní problém ( když nevidíme tvůj HTML a CSS tak není co řešit )
Just_jo
Junior
Uživatelský avatar

Odeslat příspěvekod Gooorila 8. 8. 2015 20:02

Editor je: Doctors HTML Editor (http://editor.2b.cz/). Moc toho neumí, ale je pro mě již několik let vyhovující. Editory typu PSP jsou asi mnohem lepší, ale strašně přeplácané a nedokázal jsem kloudně nic udělat.
Gooorila
Junior

Odeslat příspěvekod Just_jo 9. 8. 2015 15:57

Ohledně toho programu : používá jádro IE, takže v IE to bude zobrazovat správně - ale jinde - to záleží jak je napsáno css.
Dodej html a css a uvidíme
Just_jo
Junior
Uživatelský avatar

Odeslat příspěvekod kolemjdouci2014 9. 8. 2015 16:48

Uz peknych par let prohlizece realizuji stranky stejne. Samozrejme, sem tam nejaka odlisnost bude, ale dnes je to proste ve vetsine pripadu ok.
kolemjdouci2014
Junior

Odeslat příspěvekod Gooorila 9. 8. 2015 17:40

Zkoušel jsem to v IE, nově i v Edge, ale nezobrazuje se mi to stejně, jako v editoru. Pravděpodobně to ale bude špatným pochopením CSS. Můj kód vypadá například takto:
Kód: Vybrat vše
.LAYOUT_1   { text-align: left; width: 100%; border: 0 0 0 0px; padding: 0 0 0 0px; float: left; font-size: 12px;}
.LAYOUT_1_1   { text-align: left; width: 60%; border: 0 0 0 0px; padding: 20 20 20 20px; float: left; font-size: 40px;}
.LAYOUT_1_2   { text-align: right; width: 10%; border: 0 0 0 0px; padding: 10 10 10 10px; float: left;}
.LAYOUT_1_3   { text-align: left; width: 10%; border: 0 0 0 0px; padding: 10 10 10 10px; float: left;}
.LAYOUT_1_4   { text-align: right; width: 10%; border: 0 0 0 0px; padding: 10 10 10 10px; float: left;}
.LAYOUT_1_5   { text-align: left; width: 10%; border: 0 0 0 0px; padding: 10 10 10 10px; float: left;}


Mám pět boxů vedle sebe, každému nastavím šířku v procentech a dohromady mi dávají 100%. V editoru je to takto OK. Když to pustím separátně v IE, v Edge a Chrome, vždy to je rozhozené a poslední box je pod tím vrchním. Délkou textu to není, že by se tam nevešel, zkoušel jsem jen podbarvovat boxy bez textu a viděl jsem, jak se skládá. Problém mi tam dělá padding. Ten když nastavím na samé nuly, tak se to zobrazuje OK.
Gooorila
Junior

Odeslat příspěvekod x-rated 9. 8. 2015 18:09

proboha dyť ti za těma prvníma třema hodnotama paddingu chyběj jednotky :D jenom u nuly se nepíšou
Dell UP2715K 27" AH-IPS 5120x2880 • Asus Maximus VIII Gene • Intel Core i7-7700K @ 5 GHz • Corsair Vengeance @ 3,6 GHz, 32 GB • Samsung 960 Pro - 1 TB • Creative SoundBlaster X-Fi Titanium HD • MSI GTX 1080 Ti Gaming X @ 2/11 GHz
x-rated
Junior
Uživatelský avatar

Odeslat příspěvekod Gooorila 9. 8. 2015 20:49

Hmmm, to jsem nevěděl. Někde jsem viděl ty hodnoty takto, tak jsem to používal. Podle mého názoru to ale fungovalo i tak.

Každopádně, když jsem to upravil, tak to nepomohlo. Jednoduše:
Udělám box, kterému dám šířku 1000px
Do něj udělám další box, který má šířku 100%
Do něj dám další dva boxy a každý má šířku 50%

Takhle to všechno funguje správně a boxy jsou vedle sebe v boxech, jak to potřebuji. Ve chvíli, kdy do těch dvou boxů vložím specifikaci padding větší, než 0, již se to rozhodí a boxy jsou pod sebou. Jediné co mohu je, že zmenším šířku posledních vnořených boxů z 50% na třeba 45%, ale to mi nepřijde moc logické.

Buď špatně chápu padding, nebo něco dělám špatně. Nevím, jestli to mám ještě řešit dalším vnořeným boxem, který mi nahradí ten padding, jako kdysi pixy?
Gooorila
Junior

Odeslat příspěvekod milandar 9. 8. 2015 21:09

V skutocnosti default pre sirku boxu v html nastavena s CSS nie je iba [width] + [width] + ... ale je to [padding-left + width + padding-right] + [padding-left + width + padding-right] + ...

Ak pridas do css nasledujuce pravidlo, tak padding bude vyratany vzhladom na sirku boxu a nebude pridavat dalsie pixely navyse.
Kód: Vybrat vše
* { box-sizing: border-box; }


Lepsie ako v tychto integrovanych prehliadacoch v editore je otvorit si to html v Chrome napr otvorit developer tools (najlahsie pravy klik a vybrat inspect element). Tieto tooly ti ukazuju co je ako siroke a podobne.
milandar
Kolemjdoucí

Odeslat příspěvekod Just_jo 9. 8. 2015 21:58

Určitě by bylo vhodné poznamenat, že pokud není potřeba např. border nebo padding/margin mít odlišné hodnoty - postačí pouze jedna hodnota - nemusí se psát 4x ta samá
Just_jo
Junior
Uživatelský avatar

Odeslat příspěvekod Haunter 10. 8. 2015 08:59

Vývoj webových aplikací/stránek MUSÍ probíhat tak, že po uložení souboru dáš ctrl+F5 v prohlížeči - třeba v Chrome... pokud firma preferuje IE, můžeš si ušetřit práci kontrolou rovnou v IE. Tomuhle se prostě nevyhneš.

Ale stejně nad bastlením v nějakém WYSIWYG editoru strávíš daleko víc času než normálním programováním plus to nikdy nebude 100% funkční. Prostě pokud chceš něco udělat, budeš se muset ty základy naučit. Taky v matice nederivuješ bez znalosti třeba násobení...
Haunter
Junior
Uživatelský avatar

Odeslat příspěvekod Gooorila 13. 8. 2015 20:36

milandar píše:V skutocnosti default pre sirku boxu v html nastavena s CSS nie je iba [width] + [width] + ... ale je to [padding-left + width + padding-right] + [padding-left + width + padding-right] + ...


To jsem nevěděl. Děkuji všem za pomoc a Milandarovi zvlášť za vysvětlení a tip na alternativu.
Gooorila
Junior


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků