Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
Страницы: (2) [1] 2  ( Перейти к первому непрочитанному сообщению )  
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Правильная вёрстка html
Миша  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 2636
Пользователь №: 37963
На форуме: 3 года, 9 месяцев, 17 дней
Карма: 29




Всем доброго дня ;) Раньше думал что правильная вёрстка должна пройти валидацию, оказалось не совсем так.

Также прошу оставлять Ваши комментарии.

Современный сайт должен быть на HTML 5 (поисковые роботы правильнее обрабатывают контент), если вы ещё используете предыдущие спецификации, то самое время переходить на html 5, переверстать старые сайты.

Небольшой шаблон:
HTML

<!DOCTYPE html>
<html lang="ru">
<head>


<!--[if lt IE 9]>
<script>
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->


<meta charset="UTF-8">
<meta
name="keywords" content="Ключевые слова">
<meta
name="description" content="Описание">
<title>
Название</title>
</head>
<body>
<div
class="wrapper">

<header>

шапка

<nav>
меню
</nav>

</header>

<article>

содержание
</article>

<div
class="footer"></div>

</div>

<footer>

подвал
</footer>

</body>
</html>


CSS

@charset "utf-8";
* {
margin: 0;
padding: 0;
border: 0;
}
article, aside, figcaption, figure, footer, header, hgroup, nav, section, time {
display: block;
}
html, body {
height: 100%;
font: 100%/1.5em Arial;
}
footer {
margin: 0 auto;
width: 100%;
height: 50px;
}

.wrapper {
margin: 0 auto -50px;
width: 100%;
min-height: 100%;
}
.footer {
height: 50px;
}


--------------------
Принимаю заказы, писать в ЛС
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Миша  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 2636
Пользователь №: 37963
На форуме: 3 года, 9 месяцев, 17 дней
Карма: 29




Фавиконки, под разные устройства:
	<link rel="shortcut icon" sizes="16x16" type="image/png" href="/icon/touch-icon-16.png">
<link
rel="shortcut icon" sizes="32x32" type="image/png" href="/icon/touch-icon-32.png">
<link
rel="shortcut icon" sizes="48x48" type="image/png" href="/icon/touch-icon-48.png">
<link
rel="shortcut icon" sizes="64x64" type="image/png" href="/icon/touch-icon-64.png">
<link
rel="shortcut icon" sizes="96x96" type="image/png" href="/icon/touch-icon-96.png">
<link
rel="shortcut icon" sizes="192x192" type="image/png" href="/icon/touch-icon-192.png">
<link
rel="shortcut icon" sizes="196x196" type="image/png" href="/icon/touch-icon-196.png">
<link
rel="shortcut icon" sizes="228x228" type="image/png" href="/icon/touch-icon-228.png">
<link
rel="apple-touch-icon" sizes="57x57" href="/icon/apple-touch-icon-57.png">
<link
rel="apple-touch-icon" sizes="60x60" href="/icon/apple-touch-icon-60.png">
<link
rel="apple-touch-icon" sizes="72x72" href="/icon/apple-touch-icon-72.png">
<link
rel="apple-touch-icon" sizes="76x76" href="/icon/apple-touch-icon-76.png">
<link
rel="apple-touch-icon" sizes="114x114" href="/icon/apple-touch-icon-114.png">
<link
rel="apple-touch-icon" sizes="120x120" href="/icon/apple-touch-icon-120.png">
<link
rel="apple-touch-icon" sizes="144x144" href="/icon/apple-touch-icon-144.png">
<link
rel="apple-touch-icon" sizes="152x152" href="/icon/apple-touch-icon-152.png">
<link
rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon-180.png">


--------------------
Принимаю заказы, писать в ЛС
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
VeRTak  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Местная прописка
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 845
Пользователь №: 41530
На форуме: 1 год, 10 месяцев, 27 дней
Карма: 11




Цитата (Медведь @ 2.07.2016 - 07:59)
<div class="footer"></div>

Цитата (Медведь @ 2.07.2016 - 07:59)
<footer>
  подвал
</footer>


Это как? biggrin.gif


--------------------
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Миша  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 2636
Пользователь №: 37963
На форуме: 3 года, 9 месяцев, 17 дней
Карма: 29




А ты попробуй убрать, узнаешь wink.gif Чтобы текст не наезжал.


--------------------
Принимаю заказы, писать в ЛС
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
VeRTak  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Местная прописка
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 845
Пользователь №: 41530
На форуме: 1 год, 10 месяцев, 27 дней
Карма: 11




Медведь Не знаю кто как верстает, по моему не логично вышло с названием класса при существующим footer


--------------------
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Миша  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 2636
Пользователь №: 37963
На форуме: 3 года, 9 месяцев, 17 дней
Карма: 29




Наоборот чтобы не ненароком не удалили пустой блок.


--------------------
Принимаю заказы, писать в ЛС
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
VeRTak  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Местная прописка
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 845
Пользователь №: 41530
На форуме: 1 год, 10 месяцев, 27 дней
Карма: 11




А как стили подключаются. что то я не вижу, адаптации по коду я тоже не вижу, поэтому не понимаю к чему тут


<meta name="viewport" content="width=device-width, initial-scale=1">


--------------------
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Миша  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 2636
Пользователь №: 37963
На форуме: 3 года, 9 месяцев, 17 дней
Карма: 29




До этого руки ещё не дошли, с шашлыков приехали только, я за рулём естественно, только сейчас распечатал пенный допинг ))


--------------------
Принимаю заказы, писать в ЛС
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Ron  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1283
Пользователь №: 41686
На форуме: 1 год, 9 месяцев, 19 дней
Карма: 23




Битва экстрасенсов псевдоэкспертов. Или это триллер из бэкенда во фронтэнд? biggrin.gif



--------------------
5.11.2017
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Миша  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 2636
Пользователь №: 37963
На форуме: 3 года, 9 месяцев, 17 дней
Карма: 29




Цитата (Ron @ 3.07.2016 - 00:47)
Или это триллер из бэкенда во фронтэнд? biggrin.gif

laugh.gif

Захотелось собрать интересный материал в одной теме, меня поправят если что не так, или может кто напишет чего интересного.


--------------------
Принимаю заказы, писать в ЛС
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Zzepish  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 5583
Пользователь №: 32538
На форуме: 5 лет, 1 день
Карма: 56




		
<div class="footer"></div>

<footer>

подвал
</footer>

Выглядит, как дичь. В чем логика? Несколько футеров? Зачем? Wind правильно удивился
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
SerginhoLD  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



че?
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 718
Пользователь №: 24500
На форуме: 6 лет, 7 месяцев, 5 дней
Карма: 55




Zzepish
это не несколько футеров, это старый костыль для прилипания подвала к низу страницы

есть вариант без лишнего тега:
<style>
.wrapper {
min-height: 100%;
margin-bottom: -70px; /* высота подвала */
padding-bottom: 70px; /* высота подвала */
}

.footer {
height: 70px;
}
</style>
<body>
<div
class="wrapper">wrapper</div>
<footer
class="footer">footer</footer>
</body>

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

Медведь, и если уж выкладывать так называем каркас страницы, то без лишних стилей, типа ширины в 95%, обнуления отступов у всех тегов, мета-тег viewport и т.д. и т.п.


--------------------
"internet explorer всех правильней отображает страницы" ©
PM
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Zzepish  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 5583
Пользователь №: 32538
На форуме: 5 лет, 1 день
Карма: 56




SerginhoLD
лол))) ок)
На тему флекса - слышал, но не щупал. Вроде бы, говорят,кошерная тема
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
VeRTak  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Местная прописка
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 845
Пользователь №: 41530
На форуме: 1 год, 10 месяцев, 27 дней
Карма: 11




SerginhoLD flex не во всех браузерах нормально работает


--------------------
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Zzepish  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 5583
Пользователь №: 32538
На форуме: 5 лет, 1 день
Карма: 56




Wind
насколько не во всех?
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темыСтраницы: (2) [1] 2  Ответ в темуСоздание новой темыСоздание опроса