My goal is to achieve the following:
-
-
I am struggling with keeping my unordered list on a single line with overflow:hidden. I want the ul to flow naturally without restructuring the HTML or using absolute positioning for the arrows. Can you help me with this issue and suggest the preferred method?
This is what I have done so far: http://jsfiddle.net/pTaTc/
HTML
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
<li><a href="#">Category 7</a></li>
<li><a href="#">Category 8</a></li>
<li class="arrow-wrapper">
<a href="#" class="left-arrow"><</a>
<a href="#" class="right-arrow">></a>
</li>
</ul>
CSS
* { font-family: arial; font-size: 1em; }
ul { position: relative; background: black; padding: 1em; }
li { display: inline; }
a { color: white; text-decoration: none; padding: 1em 2em; display: inline-block; }
.arrow-wrapper { background: black; }
.arrow-wrapper a { color: #54bdff; font-size: 2em; font-weight: bold; line-height:.75; }
.left-arrow { position: absolute; top: 0; bottom: 0; left: 0; }
.right-arrow { position: absolute; top: 0; right: 0; bottom: 0; }
/* CSS gradients for arrows */
.left-arrow {
background: -moz-linear-gradient(left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(50%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000',GradientType=1);
}
.right-arrow {
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%);
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000',GradientType=1);
}
Your assistance is greatly appreciated as always!