Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Слишком большие горизонтальные отступы

29K
01 марта 2010 года
EXAngel
29 / / 08.07.2008
Вот html+css

 
Код:
<div id="newsget">
<ul>
  <li id="rss"><a href="#" title="RSS">RSS</a></li>
  <li id="xml"><a href="#" title="XML"><span></span></a></li>
  <li id="yahoo"><a href="#" title="My Yahoo!"><span></span></a></li>
</ul>
</div>


Код:
#newsget {
    display: inline;
    float: left;
    width: 90px;
    margin-left: 30px;
    margin-top: 17px;
    font-size: 14px;
}

#rss {
    text-align:center;
}

#xml span{
    display: block;
    width: 39px;
    height: 15px;
    background: url(../img/banners/xml.gif) no-repeat;
    margin: 6px auto 5px auto;
}

#yahoo span{
    display: block;
    width: 90px;
    height: 16px;
    background: url(../img/banners/yahoo.gif) no-repeat;
}


[ПРИЛОЖЕНИЕ] Снизу из firefox'a, сверху из IE6.

Есть конечно вариант проще:
 
Код:
<div class="newsget">
  <a href="#">RSS</a>
  <a id="xml" href="#"> </a>
  <a id="yahoo" href="#"> </a>
</div>


Код:
.newsget {
    margin: 13px 25px 0px 0px;
    text-align: center;
    color: #0a5ade;
    float: right;
    font-weight: bold;
    font-size: 14px;
}

.newsget a {
    margin: 0px 0px 0px 0px;
    color: #0a5ade;
}

#xml {
    background: url(i/xml.gif) no-repeat top center;
    width: 39px;
    height: 15px;
    display: block;
    margin: 3px auto;
}

#yahoo {
    background: url(i/yahoo.gif) no-repeat top center;
    width: 90px;
    height: 16px;
    display: block;
}


Но хотелось семантической верстки, с помощью списков..
Как вообще такие вещи корректно делаются?
253
01 марта 2010 года
Proger_XP
1.5K / / 07.08.2004
Я такие вещи обычно делаю простым <div> -> <a> -> <img> - никаких проблем не замечал.
274
02 марта 2010 года
Lone Wolf
1.3K / / 26.11.2006
float-ы на li-шки повесь. и копай от этого
29K
02 марта 2010 года
EXAngel
29 / / 08.07.2008
2 Proger_XP

div, a - более наглядно, но слишком просто :)
Картинки вставлять img прямо в html рекомендуется только если это изменяемое содержимое, в противном случае как background для блоков. (такие требования..)

2 Lone Wolf

Спасибо помогло. Это был глюк IE или я не вполне понял блочную модель?
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог