Правильное отображение по всех разрешениях

@Bratiwka · Регистрация: 07.09.2014

Author24 — интернет-сервис помощи студентам

Доброго времени суток, дорогие друзья. Кто-то, расскажите, пожалуйста как сверстать правильно сайт, который будет отображаться одинаково во всех разрешениях. Перерыл весь интернет, везде все вокруг да около. Мне бы все пошагово обьяснить, потому как понимание очень прозрачное, пока что (все элементы расставлял до сегодняшнего дня позиционированием и даже не знал, о таком понятии как "каркасс").

Добавлено через 1 час 26 минут
Еще такой вопрос: в каком случае рекомендуется использовать :margin , а когда position ?

@Сет · 30.11.2014, 08:20

margin и position это абсолютно разные теги.
Margin позволяет "отталкивать" элемент (div например) от другого дива.
Position определяет поведение элемента в потоке.

@Codey · 30.11.2014, 10:06

Если размер экрана стоит в приоритете, то нужно использовать единицы em, или %. Приведу пример. Допустим у нас есть 1 блок div.

HTML5

1	<div id="block">Тут масштабируемый текст</div>

Чтобы этот блок и содержащие его элементы масштабировались, нужно установить все измерения в em(Это единица больше привязана на читабельность шрифта), или в % (все измерения исходят от размеров экрана).

Для начала установим жесткую привязку шрифта по умолчанию:

CSS

body {font-size: 100%; width: 100%; height: 100%;/* Теперь можно объявлять значение или в em (1 em = 16px = 100%)  */} #block {width: 70%; height: 70%; font-size: 0.875em; /* Устанавливаем значение шрифта на 14px = 14/16 = 0.875em */}

@Bratiwka · 30.11.2014, 13:46 **[ТС]**

Почему-то когда ставлю все в процентах, элементы начинают летать и при сужении экрана занимают уже не свои места, собственно с этим и основная проблема. Спасибо за ответы

@Codey · 30.11.2014, 14:24

А выложите код в процентах

Добавлено через 24 секунды
Возможно изначальные значения макета вы не правильно перевели в проценты.

@Bratiwka · 30.11.2014, 15:17 **[ТС]**

В общем-то, немножко разобрался, спасибо всем. Вот так выглядит в окне:
Вот так выглядит в развернутом виде: .
Вот код HTML:

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/scripts.js" type="text/javascript"></script>
<title>Добро пожаловать!</title>
</head>
<body>
    <div id="wrapper" class="wrapper">
    <div id="header">
        <div id="button"><a href="https://vk.com/albums-42177179">Фото</a></div>
        <div id="button2"><a href="https://vk.com/albums-42177179">О группе</a></div>
        <div id="button3"><a href="https://vk.com/albums-42177179">Аудио</a></div>
    </div>
    <div id="content">
        <div id="mainImg">
            <img src="images/sania.jpg" height="300px" width="500px"/>
            <div id="logo"><p>Rocksteady</p></div>
        </div>
    </div>
    </div>
</body>
</html>

Вот Css:

CSS

html, body {
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url(../images/pattern.png);
}
.wrapper {
    width:100%;
    min-width: 1200px;
    margin:0 auto;
    min-height: 99.8%;
    height: auto !important;
    height: 99.8%; /* отрицательный нижний отступ на высоту футера */
    padding: 0;
    outline: 2px solid #000000;
}
#header {
    width:100%;
    height:100px;
    outline:2px solid #FFFFFF;
    position:relative;
}
#button {
    width:20%;
    height:20%;
    outline:2px solid #FFFFFF;
    position:absolute;
    top:35%;
    left:10%;
    text-align:center;
}
    #button a {
        text-decoration:none;
        color:#F4E4CD ;
        
    }
#button2 {
    width:20%;
    height:20%;
    outline:2px solid #FFFFFF;
    position:absolute;
    top:35%;
    left:40%;
    text-align:center;
}
    #button2 a {
        text-decoration:none;
        color:#F4E4CD ;
        
    }
#button3 {
    width:20%;
    height:20%;
    outline:2px solid #FFFFFF;
    position:absolute;
    top:35%;
    left:70%;
    text-align:center;
}
    #button3 a {
        text-decoration:none;
        color:#F4E4CD ;
        
    }
#content {
    width:100%;
    outline:2px solid #FFFFFF;
}
#mainImg {
    width:100%;
    background-color:#000000;
    position:relative;
}
#logo {
    width:100%;
    height:50px;
    outline:2px solid #FFFFFF; 
    position:absolute;
    top:40%;
    text-align:center;
    padding:0;
}
    #logo p {
        color:#F4E4CD;
        font-size:50px;
        margin:0;
        padding:0;
    }

Скажите сразу, быть может я что-то делаю неправильно или же как-то каряво ? Я вот, например, сомневаюсь, что правильно использую обертку wrapper. Есть какие-то советы как правильно использовать обертку ? Был бы просто нереально рад выслушать все советы. Спасибо )

@Codey · 30.11.2014, 20:46

Так мельком глянул.

CSS

html, body {
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url(../images/pattern.png);
}
.wrapper {
    width:100%;
    min-width: 1200px;
    margin:0 auto;
    min-height: 99.8%;
    height: auto !important;
    height: 99.8%; /* отрицательный нижний отступ на высоту футера */
    padding: 0;
    outline: 2px solid #000000;
}

1. Если вы верстаете масштабируемый макет, то нужно все величины перенести в em, или %.
2. Нет обнуления значений для всех броузеров. Если верстаете под стандарт HTML 4, то обнулите все теги:

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  font-size: 100%; /* Значение по умолчанию в броузере 16px*/
  background-image: url(../images/pattern.png);
}

3. Зачем столько кода, если можно это решить более коротким путем?

HTML5

1
2
3

<div id="button"><a href="https://vk.com/albums-42177179">Фото</a></div>
        <div id="button2"><a href="https://vk.com/albums-42177179">О группе</a></div>
        <div id="button3"><a href="https://vk.com/albums-42177179">Аудио</a></div>

HTML5

<ul class="nav">
  <li><a href="https://vk.com/albums-42177179">Фото</a></li>
  <li><a href="https://vk.com/albums-42177179">О группе</a></li>
  <li><a href="https://vk.com/albums-42177179">Аудио</a></li>
</ul

CSS

.nav {
  list-style-type: none;
  display: inline-block;
}

Для практической части код пойдёт, но надо улучшить знания семантической верстки и css. Группируйте стили. В целом код как напильником спиленный)

Новые блоги и статьи
Администрирование Git, продвинутые техники работы с Git InfoMaster 11.01.2025 Основы управления репозиторием Эффективное управление Git-репозиторием требует глубокого понимания механизмов контроля доступа и инструментов администрирования. Рассмотрим ключевые аспекты. . .	Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .	Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .
Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .

@Bratiwka 0 / 0 / 0 Регистрация: 07.09.2014 Сообщений: 4
		1
	Правильное отображение по всех разрешениях 30.11.2014, 01:14. Показов 1760. Ответов 6 Метки нет (Все метки) Доброго времени суток, дорогие друзья. Кто-то, расскажите, пожалуйста как сверстать правильно сайт, который будет отображаться одинаково во всех разрешениях. Перерыл весь интернет, везде все вокруг да около. Мне бы все пошагово обьяснить, потому как понимание очень прозрачное, пока что (все элементы расставлял до сегодняшнего дня позиционированием и даже не знал, о таком понятии как "каркасс"). Добавлено через 1 час 26 минут Еще такой вопрос: в каком случае рекомендуется использовать :margin , а когда position ? 0

@Сет 50 / 49 / 10 Регистрация: 27.05.2014 Сообщений: 232
	30.11.2014, 08:20	2
	margin и position это абсолютно разные теги. Margin позволяет "отталкивать" элемент (div например) от другого дива. Position определяет поведение элемента в потоке. 0

@Bratiwka 0 / 0 / 0 Регистрация: 07.09.2014 Сообщений: 4
	30.11.2014, 13:46 [ТС]	4
	Почему-то когда ставлю все в процентах, элементы начинают летать и при сужении экрана занимают уже не свои места, собственно с этим и основная проблема. Спасибо за ответы 0

@Codey 14 / 14 / 8 Регистрация: 26.06.2013 Сообщений: 60
	30.11.2014, 14:24	5
	А выложите код в процентах Добавлено через 24 секунды Возможно изначальные значения макета вы не правильно перевели в проценты. 0

	30.11.2014, 20:46

Правильное отображение по всех разрешениях

Решение