Jump to content
  • 0

отступ между <a>


Kos87
 Share

Question

не пойму почему у меня есть отступ между блоками, вроде все правильно. В чем ошибся?

xhtml

<div id="menu">
<a href="" class="menu_on">Главная</a>
<a href="" class="menu">Почему мы?</a>
<a href="" class="menu">О нас</a>
<a href="" class="menu">Клиенты</a>
</div>

CSS

#menu{text-align:center; margin:20px 0;}
a.menu{display:inline-block; background:url('diz/') no-repeat #7eff6d; height:25px; padding:0 30px; padding-top:7px; margin:0;}
a.menu_on{display:inline-block; background:url('diz/') no-repeat #7eff6d; height:25px; padding:0 30px; padding-top:7px; margin:0;}

вот сайт http://help-team.com.ua/

Edited by Kos87
Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

<div id="menu">
<a href="" class="menu_on">Главная</a>
<a href="" class="menu">Почему мы?</a>
<a href="" class="menu">О нас</a>
<a href="" class="menu">Клиенты</a>
</div>

НИКОГДА ТАК НЕ ДЕЛАЙТЕ.

Для чего списки разработаны по вашему? Не игнорируйте списки, они священны, поймёте это после того как при помощи список намного проще решите массу проблем, которые не решить блоками.

Списки священны.

Link to comment
Share on other sites

  • 0
а ты поставь ссылки на одну строку, без переноса

ого как :(

заработало :(

а так оно почему материлось, оно ж на переносы реагировать не должно!?

<div id="menu">
<a href="" class="menu_on">Главная</a>
<a href="" class="menu">Почему мы?</a>
<a href="" class="menu">О нас</a>
<a href="" class="menu">Клиенты</a>
</div>

НИКОГДА ТАК НЕ ДЕЛАЙТЕ.

Для чего списки разработаны по вашему? Не игнорируйте списки, они священны, поймёте это после того как при помощи список намного проще решите массу проблем, которые не решить блоками.

Списки священны.

у списка надо убирать маркер, я не знаю как...

Link to comment
Share on other sites

  • 0
<div id="menu">
<a href="" class="menu_on">Главная</a>
<a href="" class="menu">Почему мы?</a>
<a href="" class="menu">О нас</a>
<a href="" class="menu">Клиенты</a>
</div>

НИКОГДА ТАК НЕ ДЕЛАЙТЕ.

Для чего списки разработаны по вашему? Не игнорируйте списки, они священны, поймёте это после того как при помощи список намного проще решите массу проблем, которые не решить блоками.

Списки священны.

Никогда не слушайте советчиков. Думайте своей головой.

Приведенный код является списком.

Link to comment
Share on other sites

  • 0
Никогда не слушайте советчиков. Думайте своей головой.

Приведенный код является списком.

ок!

а Вы не подскажите почему идет такое поведение (в приведенном мною коде есть отступ от блока к блоку), а когда ставлю <a> в строчку то все нормально??

можно ли как то по другому решить проблему?

Link to comment
Share on other sites

  • 0
ок!

а Вы не подскажите почему идет такое поведение (в приведенном мною коде есть отступ от блока к блоку), а когда ставлю <a> в строчку то все нормально??

можно ли как то по другому решить проблему?

Переводы строки являются пробелами.

Решить можно путем превращения этих элементов в плавающие (float) блоки. Только не забыть контейнеру overflow: hidden поставить.

Подробности ищите на этом форуме.

Link to comment
Share on other sites

  • 0
<div id="menu">
<a href="" class="menu_on">Главная</a>
<a href="" class="menu">Почему мы?</a>
<a href="" class="menu">О нас</a>
<a href="" class="menu">Клиенты</a>
</div>

НИКОГДА ТАК НЕ ДЕЛАЙТЕ.

Для чего списки разработаны по вашему? Не игнорируйте списки, они священны, поймёте это после того как при помощи список намного проще решите массу проблем, которые не решить блоками.

Списки священны.

Аргументируешь? С примерами?

Link to comment
Share on other sites

  • 0

Kos87

Ещё как вариант тебе

<div id="menu">
<a href="" class="menu_on">Главная</a><!--
--><a href="" class="menu">Почему мы?</a><!--
--><a href="" class="menu">О нас</a><!--
--><a href="" class="menu">Клиенты</a>
</div>

2)s0rr0w, Dimitry Wolotko

Ребят, хочу аргументировать с примерами:

Код, который мы разбираем явно смахивает на меню, соответственно меню - это явный список. Но это какбы понятный пример, а вот вчерашний спор насчёт: http://www.reichauto.com.ua/ В середине есть перечисление марок машин, которые опять-же автор(кстати видимо от не знания списков) сделал в блоках с обычными ссылками. Опятьже считаю что и тут надо было делать списком, а Аргументы:

1. Гибкость

2. Удобство.

3. Нет проблем, один список, один класс и управление через этот класс

4. Опятьже идёт перечисление марок машин, почему бы не сделать списком?

Пример: А представь если будет очень много блоков, допустим 10 строк, и нахрена мне тратить на это аж 10 контейнеров, если всё это опять же может заменить один списочек. Да, наверное от части психоз, но всё же мне бы было удобно делать списком

Edited by psywalker
Link to comment
Share on other sites

  • 0

7 методов решения решения этой проблемы http://cssing.org.ua/2008/03/09/ul-li-ie-bug/#more-173 ))

списки семантически правильные, плюс при отключенных стилях списки сохранят список, и выделять и с случайных линков в примитивное меню

Link to comment
Share on other sites

  • 0
не пойму почему у меня есть отступ между блоками, вроде все правильно. В чем ошибся?

xhtml

<div id="menu">
<a href="" class="menu_on">Главная</a>
<a href="" class="menu">Почему мы?</a>
<a href="" class="menu">О нас</a>
<a href="" class="menu">Клиенты</a>
</div>

CSS

#menu{text-align:center; margin:20px 0;}
a.menu{display:inline-block; background:url('diz/') no-repeat #7eff6d; height:25px; padding:0 30px; padding-top:7px; margin:0;}
a.menu_on{display:inline-block; background:url('diz/') no-repeat #7eff6d; height:25px; padding:0 30px; padding-top:7px; margin:0;}

вот сайт http://help-team.com.ua/

не критично особо, списком или нед, можно так сделать:

a {display:block; float:left;} ну и дальше от задачи уже...

Link to comment
Share on other sites

  • 0
1. Гибкость

Одинаковая.

2. Удобство.

Спорное. Нужно всегда убирать кучу дефолтных стилей. Очень удобно!

3. Нет проблем, один список, один класс и управление через этот класс

В приведенном автором примере тоже нет проблем. Классу пофиг, куда именно он будет присвоен.

4. Опятьже идёт перечисление марок машин, почему бы не сделать списком?

Обалдеть логика. Любое перечисление (повторение однородных или логически связанных элементов), по вашей логике, нужно делать списками? Тогда в вашем коде все должно быть списками, потому что любые чайлды у парента - это перечисление.

Пример: А представь если будет очень много блоков, допустим 10 строк, и нахрена мне тратить на это аж 10 контейнеров, если всё это опять же может заменить один списочек. Да, наверное от части психоз, но всё же мне бы было удобно делать списком

:)

Диагноз: передоз списками.

7 методов решения решения этой проблемы http://cssing.org.ua/2008/03/09/ul-li-ie-bug/#more-173 ))

списки семантически правильные, плюс при отключенных стилях списки сохранят список, и выделять и с случайных линков в примитивное меню

Таблицы семантически правильные, параграфы семантически правильные, ссылки семантически правильные. Аргумент обалденной силы!

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

Link to comment
Share on other sites

  • 0

s0rr0w

Если честно, то у меня нет столько времени что-бы щас раздувать с тобой спор, но я те просто отвечу:

1)

1. Гибкость

Одинаковая.

Не одинаковая, один список с LI очень удобен, вместо 10 блоков с 10 классами, мне так рулить удобнее намного и при необходимости выдёргивать нужные ячейки, так же и управлять ими

2)

2. Удобство.

Спорное. Нужно всегда убирать кучу дефолтных стилей. Очень удобно!

А твоим ссылкам зато нужно оверфлоу ставить и флоатить их, следить, что-бы отступы не возникли непонятные, тоже получается нехорошо

3)

3. Нет проблем, один список, один класс и управление через этот класс

В приведенном автором примере тоже нет проблем. Классу пофиг, куда именно он будет присвоен.

Выше описал, один список - один клас на 100 ячеек, а твои ссылки - это 10 блоков, 10 классов и т. д.

4)

Обалдеть логика. Любое перечисление (повторение однородных или логически связанных элементов), по вашей логике, нужно делать списками? Тогда в вашем коде все должно быть списками, потому что любые чайлды у парента - это перечисление.

А тут логика проста, ты берёшь слишком утрированное перечисление, а для меня тут оно явное, поэтому я и исользовал бы тут списки, но не делал бы этого для всего живого на сайте.

5)

Диагноз: передоз списками.

Не последняя стадия :)

6)

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

Маленький, но всё же Аргумент

Link to comment
Share on other sites

  • 0
s0rr0w

Если честно, то у меня нет столько времени что-бы щас раздувать с тобой спор, но я те просто отвечу:

1)

Не одинаковая, один список с LI очень удобен, вместо 10 блоков с 10 классами, мне так рулить удобнее намного и при необходимости выдёргивать нужные ячейки, так же и управлять ими

Отвечу жестко, держись, все в общий контейнер с классом, все стили через этот класс ))).

Итого, 11 тегов вместо 21 ))))

Edited by Justnewone
Link to comment
Share on other sites

  • 0
Отвечу жестко, держись, все в общий контейнер с классом, все стили через этот класс ))).

Итого, 11 тегов вместо 21 ))))

ок, я тя понял, а ты сам например чем бы делал в данной ситуации?

Link to comment
Share on other sites

  • 0
ок, я тя понял, а ты сам например чем бы делал в данной ситуации?

Я бы сделал список, просто потому что считаю что в данном случае это список. Но =). Если бы понадобилось как-то "вот бы LI дивом обернуть", то сделал бы не списком.

Хотя, даже LI тут на самом деле проблему не решит, решение находится на уровне CSS а не на уровне HTML. Если я смотрю за сайтом в дальнейшем, то я как правило склеиваю теги в строку - отступ пропадает. Если же нет - то флоатом только.

Edited by Justnewone
Link to comment
Share on other sites

  • 0
Я бы сделал список, просто потому что считаю что в данном случае это список. Но =). Если бы понадобилось как-то "вот бы LI дивом обернуть", то сделал бы не списком.

Хотя, даже LI тут на самом деле проблему не решит, решение находится на уровне CSS а не на уровне HTML. Если я смотрю за сайтом в дальнейшем, то я как правило склеиваю теги в строку - отступ пропадает. Если же нет - то флоатом только.

но вот видишь, сам бы списком воспользовался бы)) А насчёт элементов в одну строку это вообще не по мне, я такие штуки не уважаю. Лебедев стайл))

Link to comment
Share on other sites

  • 0
Если честно, то у меня нет столько времени что-бы щас раздувать с тобой спор, но я те просто отвечу:

Да и у меня вроде тоже нет. :)

Не одинаковая, один список с LI очень удобен, вместо 10 блоков с 10 классами, мне так рулить удобнее намного и при необходимости выдёргивать нужные ячейки, так же и управлять ими

Это все твои догадки. Давай разберем что-тона конкретном примере.

А твоим ссылкам зато нужно оверфлоу ставить и флоатить их, следить, что-бы отступы не возникли непонятные, тоже получается нехорошо

Для данной задачи аналогичное относится и к спискам. Их тоже нужно флоатить и тоже оверфлоу ставить.

Выше описал, один список - один клас на 100 ячеек, а твои ссылки - это 10 блоков, 10 классов и т. д.

:(

А тут логика проста, ты берёшь слишком утрированное перечисление, а для меня тут оно явное, поэтому я и исользовал бы тут списки, но не делал бы этого для всего живого на сайте.

Я беру другой уровень абстракции. Для меня списками является почти все в HTML. Но я не леплю бездумно UL, OL ко всему подряд.

Маленький, но всё же Аргумент

Это аргумент из разряда, что не надо использовать на сайте красный цвет, иначе антикоммунисты будут плеваться и уйдут с сайта.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 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