しばらくの間、このページ レイアウトに取り組んでおり、すべての要素を特定の位置に配置していますが、ブラウザーのサイズを変更したり、別の解像度に変更したりするたびに、すべてが移動します。誰でもそれを修正する方法を知っていますか? ここに私のHTMLとCSSコードの両方があります:
HTML:
<body>
<a> href="link"><img id="logo" src="images/umass.gif" alt="UMASS Boston"></a>
<nav id="top_bar">
<ul>
<li><link>Home</a></li>
<li><link>Admissions</a></li>
<li><link>Tuition and Fees</a></li>
<li><link>Our Campus</a></li>
</ul>
</nav>
</body>
CSS:
#top_bar {
margin:1em 0;
margin-left: 70em;
list-style:none;
/* Lucinda Grande is the font used on the website from Apple. */
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
letter-spacing:-0.5px;
font-size:13px;
/* Apply a subtle text-shadow to the text */
text-shadow: 0 -1px 3px #202020;
width:426px;
height:.5px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
}
助けてください！