Вставьте ul вместо левого бордера - Веб-строительство

195

ortegas

15 января 2011, 21:29

#21

Alkoshenko, извините, что я зануда, кой думает о чистоте кода и валидности, но смотрите:

http://imglink.ru/show-image.php?id=ffa7ccd4b543f7f0a90ebb8011dd6905

Правда просто и чисто? Такой код любой пользователь сможет отредактировать. В эти блоки вставляйте что хотите, вместо div'а может и ul быть, li можно добавить перед a. Юзайте. Для бордера вот:

ul {owerflow: hidden;}

li {

border-bottom: solid 1px black;

position: relative;

bottom: -2px; }

Я просто не хочу, чтобы потом на ваш сайт говорили "Гс", и-за того, что там тонна кода, и она одно с другим в реакцию вступает.

Вместо ul, советую использовать nav и html5 DOCTYPE.

ortegas добавил 16.01.2011 в 00:33

vandamme, ваш вариант неработоспособен.. http://imglink.ru/show-image.php?id=a4074fd04bfcbe3ee5446a6745a06f48

A

128

Alkoshenko

15 января 2011, 21:39

#22

Спасибо всем ortegas и vandamme большое спасибо. ortegas А можете скинуть мне код в ЛС?

O

195

ortegas

15 января 2011, 21:42

#23

Alkoshenko, со скриншота перепишите и просто мои превью статьи замените на ваши ссылки. Вместо левого бордера, по аналогии пишите нижний и вместо left: -3px - bottom: -3px. Остальные параметры, типа margin и padding на ваше усмотрение, можно использовать только один, тем самым менюшка ваша будет чистая и поисковик, как пользователь не будет загружать тонны кода. Ибо если такую мелочь с float'ом делать (а это гемор ужасный), тогда это обтекание потом без ген. зброса (clear: both) и весь сайт утопит. Тем-более то, что предложил Вандам, это хак, а не решение. float: left, хоть на самом деле, блоки то никакие не left, и стоит вписать это в еще один флоат и оно будет конфликтовать.

A

128

Alkoshenko

15 января 2011, 21:44

#24

Дзякуй вялики! =)

O

195

ortegas

15 января 2011, 21:46

#25

Alkoshenko, "велике дякую" :D.

675

vandamme

15 января 2011, 22:23

#26

я вообще-то потом добавил

ul {

float: left;

margin: 0 3.5% 0 0;

padding: 0;

width: 31%;

}

ul.last {

margin-right: 0;

}

ul li {

border-bottom: 1px solid gray;

list-style: none outside none;

}

ul li.last {

border: medium none;

}

vandamme добавил 16.01.2011 в 01:24

и как видите на моем скрине все нормально работает

A

128

Alkoshenko

15 января 2011, 22:33

#27

Оо заработало у Вас vandamme я просто ласт не вписал короче всё работает)

Извините ortegas но чтото в вашем коде я запутался и всё равно по вертикале.

<style>

#a{

	display:inline-block;

	overflow:hidden;

	padding-top:20px;}

#a div {

	display:inline-block;

	width:29%;

	padding:4px 10px;

	margin:0 0 30px 0;

	vertical-align:top;

	height:150px;

	border-left:dashed 1px #F00;

	position:relative;

	left:-3px;}

</style>

</head>



<body>

<nav id="a">

<div id="b">awd</div>

<div>awd</div>

<div>awd</div>

</nav>

</body>

</html>

O

195

ortegas

15 января 2011, 22:38

#28

Alkoshenko, не вставляйте в инлайновый элемент div. Вставьте a и css пишите #a a.

S0

32

snk001

16 января 2011, 00:28

#29

ortegas:
snk001, ul элементы блочные и ширина не поможет.. Тем более ширина для всех сразу ul указана, а не для общего у вас. li с флоатом - бред, каждый раз будет применятсо флоат, тем сама переносить на одну строчку вниз. Сброс спасет, но это не кросбраузерно и не верно.

Что значит блочные и не поможет? Очень даже ширина для блочных выставляется.

С LI не бред (и вообще, подбирайте выражения), а аккуратное решение. Ибо как раз надо чтоб переносило - до тех пор, пока не упрется в высоту блока UL, и, опаньки, начнет новый столбец.

Так что все очень даже кроссбраузерно и верно.

O

195

ortegas

16 января 2011, 02:40

#30

snk001, а li по дефолту переносится, в итоге - лишняя строка и приклеенный соседний блок.

Вы выставили общую ширину для ul.

Маркетинг для шоколадной фабрики. На 34% выше средний чек

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

CSS