Верстка страницы. Раздел «Web». Форум программистов «Весельчак У»

XXX

Участник

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

Команда клуба

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

Re: Верстка страницы

« Ответ #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

Технический
Администратор

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

Re: Верстка страницы

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

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


	Записан

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

XXX

Участник

Offline

Re: Верстка страницы

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

Получилось как-то так: h**p://www.okna-arh.ru/


	Записан

Sla

Команда клуба

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

Re: Верстка страницы

« Ответ #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] Вверх

Печать

« предыдущая тема следующая тема »

Форум программистов «Весельчак У» > Направления программирования > Web > Тема: Верстка страницы

	Автор	Тема: Верстка страницы (Прочитано 10306 раз)
0 Пользователей и 1 Гость смотрят эту тему.