Как сохранить все элементы на разных разрешениях - HTML / CSS3

Question

Как сохранить все элементы на разных разрешениях - HTML / CSS3

0

Я уже давно работаю над этим макетом страницы, размещая все элементы в определенных позициях, однако, когда я либо изменяю размер браузера, либо меняю его на другое разрешение, все перемещается. Кто-нибудь знает, как это исправить? Вот мои коды 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;
 }

Пожалуйста помоги!

Radx 11 нояб. 2013, в 20:51

Источник

1

Добавьте определенную ширину к вашему body чтобы ваша страница получала полосу прокрутки при изменении размера окна.
putvande 11 нояб. 2013, в 19:20

Теги:

html

css

page-layout

1 ответ

Ещё вопросы

Добавьте определенную ширину к вашему body чтобы ваша страница получала полосу прокрутки при изменении размера окна.

M. iOS · Answer 1 · 2013-11-11T19-52-00.000Z

Добавьте медиа-запросы к своим CSS следующим образом:

@media screen and (max-width:1000px){
     #your_id{
        margin: 0 0 0 10%;
     }
}

См. Это