There are few questions here that ask the same but their solutions don't work for me.
This is a picture from one of those questions and what I want to achieve. I have a list and when there are more items, scrollbar shows up.
I also set the overflow-y to be overlay since I don't want the scrollbar to add to the width of the list. How can I make the track transparent so the items underneath can be seen?
Track overlapping content
[Updated]:
Fiddle to show how it looks now, the picture is what I want to get.
p {
overflow-y: overlay;
width: 101%; }
https://jsfiddle.net/yk1cverh/2/
You can add the following in your css code:
body::-webkit-scrollbar {
width: 0.7em;
background: white;
}
body::-webkit-scrollbar-thumb {
background: #c0392b;
height:30px;
}
body::-webkit-scrollbar-track-piece
{
display:none;
}
In this part:
body::-webkit-scrollbar {
width: 0.7em;
background: white;
}
You can change the background: white; to any color you want. You probably need to make it similar to your body's background color or set it to transparent.
Here is a JS Fiddle that demonstrates it.
https://jsfiddle.net/qzsbf0tm/687/
Related
I'm using CSS and attempting to get what looks like a bullet point in the headings:
This is the exact image I want.
What I've done :
h1,h2,h3 {
background-image: url("the image link goes here");
}
anyone get any ideas I've tried moving it and stuff but it just isn't happening. Cheers.
You should set the background-position as well and also a left padding for the heading elements to push the text to the right:
h1, h2, h3 {
background: url("the image link goes here") 0 center no-repeat;
padding-left: 15px; /* change this to fit your needs */
}
Note that I used the background property as a shorthand.
You can also achieve that by using ::before pseudo-element to create the rectangle and position that within the headings as follows:
h1:before,
h2:before,
h3:before {
content: '■ ';
position: relative;
bottom: .1em;
color: #666;
}
WORKING DEMO
I have attached image to button with css style.
.a-icon {
background: url('../a.png') no-repeat 100% 100%;
}
.b-icon {
background: url('../b.png') no-repeat 100% 100%;
}
In Firefox it looks fine, but in IE8 blue border appears around icon, when button becomes disabled. I have tried adding border: none and so on, but with no luck.
Any suggestions?
All links with img inside have a blue border on IE lte than 9, add to Your css global style for this tags.
a img {
border:none;
}
Add this to your CSS:
.a-icon,
.a-icon img,
.b-icon,
.b-icon img {
border: 0;
outline: 0;
background: transparent;
}
I think this will be the solution that you are looking for. If I understood you right, the problem is with the link border that is around the image. So you have to remove that.
So try this:
a img {
border:0;
}
Hope it helps
I am trying to do a little optimization on my website and it has brought me to what seems to be a quite common topic but I haven't been able to find a problem quite like mine.
What I had. A image sprite (foggy/clear) and text on top of it. When you hovered over the image it could become clear, when you hovered over the text it would highlight and turn blue. (The image would remain clear)
What I want. To reduce the sprite into one image (rather than two in one), as it is the largest file on my main page and 57% of my load time is spent on images.
What I have done:
1) Gone from a sprite to just one clear image.
2) Created a new 'foggy-img' div container, placed it on top of the image, white with opacity: 0.15
3) Created a new div 'img-text' container for the text to put it outside the 'foggy-img' so the opacity doesn't effect it and have got it nicely place where it should be.
The Problem: It is small, the see-through box has replaced the sprite nicely and works. The text also highlights nicely. But. When one hovers over the text the see-through box becomes 'foggy' again.
Is there any way to keep the 'foggy-box' clear when hovering over the text which is in a separate div?
The HTML:
<div id="photo-feature">
<a href="services.html">
<div id="img">
<div id="photo-fog"></div>
<div id="photo-text"><h3>Learn More...</h3></div>
</div>
</a>
</div>
The CSS:
#photo-feature a { text-decoration: none; }
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; }
#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; }
#photo-feature #img #photo-fog:hover { opacity: 0; }
#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;}
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; }
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; }
You could use adjacent siblings selector.
(further details)
It doesn't work in older browsers though (guess which).
You would have to swap the ordering of your HTML a bit. Basically put the text first then use something like this:
#photo-text:hover + #photo-fog { // Do something
Right now you'd not be able to set the hover on the H3, but why not just style up the h3 rather than the #photo-text element then it would work fine.
Edit: Beautifully colour co-ordinated js fiddle for you to take a look at: http://jsfiddle.net/will/Gt8KX/
Hope that helps :)
I'm using Adam Shaw's fullcalendar jquery plugin and it works really well, after speaking to the graphic designer he wishes to use images instead of fullcalendar's prev,next,today and the three view icons (month, week, day).
Using firebug I've isolated that the "prev" icon, for instance, is using the span class
fc-button-prev
However, when I go to the css and create the class applying a background image:
.fc-button-prev {
background-image: url('../images/prev.png');
}
Nothing happens.
Any ideas would be appreciated
May be you have to define display:block in your class like this:
.fc-button-prev {
background-image: url('../images/prev.png');
display:block;
width:50px;
height:50px;
}
because span is an inline element. So, inline element is not take width , height, vertical margin & padding in it.
In fullcalendar 2.x I had to use the following CSS to change "previous" button image:
.fc-prev-button {
background-image: url(../img/icon_arrow_left.png) !important;
background-size: 100% 100%;
width: 50px !important;
height: 50px !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fc-prev-button span {
display: none;
}
I found this code from here: http://www.cssportal.com/form-elements/text-box.htm
But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners
/* Rounded Corner */
.tb5 {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}
This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:
input[type="text"] {
outline: none;
}
In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus
input[type="text"]:focus {
background: url(images/rounded-focused.gif) no-repeat top left;
}