Друзья, помогите с доктайпами!

Барсик · June 22, 2010

Всем привет! Друзья, помогите разобраться с доктайпами!

Чем отличаются HTML от XHTML? Можно подробней, пожалуйста! Что лучше использовать и что используете Вы как мастера, что Вас больше устраивает и почему?

Чем отличается в HTML и XHTML: Строгий синтаксис HTML/X и Переходный синтаксис HTML/X? Что в новом стандарте HTML 5? Стоит ли использовать его? Как с ним будут работать старые браузеры? Будет ли он лучше HTML 4.01? На этом замечательном сайте пишется что для XHTML не требуется закрывающий тег, это как? Для всех тегов? Заранее благодарен за помощь начинающему :lol:

P.S. Выучил HTML по курсам Е.Попова, там только для нубов азы! С чего продолжить? Посоветуйте пожалуйста, а то я не знаю

Searcher · June 23, 2010

Нужно не учить, а понимать суть и логику, дальше само пойдет, а подсмотреть шпаргалку всегда можно :lol: Почитайте раздел "Шаг за шагом". Там и про html и про xhtml, и про css, и т.п.

Great Rash · June 23, 2010

Чем отличаются HTML от XHTML?

В XHTML используется синтаксис XML. Т.е. все непарные теги должны тоже закрываться (как в XML).

Пример использования непарного тега в HTML:

А вот так надо писать в XHTML:

<br />

А вообще если вы пишете просто сайт, то преимуществ у XHTML перед HTML никаких. Вся соль в этой буковке "X" (eXtensible - расширяемый). Т.е. нужен этот язык по честному чисто для перехода от HTML к чистому XML. Поэтому если вы активно используете на своей страничке такие плюшки XML как XSLT, SVG, и другие расширения для этого языка разметки, то тут уж без XHTML не обойтись.

Есть правда одно "но" - имя ему Internet Explorer. Дело в том, что по честному тип контента у документа XHTML должен быть text/xml, т.е. вот так:

<meta http-equiv="content-type" content="text/xml;charset=utf-8" />

Правда так будет работать только в нормальных браузерах и в ИЕ8 (кажись, не уверен). По этому приходится прописывать тип контента вот так:

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

чтоб работало во всех браузерах.

Правда эта запись все равно позволяет использовать XML-расширения на странице.

Вот чего я не понимаю, так это зачем W3-консорциуму потребовалось останавливать работы над XHTML 2.0, делать по сути шаг назад, переходя к работе над HTML 5, в котором, кстати, стиль написания XML-тегов сохранили... странно как-то.

Что в новом стандарте HTML 5?

По сути, новый HTML 5 призван сделать веб семантичным, там появились такие элементы как <section>, <header>, <footer>, <nav> и т.п. Говорящие названия тегов не правда ли? Семантика на том и основывается - каждый тег строго под соответствующий контент, в случае HTML 5 <section> пол какую-то секцию, <footer> для футера, <nav> для навигации и т.п.

Наверное это делается для облегчения жизни поисковым системам типа гугля.

Мое мнение, что HTML 5 внедрять на рабочие сайты пока рано. Хотя его и поддерживают все браузеры (даже ИЕ6 с небольшим хаком на JavaScript). Да и смысла большого в этом нет. Хотя многие писают кипятком при слове canvas...

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

Барсик · June 23, 2010

Крутейший сайт!

Searcher

Спасибо большое, посмотрим что там есть!

Great Rash

Есть правда одно "но" - имя ему Internet Explorer

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

Говорящие названия тегов не правда ли?

Конечно!

Спасибо большое что не пожелели времени и написали столь большое, понятное и полезное сообщение, это мне очень помогло, благодарствую!

И Еще, пожалуйста научите пользоваться такими штуками(а то оптимизировать под разные браузеры вроде получается но как этими штуками пользоваться до конца не понимаю):

Мне понятно что стили подгружаются для конкретных версии ИЕ, но какие различия между <!--[if lt IE 8]> и <![if gte IE 5.5]>? Научите плиз такие штуки под Оперу, ИЕ, ФФ, Чром, Сафари и другие делать, это очень много для меня значит, очень.

Edited June 23, 2010 by Барсик

Searcher · June 23, 2010

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

Однако, существуют так называемые css-хаки. Но ими пользоваться нужно только в крайнем случае, когда уже все законные методы исчерпаны.

Барсик · June 24, 2010

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN"> так? И есть ли XHTML 5, если есть - как прописывать? Просто хочу попробовать на себе

Кому не сложно, пожалуйста дайте мне типа домашнее задание. Для начала более менее легкое под стандарт 4.01, типа шапку, один блок, меню на таблицах, контент блок, футер, какие цвета использовать и.т.д. как хотите, лишь бы дали задание касаемо HTML. Плиз, кому не сложно, надо набивать руку, практику дескать получать

psywalker · June 25, 2010

Кому не сложно, пожалуйста дайте мне типа домашнее задание. Для начала более менее легкое под стандарт 4.01, типа шапку, один блок, меню на таблицах, контент блок, футер, какие цвета использовать и.т.д. как хотите, лишь бы дали задание касаемо HTML. Плиз, кому не сложно, надо набивать руку, практику дескать получать

Сверстай значит следующий шаблон.

Шапка, Три колонки, боковые фиксированные, а середина тянущаяся, и футер, но чтобы он всегда был внизу, даже когда в середине нет контента. Далее использую строкий доктайп

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Добейся того, чтобы работа в итоге была полностью валидная.

Кстати не забудь в боковых колонках сверстать по списку, в левой на UL-LI, а в правой на OL-LI.

Сделай во всех колонках отсупы внутренние, чтобы красивее было.

Барсик · July 10, 2010

psywalker

Привет! Был на отдыхе, загорал

все сделал, только с футером лажанулся

картинка

никак не смог его 1. выровнять по центру, 2. пробовал использовать и разобрать код с футера csstemplater.com (долго мучался с паддингом, не получилось)

подскажите плз разные приемы с футером, ну честно, очень старался - никак не получилось!

psywalker · July 10, 2010

psywalker
Привет! Был на отдыхе, загорал
все сделал, только с футером лажанулся
картинка
никак не смог его 1. выровнять по центру, 2. пробовал использовать и разобрать код с футера csstemplater.com (долго мучался с паддингом, не получилось)
подскажите плз разные приемы с футером, ну честно, очень старался - никак не получилось!

Привет!

Давай для начала ссылочку на то, что уже сделал.

Барсик · July 10, 2010

Вот код:

<!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="en">
<head>
	<title>Homework</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	@import url(style.css);
	* {margin: 0; padding: 0;}
		html {height: 100%;}
		body {margin:5px 10px 0px 10px; padding:5px 10px 0px 10px; font-family: Tahoma; font-size: 12px; background-color: #DDD;}
		a {color: #9895E8; text-decoration: none;}
		a:hover {color: #9867E8; text-decoration: underline;}
		#header {border: solid 1px black; background: #DAE6FC url(logo.jpgs); padding: 6px 3px 3px 3px; text-align: center;}
		.lefblock {
			width: 200px;
			float: left;
			padding-top: 3px;
		}
		.lefblock .lizag {
			padding: 3px;
			list-style-type: none;
			font-weight: bold;
			font-size: 14px;
			text-align: center;
			border: solid 1px black;
			background-color: #9895E8;
		}
		.lefblock .licont {
			list-style-type: none;
			padding: 8px;
			background-color: #DAE6FC;
			border-left: solid 1px black;
			border-right: solid 1px black;
			border-bottom: solid 1px black;
		}
		.lefblock .lizacont {
			padding-top: 10px;
		}

		.content {
			float: top;
			padding: 0 200px 0 200px;
		}

		.content table {
			float: left;
			padding: 3px;
		}

		.content .title_content {
			height: 25px;
			padding: 3px;
			font-weight: bold;
			font-size: 14px;
			text-align: left;
			border: solid 1px black;
			background-color: #9895E8;
		}

		.content .newscont {
			padding: 3px;
			background-color: #DAE6FC;
			border-left: solid 1px black;
			border-right: solid 1px black;
			border-bottom: solid 1px black;
		}

		.rifblock {
			width: 200px;
			float: right;
			padding-top: 3px;
		}

		.rifblock .rightblock {
			width: 200px;
			float: top;
			padding-bottom: 10px;
		}

		.rifblock .lizag {
			padding: 3px;
			list-style-type: none;
			font-weight: bold;
			font-size: 14px;
			text-align: center;
			border: solid 1px black;
			background-color: #9895E8;
		}

		.rifblock .licont {
			list-style-type: none;
			padding: 8px;
			background-color: #DAE6FC;
			border-left: solid 1px black;
			border-right: solid 1px black;
			border-bottom: solid 1px black;
		}

		#footer {
			float: left;
			width: 100%;
			height: 100px;
			background: #BFF08E;
		}
		</style>
	</head>
	<body><p>
		<!--START HEADER-->
		<table id="header" width="100%" height="100">
			<tr style="font-weight: bold; font-size: 40px; color: #9895E8;">
				<td>Тут Вы найдете весь софт что искали!</td>
			</tr><tr style="color: #6D9CCA;">
				<td>Огромный выбор программ: Мультимелиа, защита ПК - антивирусы, фаерволы, обновленя баз, программы для веб мастера и др.</td>
				</tr>
			</table>
			<!--END HEADER // START LEFT BLOCK-->
				<div class="lefblock">
					<ul>
						<li class="lizag">Наше меню</li>
						<li class="licont"><a href="#">Софт</a></li>
						<li class="licont"><a href="#">Windows</a></li>
						<li class="licont"><a href="#">Windows7</a></li>
						<li class="licont"><a href="#">Linux / Unix</a></li>
						<li class="licont"><a href="#">Mac OS</a></li>
						<li class="licont"><a href="#">TOP SOFT</a></li>
						</ul>
					<ul class="lizacont">
						<li class="lizag">Наше меню</li>
						<li class="licont"><a href="#">Софт</a></li>
						<li class="licont"><a href="#">Windows</a></li>
						<li class="licont"><a href="#">Windows7</a></li>
						<li class="licont"><a href="#">Linux / Unix</a></li>
						<li class="licont"><a href="#">Mac OS</a></li>
						<li class="licont"><a href="#">TOP SOFT</a></li>
						</ul>
					<ul class="lizacont">
						<li class="lizag">Наше меню</li>
						<li class="licont"><a href="#">Софт</a></li>
						<li class="licont"><a href="#">Windows</a></li>
						<li class="licont"><a href="#">Windows7</a></li>
						<li class="licont"><a href="#">Linux / Unix</a></li>
						<li class="licont"><a href="#">Mac OS</a></li>
						<li class="licont"><a href="#">TOP SOFT</a></li>
						</ul>
				</div>
				<!--END LEFT BLOCK // START CONTENT BLOCK-->
				<div class="content">
					<table width="100%" cellspacing="0">
						<tr>
							<td class="title_content">777</td>
						</tr><tr>
							<td class="newscont">777</td>
							</tr>
						</table>
					</div>
					<!--END CONTENT BLOCK // START RIGHT BLOCK-->
					<div class="rifblock">
						<table>
					<ol class="rightblock" type="none">
						<li class="lizag">Наше меню</li>
						<li class="licont"><a href="#">Софт</a></li>
						<li class="licont"><a href="#">Windows</a></li>
						<li class="licont"><a href="#">Windows7</a></li>
						<li class="licont"><a href="#">Linux / Unix</a></li>
						<li class="licont"><a href="#">Mac OS</a></li>
						<li class="licont"><a href="#">TOP SOFT</a></li>
						</ol>
											<ol class="rightblock" type="none">
						<li class="lizag">Наше меню</li>
						<li class="licont"><a href="#">Софт</a></li>
						<li class="licont"><a href="#">Windows</a></li>
						<li class="licont"><a href="#">Windows7</a></li>
						<li class="licont"><a href="#">Linux / Unix</a></li>
						<li class="licont"><a href="#">Mac OS</a></li>
						<li class="licont"><a href="#">TOP SOFT</a></li>
						</ol>
											<ol class="rightblock" type="none">
						<li class="lizag">Наше меню</li>
						<li class="licont"><a href="#">Софт</a></li>
						<li class="licont"><a href="#">Windows</a></li>
						<li class="licont"><a href="#">Windows7</a></li>
						<li class="licont"><a href="#">Linux / Unix</a></li>
						<li class="licont"><a href="#">Mac OS</a></li>
						<li class="licont"><a href="#">TOP SOFT</a></li>
						</ol>
						</div>
						<!--END RIGHT BLOCK // START FOOTER BLOCK-->
						<div id="footer">
							<strong>FoOtHeR</strong>
							</div>
		</p></body>


</html>

только очень сильно не пинайте, старался и кстати научился кое чему новенькому, за что большое спасибо! По поводу кода и его кривизны (а это думаю будет (( ) - я первый раз делаю такое с нуля + при помощи ксс, раньше же я только мог переделывать до неузнаваемости или делать более простой код ( для меня и раньше ), делайте замечания - буду исправляться. Прощу прощения за сердце, не знаю как его сделать тянущимся (( Когда я создавал каркас проблем небыло, но ушло несколько минут чтобы узнать как правильно прописать <html> на благо я понял что сказал мне валидатор на английском. Сегодня после того как я доделал каркас мне сказало 17 Errors, 1 warning(s), мне очень неудобно и стыдно, но я незнаю как это исправить! Есть русский валидатор? Я долго искал русский валидатор и даже специально устанавливал плагин для ФФ HTML Validator которым я пользуюсь только для проверки страниц. Но ничего не понял, вроде на русском но никаких подсказок, раньше когда верстал HTML 4.01 вроде проблем небыло. Такие проблемы которые я не смог исправить вроде первый раз )) Не ругайтесь, скажите как исправить - приложу все усилия

up

sigma77 · July 10, 2010

Барсик,

Ну во-первых, валидатор ругается на ненужные атрибуты, как например, width, height в таблицах.

Во-вторых, на то что ты вложил таблицу в абзац.

На атрибут type в списках.

На отсутствие в некоторых таблицах тегов <tr> и <td>.

На незакрытый тег таблицы (последняя).

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

psywalker · July 10, 2010

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

1) http://www.psywalker.ru/Forum/Column/maing.html - тянущаяся середина.

2) http://www.psywalker.ru/Forum/Footer_bottom/main.html - футер внизу.

А вот тебе валидатор, именно в нём проверяй свои ошибки

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Игорь Ермаков · July 10, 2010

Барсик, респект за язык, далеко пойдешь.

Барсик · July 15, 2010

sigma77

большое спасибо! Раньше я не понимал откуда они такие появляются, теперь знаю, благодарствую!

psywalker

спасибо Вам за помощь, не забуду!

насчет валидаторов, спасибо за ссылку на русский ксс валидатор, но есть ли русский HTML/X валидатор? Я просто не знаю английского, переводчик не всегда помогает, пробовал гуглить - безрезультатно! Валидатор замечательный но жаль что на английском.

Вот, вроде все сделал:

<!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="en">
<head>
	<title>Homework/round2</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<style type="text/css">
* { 
margin : 0; 
padding : 0; 
} 
body { 
min-width : 700px; 
padding : 20px; 
background : #ddd; 
font : 12px Tahoma; 
} 
#head { 
height : 97px; 
padding : 3px; 
text-align : center; 
border : 1px solid black; 
} 
#head h1 { 
padding-top : 10px; 
padding-bottom : 4px; 
} 
.left_bg { 
float : left; 
width : 200px; 
margin-top : 5px; 
margin-right : 3px; 
} 
.left_bg .left_bg_title { 
padding : 3px; 
border : 1px solid black; 
font-weight : bold; 
text-align : center; 
} 
.left_bg .left_bg_content { 
padding : 5px; 
margin-bottom : 5px; 
border-left : 1px solid black; 
border-right : 1px solid black; 
border-bottom : 1px solid black; 
} 
.left_bg ul li { 
list-style-type : none; 
} 
.left_bg ul li a { 
color : black; 
text-decoration : none; 
} 
.left_bg ul li a:hover { 
color : #6a425d; 
font-weight : bold; 
font-size : 13px; 
} 
.right_bg { 
float : right; 
width : 200px; 
} 
.right_bg .right_bg_title { 
margin : 5px 0 0 3px; 
padding : 3px; 
border : 1px solid black; 
font-weight : bold; 
text-align : center; 
} 
.right_bg .right_bg_content { 
padding : 5px; 
margin-left : 3px; 
margin-bottom : 5px; 
border-left : 1px solid black; 
border-right : 1px solid black; 
border-bottom : 1px solid black; 
} 
.right_bg ol li { 
list-style-type : none; 
} 
.right_bg ol li a { 
color : black; 
text-decoration : none; 
} 
.right_bg ol li a:hover { 
color : #6a425d; 
font-weight : bold; 
font-size : 13px; 
} 
#content { 
overflow : hidden; 
margin-top : 5px; 
padding : 0 5px 5px 5px; 
} 
#content #content_title { 
border : 1px solid black; 
padding : 4px; 
font-weight : bold; 
text-align : center; 
} 
#content #content_block { 
padding : 7px; 
border-left : 1px solid black; 
border-right : 1px solid black; 
border-bottom : 1px solid black; 
} 
div.footer { 
margin-top : 150px; 
bottom : 0; 
left : 0; 
height : 50px; 
width : 100%; 
border-top : 1px solid black; 
font-weight : bold; 
} 
	</style>
	</head>
	<body>

		<div class="wrap">
			<!--START HEADER-->
			<div id="head">
<h1>Тут Вы найдете весь софт что искали!</h1>
Огромный выбор программ: Мультимелиа, защита ПК - антивирусы, фаерволы, обновленя баз, программы для веб мастера и др.
</div>
		<!--END HEADER // START LEFT BLOCK-->

<div class="left_bg">
	<div class="left_bg_title">
	Наше софт меню
	</div>
	<div class="left_bg_content">
		<ul>
			<li><a href="#">TOP SOFT</a></li>
			<li><a href="#">Windows</a></li>
			<li><a href="#">Windows Seven</a></li>
			<li><a href="#">Linux / Unix</a></li>
			<li><a href="#">Mac OS</a></li>
			<li><a href="#">Kaspersky</a></li>
			</ul>
		</div>

		<!--2 BLOCK-->

		<div class="left_bg">
	<div class="left_bg_title">
	Наше софт меню
	</div>
	<div class="left_bg_content">
		<ul>
			<li><a href="#">TOP SOFT</a></li>
			<li><a href="#">Windows</a></li>
			<li><a href="#">Windows Seven</a></li>
			<li><a href="#">Linux / Unix</a></li>
			<li><a href="#">Mac OS</a></li>
			<li><a href="#">Kaspersky</a></li>
			</ul>
		</div>
</div>

	<!--3 BLOCK-->

	<div class="left_bg">
	<div class="left_bg_title">
	Наше софт меню
	</div>
	<div class="left_bg_content">
		<ul>
			<li><a href="#">TOP SOFT</a></li>
			<li><a href="#">Windows</a></li>
			<li><a href="#">Windows Seven</a></li>
			<li><a href="#">Linux / Unix</a></li>
			<li><a href="#">Mac OS</a></li>
			<li><a href="#">Kaspersky</a></li>
			</ul>
		</div>
</div>
</div>

<!--END LEFT BLOCK // START RIGHT BLOCK-->

<div class="right_bg">
<div class="right_bg_title">
	Наше софт меню
	</div>
	<div class="right_bg_content">
		<ol>
			<li><a href="#">TOP SOFT</a></li>
			<li><a href="#">Windows</a></li>
			<li><a href="#">Windows Seven</a></li>
			<li><a href="#">Linux / Unix</a></li>
			<li><a href="#">Mac OS</a></li>
			<li><a href="#">Kaspersky</a></li>
			</ol>
		</div>
		<div class="right_bg">
<div class="right_bg_title">
	Наше софт меню
	</div>
	<div class="right_bg_content">
		<ol>
			<li><a href="#">TOP SOFT</a></li>
			<li><a href="#">Windows</a></li>
			<li><a href="#">Windows Seven</a></li>
			<li><a href="#">Linux / Unix</a></li>
			<li><a href="#">Mac OS</a></li>
			<li><a href="#">Kaspersky</a></li>
			</ol>
		</div>
</div>
<div class="right_bg">
<div class="right_bg_title">
	Наше софт меню
	</div>
	<div class="right_bg_content">
		<ol>
			<li><a href="#">TOP SOFT</a></li>
			<li><a href="#">Windows</a></li>
			<li><a href="#">Windows Seven</a></li>
			<li><a href="#">Linux / Unix</a></li>
			<li><a href="#">Mac OS</a></li>
			<li><a href="#">Kaspersky</a></li>
			</ol>
		</div>
</div>
</div>

<!--END RIGHT BLOCK // START CONTENT BLOCK-->

<div id="content">
	<div id="content_title">
	Тут какой-то контент
	</div>
	<div id="content_block">
		<p>

   	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat.


	</p>
		</div>
</div>
<!--END CONTENT BLOCK // START FOOTER-->
<div class="footer">
	<div style="padding: 5px;">
	<center>AstalaVista Design 2010 ©</center>
	<p align="right">
	<a href="http://validator.w3.org/check?uri=referer"><img
		src="http://www.w3.org/Icons/valid-xhtml10"
		alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
		<a href="http://jigsaw.w3.org/css-validator/check/referer">
		<img style="border:0;width:88px;height:31px"
			src="http://jigsaw.w3.org/css-validator/images/vcss"
			alt="Правильный CSS!" />
	</a>
	  </p>
  </div>
</div>

</div>
</body>
</html>

валидный XHTML и CSS код! Делайте пожалуйста замечания и указывайте на ошибке если это не займет у Вас много времени

по поводу футера: делал по примеру вашего кода, все вроде работает, даже когда в середине нет контента, но вот проблема когда окно браузера уменьшенное то появляется какой-то баг, я не знал как исправить, простите!

вот что происходит: http://s48.radikal.ru/i120/1007/cc/cf1a6c940574.jpg

опять таки, сильно прошу не пинать! В принцепе все работает и валидно, но вот при уменьшении окна, возился часа 2

Игорь Ермаков

Спасибо большое!

Edited July 15, 2010 by Барсик

Ururu · July 15, 2010

Это не баг это абсолют ))

Можно растянуть тело на все окно, а футер поднять отрицательным margin.

Хотя можно и так с абсолютом, только отступы внутренние в центральном диве нужно делать на высоту футера.

Edited July 15, 2010 by Ururu

Барсик · July 15, 2010

Ururu

Спасибо! Поправил временным решением, по другому кроме как маржин топ не получилось подскажите конкретные примеры пожалуйста, с футером я бессилен, по крайней мере с тем что-бы он был снизу при уменьшении окна браузера без маржина или как еще, пробовал брать и разбирать другие коды но так и не удалось.

Edited July 15, 2010 by Барсик

Барсик · July 16, 2010

up

psywalker · July 16, 2010

1) Валидатора HTML кода русского нет к сожалению.

2) С футером проблема в том, что нужно у центрального блока делать нижний паддинг на высоту футера. Тогда можно будет абсолютом его загнать в самый низ.

3) Насчёт ошибок, это очень много лишних блоков, в частности div. Попробуй сократить их кол-во до минимума.

sigma77 · July 16, 2010

Барсик,

Читай комментарии к ошибкам. Обычно там в примерах становится понятно, где ошибся.

Ну даже, если не понял, всегда можно спросить здесь.

Sign In

Друзья, помогите с доктайпами!

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information