Autor Zpráva
Alalala
Profil
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>
CSS:
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}
To je snad vše důležuté. Vliv na to má rozhodně ten wrapper, ale nevim, co s tím.

Předem díky za všechny nápady.
Aleš
Alalala
Profil
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 *
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
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
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 *
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
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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