Убедитесь, что веб-страница выглядит одинаково при изменении размера - PullRequest
Новая
       24

Убедитесь, что веб-страница выглядит одинаково при изменении размера

0 голосов
/ 11 января 2011

Мне не удалось найти предыдущую запись по этому поводу, и я прошу прощения, если это вопрос uber-n00b.

Я работаю над своим первым учебным сайтом (сейчас только XHTML и CSS / 3). Я хотел проверить страницу, чтобы убедиться, что при уменьшении размера окна браузера все по-прежнему выглядит одинаково. Когда я это сделал, моя навигационная колонка перекрывала часть страницы, и фоновое изображение, которое я встроил в заголовок h1, не заполняет всю ось X до конца вправо.

Что я сделал не так, и как я могу исправить это правильно (веб-стандарты)?

P.S ... Вот код 

h1 { 
  font-size: x-large; 
  color: white; 
  padding-top: 2em; 
  padding-bottom: .2em; 
  padding-left: .4em; 
  margin: 0; 
  background: navy url(backgrounds/header-bg.jpg) repeat-y right; 
} 

#navigation { 
  width: 180px; 
  height: 484px; 
  background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat; 
}

Ответы [ 3 ]

0 голосов
/ 11 января 2011

Попробуйте задать фиксированную ширину основного контейнера или самого тела. 

body{
    width:1000px;
}

Если вы разместите свой текущий код, мы можем предложить вам лучшее решение.

0 голосов
/ 11 января 2011

Ну, это будет комментарий, но я просто продолжал ...

Перекрытие столбца nav наиболее вероятно, потому что оно определено с фиксированной шириной (px или em (которые установлены для этой цели)), а не как единица измерения, например, в процентах. При всем уважении к Дэвиду Стрэттону (и он прав, на этот вопрос нужно отвечать очень подробно), попробуйте построить свой макет, используя проценты, когда это уместно, чтобы страница хорошо масштабировалась.

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

Попробуйте поискать в Интернете с помощью гибкого веб-дизайна макета страницы

0 голосов
/ 11 января 2011

Есть несколько стратегий. Это действительно искусство, и оно слишком сложное, чтобы отвечать на него полностью. Это то, над чем веб-дизайнеры занимаются годами, и вы разработаете свой собственный стиль и стратегию, но в Интернете можно найти хорошие рекомендации и лучшие практики.

Я бы начал с этого поиска:

http://www.bing.com/search?q=web+design+gracefully++resize&src=IE-SearchBox&FORM=IE8SRC

Это первый действительно хороший результат этого поиска: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript

но есть и другие хорошие результаты.

...