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.
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 have been working on this site MY SITE for a quite days.I used UBER menu plugin to display my menu in more a custom way and is working fine.But when it is displaying it shows a thin white line above the menu item.I added the following css which didn't help
border-top:none !important;
Some one please help me please.Thanks :) !!!
Try css command vertical-align as below:
vertical-align:top
Hope this may help to resolve your query.
It is a white box-shadow on #megaMenu div, to remove it use
box-shadow:none;
-webkit-box-shadow:none;
The following css have the transparent background color.
#megaMenu li.menu-item
{
background-color:transparent;
}
Apply the same menu background to this class. it will fix the issue.
#megaMenu li.menu-item
{
background-color:#606b9a;
}
I have two divs, one after another but float side by side, one is of a button img type thing and the other is some words associated with the what the button is. They are about 20px apart on screen.
What I want to happen is that when you hover over the button it changes and also changes the text, this I can do using the "+" operator in the css file, however I also want when you hover the text for the button to change, this isn't possible with the + as the text div is after the one with the img.
Below is my html and css, is there any simple way to do this? I don't want to really be using javascript and such to do it so if it requires major things I won't bother.
I just realized that I changed a few things before asking the question and it doesn't actually work with the + either
I have added a fiddle here: http://jsfiddle.net/LzLyK/1/
Basically when you hover the square it turns green, when you hover the text it turns green, what I want is to hover the square and square and test turns green and if you hover the text the square and text turns green
HTML
<div class="services-section-holder">
<div class="services-section-img"></div>
<div class="services-section-title"><p>Exhibition</p></div>
</div>
CSS
.services-section-holder{
position:relative;
width:270px;
height:70px;
margin-bottom:5px;
}
.services-section-img{
position:relative;
width:80px;
height:75px;
float:left;
background:url(../images/greycircle.jpg);
}
.services-section-title{
position:relative;
float:left;
height:75px;
margin: 0 auto;
display: table;
padding-left:20px;
}
.services-section-title a {
text-decoration:none;
}
.services-section-title a {
color:#000;
}
.services-section-title a:hover {
color:#906;
}
.services-section-img:hover {
background:url(../images/greycirclehover.jpg);
}
.services-section-img:hover + .services-section-title a{
color:#906;
}
The issue is that you're trying to ascend then descend the DOM with CSS which cannot work, CSS selectors can only work on identifying siblings or descendants.
Either wrap the initial a in its child div so both your divs are at the same level, or move class="services-section-img" from the div to its parent a
Demo Fiddle
Example fiddle of working solution/logic vs your current code
Again, CSS cannot ascend the DOM so any adjacency selectors only work by identifying elements following the initially specified element.
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.
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