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
Related
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/
A site I am working on uses a small image icon of an upward-right pointing arrow on off-site links as a designation to the user that "this link goes away from this site". Currently the image-icon is on the left-side (beginning) of the link text. What we would like to do is move it to the end of the text. This is proving difficult. I am able to move the icon to the far right of the class container the link text is in, but not to the end of the text. At the far right of the container does not look so great.
The css comes from an outside contractor and we are now maintaining it and making edits/changes. I'm okay with css, but this is beyond my meeger chops.
Example:
As it is now:
->foo
->foobarbizbaam
What I would like:
foo->
foobarbizbaam->
Not looking so well:
foo ->
foobarbizbaam ->
Code snippets from our app.css file:
a.external, a.external-link {
background-image: url(/assets/img/external-link.png);
background-repeat: no-repeat;
background-size: 0.6875rem;
}
.sidebar > ul > li a {
background-color: #fff;
}
/* this one positions the icon */
/* currently this puts icon at left-side of link text */
.sidebar > ul > li a.external {
background-position: 0.5rem 0.7rem;
}
.sidebar > ul > li > a {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
Any way this can be done?
Thanks
You should be able to use the CSS ::after (::after) selector to add the image directly after the links.
Assuming that the HTML looks like this:
Stackoverflow
You should be able to accomplish what you want by using the following CSS:
a.external:after {
content: url('http://placehold.it/16x16'); /* Replace with your image icon path although, preferably, you should use an icon font instead. */
margin-left: 5px; /* Adjust margin as needed */
}
Here's an example: https://jsfiddle.net/sbeliv01/zrkg6rbb/1/
If you are comfortable with html you can add the image behind the text in the html, instead of a background in the css.
Something like:
<span>text here <img src="img.jpg"></span>
This should put the image right after the text
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
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 have the following css to put padding around a div:
.orangeAllDay, .orangeAllDay a {
background: #fab384 !important;
color: white;
padding: 5px;
}
it works great until the content (which happens to be inside a cell in an html table takes up two lines. When i look at this in firefox, it looks like its trying to add the padding to each line of the content (even though its all inside one div) so i get some weird overlap of space above the second line that covers part of the first line.
Is there a workaround for this issue or another solution that doesn't break on multiline.
It is adding this padding because you have included both the .orangeAllday and .orangeAll Day a together, so both the link & the elemenent .orangeAllday will get padding of 5px.
You would need to separate them like so:
.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
}
.orangeAllDay a {
background: #fab384 !important;
color: white;
}
this is done with the assumption that you want padding on the .orangeAllDay element only, but wish to retain background / color for link a.
You've got the padding around the div (.orangeAllDay) and the link. What you are seeing is the padding of the link. There are several ways around this, depending on how exactly the HTML looks like.
If it only contains the link, I'd suggest to actually drop the div and just have the link display as a block:
...
a.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
display: block;
}