| Autor | Zpráva | ||
|---|---|---|---|
| Alalala Profil |
#1 · Zasláno: 24. 4. 2013, 10:14:11
Ahoj,
můžu poprosit někoho znalého o pomoc? Stáhl jsem si šablonu webu (asi základní chyba) a upravil si jí ku obrazu svému. Ale narazil jsem na zásadní problém - upravoval jsem to na notebooku, kde je vše ok, ale při testování na telefonu (HTC Desire S) a následně na PC jsem zjistil, že tam se to zobrazuje špatně - ztrácí se kus menu. Viz obr. Takto to má vypadat (to je printscreen z notebooku): A takto to vypadá v Opera Mobile Emulátoru: Html kód stránky (část): <body id="page2">
<div class="body1">
<div class="main">
<!-- header -->
<header>
<div class="wrapper">
<h1><a href="index.php" id="logo"></a></h1>
<nav>
<ul id="menu">
<li class="first" ><a href="svatba.php">Svatba</a></li>
<li id="menu_active"><a href="svatebniden.php">Svatební den</a></li>
<li ><a href="hoste.php">Hosté</a></li>
<li ><a href="album.html" target="_blank">Album</a></li>
<li ><a href="dary.php">Dary</a></li>
</ul>
</nav>
</div>
<div>
<ul id="menu2">
<li class="first" id="menu2_active"><a href="svatebniden.php">Harmonogram dne</a></li>
<li ><a href="podrobnosti.php">Podrobnosti</a></li>
<li ><a href="zabava.php">Zábava</a></li>
<li ><a href="zvyky.php">Zvyky</a></li>
<li ><a href="doprava.php">Doprava</a></li><li ><a href="mapy.php">Mapy</a></li>
</ul>
</div>
</header>
<!-- / header -->
</div>
</div>article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {overflow:hidden}
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow: hidden;}
body {margin-top: -11px; background:url(../images/bg.jpg) 250px center repeat;border:0;font:20px Times;color:#000;line-height:20px}
.main { margin:0 auto;width:970px;}
#menu {float:right;background:url(../images/menu_bg.png) 0 0 no-repeat;width:660px;height:93px;margin-top:54px}
#menu li {padding-left:2px;background:url(../images/menu_line.png) 0 16px no-repeat;float:left;padding-top:16px;padding-bottom:5px}
#menu .first {background:none;padding-left:8px}
#menu li a {display:block;color:#000;text-decoration:none;line-height:55px;padding:0 22px;overflow:hidden; font-family: gabriola; font-size: 34px;}
#menu li a:hover, #menu #menu_active a {color: #3fc53f}
#menu2 {background:url(../images/menu2_bg.png) 0 0 no-repeat;width:902px;height:60px;margin-left:34px;margin-top: -5px;}
#menu2 li {padding-left:2px;background:url(../images/menu_line2.png) 0 5px no-repeat;float:left;padding-top:5px;padding-bottom:5px}
#menu2 .first {background:none;padding-left:8px}
#menu2 li a {display:block;color:#000;text-decoration:none;line-height:45px;padding:0 22px;overflow:hidden; font-family: gabriola; font-size: 28px;}
#menu2 li a:hover, #menu2 #menu2_active a {color: #3fc53f}Předem díky za všechny nápady. Aleš |
||
|
Časová prodleva: 4 dny
|
|||
| Alalala Profil |
#2 · Zasláno: 28. 4. 2013, 10:23:42
Ahoj,
nikoho nic nenapadá? Mě ještě napadlo, jestli to není tím, že využívám jen absolutní jednotky (px), ale to to asi nebude. Dělal jsem to tak už u jinejch webů a nikdy to nevadilo... Když použiju relativní a dám malý písmo, tak se tam ten text (to menu) krásně vejde (na ten telefon), ale pak zas zůstane mrňavý i v notebooku. To bych měl dělat zvlášť css pro každý zařízení?! To je snad blbost, ne? Díky... A |
||
| margin Profil * |
#3 · Zasláno: 28. 4. 2013, 11:33:19
Alalala:
„nikoho nic nenapadá?“ Mě napadá, že šablona používá Media Queries pro responsivní design, tedy různé styly pro různé rozlišení, přesněji podle šířky viewportu. http://www.zdrojak.cz/clanky/webdesigneruv-pruvodce-po-css3-media-queries/ „To bych měl dělat zvlášť css pro každý zařízení?! To je snad blbost, ne?“ Blbost to není. ale záleží na tobě, zda Media Queries budeš používat, nebo ne a jak se vypořádáš s různými rozlišeními cílových zařízení. Je možné, že jsem příčinu netrefil, pomohl by odkaz na živou ukázku |
||
| Alalala Profil |
#4 · Zasláno: 28. 4. 2013, 18:58:18
Díky za nápad, ale bohužel Media Queries to nebudou - i když to je moc pěkný a jednoduchý řešení - pokud tohle vyřeším, možná jich pak využiju.
Živou ukázku (okuchanou, ale pro tohle dostatečnou) jsem nahrál sem: http://beinco.ic.cz/index.php Díky moc. |
||
| aDAm Profil |
#5 · Zasláno: 29. 4. 2013, 08:34:37
Tak pokud dobře vidím tak je tam pouze problém s tím sekundárním menu kdy se nevejde na řáde a spadne pod něj ne? Tak buď udělat do css podmínku podle viewportu kdy se pro takto malou šířku zmenší písmo, a nebo to skrýt a nebo poupravit background menu tak aby byl i přes dva řádky a nebo měnit vzhled menu podle velikosti viewportu.
|
||
| margin Profil * |
#6 · Zasláno: 29. 4. 2013, 09:06:08
Primární problém není ve velikostí viewportu, ale vznikl proto, že písmo použité v simulátoru Opera Mobile má jinou metriku. Pokud si v počítači pro menu nastavím pro menu (případně pro vše) písmo Arial, dostanu výsledek, který (až na drobnosti) odpovídá screenshotu z Opera Mobile.
|
||
| Alalala Profil |
#7 · Zasláno: 29. 4. 2013, 18:15:41
Skvělé, díky, Margine, to je přesně ono. Je to jen tím písmem. Vyřešil jsem to pomocí @font-face.
|
||
|
Časová prodleva: 11 let
|
|||
0