создавая новый сайт и работая над тикером новостей, он имеет метки хэша под ним для навигации. Знаки хэша находятся в абсолютном div в нижней части модуля тикера. Внутри div находятся якорные метки и некоторые проставки, они выглядят ниже, где они должны, и я не могу понять, почему, может кто-то взглянуть и помочь мне?
http://race.3drexstaging.com/Home - это ссылка.
Спасибо за любую помощь
HTML
<div class="dnnForm Normal NewsFeedHolder">
<div class="newsFeedInner">
<div class="feedItems" id="newsItem0">
<span class="feedTitles">Featured Promotions : </span>
<span class="feedTexts">Example - 50% OFF SALE! On Select Products and Services</span>
</div>
<div class="feedItems inactive active" id="newsItem1">
<span class="feedTitles">Another Headline : </span>
<span class="feedTexts">You can put info about another sale here</span>
</div>
<div class="feedItems inactive" id="newsItem2">
<span class="feedTitles">Yet Another Headline : </span>
<span class="feedTexts">More information about your sale</span>
</div>
</div>
<div class="newsFeedNavs">
<div class="newsFeedNavsInner">
<a class="newsNavItems" id="newsNavItem0" href="javascript:getNewsItem(0)"></a>
<span class="newsSpacer"></span>
<a class="newsNavItems inactive active" id="newsNavItem1" href="javascript:getNewsItem(1)"></a>
<span class="newsSpacer"></span>
<a class="newsNavItems inactive" id="newsNavItem2" href="javascript:getNewsItem(2)"></a>
</div>
</div>
</div>
CURRENT CSS:
.feedItems
{
color: white;
}
.feedTitles
{
font-weight: bold;
color: #ce0d25;
margin-right: 10px;
}
.feedTexts
{
}
.NewsFeedHolder
{
position: relative;
}
.newsFeedInner
{
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-size: 10pt;
}
.newsFeedNavs
{
text-align: center;
position: absolute;
height: 2px;
bottom: -2px;
left: 0px;
right: 0px;
}
.newsFeedNavsInner {
height: 2px;
display: inline-block;
background-color: black;
padding-right: 15px;
padding-left: 15px;
}
.newsNavItems
{
display: inline-block;
width: 15px;
height: 2px;
overflow: hidden;
text-indent: -9999px;
background-color: white;
line-height: 2px;
margin: 0px;
padding: 0px;
}
a.newsNavItems:hover, a.newsNavItems.active
{
background-color: red;
}
.feedItems
{
display: none;
}
.feedItems.active
{
display: block;
}
.newsSpacer {
display: inline-block;
width: 15px;
line-height: 2px;
height: 2px;
margin: 0px;
padding: 0px;
}
.newsFeedNavsInner {
height: 2px;
display: inline-block;
background-color: black;
padding-right: 0;
padding-left: 30px;
}
.newsNavItems {
display: block;
float: left;
width: 15px;
height: 2px;
overflow: hidden;
text-indent: -9999px;
background: white;
line-height: 2px;
margin: 0 10px;
padding: 0px;
}
или
.newsFeedNavsInner {
height: 2px;
display: inline-block;
background-color: black;
padding-right: 15px;
padding-left: 15px;
}
.newsNavItems {
display: block;
float: left;
width: 15px;
height: 2px;
overflow: hidden;
text-indent: -9999px;
background: white;
line-height: 2px;
margin: 0;
padding: 0;
}
.newsSpacer {
display: inline-block;
float: left;
width: 15px;
line-height: 2px;
height: 2px;
margin: 0px;
padding: 0px;
}
Выравнивание по vertical-align
вашего контейнера устанавливается на baseline
(default.css строка 39).
Я предлагаю установить его top
:
div.newsFeedNavsInner {
vertical-align:top;
}
Учитывая ваш недавно опубликованный код, установите его на каждый элемент навигации:
.newsNavItems {
....
vertical-align:top;
}