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

[BaNru]

Я уже как-то создавал аналогичную тему по jQ.
Теперь создаю и по верстки.

Открепляю задачу в отдельную тему, переношу посты из темы "Популярные вопросы начинающих!"



Бывает, что одну и туже задачу (в данном случае - при верстке, но и по кодингу жду ответов) можно решить разными способами.
Чем больше опыта, тем больше вариантов решения откладывается в закромах знаний.

Вопрос: как вы выбираете наиболее оптимальное решение или делаете таким способом, который первый пришел в голову?

 

[lekzd]

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

 

[olgamar]

Люблю простые и кроссбраузерные конструкции, которые можно легко перекроить под меняющийся дизайн и/или функционал. Важно, чтобы участки кода легко идентифицировались в стилях и при этом были логически правильными и не отягощенными. Хорошо, когда один и тот же код можно использовать под разные задачи. Например, {position:relative; top:№} - поменял значение top, поставил в a:hover -получил интерактивную кнопочку. Хотелось бы всегда так же)

 

[BaNru]

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

Код приведен для примера. Можно написать и свой.
Так же можно и избавиться от nav (одно из направления верстки), верстку все равно не сложно сделать.

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

 

[olgamar]

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

 

[BaNru]

Так понятнее? Не добавлял эти отступы, так как их отсутствие дает еще пару вариантов решения.

 

[olgamar]

Делала такими способами, на которые хватило знаний). Но решить задачу не совсем корректно все же лучше, чем не решить ее вообще.
Привожу сразу и HTML и CSS документы.

Способ1.

HTML

<div id="color">
		
   <div id="table">
   <table>
   <table width="200" border="1" cellpadding="0" cellspacing="0">
					   <tbody>
																				  
					  <tr>
						  <td style="text-align:center"><a href="#">Text</a></td>
						<td style="text-align:center"><a href="#">Text</a></td>
					  </tr>
					 </tbody>
					 </table>
   </table>
   </div>
  
   </div>

CSS

#color {
	width:220px;
	height:35px;
	border:#FF0 1px solid;
	padding: 15px 0 0 17px;
	
}

#table {
	position:relative;
}

Способ 2.
HTML

<div id="test">
   <p><a href="#">Text</a></p>
   <p><a href="#">Text</a></p>
   </div>

CSS

#test p {
	width:100px;
	height:20px;
	border:#000 1px solid;
	text-align:center;
	float:left;
	
}

#test {
	width:220px;
	height:35px;
	border:#FF0 1px solid;
	padding: 15px 0 0 13px;
	
}

PS.
Конечно, способы запутанные и наверняка профессионал может решить задачу одним кликом мыши, но я только осваиваю HTML.)
Можно попросить выложить CSS к приведенному в теме списку?

 

[BaNru]

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

ЗЫ Я думаю Тигра даст оценку раньше меня, особенно строчек типа

<table width="200" border="1" cellpadding="0" cellspacing="0">

 

[olgamar]

все по Htmlbook)

http://htmlbook.ru/html/table

Буду очень ждать CSS документ!

 

[BaNru]

Вот выложил демонстрацию выше приведенного olgamar кода
http://jsfiddle.net/BaNru/6NbwM/
http://jsfiddle.net/BaNru/6NbwM/1/

Все могут там экспериментировать и предлагать свой код.
Что бы посмотреть что вы там написали - жмите RUN.
Что бы сохранить и поделиться ссылкой - жмите UPDATE, после чего появиться новая ссылка типа выше приведенной, только с новым порядковым номером ревизии.

 

[tigra60]

http://jsfiddle.net/6NbwM/2/
Подробное описание в комментариях к коду.
Я считаю это наиболее оптимальным вариантом.
Кто сможет, попробуйте оспорить этот факт.

Я думаю Тигра даст оценку раньше меня, особенно строчек типа

Мне как-то мама рассказывала интересный случай, который произошел, когда она еще в школе училась. Там один мальчик на уроке биологии сказал. что одним глазом человек видит одну половину предмета, а другим - другую половину.
На что учительница сказала, что закатает ему сейчас такую единицу, что он точно одним глазом увидит только ее половину.

 

[motek]

http://jsfiddle.net/6NbwM/2/
Подробное описание в комментариях к коду.
Я считаю это наиболее оптимальным вариантом.
Кто сможет, попробуйте оспорить этот факт.

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

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

не нашел подробного описания в комментариях к коду,поэтому оспаривать не буду

 

[tigra60]

КАПЕЦ!
А где мой вариант!?
Это лабуда какая-то, я совсем другое писал!
Как этой хренью пользоваться?????

 

[motek]

КАПЕЦ!
А где мой вариант!?
Это лабуда какая-то, я совсем другое писал!
Как этой хренью пользоваться?????

по-старинке - кнопочка "код" и побольше комментариев для оспаривания :laugh:

 

[olgamar]

а можно код Тигры выложить на форум или на другую ссылку? Я и UPDATE нажимала и RUN, но ничего не могу увидеть(

может быть, у меня нет прав для просмотра?

 

[motek]

а можно код Тигры выложить на форум или на другую ссылку? Я и UPDATE нажимала и RUN, но ничего не могу увидеть(

может быть, у меня нет прав для просмотра?

это, чтобы своё посмотреть нажимаем RUN, а другим показать - нажимаем UPDATE и получаем ссылку...

 

[tigra60]

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

<style>
nav {
display:inline-block;
/* чтобы красная рамка была не на весь экран, а по ширине меню */
border:solid 1px red;
padding:10px 5px 10px 7px;
/* расстояние от красной рамки до синей
7рх слева - компенсация a {margin-left:-2px} (см. ниже) */
}
nav ul {
list-style:none;
margin:0;
padding:0;
}
nav li {
display:inline-block;
/* это будет получше, чем float:left */
}
nav a {
display:block;
/* чтобы можно было установить высоту */
line-height: 32px;
/* так устанавливаем высоту, при этом вертикальное выравнивание
будет по центру */
padding:0 30px;
text-decoration:none;
color:black;
border:solid 2px blue;
margin-left:-2px;
/* убираем двойную рамку между пунктами меню */
}

</style>
</head>

<body>
<nav>
<ul>
<li><a href="#">Пункт 1</a>
<li><a href="#">Пункт второй</a>
</ul>
</nav>
<!-- как видите, элементы списка LI не закрыты.
Это сделано для того. чтобы не было промежутков между пунктами меню,
вот как это выглядит: -->
<hr>
<nav>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт второй</a></li>
</ul>
</nav>
<!-- если доктайп или стиль кодирования не позволяют оставлять пункты не закрытыми,
то перевод строки делаем перед закрывающей скобкой закрывающего тега вот так: -->
<hr>
<nav>
<ul>
<li><a href="#">Пункт 1</a></li
><li><a href="#">Пункт второй</a></li>
</ul>
</nav>
</body>
</html>

 

[motek]

nav li {
display:inline-block;
/* это будет получше, чем float:left */
}

шестого осла похоронили...а как же седьмой?

<!-- если доктайп или стиль кодирования не позволяют оставлять пункты не закрытыми,то перевод строки делаем перед закрывающей скобкой закрывающего тега вот так: -->

как вариант - пишем все в одну строчку :

 <nav>
    <ul><li><a href="#">Пункт 1</a></li><li><a href="#">Пункт второй</a></li></ul>
</nav>

такая конструкция тоже уберет промежуток между пунктами меню...

 

[tigra60]

шестого осла похоронили...а как же седьмой?

Ну, ёмаё!
Это же элементарно!

nav li {
display:inline-block;
//display:inline;
//zoom:1;
}

Линейные костылики для дядюшки Билли.
Вместо // может быть другой символ, например * или @ - по вкусу.
Нормальные бро игнорируют всю строку, а ИЕ - только первые неизвестные символы.
Таким образом, ишачок получит стили display:inline и zoom:1.
Последний создает т.н. HasLayout - свойство, дающее в ИЕ блоку блоковые свойства.

 

[BaNru]

Вариант тигры онлайн
http://jsfiddle.net/BaNru/6NbwM/8/

motek, а ты что ни чего не предлагаешь?

Давайте до завтрашнего вечера еще ждем, может кто захочет предложить еще что-то и...