I have been working on this extension and I am trying to put these buttons in the same place but they look like this. They don't line up
.fversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: left;
float: left;
}
.sversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
float: center;
}
.tversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: right;
float: right;
}
2048
16384
65536
I am kind of new to CSS.
I would abandon the use of float and make them inline-block elements. Also, remove the vertical align - or make them all middle (left and right are not valid values for vertical align)
.fversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
display:inline-block;
}
.sversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
display:inline-block;
}
.tversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
display:inline-block;
}
2048
16384
65536
If you need to split them across the line, you can put them in a flex container:
.container { /* flex for even spacing */
display: flex;
justify-content: space-between;
}
/* shared styles - could use a class on each button for shared styles instead of repeating (i have just used the extra selector I made from the container) */
.container > a {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
display: inline-block;
<div class="container">
2048
16384
65536
</div>
there is no CSS like
float: center
which is written in .sversion-button class . you should replace it with
float: left.
I think it will take the button in the right position which you want.
You need to remove float center and making chnages in html and css,you will get this
.fl1{
float:left;
width:33.33%;
margin:5px auto;
}
.fl2{
float:left;
width:33.33%;
text-align:center;
margin:5px auto;
}
.fl3{
float:left;
width:33.33%;
text-align:right;
margin:5px auto;
}
.fversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
}
.sversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
}
.tversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: right;
}
<div class="fl1">
2048
</div>
<div class="fl2">
16384
</div>
<div class="fl3">
65536
</div>
add display:inline-block; for tag a and set all buttons to float:left
a{
display:inline-block;
}
.fversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: left;
float: left;
}
.sversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
float: left;
}
.tversion-button {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: right;
float: left;
}
2048
16384
65536
/* Replace all css with this one css for all buttons */
.demo_btn {
border: 2px solid #8f7a66;
background: #8f7a66;
background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
background: -o-linear-gradient(top, #8f7a66, #8f7a66);
background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
display: inline-block;
}
<!-- Add common class to all buttons -->
2048
16384
65536
Related
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 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;
}
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/
Hello everyone this is my old problem for input type file css style problem.
This is input type file HTML code :
<input type="file" name="select_img" class="select_style" />
And this is for input type file css code:
.select_style {
float:left;
width: 80px;
height: 27px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: rgba(255,255,255,1);
font: normal 12px/27px "Lucida Grande";
border: 1px solid rgba(44,81,21,0.24);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
I asked friends they said many solution but there is not use full for me. then i solved the problem and ....
input type file HTML code
<input type="file" class="file-input">
and CSS code solved problem with rgb color effect:
.file-input {
color: transparent;
}
.file-input::-webkit-file-upload-button {
visibility: hidden;
}
.file-input::before {
width:80px;
height:27px;
content: 'Select files';
color:#fff;
display: inline-block;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: bold;
font-size: 13px;
line-height:27px;
text-align:center;
}
.file-input:hover::before {
border-color: black;
}
.file-input:active {
outline: 0;
}
.file-input:active::before {
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -moz-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -o-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -ms-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: linear-gradient(top, #008c10 0%,#00c714 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
body {
padding: 20px;
}
Click to see here
I tried to create simple date icon using CSS. Below is the code, which is working fine on Mozilla Firefox, but not working on Chrome.
Code link
How can I fix this so it works on all browsers?
HTML code:
<div class="holder">
<div class="month red">
<p>October</p>
</div>
<div class="day">
<p>22</p>
</div>
</div>
CSS code
holder {
width: 72px;
height: 84px;
position: relative;
margin: 20px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
float: left;
}
.month {
width: 70px;
height: 25px;
border: 1px solid rgba(0,0,0,0.25);
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,0.4);
}
.month p {
text-align: center;
color: white;
font-size: 11px;
font-weight: 600;
text-shadow: 1px 1px 0px rgba(0,0,0,0.40);
margin: 5px 0 0 0;
border-bottom: 1px dashed rgba(0,0,0,0.30);
margin: 5px 8px 0px 8px;
padding: 0 0 1px 0;
}
.day {
width: 70px;
height: 50px;
border: 1px solid rgba(0,0,0,0.25);
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
background: white;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 1)), color-stop(100%,rgba(247, 247, 247, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%);
background: linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 );
box-shadow: 0px 1px 0px 0px #fff, 0px 2px 0px 0px #ccc,0px 3px 0px 0px #fff, 0px 4px 0px 0px #ccc;
}
.day p {
text-align: center;
font-size: 36px;
font-weight: 700;
color: #444;
text-shadow: 1px 1px 0px white;
margin-top: 3px;
}
.red{
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}