When I hover over the whole button, I would like it to appear over the whole button. Because the button has a background image, i am not able to do it correctly. The buttons looks like these:
The CSS appears like this:
#tablist{
padding: 0px auto 0px auto;
height: 32px;
}
#tablist li{
display: block;
width: 150px;
height: 35px;
float: left;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
margin: 0px auto 0px auto;
text-align: center;
padding-top: 5px;
cursor: hand;
cursor: pointer;
}
#tablist ul:hover{
background-color: red;
}
.tablink{
text-decoration:none;
}
.locked{
background: url('../img/DashboardButtonsLocked.png') no-repeat;
background-position:5px -85px;
}
.unlocked{
background: url('../img/DashboardButtonsLocked.png') no-repeat;
background-position:4px -2px;
}
How do i correct it? Need some guidance over it.
Try overriding the background property at hover:
#tablist ul:hover{
background: red;
}
Here is a demo : http://jsfiddle.net/taQfU/
Hey i think you should give to #tablist li:hover
As like this
#tablist li:hover{
background-color: red;
}
Related
I want to centralise a button or a tag within the line it is on (by themselves).
I've written this CSS which makes it yellow, puts a border around it etc but it is always left aligned. How do I centralise it?
a.butt, button.butt {
border: 1px solid #ffff01;
background-color: transparent;
height:50px;
cursor:pointer;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
text-align: center;
color: #ffff01;
}
Thanks for your help
several ways to do this, but maybe
a.butt, button.butt {
border: 1px solid #ffff01;
background-color: transparent;
height:50px;
cursor:pointer;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
text-align: center;
color: #ffff01;
display: block;
margin-left: auto;
margin-right: auto;
width: ??px;
}
will do the trick.
You can do it by adding text-align:center; to parent <div>
Example here https://jsfiddle.net/uy4u781d/
margin-left:auto;
margin-right:auto;
width:150px; //width as you want
display:block;
I'm having issues with getting this code player in progress to look proper:
http://invigorateme.net/viperbox.html
When I hover over a list item (the list items are the four tabs on top), the background changes, but it doesn't fill the space for the two on the sides. I was trying to learn from another source code, but I just couldn't get the tweaking quite right, and am still having issues.
The Question: How can I make it so when you hover over a list item, the background changes and fits the background?
If you go to my site link, you'll see what I mean when you hover over one of these elements. It simply changes color, but not as I expected.
Here's the relevant CSS behind it, let me know if it's horrendous and what I can do better, I'm still learning:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
border: 2px solid #B7B7B7;
border-radius: 10px;
margin: 0px auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0px auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0px;
padding: 7px 5px 0px 5px;
border-right: 2px solid #B7B7B7;
}
#codetabs li:hover{
background-color: grey;
}
If anyone thinks I might have left out any important code or info, let me know that as well. I didn't believe the HTML was necessary.
Basically your problem is that your list items are all rectangles that are contained in a pill shaped box (id="codetabs"). If you want the background color to fill each button, you're going to need to use some pseudo classes (:first-child and :last-child) to specify border radius values on your first and last li items.
This is the working CSS:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
margin: 0 auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0 auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0;
padding: 7px 5px 0px 5px;
border-width: 2px 2px 2px 0;
border-color: #B7B7B7;
border-style: solid;
}
#codetabs ul :first-child {
border-radius: 10px 0 0 10px;
border-left-width: 2px;
}
#codetabs ul :last-child {
border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
background-color: grey;
}
http://jsfiddle.net/d09xgfzc/1/
Im creating a moodle theme and i have a button image that i need to use for my navigation links but cant seem to figure out how to expand and contract the button image to fit the link text
.headingblock {
padding-bottom:1px;
padding-left: 2px;
padding-right: 2px;
padding-top: 1px; /*background: none repeat scroll 0 0 #8d969c;*/
font-size:12px !important;
background: url([[pix:theme|top-nav-link1]]) no-repeat;
}
h2.headingblock {
background-color:#8d969c;
}
.headingblock input[type="button"]{
background-image:url([[pix:theme|search_button_bg3]]) !important;
background-color:#8d969c;
background-color:#fff;
border-radius:0;
padding: 0px 0px 0px 5px;
margin: 0px;
border: none;
height: 20px;
width: 58px;
font-weight:bold;
font-size:13px;
}
I am trying to make a parent div fit it's width to an image displayed. I am having a lot of trouble in doing so, it seems to auto adjust to very large.
Image: http://puu.sh/1vsqA
content is the body part
image is the white box the image is contained in
image img is the actual image inside the box itself.
CSS:
html, body
{
margin:0;
padding:0;
border:0;
height:100%;
width:100%;
}
body
{
background-image: url('./page_bg.gif');
background-repeat: repeat;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
}
#navlinks
{
width: 100%;
height: 28px;
line-height: 28px;
background-color: #000;
color: #FFF;
}
#links
{
list-style-type: none;
float: left;
padding-left: 5px;
margin: auto;
}
#links li
{
float: left;
padding-left: 5px;
padding-right: 5px;
}
#content
{
display: block;
padding: 40px 40px 40px 40px;
}
#image
{
display: inline-block;
border: 1px solid #CCC;
border-color: #CCC #AAA #AAA #CCC;
padding: 3px;
margin-left: auto;
margin-right: auto;
background: #fff;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
max-width: 1107px;
}
#image img
{
}
You could try setting #image to display: inline-block. I could be wrong but I 'think' that's what you're looking for.
Here is a link example: http://jsfiddle.net/RBWYL/
Please try to float:left your parent div
I want to build a menu where every single <li> hovers out. But weirdly the whole menu always hovers out. Here is the fiddle code.
I have the following css code:
body {
background-color: #eee;
margin: 0;
padding: 0;
overflow: hidden;
}
.tabs {
width: 80%;
position: fixed;
bottom: -20px;
left: 100px;
}
.tabs ul {
display:block;
}
.tabs li {
width: 60px;
height: 80px;
margin-bottom: -20px;
padding: 10px;
float: left;
list-style: none;
display: inline;
background-color: #ccc;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
font-family: verdana;
text-align: center;
}
.tabs li:hover {
margin-bottom: 20px;
}
Reason is that when you give margin to it then it's push whole ul. It's better give bottom instead of margin. write like this:
.tabs li:hover {
bottom: 20px;
}
Check this http://jsfiddle.net/X96KE/17/
using jQuery will solve your problem if you are familiar with it try this
jQuery("li").mouseover(function() {
jQuery(this).css("margin-bottom","20px");
}).mouseout(function(){
jQuery(this).css("margin-bottom","0px");
});
It's because you haven't specified what to do with the margin-top. Here's an updated example: http://jsfiddle.net/X96KE/18/
.tabs li:hover {
margin-bottom: -40px;
margin-top: -40px;
}