<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;
}
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>
<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;
}
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;
}
Но хотелось семантической верстки, с помощью списков..
Как вообще такие вещи корректно делаются?
Я такие вещи обычно делаю простым <div> -> <a> -> <img> - никаких проблем не замечал.
float-ы на li-шки повесь. и копай от этого
div, a - более наглядно, но слишком просто :)
Картинки вставлять img прямо в html рекомендуется только если это изменяемое содержимое, в противном случае как background для блоков. (такие требования..)
2 Lone Wolf
Спасибо помогло. Это был глюк IE или я не вполне понял блочную модель?