Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Верстка страницы  (Прочитано 10307 раз)
0 Пользователей и 1 Гость смотрят эту тему.
XXX
Участник

ru
Offline Offline

« : 16-06-2011 14:31 » 

Интересует, это красивая (валидная) верстка или можно что-то переделать..
Верстка приведена не полностью..

HTML:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Заголовок</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<!-- START WRAP -->
<div id="wrap">
<!-- START HEADER BLOCK -->
<div id="header">
<div id="header_text">
<div id="header_title">
Пластиковые окна и двери
</div>
<div id = "bottom_text">
Ваш квалифицированный партнер по проектированию, изготовлению, монтажу пластиковых конструкций
</div>
</div>
<div id = "header_logo">
<img src = "./images/logo.png">
</div>
<div id="phone">
<div id="phone_code"><b>1111</b></div>
<div id = "phone_num">111-111</div>
</div>
</div>
<!-- END HEADER BLOCK -->

<!-- START TOP_MENU BLOCK -->
<div id="top_menu">
<div id="top_links" align = "center">
<a href = "">Пластиковые окна и двери</a>
<a href = "">Акции</a>
<a href = "">Услуги и сервис</a>
<a href = "">Контакты</a>
<a href = "">Вызов замерщика</a>
<a href = "">Для партнеров</a>
</div>
<div style = "float: left;">
<img src = "./images/window.png" style = "padding-top: 16px; padding-left: 74px;">
</div>
<div style = "float: left; color: #fff; font-size: 2em; padding-top: 45px;">
Работаем в России<br> по Европейским стандартам
</div>
</div>
<!-- END TOP_MENU BLOCK -->
</div>
<!-- END WRAP -->
</body>
</html>

CSS:
body {
font-family: Tahoma, Helvetica, sans-serif;
margin: 0px;
min-width: 1024px;
}
#top_links a
{
font-family: "Tahoma";
color: #28aa37;
font-size: 1.05em;
padding-left: 24px;
}
#top_links
{
padding-top: 25px;
}
#header_logo{
padding-left: 125px;
padding-top: 9px;
float: left;
}
#header {

width: 100%;

height: 120px;
}
#phone{
padding-top: 28px;
padding-right: 105px;
float: right;
font-family: Tahoma;
}
#header_title{
text-shadow: 0px 0px 20px #fff;
font-size: 1.1em;
}
#bottom_text{
text-shadow: 0px 0px 4px #fff;
padding-top: 10px;
font-size: 0.776em;
}
#header_text{
color: #424548;
padding-left: 88px;
padding-top: 24px;
width: 25%;
float: left;
}
#phone_code{
color: #53BB5F;
font-size: 0.9em;
font-family: sans-serif;
float: left;
}
#phone_num{
color: #424545;
float: left;
font-size: 2.3em;
padding-left: 8px;
}
#top_menu{
width: 100%;
height: 294px;
background: url('../images/back_green.png');
}
« Последнее редактирование: 16-06-2011 17:59 от XXX » Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 16-06-2011 15:04 » 

с точки зрения соответствия рекомендациям - верстка невалидна.

<br /> а не <br>
<img src... alt="..." />


<div id="top_links" align = "center">
Это... бред...
Блок по центру блока:
#top_links {
margin:0 auto;
}

Что бросилось в глаза

<img src = "./images/window.png" style = "padding-top: 16px; padding-left: 74px;">

Это ты уже "залипуху" лепишь
О! а где же атрибут alt и где закрывающий тег для img?

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

потом... объясни, что ты хочешь в этом блоке?

<div style = "float: left;">
   <img src = "./images/window.png" style = "padding-top: 16px; padding-left: 74px;">
</div>

Просто картинку, а может задать ширину, высоту и блоку задать бекграунд?


<div id="phone">
   <div id="phone_code"><b>8182</b></div>
   <div id = "phone_num">270-145</div>
</div>

это можно переделать по другому <span>...


Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #2 : 16-06-2011 16:45 » 

XXX, validator.w3.org - проверяй себя.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
XXX
Участник

ru
Offline Offline

« Ответ #3 : 28-09-2011 09:06 » new

Получилось как-то так: h**p://www.okna-arh.ru/
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #4 : 28-09-2011 09:29 » 

Дежавю.... (где я это уже видел?)

достаточно аккуратно.
Замечания - проверь валидатором - ошибки несущественны
события только строчными символами
onmouseover - можно заменить на :hover

Вот не помню где... но я уже показывал на кнопку подробнее - решение не совсем верное
<a class="more" href="" >
css
.more {
display:inline-block;
width: ширина изображения кнопки
height: высота  изображения кнопки
background: url(адрес  изображения кнопки onmouseout) no-repeat
text-align:center
lineheight: тут надо прикинуть
}
.more:hover {
background: url(адрес  изображения кнопки onmouseover) no-repeat
}


Ну вот как-то так...

Сразу скажу, что не знаю как в ИЕ6, в ИЕ7 такое работает

зы тратить время на совместимость с ИЕ6 - бред

ззы Люди которые зайдут на сайт пластиковых окон с ИЕ6 - покупать и заказывать их не будут (имхо)
« Последнее редактирование: 28-09-2011 09:34 от Sla » Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines