Спорт! Варианты решения задачи [верстка]

motek · 12.02.2012

BaNru сказал(а):
motek, а ты что ни чего не предлагаешь?

так выше высказался уже...

Код:
самый первый вариант, предложенный в виде примера - самый оптимальный

Код:

<ul> <li><a>текст</a></li> <li><a>текст</a></li> </ul>

можно конечно и так

Код:

<ol>
   <li><a>текст</a></li>
   <li><a>текст</a></li>
</ol>

BaNru · 12.02.2012

Ну а стили? Тут вопрос не только в HTML. Тут еще и по стилям не мало вариантов решения.

motek · 12.02.2012

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальное меню</title>

<style>

#ul1 {
	border: 1px solid red;
	display: table;
	list-style: none outside none;
	margin: 0;
	padding: 5px 5px 5px 7px;
}
#ul2 {
	border: 1px solid red;
	display: inline-block;
	list-style: none outside none;
	margin: 0;
	padding: 5px 5px 5px 7px;
}
#ul3 {
	border: 1px solid red;
	list-style: none outside none;
	margin: 0;
	padding: 5px 5px 5px 7px;
	float:left;
}
li {
	float:left;
}
a {
	display:block;
	/* чтобы можно было установить высоту */
	line-height: 32px;
	/* так устанавливаем высоту, при этом вертикальное выравнивание
	будет по центру */
	padding:0 30px;
	text-decoration:none;
	color:black;
	border:solid 2px blue;
	margin-left:-2px;
	/* убираем двойную рамку между пунктами меню */
}
nav {
	display:inline-block;
	border:solid 1px red;
	padding:5px;
}
h2 {
	display:block;
	padding:0;
	margin:0;
	font-size:16px;
	font-weight:400;
	float: left;
}  
</style>
</head>

<body>
	<nav>
		<h2><a href="#" title="">Пункт 1</a></h2>
		<h2><a href="#" title="">Пункт второй</a></h2>
	</nav>
<hr>
	<ul id="ul1">
		<li><a href="#">Пункт 1</a>
		<li><a href="#">Пункт второй</a>
	</ul>
<hr>
	<ul id="ul2">
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт второй</a></li>
	</ul>
<hr>
	<ul id="ul3">
		<li><a href="#">Пункт 1</a></li
		><li><a href="#">Пункт второй</a></li>
	</ul>

первый вариант чисто сеошный - индексируется заголовок с ключом и титл ссылки с кратким описанием

(валидация прошла)
три других - возможные решения css

BaNru · 12.02.2012

Вариант от motek
http://jsfiddle.net/BaNru/6NbwM/9/

Вот о чем я и говорил вначале. Выбор вариантов решения очень большой.

Так какой же выбирать?
Какой вариант более совершенен?
Кто как и на чём останавливает свой выбор?

Предлагаю подумать. Ответ не пишите на эти вопросы.
Может к завтрашнему вечеру ещё кто-то даст свой вариант.

A-F · 13.02.2012

ul {
liststyle:none
}
ul li {
text-align: center;
display: inline
}

vla · 13.02.2012

Вот мой вариант:

Код:

<!--CSS-->
<style>
#a1,#a2{
display:block;
float:left;
color:#000;
border:1px #00F solid;
margin:0;
padding:3px;
}
#a1{
border-right:none;
}
</style>

<!--HTML-->
<div style="padding:3px;float:left; border:1px #F00 solid">
<a id="a1" href="">Yandex</a>
<a id="a2" href="">Google</a>
</div>

<!--Полный код смотри в прикрепленном файле-->

Минимум HTML-тегов.

BaNru · 13.02.2012

Код от A-F
http://jsfiddle.net/BaNru/6NbwM/10/

Код от vla
http://jsfiddle.net/BaNru/6NbwM/11/

Ну что, спасибо всем кто принял участие!

Еще раз повторюсь, что оказывается решений одной и той же задачки может быть множество.
Каждый решает на свой вкус и цвет.

Сейчас я попробую прокомментировать все предоставленные варианты и возможно предоставлю свой (так как пока что я подробно не изучал предоставленное, то возможно все мои варианты были уже озвучены)

Хотя стоп. Сначало обратим внимание на слова от lekzd

lekzd сказал(а):
сейчас я иду от возможно расширения и дополнения задачи, т.е. заранее закладываю "фундамент" для надстроек

Я думаю это очень правильные слова. Которые и должны быть основой выбора варианта.

Думаю что основные критерии:
- Семантика
- Кроссбраузерность
- Валидность
- Масштабируемость

Думаю с первыми тремя пунктами всё понятно, а вот с последним...

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

Конечно резина решается одним параметром, а вместе с ним и добавление новых пунктов меню.
А вот с дизайном обстоит сложнее.
Я не зря нарисовал такой каркас и предоставил код. Давайте посмотрим на пример дизайна
[sharedmedia=core:attachments:1860]
Сам фон
[sharedmedia=core:attachments:1859]

Начнем по порядку.

Вариант от olgamar
Вариант первый http://jsfiddle.net/BaNru/6NbwM/
Такой вариант я сам не рассматривал, но он имеет право на жизнь. Только не в таком виде.

Начнем с того, что созданы два DIV, а внутри две таблицы.
О, милая девушка, ну зачем же две таблицы?!
Думаю это смело можно назвать первой ошибкой.
Вторая ошибка - это

Код:

width="200" border="1" cellpadding="0" cellspacing="0"

Так сейчас не верстают. От этого надо отказываться. Это все легко переносится на CSS.

Данная задача решается немного проще. Как бы я написал данный код, код на таблицах
http://jsfiddle.net/BaNru/6NbwM/12/

Теперь попробуем привязать дизайн
http://jsfiddle.net/BaNru/6NbwM/13/

Вполне легко расширяется. Но таблицами уже стараются не верстать меню.
Почему? Ну наверное все для той же масштабируемости меню. Например для "мультиразрешения". Если меню сверстано дивами, то его можно как растянуть по всему экрану для больших разрешений, так и сделать в столбик - для маленьких разрешений экрана.

Теперь посмотрим на второй вариант.
Как видно, данный пример намного компактнее. Но и тут - зачем надо было добавлять параграфы (p)?
Тогда уж можно было бы сделать как я предложил.
И еще, сразу отказываемся от него по одной простой причине - меню сейчас принято верстать списками.
Но всё же попробуем прикрутить сюда дизайн.
http://jsfiddle.net/BaNru/6NbwM/14/

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

Но тут нет семантики, которой бы хотелось.

Переходим к примеру от Тигры
Он как раз и показал пример, который бы выбрал я, а именно инлайн-блок
Его код обсуждению не подлежит

А вот дизайн попробуем натянуть. Я остановлюсь на третьем варианте, ибо я сам делаю примерно так...в одну строчку правда, но это одно и тоже. Первый не беру, т.к. предпочитаю закрывать теги, чтобы не путаться самому.
Про второй он сам ответил. /* Тигра, а ведь это я тебя на инлайн-блоки подсадил

*/
http://jsfiddle.net/BaNru/6NbwM/15/
В отличие от второго варианта olgamar, HTML кода стало чуть больше, но стилей осталось столько же. Но пришлось использовать хаки для осла6-7. Есть ли тут приимущества? Думаю есть только одно - тут используется HTML5. Но я бы наверное остановился на этом варианте, несмотря на хаки.

Всё нах, заипался писать. Всего ничего расмотрел, а уже час с лишним убил на это. Не мое это писать статьи и разборы полетов

Жду пока комментариев к этому.
И ответы на ранее поставленные вопросы

BaNru сказал(а):
Так какой же выбирать?
Какой вариант более совершенен?
Кто как и на чём останавливает свой выбор?

Пока что, разница между примерами не большая, но есть. Даже имеющиеся варианты можно еще изменять и изменять. Делать разветвление.
А самый простой второго варианта olgamar, даже и выигрывает по многим параметрам.

В планах посмотреть остальные варианты. И попробовать расширять - добавлять пункты в меню и посмотреть как будет вести себя оно при резиновом решение.

ЗЫ Все примеры сделаны в Firefox, поэтому если у кого-то будут какие то ошибки верстки, то высказывайтесь.

Спорт! Варианты решения задачи [верстка]

motek

злой как @

BaNru

Пацифизжу

motek

злой как @

BaNru

Пацифизжу

A-F

Well-Known Member

vla

Well-Known Member

Вложения

BaNru

Пацифизжу

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей