Jump to content

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


psywalker
 Share

Recommended Posts

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

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

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

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

<!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 by psywalker
Link to comment
Share on other sites

Dimitry Wolotko

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

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

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

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

Edited by psywalker
Link to comment
Share on other sites

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

<!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>

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

Link to comment
Share on other sites

rus

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

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

Edited by psywalker
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

Точно?

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

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

Link to comment
Share on other sites

Argus

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

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

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

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

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

Edited by psywalker
Link to comment
Share on other sites

Поправил:

<!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">

Link to comment
Share on other sites

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

#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;
}

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy