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

Я построил веб-сайт в формате 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>

БЛАГОДАРЯ.

источник

2010-07-29 George

Чрезвычайно сложно точно узнать, в чем проблема, не глядя на код, можете ли вы опубликовать его или, по крайней мере, соответствующую часть? Кроме того, вы можете объяснить, что вы подразумеваете под «... беспорядками с компонентами сайта». Что именно происходит? – jordanstephens

Код добавлен. Кнопки навигации не остаются на месте. Они перемещаются при изменении размера окна браузера. – George

Многое может быть причиной здесь ... каковы теги изображений? div? для чего это определение стиля? quick bandaid: поместите навигационную панель в таблицу, все в одну строку, чтобы она не обернулась. – Fosco

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

#nav { 
width: 500px; 
}

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

Если вы сказали, что у вас также есть текст в ваших ссылках и используйте image replacement technique для отображения ссылок в виде изображений/графики.

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

источник

2010-07-29 19:31:23

Спасибо! Оно работает! :) – George

-1

<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>

источник

2010-07-29 19:24:03 Fosco

-1, таблицы не должны использоваться для компоновки. –

Говорит, что вы .. Нет правила. – Fosco

Нет правила *, но мне не нравится ужасная практика, которая работает против развития Интернета. Использование таблиц для макета полностью игнорирует самую основную концепцию (X) HTML. В спецификации также указано, что * Таблицы не должны использоваться исключительно как средство для компоновки содержимого документа [...] *, так что sortof - это правило в конце концов. –

Комплект min-width на вашем контейнере (или навигация).

источник

2010-07-29 19:29:03 Marwelln

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

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

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

источник

2010-07-29 19:30:07 Pat

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

ответ

Смежные вопросы