I am working with the following CSS styles:
div.partnersheader{
width:930px;
height:27px;
border-bottom:1px solid #030304;
font-family:Bebas;
color:#ffffff;
font-size:15pt;
padding:3px 0px 0px 10px;
}
div.partnerscontent{
width:100%;
height:127px;
color:#ffffff;
font-size:15pt;
padding:3px 0px 0px 10px;
overflow:hidden;
}
div.partnerscontent ul{
list-style:none; margin:0px; padding:0px; overflow:hidden; width:100%;
}
div.partnerscontent li{
float:left; margin-left:20px;
}
div.partnerscontent li img{
filter: url(../sources/grayscale.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-moz-transition:all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
div.partnerscontent li img:hover{
filter: none;
-webkit-filter: grayscale(0);
}
The corresponding HTML code is as follows:
<div class="partners">
<div class="partnersheader">
Partnerzy
</div>
<div class="partnerscontent">
<ul>
<marquee onMouseOver="this.stop()" onMouseOut="this.start()">
<li>
<a href="http://www.cs-kontener.pl" target=_blank><img src="images/ck.png" border="0" /></a>
</li>
<li>
<a href="https://www.facebook.com/Zajeb.Basem?fref=ts" target=_blank><img src="images/zb.png" border="0" /></a>
</li>
<li>
<a href="https://www.facebook.com/pompeczkamp3" target=_blank><img src="images/pmp3.png" /></a>
</li>
<li>
<a href="http://www.facebook.com/PozitiveSound" target=_blank><img src="images/pozitiw.png" /></a>
</li>
<li>
<a href="http://www.club-sound.pl/" target=_blank><img src="images/clubsound.png" /></a>
</li> </marquee>
</ul>
</div>
</div>
In the partnerscontent, images are displayed with a marquee effect. Currently, only three images are visible in a line and the rest move to the next line. The desired layout is for all images to stay on one line like this:
1 2 3 4 5 6 7
But currently, it looks like:
1 2 3
4 5 6
7 8 9
I believe the issue is related to the width setting but I am unable to resolve it. Can someone provide assistance?