Оцените мой способ вёрстки

psywalker · October 2, 2008

Мужики,тема такая: Я долго парился и выбрал для себя вот такой способ Вёрстки,а точнее прошу оценить Код,по которому я в предь буду верстать сайты.

Посматрите код и скажите,правильно ли я написал его, и вообще какие у него минусы и недостатки,а какие плюсы(если есть конеш)?

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

Поправьте меня,если я не прав,я тока буду рад:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 11</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{width:100%;background:#000000;}
div#header h1{font:110% arial,sans-serif;text-align:center;margin:0;}
div#header a{position:absolute;right:0;top:23px}
div#container{text-align:left}
div#content p{line-height:1.4 ;padding-bottom:30px;}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#container{min-width:600px;width:100%;}
div#wrapper{width:100%;float:left;}
div#content{margin:0 250px;}
div#navigation{width:250px;margin-left:-100%;float:left;}
div#extra{width:250px;margin-left:-250px;float:left; }
div#footer{clear:both;width:100%;}
</style>
</head>
<body>
<div id=container>
<div id=header> <h1>«Absolute Games»</h1></div>
<div id=wrapper>
<div id=content>
Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал)
является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации.
</div>
</div>
<div id=navigation>
Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал)
является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации.
</div>
<div id=extra>
Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал)
является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации.
</div>
<div id=footer> fdhgchcfhfghghhfghfgh</div>
</div>
</body>
</html>

Знаете,единственное меня настараживает вот это: min-width:600px; ,работает ли везде эта штука?

Edited October 2, 2008 by psywalker

Dimitry Wolotko · October 2, 2008

min-width не работает в IE.

Есть несколько способов заставить его понимать этот стиль, к примеру через expression.

psywalker · October 2, 2008

Dimitry Wolotko

min-width не работает в IE.

1)А я проверяю,у меня в ИЕ работает) Объясните плиз

2)А в целом способ Вёрстки нормальный? и какие у него недостатки и минусы?

3)А где можно почитать про expression ? и в принципи зачем он нужен.если в ИЕ работает нормально?

Edited October 2, 2008 by psywalker

homm · October 2, 2008

min-width не работает в IE.
Есть несколько способов заставить его понимать этот стиль, к примеру через expression.

Дим, в ИЕ width рабюотает как min-width

rus · October 2, 2008

Я думаю так будет правильней:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 11</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html, body {
	margin:0;
	padding:0
	width:100%;
    height:100%;
	font: normal 12px Verdana;
	text-align:center;
}
p {
	margin:0 10px 10px;
}
a {
	display:block;
	color: #006;
	padding:10px
}
#header {
	width:100%;
	background:#000000;
	height:50px;
	position:absolute;
    top:0;
}
#header h1 {
    color:#FFFFFF;
	font: bold 12px Verdana;
	text-align:center;
}
#header a {
	position:absolute;
	right:0;
	top:23px;
}
#content p {
	line-height:1.4;
	padding-bottom:30px;
}
#extra {
	background:#FF8539;
	width:15%;
    position:absolute;
    top:50px;
    right:0;
    bottom:0;
    text-align:center;
}
#footer {
	background: #333;
	color: #FFF;
}
#footer p {
	margin:0;
	padding:5px 10px;
}
#footer a {
	display:inline;
	padding:0;
	color: #C6D5FD;
}
#container {
height:auto !important;
min-height:100%;
height:100%;
position:relative;
min-width:800px;
}
#wrapper {
    position: relative;
	width:70%;
	min-height: 100%;
	top:50px;
	left:15%;
    right:15%;
}
#content {
padding-bottom:50px;
padding-right:10px;
margin-right:15px;
padding-top:15px;
height: 100%;
}
#navigation {
background:#B9CAFF;
width:15%;
position:absolute;
top:50px;
left:0;
bottom:0;
}
#footer {
position: relative;
margin-top: 100%;
height: 50px;
width:100%;
bottom:0;
}
</style>
</head>
<body>
<div id=container>
  <div id=header>
    <h1>«Absolute Games»</h1>
  </div>
  <div id=wrapper>
    <div id=content> Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал) 
      является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации. </div>
  </div>
  <div id=navigation> Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал) 
    является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации. </div>
  <div id=extra> Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал) 
    является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации. </div>
  <div id=footer> fdhgchcfhfghghhfghfgh</div>
</div>
</body>
</html>

Только просьба, прежде чем тупо копировать, - посмотри этот код и сравни со своим, и ыяви для себя недостатки в своей верстке.

psywalker · October 2, 2008

rus

1)А теперь погляди,как из-за твоего способа выглядит Футер в ИЕ,да и вообще у меня например в ИЕ твоя вёрстка поплыла страшно вся

2) И всётаки объясни.чем мой способ плох?

Edited October 2, 2008 by psywalker

Argus · October 2, 2008

1. Начнем с того, что какой-то странный прием позиционирования колонок.. Наверняка с какой-то книжки умной списали его и всё. Верно? Да и вообще мнение о том, что в коде содержание должно идти первым весьма спорно.

2. Да, min-width не кроссбраузерен. IE6 его не знает.

3. div#content p{line-height:1.4 ;} И в чем вы его указываете? Единицы надо писать.

4. body{font: 76% arial,sans-serif;} Сами придумали? Вообще-то для уравнения к 1em = 10px кроссбраузерно используется 62.5%

5. p{margin:0 10px 10px} и прочее. Надо закрывать ";" даже в последних правилах. Ибо нарветесь однажды. (в Safari это, кстати, является ошибкой).

6. <div id=container> В ковычки.

7. Почему именно такой доктайп? Я бы вам посоветовал xhtml1.0 transitional.

8. Выносите стили во внешний файл.

Можете почитать ещё мои записи:

http://anarion.info/other/html-css-recomend.html

http://anarion.info/other/html-defaults.html

Ну и может ещё что.

rash · October 2, 2008

Дим, в ИЕ width рабюотает как min-width

Точно?

height и min-height — да, а вот что касается ширины — нет.

Если задать странице минимальную ширину как width для IE — она не будет растягиваться шире при более широком окне браузера. Она останется фиксированной ширины.

psywalker · October 2, 2008

Argus

1) Да,я согласен,этот способ я списал.но потом выучил и написал сам,потому как мне этот способ понравился и я считаю его Железным

2) Вот действительно проблема есть с min-width,тут согласен,но говорят её можно обмануть?

3),4),5),6),7),8)Единицы и прочую лабуду я не указывал,потомучто это просто пример моего способа,всякие Вынесения CSS во внешний файл,Доктайпы,Закрытие кавычек, Шрифты,Единицы и Промежутки между строчек мне не важны в моём вопросе,так как мне интересен сам способ вёрстки

Лучше ответьте мне,как мне обойти min-width и какие косяки помимо его есть в моём способе?

На данный момент ещё никто толком не опроверг мой способ и не указал его минусы,кроме min-width ..будем ждать))

Edited October 2, 2008 by psywalker

rus · October 2, 2008

Поправил:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 11</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html, body {
	margin:0;
	padding:0
	width:100%;
    height:100%;
	font: normal 12px Verdana;
	text-align:center;
}
p {
	margin:0 10px 10px;
}
a {
	display:block;
	color: #006;
	padding:10px
}
#header {
	width:100%;
	background:#000000;
	height:50px;
	position:absolute;
    top:0;
	left:0;
}
#header h1 {
    color:#FFFFFF;
	font: bold 12px Verdana;
	text-align:center;
}
#header a {
	right:0;
	top:23px;
}
#content p {
	line-height:1.4;
	padding-bottom:30px;
}
#extra {
	background:#FF8539;
	width:15%;
    position:absolute;
    top:50px;
    right:0;
    bottom:0;
    text-align:center;
}
#footer p {
	margin:0;
	padding:5px 10px;
}
#footer a {
	display:inline;
	padding:0;
	color: #C6D5FD;
}
#container {
height:auto !important;
min-height:100%;
height:100%;
position:relative;
min-width:800px;
}
#wrapper {
    position: relative;
	width:70%;
	min-height: 100%;
	top:50px;
	left:15%;
    right:15%;
}
#content {
padding-bottom:50px;
padding-right:10px;
margin-right:15px;
padding-top:15px;
height: 100%;
}
#navigation {
background:#B9CAFF;
width:15%;
position:absolute;
top:50px;
left:0;
bottom:0;
}
#footer {
position: absolute;
left:0;
margin-top: 100%;
height: 50px;
width:100%;
bottom:0;
background: #333;
color: #FFF;
}
</style>
</head>
<body>
<div id=container>
  <div id=header>
    <h1>«Absolute Games»</h1>
  </div>
  <div id=wrapper>
    <div id=content> Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал) 
      является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации. </div>
  </div>
  <div id=navigation> Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал) 
    является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации. </div>
  <div id=extra> Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал) 
    является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации. </div>
  <div id=footer> fdhgchcfhfghghhfghfgh</div>
</div>
</body>
</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">

Dimitry Wolotko · October 2, 2008

Дим, в ИЕ width рабюотает как min-width

Я в курсе, но ведь смысл у width и min-width мальца разный.

psywalker · October 2, 2008

Edited October 2, 2008 by psywalker

rus · October 4, 2008

Вот поправил, надо вот это поменять в стилях:

#wrapper {
    position: absolute;
    width:70%;
    min-height: 100%;
    top:50px;
    left:15%;
    right:15%;
}
#content {
    width:100%;
    height: 100%;
    margin-top:10px;
    left:15%;
    right:15%;
}
#navigation {
    background:#B9CAFF;
    width:15%;
    position:absolute;
    top:50px;
    left:0;
    bottom:0;
    padding-top:10px;
}
#extra {
    background:#FF8539;
    width:15%;
    position:absolute;
    top:50px;
    right:0;
    bottom:0;
    text-align:center;
    padding-top:10px;
}

Sign In

Оцените мой способ вёрстки

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

Обсуждения

Important Information