| Autor | Zpráva | ||
|---|---|---|---|
| miropiro Profil |
#1 · Zasláno: 31. 3. 2016, 11:06:17
Dobrý den, rád bych vylepšil tuto stránku www.gotobrno.cz/mapy-a-pruvodci/t1165, neboť v současnosti při zobrazení na mobilním telefon není uspořádána zcela dokonale. Proto zkouším na základě stránky www.w3schools.com/html/html_responsive.asp vytvořit novou verzi stránky. Testování je zde www.gotobrno.cz/testovaci-piskoviste. Problém však je v tom, že při určité velikosti okna prohlížeče se zobrazuje hned nahoře nechtěně "Podobné objekty", které jsou jinak hezky dole. To by se dalo vyřešit možná i šířkou celého nadobjektu, kterou jsem přidal, jenže i ta zřejmě bude muset být zadána ve více variantách.
Tím se dostávám k otázce - jak zapsat vlastnost tak, aby při určitém rozlišení (rozumějte velikosti okna, že) se určitý objekt choval třeba tak, že jeho šířka bude 33,33 % nebo 100 %? Pokud bych měl přístup rovnou do zdrojového kódu, respektive k css souboru, tak si vytvořím nezávisle nové definice k objektům, to však nemohu, protože tento přístup nemám. Dá se to tedy nějak ošulit? Děkuji předem za rady... |
||
| Chamurappi Profil |
#2 · Zasláno: 31. 3. 2016, 11:48:36
Reaguji na miropira:
„Problém však je v tom, že při určité velikosti okna prohlížeče se zobrazuje hned nahoře nechtěně "Podobné objekty", které jsou jinak hezky dole.“ Pokud není žádoucí, aby nadpis byl vedle plovoucích elementů, proč není vyclearovaný? To by mi přišlo jako rozumnější řešení, než šulit šířky. „jak zapsat vlastnost tak, aby při určitém rozlišení (rozumějte velikosti okna, že) se určitý objekt choval třeba tak, že jeho šířka bude 33,33 % nebo 100 %?“ Podobných zápisů máš v CSS hodně – viz @media ve tvých stylech. Jinak u šířky také existují vlastnosti min-width a max-width.
„Pokud bych měl přístup rovnou do zdrojového kódu, respektive k css souboru, tak si vytvořím nezávisle nové definice k objektům, to však nemohu, protože tento přístup nemám.“ K čemu tedy máš přístup? Bez zásahů do CSS těžko CSS upravíš. Podotýkám, že CSS nemusí být jen v externím souboru, ale že může být i uvnitř elementu <style> (kde může být i @media) nebo atributu style (kde @media nejde použít).
Mimochodem, je to docela pomalá stránka… zase takový stokrát dobrý dort, do kterého je přimícháno milion zbytečností (přes 1 MB skriptů!). Tohle bych na mobilu načítat nechtěl. „Proto zkouším na základě stránky www.w3schools.com/html/html_responsive.asp vytvořit novou verzi stránky.“ Na odkázaném návodu jsem nenašel nic, co by tvůj případ připomínalo. Tak či tak doporučuji vyhýbat se W3Schools, občas jsou tam blbosti. |
||
| miropiro Profil |
#3 · Zasláno: 31. 3. 2016, 12:17:04
Chamurappi: Přístup mám těžce limitovaný, jediné, co mohu udělat, je zkusit vložit kód do sekce pro editaci článku takto:
<p>
<style type="text/css">
.city {
float: left;
margin: 10px;
padding: 10px;
width: 300px;
height: 300px;
border: 1px solid black;
}
.cover {
width: 109%;
} </style>
</p>
<h1>
Responsive Web Design Demo</h1>
<h2>
Resize this responsive page!</h2>
<div class="cover">
<div class="city">
<h2>
London</h2>
<p>
London is the capital city of England.</p>
<p>
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>
Paris</h2>
<p>
Paris is the capital of France.</p>
<p>
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
</div>
<div class="city">
<h2>
Tokyo</h2>
<p>
Tokyo is the capital of Japan.</p>
<p>
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
<div class="city">
<h2>
View Source</h2>
<p>
View the source code to see how this page was built.</p>
</div>
</div>Jenže mne nenapadá, jak do toho style narvat ten parametr pro media, zatím mi to nefunguje. Ale je to jediné, do čeho mohu zasáhnout. A ano, vím sám, že ten web je příšerně robustní, ale to už je také vizitka dodavatele. |
||
| Kubo2 Profil |
#4 · Zasláno: 31. 3. 2016, 17:36:33
miropiro:
„Jenže mne nenapadá, jak do toho style narvat ten parametr pro media...“ @media (max-width: ...) {
selektor {
css-vlastnost: hodnota;
...
}
} |
||
| miropiro Profil |
Kubo2: Takto to asi nepůjde...
Vložil jsem tedy kód: <p>
<style type="text/css">
.city {
float: left;
margin: 10px;
padding: 10px;
width: 300px;
height: 300px;
border: 1px solid black;
}
.cover {
width: 109%;
}
@media (max-width: 400px) {
.cover {
width: 160%;
}
} </style>
</p>PS: Ten odstavec vkládá systém sám automaticky. |
||
|
Časová prodleva: 8 let
|
|||
0