При изменении размера окна браузера

Question

Я создал сайт на HTML и CSS, и всякий раз, когда я изменяю размер окна браузера (меньше), он портится с компонентами сайта, такими как панель навигации.Панель навигации представляет собой серию изображений, связанных с пунктом назначения с помощью <img src=.Любая идея, как исправить эту раздражающую вещь?

Код для панели навигации ниже:

<br />
<div id="nav"> 
   <a href="/"><img src="Home.png" /></a> </a>
 <a href="/blog"><img src="=blog.png" /></a> </a>
 <a href="register.php"><img src="adopt.png" /></a> </a>
 <a href="user.php"><img src="useradmin.png" /></a> </a>
 <!-- <a href="login.php"><img src="\logout.png" /></a> </a> -->
 <a href ="places.php"><img src="map.png"/></a> </a>
  <a href ="login.php?logout"><img src="logout.png"/></a> </a>
 <!--- <a href ="login.php"><img src="q.png"/></a> </a> -->
</div>

Спасибо.

Answer 1

Вы должны задать свой контейнер меню (#nav) шириной в таблице стилей, например:

#nav { 
width: 500px;
 } 

Таким образом, ваше меню никогда не будет уменьшаться ниже указанного размера, и раскладка (в данном случае меню) не будет нарушена.

Когда это сказано, вы также должны иметь текст в своих ссылках и использовать некоторую технику замены изображений для отображения ссылок в виде изображений / графики.

У вас также есть синтаксические ошибки в вашем коде; Вы закрываете все якорные элементы дважды.

Answer 2

Установите min-width в вашем контейнере (или nav).

Answer 3

Установите ширину вашего контейнера #nav, равную всей ширине добавленных кнопок навигации.Например:

#nav {
    padding: 0;
    margin: 0;
    width: 150px;
}

#nav a img {
    width: 25px; /* 6 buttons at 25px = 150px total */
    border: 0;
}

Answer 4

<br /> 
<div id="nav">  
<table border=0 cellpadding=0 cellspacing=0>
<tr><td>
  <a href="/"><img src="Home.png" /></a>
</td><td>
  <a href="/blog"><img src="blog.png" /></a>
</td><td>
  <a href="register.php"><img src="adopt.png" /></a>
</td><td>
  <a href="user.php"><img src="useradmin.png" /></a>
</td><td>
  <a href="places.php"><img src="map.png"/></a>
</td><td>
  <a href="login.php?logout"><img src="logout.png"/></a>
</td></tr>
</table>
</div>