I want to left justify my Dropdown and parent submenu text. I also want my tab text to be always right justified. How can I do this?
Here's my code:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/* By www.Bloggermint.com */
#nav {
position: relative;
/*position of navbar right and left*/
left: auto;
float: left;
font: 12px calibri, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: visible;
line-height: 10px;
/* change the border height of the menu*/
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 4px 27px;
/* change the width of whole menu*/
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77)));
background: -moz-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
background: -o-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover>a {
color: #FFF;
/* change tabs font hover color */
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover>a {
color: #FFF;
/* change the drop down font color*/
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205)));
background: -moz-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
background: -o-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
overflow: visible;
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
border-radius: 0 0 30px 30px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 25px 0 0;
/* change the position of drop down menu, up and down.*/
position: absolute;
width: 200px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 198px;
/* change the border drop down menu border size*/
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#nav li li ul {
margin: -1px 0 0 197px;
/*change the parent drop down list position, Right, Left*/
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility: hidden;
}
#nav li li:hover>ul {
visibility: visible;
}
#nav li:hover>ul {
left: auto;
}
#nav ul ul li:last-child>a {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
#nav ul ul ul li:first-child>a {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
header {
border-top: 0px solid gold !important;
/*move header pic up and down*/
margin-top: -43px !important;
}
</style>
<header style="position: relative; top: 6px;">
<div id="nav">
<ul>
<li>Home</li>
<li>Books
<ul>
<li>By Author <font size="1"> ► </font>
<ul>
<li>Pir Nasir Ud Din</li>
<li>Ashfaq Ahmed</li>
<li>Wasif Ali Wasif</li>
<li>Abu Yahya</li>
</ul>
</li>
<li>Poetry Books <font size="1"> ► </font>
<ul>
<li>Allama Iqbal</li>
<li>Mir Taqi Mir</li>
<li>Mirza Ghalib</li>
<li>Faiz Ahmed Faiz</li>
<li>Ahmed Faraz</li>
<li>Mohsin Naqwi</li>
<li>Ibne Insha</li>
<li>Parveen Shakir</li>
<li>Bano Qudsia</li>
</ul>
</li>
<li>Islamic Books</li>
<li>Knowledge Books</li>
<li>Computer Books</li>
<li>Programming Books</li>
</ul>
</li>
<li>Authors & Scholars
<ul>
<li>Moulana Tariq Jamil</li>
<li>Pir Nasir Ud Din Shah</li>
<li>Ghulam Muhammad Dard</li>
<li>Something New</li>
<li>Our Vision</li>
</ul>
</li>
<li>Sofwares
<ul>
<li>Antivirus</li>
<li>Level 2.2</li>
<li>Registered Apps <font size="1"> ► </font>
<ul>
<li>Level 2.3.1</li>
<li>Level 2.3.2</li>
<li>Level 2.3.3 <font size="1"> ► </font>
<ul>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2A</a></li>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<li>Level 2.3.4</li>
<li>
Level 2.3.5</li>
<li>Level 2.3.6</li>
<li>Level 2.3.7</li>
</ul>
</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Services</li>
<li>Contact Us</li>
<li>About Me</li>
<li>AlhamduLillah</li>
<li>Who We Are</li>
</ul>
</div></header>
</!doctype>
This might help:
.sub-menu {
text-align: left;
}
Related
As mentioned above I'm trying to get result like described in the title but for a better explanation here is my idea idea_prototype. I tried the basic css which has been provided here but my expectations are slightly different.
Current outcome: navigation bar
HTML code:
HTML <- sorry Stack is not letting me add this as a code
CSS code:
nav {
width: 1300px auto;
max-width: 1300px;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
padding: 60px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
border-width: 3px;
border-style: solid;
border-color:white;
border-radius: 10% / 100%
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 18px;
font-family: "Arial";
color: white;
font-size: 20px;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: white;
}
Its very easy, you dont even need that div with class vl, my thinking is that you put that div for the vertical line on the right, but there is no need of that, you can make that line with css property border-right
nav ul {
list-style:none;
display: flex;
padding: 10px 15px;
border-radius: 10px;
border: 1px solid #333;
}
nav ul li {width: 100%;text-align: center; }
nav ul li:not(:last-child){border-right: 1px solid #888;}
nav ul li a {text-decoration: none; color: #333;}
<nav>
<ul>
<li>
About
</li>
<li>
experience
</li>
<li>
Skills
</li>
<li>
Plans
</li>
<li>
Portafolio
</li>
<li>
Contact
</li>
</ul>
</nav>
How can I remove the space or gap between my navbar and header?
/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/* By www.Bloggermint.com */
#nav {
float: left;
font: 13px calibri, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: visible;
line-height: 10px;
/* change the border height of the menu*/
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 8px 21.5px;
/* change the width of whole menu*/
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77)));
background: -moz-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
background: -o-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover>a {
color: #FFF;
/* change tabs font hover color */
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover>a {
color: #FFF;
/* change the drop down font color*/
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205)));
background: -moz-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
background: -o-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
overflow: visible;
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
border-radius: 0 0 30px 30px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 31px 0 0;
/* change the position of drop down menu, up and down.*/
position: absolute;
width: 200px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 156px;
/* change the border drop down menu border size*/
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#nav li li ul {
margin: -1px 0 0 200px;
/*change the parent drop down list position, Right, Left*/
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility: hidden;
}
#nav li li:hover>ul {
visibility: visible;
}
#nav li:hover>ul {
left: auto;
}
#nav ul ul li:last-child>a {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
#nav ul ul ul li:first-child>a {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Books
<ul>
<li>Islamic Books</li>
<li>Poetry Books</li>
<li>Knowledge Books</li>
<li>Computer Books</li>
<li>Programming Books</li>
</ul>
</li>
<li>Our Portfolio</li>
<li>One Dropdown
<ul>
<li>Level 2.1</li>
<li>Level 2.2</li>
<li>Level 2.3</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Three Levels
<ul>
<li>Level 2.1</li>
<li>Level 2.2</li>
<li>Pir Nasir Ud Din Shah <font size="1"> ► </font>
<ul>
<li>Level 2.3.1</li>
<li>Level 2.3.2</li>
<li>Level 2.3.3 <font size="1"> ► </font>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<li>Level 2.3.4</li>
<li>Level 2.3.5</li>
<li>Level 2.3.6</li>
<li>Level 2.3.7</li>
</ul>
</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Services</li>
<li>Contact Us</li>
<li>About Me</li>
<li>AlhamduLillah</li>
</ul>
</div>
Okay, I'm just going to put this here instead of in the comments as I'm guessing Faisal has fixed the issue this way.
Setting a margin-top: style to a negative number, say -10px, will move the selected element up by that amount. So adding:
margin-top: -10px;
to your #nav CSS should fix the issue - it's just a case of setting the right value.
However, without seeing all your HTML markup for the header and nav, I can't guarantee that this will work for your case.
Care to share your solution?
This code is working fine here but I'm using Bracket IDE in that the "mask-image" property is not working. Perhaps it appearing as red color so I think it's not working but the same code working on Codepen etc and Stack Overflow too with correct display.
The edge transparent is not coming as expected due to mask-image property which is not working on Bracket IDE.
nav {
max-width: 960px;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
padding: 60px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, #7FFFD4 0%, #7FFFD4 25%, #7FFFD4 75%, #7FFFD4 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
padding-left:80px;
}
nav ul li a {
padding: 18px;
font-family: "Open Sans";
text-transform:uppercase;
color: #000000;
font-size: 18px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.6);
color: rgba(0, 35, 122, 0.7);
}
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</nav>
I have attached screenshots.
This is the expected one:
This is bracket, why it displaying mask-image as red:
This is my output:
Sorry, it was live-preview error but while opening directly with any browser, it works as expected.
I tried center my nav menu with margin:0 auto;, but nothing. And I tried with <center></center> and still nothing.
Can somebody help me?
This is my html code:
<div id="cssmenu">
<ul>
<li class='active has-sub'><a href='#'><span>Filmovi</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Akcijski</span></a></li>
<li class='has-sub'><a href='#'><span>Triler</span></a></li>
<li class='has-sub'><a href='#'><span>Sci-fi</span></a></li>
<li class='has-sub'><a href='#'><span>Drama</span></a></li>
<li class='has-sub'><a href='#'><span>Komedija</span></a></li>
<li class='has-sub'><a href='#'><span>Horror</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Serije</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Sci-fi</span></a></li>
<li class='has-sub'><a href='#'><span>Drama</span></a></li>
<li class='has-sub'><a href='#'><span>Komedija</span></a></li>
<li class='has-sub'><a href='#'><span>Horror</span></a></li>
</ul>
</li>
<li><a href='#'><span>Animirani</span></a></li>
<li class='last'><a href='#'><span>O nama</span></a></li>
<li class='last'><a href='#'><span>Kontakt</span></a></li>
</ul>
</div>
And this is my css code:;
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
border: 0;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
font-weight: 600;
height: 52px;
width: 100%;
float:right;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
box-shadow: inset 0 1px 0 whitesmoke;
-moz-box-shadow: inset 0 1px 0 whitesmoke;
-webkit-box-shadow: inset 0 1px 0 whitesmoke;
background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
color: #666666;
display: inline-block;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 52px;
padding: 0 28px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
box-shadow: inset 0 1px 0 whitesmoke;
-moz-box-shadow: inset 0 1px 0 whitesmoke;
-webkit-box-shadow: inset 0 1px 0 whitesmoke;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
}
#cssmenu > ul > li.active a,
#cssmenu > ul > li:hover > a {
box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
color: white;
background: #4a5662 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkM2QzM1NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDNkM2QzM2NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0M2QzZDMzM0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0M2QzZDMzQ0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6bEPV5AAAAUUlEQVR42mSO0RWAMAgDc4znAA7g/jvUFKj66gevCT0COs4rJLkIoSC1X+j+7GFfupj+a4bFu+isydcMr88dY/PkLL8bPnrLXTvHk2NdzC3AAIj5BKfn0x2aAAAAAElFTkSuQmCC);
background: -moz-linear-gradient(top, #4a5662 0%, #606f7f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a5662), color-stop(100%, #606f7f));
background: -webkit-linear-gradient(top, #4a5662 0%, #606f7f 100%);
background: -o-linear-gradient(top, #4a5662 0%, #606f7f 100%);
background: -ms-linear-gradient(top, #4a5662 0%, #606f7f 100%);
background: linear-gradient(to bottom, #4a5662 0%, #606f7f 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li a {
background: #606f7f;
border-bottom: 1px solid #59636f;
border-bottom: 1px solid #556371;
box-shadow: inset 0 1px 0 #606f7f;
-moz-box-shadow: inset 0 1px 0 #606f7f;
-webkit-box-shadow: inset 0 1px 0 #606f7f;
color: white;
display: block;
line-height: 160%;
padding: 15px 10px;
font-size: 12px;
}
#cssmenu .has-sub ul li:hover a {
background: #4a5662;
box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #606f7f;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #4a5662;
box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}
I know this is bunch of code but I think I was clear.
Thanks
I'm not sure I understand correctly, but it sounds like you want the ul nav to be centered, like this:
In that case, you need to apply the following styles to the menu > ul
#cssmenu > ul {
display: block;
width: 100%;
max-width: 512px;
margin: 0 auto;
}
Here's a fiddle to put it all together; http://jsfiddle.net/jtqjkc2y/1/
First of all, remove "float: left" from your UL and make it "display: inline-block". Float left element will be always at left.
And then add "text-align: center" to ul's parent (your div#cssmenu).
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
border: 0;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
font-weight: 600;
height: 52px;
width: 70%;
margin: 0 auto;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
box-shadow: inset 0 1px 0 whitesmoke;
-moz-box-shadow: inset 0 1px 0 whitesmoke;
-webkit-box-shadow: inset 0 1px 0 whitesmoke;
background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
color: #666666;
display: inline-block;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 52px;
padding: 0 28px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
box-shadow: inset 0 1px 0 whitesmoke;
-moz-box-shadow: inset 0 1px 0 whitesmoke;
-webkit-box-shadow: inset 0 1px 0 whitesmoke;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
}
#cssmenu > ul > li.active a,
#cssmenu > ul > li:hover > a {
box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
color: white;
background: #4a5662 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkM2QzM1NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDNkM2QzM2NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0M2QzZDMzM0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0M2QzZDMzQ0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6bEPV5AAAAUUlEQVR42mSO0RWAMAgDc4znAA7g/jvUFKj66gevCT0COs4rJLkIoSC1X+j+7GFfupj+a4bFu+isydcMr88dY/PkLL8bPnrLXTvHk2NdzC3AAIj5BKfn0x2aAAAAAElFTkSuQmCC);
background: -moz-linear-gradient(top, #4a5662 0%, #606f7f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a5662), color-stop(100%, #606f7f));
background: -webkit-linear-gradient(top, #4a5662 0%, #606f7f 100%);
background: -o-linear-gradient(top, #4a5662 0%, #606f7f 100%);
background: -ms-linear-gradient(top, #4a5662 0%, #606f7f 100%);
background: linear-gradient(to bottom, #4a5662 0%, #606f7f 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li a {
background: #606f7f;
border-bottom: 1px solid #59636f;
border-bottom: 1px solid #556371;
box-shadow: inset 0 1px 0 #606f7f;
-moz-box-shadow: inset 0 1px 0 #606f7f;
-webkit-box-shadow: inset 0 1px 0 #606f7f;
color: white;
display: block;
line-height: 160%;
padding: 15px 10px;
font-size: 12px;
}
#cssmenu .has-sub ul li:hover a {
background: #4a5662;
box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #606f7f;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #4a5662;
box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}
<div id="cssmenu">
<ul>
<li class='active has-sub'><a href='#'><span>Filmovi</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Akcijski</span></a></li>
<li class='has-sub'><a href='#'><span>Triler</span></a></li>
<li class='has-sub'><a href='#'><span>Sci-fi</span></a></li>
<li class='has-sub'><a href='#'><span>Drama</span></a></li>
<li class='has-sub'><a href='#'><span>Komedija</span></a></li>
<li class='has-sub'><a href='#'><span>Horror</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Serije</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Sci-fi</span></a></li>
<li class='has-sub'><a href='#'><span>Drama</span></a></li>
<li class='has-sub'><a href='#'><span>Komedija</span></a></li>
<li class='has-sub'><a href='#'><span>Horror</span></a></li>
</ul>
</li>
<li><a href='#'><span>Animirani</span></a></li>
<li class='last'><a href='#'><span>O nama</span></a></li>
<li class='last'><a href='#'><span>Kontakt</span></a></li>
</ul>
</div>
remove your float:right from #cssmenu and change your width:100% to width:70 and add margin:0 auto
#cssmenu {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
font-weight: 600;
height: 52px;
width: 70%;
margin: 0 auto;
}
So I don't really know how to explain this in words. But this is what I'm trying to achieve
and this is what I've done so far link
ul.quicktabs-tabs li {
float: left;
height: 20px;
margin: 0;
margin-right:-20px;
padding: 0;
width:150px;
background: transparent;
}
ul.quicktabs-tabs li a {
font-family: inherit;
margin: 0;
display: block;
padding: 10px 27px 10px 7px;
text-decoration: none;
color: #6da648 !important;
border: 2px solid #6da648;
border-radius: 6px;
margin: 0;
background:#fff;
}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
color: #fff !important;
background-position: right -20px;
background: #6da648;
}
ul.quicktabs-tabs {
margin: 0 0 10px 0;
font-size: 11px;
list-style: none;
padding: 1px 23px 23px 0;
}
<ul class="quicktabs-tabs">
<li class="active">Item 1</li>
<li>Item 2</li>
</ul>
<li> element at the right overlaps <li> element at the left. Set z-index and position of the element with class active to prevent that overlapping, adjust some paddings and margins.
ul.quicktabs-tabs li {
float: left;
height: 20px;
margin: 0;
margin-right:-8px;
padding: 0;
width:150px;
background: transparent;
}
ul.quicktabs-tabs li a {
font-family: inherit;
margin: 0;
display: block;
padding: 10px 27px 10px 12px;
text-decoration: none;
color: #6da648 !important;
border: 2px solid #6da648;
border-radius: 6px;
margin: 0;
background:#fff;
}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
color: #fff !important;
background-position: right -20px;
background: #6da648;
z-index: 1000;
position: relative;
}
ul.quicktabs-tabs {
margin: 0 0 10px 0;
font-size: 11px;
list-style: none;
padding: 1px 23px 23px 0;
}
<ul class="quicktabs-tabs">
<li>Item 0</li>
<li class="active">Item 1</li>
<li>Item 2</li>
</ul>
I create a progress bar using css3 progress bar guide:
.meter {
height: 40px;
/* Can be anything */
position: relative;
margin: 60px 0 20px 0;
/* Just for demo spacing */
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
border: solid 1px orange;
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
#-moz-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}
.red > span {
background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
-moz-animation: none;
background-image: none;
}
<div class="meter orange nostripes"> <span style="width: 33.3%"></span>
</div>
Also you can animated it if you want to use jquery:
$(".meter > span").each(function() {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
.meter {
height: 40px;
/* Can be anything */
position: relative;
margin: 60px 0 20px 0;
/* Just for demo spacing */
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
border: solid 1px orange;
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
#-moz-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}
.red > span {
background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
-moz-animation: none;
background-image: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="meter orange nostripes"> <span style="width: 33.3%"></span>
</div>
Here you go:
http://jsfiddle.net/r0L0nty2/43/
You must give the whole list a border instead of the list items. This is fixed with this code now.
ul.quicktabs-tabs li {
height: 20px;
width:150px;
float: left;
background: transparent;
}
ul.quicktabs-tabs li a {
font-family: inherit;
margin: 0;
display: block;
padding: 10px 27px 10px 7px;
text-decoration: none;
color: #6da648 !important;
margin: 0;
background:#fff;
}
ul.quicktabs-tabs li.active a { border-radius: 0 18px 18px 0;}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
color: #fff !important;
background-position: right -20px;
background: #6da648;
}
ul.quicktabs-tabs {
margin: 0 0 10px 0;
font-size: 11px;
list-style: none;
padding: 0 0 34px 0;
border: 2px solid #6da648;
}
<ul class="quicktabs-tabs">
<li class="active">Item 1</li>
<li>Item 2</li>
</ul>