Hola Gente.
tengo una lista definida con un estilo, y necesito agregar a una de las <li> un formato de "cabeza de lista" por decirlo de una manera.
Un jquery hace rotar una lista de productos, pero yo necesito categorizarlos y no encontré una forma "no horrible" de hacerlo.
Código HTML:
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
</div>
<img src="images/lofthumbs/791902news3.jpg" />
<h5> NewsFlash 1 </h5>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/435576news10.jpg" />
<h5> NewsFlash 2 </h5>
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li> COn este CSS
Código HTML:
/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner li.active{
background:url(../images/arrow-bg.png) no-repeat scroll left center;
color:#FFF
}
.lof-slidecontent ul.navigator-wrap-inner li > div{
background:url(../images/transparent_bg.png);
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.lof-slidecontent ul.navigator-wrap-inner li.active div{
background:url(../images/grad-bg.gif);
color:#FFF;
}
.lof-slidecontent ul.navigator-wrap-inner li img{
height:60px;
width:60px;
margin:15px 15px 10px 0px;
float:left;
padding:3px;
border:#C5C5C5 solid 1px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active img,
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
border:##6C8E5C solid 1px;
}
.lof-slidecontent .button-next,
.lof-slidecontent .button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.lof-slidecontent .button-next {
right:0px;
background:url(../images/next.png) no-repeat right center;
}
.lof-slidecontent .button-previous {
left:0px;
background:url(../images/previous.png) no-repeat left center;
}
.lof-slidecontent .button-control {
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
background:url(../images/transparent_bg.png) repeat;
}
.lof-slidecontent .button-control span { display:block; width:100%; height:100%;}
.lof-slidecontent .action-start span {
background:url(../images/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
background:url(../images/pause.png) no-repeat center center;
}
Me pueden sugerir algo que quede bien?
Muchas gracias desde ya.