| Autor | Zpráva | ||
|---|---|---|---|
| TechniX Profil |
#1 · Zasláno: 5. 2. 2014, 19:35:18
Ahoj, už mnoho lidí se setkalo při zvětšování a zmenšování stránky v prohlížeči s chybou že divně poskakují písma a kolikrát i s přetékáním textu mimo blok... Takových dotazů jsou tu kopice, ale jaké je skutečné řešení ? Setkal jsem se s tím bohužel i já, i když je stránka validní tak je to samozřejmě prd platné ... je to boj nad kterým už laboruji delší dobu proč se tomu tak děje a pročetl i nějaký ty články a zatím jsem nedošel k úplnému vyřešení problému...
Už jsem si radši pro pokus na svém serveru vytvořil další lacinou stránku s základním rozvržením div základních 3 bloků a nadefinování textu a pak jsem zkoušel zvětšovat a zmenšovat a text při určitých procentech zvětšení se chová pochybně poskakuje.. už jsem zkoušel jak nastavení textu v px, procenta, jednotka em, v mm vše je prd platné funguje to stejně, i když to nechápu proč a snad by ani nemělo :( ... přetékání textu se dá vyřešit co jsem vyčetl přes Overflow - hidden což je sice fajn, ale při zvětšování a zmenšování to osekne část textu/článku a to není řešení přít o část textu :) a přes funkci scroll je sice hezké že tam je posuvník, ale v rozvržení designu mít všude posuvník není vůbec hezké. Odkaz na základně vytvořenou stránku je zde: http://starevraky.cz/test.php Zkuste si prosím zvětšovat a zmenšovat stránku jak se to chová u vás na prohlížečích a co by jste tam tak zhruba změnily ? Já to zkoušel jak v Google Chrome tak i v Firefox vše nové verze aktuálně stažené. Na homepage domény stránky to mám rozpracované a snažil jsem se o opravy, dříve než začnu psát články a už jsem za tu dobu nedokázal to opravit, tak radši jsem vytvořil jednoduchou stránku kde to budeme nějak se pokoušet opravovat, kde když se něco podělá nic se neděje. Kód toho všeho je zde: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez názvu</title>
<style type="text/css">
<!--
#apDiv1 {
position:relative;
left:71px;
top:52px;
width:800px;
height:672px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:177px;
z-index:2;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
line-height: 16px;
overflow: hidden;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000;
text-decoration: none;
word-spacing: 0px;
letter-spacing: 0px;
display: block;
text-align: left;
float: left;
clear: left;
visibility: visible;
right: 0px;
}
#apDiv3 {
position:absolute;
left:0px;
width:800px;
height:471px;
z-index:3;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 16px;
overflow: hidden;
right: 0px;
bottom: 0px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000;
text-decoration: none;
letter-spacing: 1px;
text-align: left;
word-spacing: 1px;
display: block;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">
<p>TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789</p>
<p>TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789</p>
<p>TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789</p>
<p>TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789</p>
</div>
<div id="apDiv3">TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789<br />
TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789 TEXT 123456789</div>
</div>
</body>
</html>Co podle vás je špatně a co je třeba předělat na něco jiného ? Jde o jednoduchý splácaninu na rychlo, ale snad určité kódy z toho budou vidět. Já už si nevím z toho všeho rady a proto už se obracím na vás. :( Kam šáhnout a na co se už zaměřit .. Nastavoval jsem písmo, jednotku, velikost řádku, mezeru od sebe atd .. |
||
| juriad Profil |
Řešení je jednoduché. Nepoužívej position: absolute. Nech prvky ať se vykreslují za sebou, tak jak potřebují. A nenastavuj ani pevnou výšku.
Vzdálenosti mezi prvky řeš pomocí marginu. |
||
| TechniX Profil |
#3 · Zasláno: 5. 2. 2014, 19:48:48
juriad:
Děkuji za rychlou odpověď. Jak bych teda měl řešit position ? hodnotou relative ? Vykreslování za sebou bych měl pokud se nepletu každý div označit i patřičným za sebou Z-indexem že ? Jinak k pevné výšce je pravda že to mě opravdu dlouho štvalo, protože jsem musel u každé stránky nastavovat podle délky článku jinou šířku jak hlavní stránky tak i buňky a to mě dost štvalo :( Díky vyzkouším i ten margin, i když na hlavním homepage webu funkci margin používám, ale je pravda že vše mám pod absolutní pozici a i pevně nastavenou šířku a výšku bloku... |
||
| juriad Profil |
Nepoužívej pozicování vůbec, nebo si myslíš, že ho potřebuješ?
Nesnaž se napasovat web na pozadí, ale naopak: pozadí přízpůsobuj prvkům. Ve skutečnosti nechceš pravidla: div na pozici x=150px, y=230px ale naopak: div má být na středu, mezi divy má být mezera 20px apod. |
||
| TechniX Profil |
#5 · Zasláno: 5. 2. 2014, 19:58:49
juriad:
No abych pravdu řekl asi takhle to mám celé postavené: je to vše z divu: http://starevraky.cz/ u všeho mám position absolute a nastavené pevné rozměry ... takže říkáš že odebrat natvrdo position u všeho ? |
||
| juriad Profil |
Ano, všechny styly: top, left, right, bottom, text-align, width, height, position, float, clip, overflow můžeš vyhodit pro začátek všude!
Tím se ti spraví zvětšování textu, ale grafika většinou zůstane zachovaná. Pak můžeš znovu začít budouvat layout: Vyhodit ten center. Strance nastavit šířku (nedávej ji zbytečně velkou) a margin:auto, který zajistí její vystředění. Všechny paticka-text-něco budou mít float: left, width:33%; paticka-konec bude mít clear:both Také můžeš vyhodit ten nesmysl s tabulkou; prostě za nadpis <h2>Je jedno jestli jsi starý a nebo mladý, každý může začít! Máš doma vrak ?</h2> dej <img style="float: right"> a všechen text jej bude obtékat zleva. Další věci: Nemíchej patkové a bezpatkové písmo. Kecy typu "Optimalizováno pro IE7+, Mozilla Firefox, Opera Browser, Google Chrome • Doporučené rozlišení 1280x1024" si strč za klobouk. Ukazuješ tím jen, že nejsi schopný udělat web tak, aby fungoval všude a všem. |
||
|
Časová prodleva: 3 dny
|
|||
| TechniX Profil |
#7 · Zasláno: 8. 2. 2014, 10:06:15
juriad:
Díky za odpovědi, už delší dobu o tom přemýšlím co a jak a zatím jsem z toho úplně paf .. Do webu zatím zasahovat nebudu, protože to co jsi vše vyjmenoval, kdybych odstranil tak se to vše rozhodí a bude z toho jeden velký hnus .. Zkusil jsem si nanečisto tvořit něco základního, ale narazil jsem na problém že když chci mít více divů jako by v jedné lince tak nevím jak to nastavit, když nemohu použít absolutní hodnotu ... margin mám třeba 0px od hora, ale hodí se to pod řádku toho vrchního divu ... http://starevraky.cz/text1.php Šlo by nějak poradit nebo případně vytvořit nějaký příklad ? Určitě jsem tam na něco zapomněl, ale teď v tuhle chvíli fakt nevím jak dále.. Třeba už v Google Chrom při zmenšení stránky při 33% se to už celé rozhodí, je mi jasné že nikdo si nebude to takhle zmenšovat k nečitelnosti, ale nevím jestli je to chyba nad kterou se mám pozastavovat a nebo je to vlastnost prohlížeče.. :( |
||
| juriad Profil |
#8 · Zasláno: 8. 2. 2014, 10:37:18
Třeba takto; přidej pomlčku na konec pro ukázku ve velkém okně.
http://kod.djpw.cz/nsbb |
||
|
Časová prodleva: 10 let
|
|||
0