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;
}
Related
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;
}
I have to color 50% of the progress bar with red color. Here is what I have tried , my css and html:
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
}
.progress.complete {
height: 0.9em;
position: relative;
}
<div id="id1" class="progress complete">
<span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span>
</div>
How to color it without adding any text to <span> element in the output?
You have forgot to mention height & position to span tag
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
}
.progress.complete {
height: 0.9em;
position: relative;
}
<div id="id1" class="progress complete">
<span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);height: 100%; position: absolute;top: 0;" rel="tooltip"></span>
</div>
If you want to do that without span tag then use pseudo selector ::after as below to style that,
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
overflow:hidden;
}
.progress:after{
content:'';
position:absolute;
background: red;
left: 0%;
top:0;
width: 50%;
height:10px;
box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);
z-index:9;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
<div id="id1" class="progress complete">
</div>
Span tag default display is inline so you need to change that to inline-block and height to it.
.progress {
width: 100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
overflow: hidden;
}
.progress.complete {
height: 0.9em;
position: relative;
}
span {
background: red;
left: 0%;
width: 50%;
height: 15px;
display: block;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.2);
}
<div id="id1" class="progress complete">
<span title="progress bar" rel="tooltip"></span>
</div>
I just want to link google page in my html code but nothing works. this is my css code.
a:hover { text-decoration: underline }
.container, .main {
width: 640px;
margin-left: auto;
margin-right: auto;
height: 300px;
}
.main { margin-top: 50px }
input {
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #555860;
}
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
background: white url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat;
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .results { display: block }
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li { display: block }
.search .results li:first-child { margin-top: -1px }
.search .results li:first-child:before, .search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
.search .results li:last-child { margin-bottom: -1px }
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span { font-weight: 200 }
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
background: url("http://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat;
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<section class="main">
<form class="search" method="post" action="index.html" >
<input type="text" name="q" placeholder="Search..." />
<ul class="results" >
<li>Search Result #1<br /><span>Description...</span></li>
</ul>
</form>
</section>
i think class="results" in ul tag is the problem, because when i cut it , my link work but after my page don't have style
Problem:
Yes in fact, the problem is in the search class, besides that the link is working perfectly and redirect you to Google page.
Explanation:
You have display:none; in the search class style which is hiding it from the page. And if you remove class="search", the ul will be shown but will loose all its style.
Solution:
To resolve the problem just remove the line:
display:none;
Or replace it with :
display:block;
This is a working DEMO:
a:hover { text-decoration: underline }
.container, .main {
width: 640px;
margin-left: auto;
margin-right: auto;
height: 300px;
}
.main { margin-top: 50px }
input {
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #555860;
}
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
background: white url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat;
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .results { display: block }
.search .results {
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li { display: block }
.search .results li:first-child { margin-top: -1px }
.search .results li:first-child:before, .search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
.search .results li:last-child { margin-bottom: -1px }
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span { font-weight: 200 }
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
background: url("http://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat;
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<section class="main">
<form class="search" method="post" action="index.html" >
<input type="text" name="q" placeholder="Search..." />
<ul class="results" >
<li>Search Result #1<br /><span>Description...</span></li>
</ul>
</form>
</section>
You have display set to none in
.search .results.
Delete this statement: display: none or set display to block.
For more information please refer to display property.
You're right that .results is the problem - .search .results has display: none which hides the entire block.
You'll need to remove this line for it to show.
I am having problems. The CSS code is identical for these two buttons, but the appearance is completely different. I can't get the :hover or the :active to work either.
I am trying to get the left 'input type="submit' button to look exactly like the 'a href=""' button. Any ideas?
Code example problem at JSFiddle : http://jsfiddle.net/aL6M6/7/
The css is exactly the same for .button-big and for .button-big-submit
Thanks!
.button-big
{
display: inline-block;
background: #ed391b;
color: #fff;
text-decoration: none;
font-size: 1.75em;
font-weight: 300;
padding: 15px 45px 15px 45px;
outline: 0;
border-radius: 10px;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(255,192,192,0.5), inset 0px 0px 0px 2px rgba(255,96,96,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
background-image: -moz-linear-gradient(top, #ed391b, #ce1a00);
background-image: -webkit-linear-gradient(top, #ed391b, #ce1a00);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed391b), to(#ce1a00));
background-image: -ms-linear-gradient(top, #ed391b, #ce1a00);
background-image: -o-linear-gradient(top, #ed391b, #ce1a00);
background-image: linear-gradient(top, #ed391b, #ce1a00);
text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
}
.button-big:hover
{
background: #fd492b;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(255,192,192,0.5), inset 0px 0px 0px 2px rgba(255,96,96,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
background-image: -moz-linear-gradient(top, #fd492b, #de2a10);
background-image: -webkit-linear-gradient(top, #fd492b, #de2a10);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fd492b), to(#de2a10));
background-image: -ms-linear-gradient(top, #fd492b, #de2a10);
background-image: -o-linear-gradient(top, #fd492b, #de2a10);
background-image: linear-gradient(top, #fd492b, #de2a10);
text-decoration: none;
}
.button-big:active
{
background: #ce1a00;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(255,192,192,0.5), inset 0px 0px 0px 2px rgba(255,96,96,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
background-image: -moz-linear-gradient(top, #ce1a00, #ed391b);
background-image: -webkit-linear-gradient(top, #ce1a00, #ed391b);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ce1a00), to(#ed391b));
background-image: -ms-linear-gradient(top, #ce1a00, #ed391b);
background-image: -o-linear-gradient(top, #ce1a00, #ed391b);
background-image: linear-gradient(top, #ce1a00, #ed391b);
}
First off, why did you create 2 different styles if they are supposed to be identical?
I put a CSS reset at the beginning and changed the input to button. It's almost identical now, maybe modify the lineheight.
Anyway, I helped you half the way http://jsfiddle.net/aL6M6/9/
border: none;
i noticed four problems.
you need to disable the border. border: none;
you have a typo in your ..button-big-sumbit:hover (thats why the hover does not work)
your padding in .button-big and .button-big-submit is different.
you set some styles for all inputs.
here is a working version: fiddle
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200);
body {
/*background: #D4D9DD url('images/bg03.jpg');*/
background: #31393c url('images/bg04.jpg');
}
body, input, textarea, select {
color: #373f42;
font-size: 1.125em;
font-family: 'Yanone Kaffeesatz', Tahoma, Arial, Sans-serif;
/* font-family: 'yanone_kaffeesatzlight';
*/
line-height: 1.85em;
font-weight: 300;
}
.button-big {
cursor: pointer;
display: inline-block;
background: #ed391b;
color: #fff;
text-decoration: none;
font-size: 1.75em;
font-weight: 300;
line-height : 1em;
font-family: inherit;
border: none;
padding: 15px 45px 15px 45px;
outline: 0;
border-radius: 10px;
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
background-image: -moz-linear-gradient(top, #ed391b, #ce1a00);
background-image: -webkit-linear-gradient(top, #ed391b, #ce1a00);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed391b), to(#ce1a00));
background-image: -ms-linear-gradient(top, #ed391b, #ce1a00);
background-image: -o-linear-gradient(top, #ed391b, #ce1a00);
background-image: linear-gradient(top, #ed391b, #ce1a00);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}
.button-big:hover {
background: #fd492b;
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
background-image: -moz-linear-gradient(top, #fd492b, #de2a10);
background-image: -webkit-linear-gradient(top, #fd492b, #de2a10);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fd492b), to(#de2a10));
background-image: -ms-linear-gradient(top, #fd492b, #de2a10);
background-image: -o-linear-gradient(top, #fd492b, #de2a10);
background-image: linear-gradient(top, #fd492b, #de2a10);
text-decoration: none;
}
.button-big:active {
background: #ce1a00;
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
background-image: -moz-linear-gradient(top, #ce1a00, #ed391b);
background-image: -webkit-linear-gradient(top, #ce1a00, #ed391b);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ce1a00), to(#ed391b));
background-image: -ms-linear-gradient(top, #ce1a00, #ed391b);
background-image: -o-linear-gradient(top, #ce1a00, #ed391b);
background-image: linear-gradient(top, #ce1a00, #ed391b);
}
I added these modifications to your CSS
.button-big-submit {
display: inline-block;
background: #ed391b;
color: #fff;
text-decoration: none;
font-size: 1.75em;
line-height: normal;
font-weight: 300;
padding: 5px 15px 5px 15px;
outline: 0;
border: 0; /* here */
padding: 10px 40px; /*here*/
border-radius: 10px;
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
background-image: -moz-linear-gradient(top, #ed391b, #ce1a00);
background-image: -webkit-linear-gradient(top, #ed391b, #ce1a00);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed391b), to(#ce1a00));
background-image: -ms-linear-gradient(top, #ed391b, #ce1a00);
background-image: -o-linear-gradient(top, #ed391b, #ce1a00);
background-image: linear-gradient(top, #ed391b, #ce1a00);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}
Then, fixed a typo on .button-big-submit:hover and added cursor: pointer;
Updated fiddle: http://jsfiddle.net/aL6M6/12/
I'd like to make a fixed bar above the footer that says something like: "This site is in beta. Please send feedback to info#blah.com."
I'm new to CSS and struggling with this.
Here's my footer CSS:
#footer {
min-height: 60px;
padding-left: 20px;
padding-right: 20px;
background-color: #000000;
background-image: -moz-linear-gradient(top, #4d4d4d, #333333);
background-image: -ms-linear-gradient(top, #4d4d4d, #333333);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#333333));
background-image: -webkit-linear-gradient(top, #4d4d4d, #333333);
background-image: -o-linear-gradient(top, #4d4d4d, #333333);
background-image: linear-gradient(top, #4d4d4d, #333333);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#333333', GradientType=0);
background-color: #424242;
background-image: -moz-linear-gradient(top, #4d4d4d, #333333);
background-image: -ms-linear-gradient(top, #4d4d4d, #333333);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#333333));
background-image: -webkit-linear-gradient(top, #4d4d4d, #333333);
background-image: -o-linear-gradient(top, #4d4d4d, #333333);
background-image: linear-gradient(top, #4d4d4d, #333333);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#333333', GradientType=0);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
height: 40px;
}
#footer a {
color: rgb(153, 153, 153);
text-decoration: none;
}
#footer span {
font-size: 10pt;
margin-left: .5em;
color: rgb(153, 153, 153);
text-decoration: none;
text-shadow: 0px 0px 0px
}
#footer-inner {
padding: 20px 0;
}
Basically I want just a small little bar above it that is fixed to the footer and that doesn't screw up the formatting of my footer.
How would I do this?
As you didn't say something about your HTML mark up, I've created something from scratch.
You can set the position of #footer to relative and then create an element, that is positioned absolutely with a negative top-value. So it will always stick on top of the footer and won't affect the footer itself and neither the content above:
HTML
<footer id="footer">
<aside>This site is beta</aside>
Footer
</footer>
CSS
#footer {
position: relative;
}
#footer > aside {
position: absolute;
left: 0;
top: -50px;
width: 120px;
height: 40px;
}
Here is a demo on jsfiddle.