I've just developed a CSS3 button via http://css3button.net/36045 and I was wondering how do I go about adding on hover and on click state changes (i.e defining the correct colours that go with the colour scheme). I don't know much about color codes and would appreciate any help.
Also, what would be the best way of centering the button in CSS?
http://jsfiddle.net/methuselah/snmSq/
#element:hover { color: #fff; }
#element:active { color: #000; }
Have you tried adding :hover to class? Eg:
button.signup:hover {background:red;}
To center I would wrap the button in a div and then center it.
For horizontal centering use margin-left:auto; margin-right:auto, for vertical: margin-top:auto; margin-bottom:auto or simply float:center for all of them but be careful since floating always can create problems
Related
I am using tooltips in bootstrap3.
If you hover over the gap between the lines in the 'Position' column in the table example, the tool tip will disappear. Notice that the mouse pointer changes from arrow to 'text'.
How do I get it so that the tooltip is always displayed when hovering over the cell.
Note that I tried to move the tooltip to the parent td, but this is no good because when hovering it brings in a div which breaks the table formatting.
I believe it should be possible to solve this using CSS.
JSFiddle
Thanks for the answers which got me to the solution.
Either using div (not span) solves the issue, or declaring the following css:
[data-toggle="tooltip"]{
display: block;
}
this happen because the td have a padding of 8 px- to fix it try that:
[data-toggle="tooltip"]{
display: block;
cursor: pointer;
padding:8px;
}
.table>tbody>tr>td{
padding:0;
}
I found one problem with menu in Twitter Bootstrap 3 (3.1.1). Tab "kontakt" is a <"li" class="active">Kontakt<"/li">
and tab "Galeria zdjęć" is a <"li">Galeria zdjęć<"/li"> (without brackets before and after li). How can I avoid this situation? http://scr.hu/2p5g/u5m8e
As You can see shadow from "Galeria zdjęć" is behind tab "Kontakt". Is it possible to change this that shadow would be before next tab?
Thanks in advance.
I think you will need to use z-index and position:relative to achieve this:
So what you need to do is add this to the elements that need this effect applied:
.button { position:relative; z-index:1; }
.button:hover { z-index:2; /* add your box-shadow code here */ }
jsFiddle demo.
please take a look here.
I have added the following code:
.entry_blog a {color:#000;}
.entry_blog a:hover {background-color: #000;color: #FFD700;}
The text links work fine. However when you go over the images, you can see a black line appearing in the bottom of each image inside the <div class="entry_blog singlepageentry" itemprop="articleBody"> div.
I cannot add any new class to the images links. If I could add an image to the images links, I could simply add a
.entry_blog .newclass a:hover {background:none}
However since there is no such a possibility, does anybody know how, in this case, I can remove the background from the images inside the entry_blog div?
Thank you in advance
Seeing as all your images appear to be standalone blocks, all you need to do here is set your img elements to display as block-level elements (using display: block). This forces them to fill the containing a element without leaving any gaps, fully hiding any background which may be underneath:
.entry_blog a { color:#000; }
.entry_blog a img { display:block; }
.entry_blog a:hover { background-color: #000; color: #FFD700; }
Your question is sort of confusing.
The best method is to add background:none or background:transparent to .entry_blog a
You say you can't add any new style to image links. What does this mean?
Surely you can alter the CSS.
I have been having problems trying to hide the default arrow icon on the select tag
CSS -
.toolbar .sort-by select {
background:url('/skin/frontend/baby/default/images/select_icon.jpg');
background-repeat:no-repeat;
background-position:center right;
border-radius:5px;
border:1px solid #9edef1;
font-family:'montserratregular', sans-serif;
margin-left: 10px;
}
Regarding the image i have attached if you look at it closely there is a small background icon behind the default arrow icon. Not sure why it is not putting the background image on top of the default icon
you can make a "select" div and another "drop-down" div, using some javascript.
as far as i know it wont work in css.
include -webkit-appearance: none in your css styling for the select tag.
There is no css option to hide the arrow on the drop-down.
Trying to understand what is going on, maybe someone can explain.
Upon :HOVER I want the entire table content to go transparent. This works for text inside td wrappers. However, text inside a span wrapper doesn't know it should go transparent.
If I remove color:#897 from the span CSS suddenly it does what I want and all text goes transparent. I did try all sorts of CSS tricks to no avail, the table refuses to recognize span as a descendant of table. What is wrong and how to fix it, if possible.
The reason is that you define color in SPAN as table#Factors span & you define your hover table#Factors:hover So color of SPAN still override you table#Factors:hover class color. Write like this:
table#Factors:hover span{
color:transparent;
}
Check this http://jsfiddle.net/AyNg3/
Read this for more http://diythemes.com/thesis/css-specificity-thesis/
jsFiddle
table:hover,
table:hover span{
color: transparent;
background: transparent;
}
You just needed to include a selector for the span as well.