html - Menu div を真ん中に広げて小さな画面で作業する

Question

クライアントのウェブサイトを構築していますが、解決できない最後の問題の 1 つはメニューの問題です。これは他の人にも役立つと思います。

メニューdivの中に 3 つの があります (親は adivです)。少し短縮したコードを次に示します。

<div id="header">
    <div id="logo"><img src='logo.png' /></div>
    <div id='languageSELECT'>LANGUAGE SELECT</div>
    <div id="Menu">
        <ul id="menu_noya">
            <li class="head_item">
                <a href="index.php?page=Women">{$language["MenuWomen"]}</a>
                <ul>
                    <li><span style='color:#352618;font-family:tahoma;font-size:11px;font-weight:bold;'>{$language["InMenuWomen"]}</span></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women1.jpeg' style='height:170px;width:120px;' /></a></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women2.jpeg' style='height:170px;width:120px;' /></a></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women3.jpeg' style='height:170px;width:120px;' /></a></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women4.jpeg' style='height:170px;width:120px;' /></a></li>
                </ul>
            </li>
            <li class="head_item">
                { like this 5 more times } ...
            </li>
        </ul>
    </div>
</div>

CSS:

#LanguageSelect
{
    float:right;
    width:150px;
    margin-top:65px;
    padding-right:10px;
}

#menu_noya, #menu_noya ul {
    list-style: none;
    z-index:1;
}

#menu_noya, #menu_noya * { 
    padding: 0; margin: 0;
}

#menu_noya li.head_item {
    float:left;
    width:142px;
    margin-left: -1px;
    text-align:center;
}

#menu_noya li.head_item a {
    display: block;
    color:#62E1E3;
    text-align:center;
    font-weight:lighter;
}

li.head_item ul { 
    position:absolute;
    display: none;
}

li.head_item:hover ul {
    margin-right:50px; 
    position:absolute;
    display: block; 
    width:150px;
    background-color:#ececec;
    border-right:8px solid #352618;
}

#header {
    background-color:#352618;
    height: 100px;
    width:100%;
    text-align: center;
    position: relative;
}

#logo
{
    float:left;
    width:250px;
    height:80px;
    margin-top:12px;
    margin-left:15px;
}

#Menu {
    font-size:16px;
    margin: 0 auto;
    padding-top:65px;
    display:inline-block;
}

---

問題は次のとおりです。

• 解像度が小さい小型のラップトップ (13 インチまたは 11 インチ) では、中央のメニューがヘッダーからはみ出すdivため、ヘッダーに含まれず、ヘッダーの下に表示されます。これはiPadでもiPhoneでも同じです。

• 一部の PC およびラップトップでは、要素logoとlanguageSELECT要素を同じ幅にする必要があるため、メニューがページの中央にありません。メニューはロゴと言語選択の中間にありますが、ページの中央ではありません。

クエリを実行しようとしました@mediaが、非常に「一般的」で、一部のデバイスでは機能しますが、他のデバイスでは機能しません。それは私ができる特定のデバイスで機能しますが、他のデバイスはどうですか?

ここでの主な目的は、メニューを指定された幅の 100% にすることです。私の解像度が 1024px であると仮定しましょう。ロゴ用に 250px と言語選択用に 150px がある場合、残りは 624px です。メニューがその 624px の 100% に広がるようにします。

ちょっとした追加の質問: 私の Web サイトでは、小さいテキストが非常にぼやけて見えます。アンチエイリアスがかかっていないためです。小さいフォント サイズで機能する、Times New Roman のような適切なフォントはありますか?