I have the unorder list like so...
<div class="social">
<ul>
<li>Find Me <img src="images/facebookGrey.png" width="50" border="0" style="vertical-align:middle;" class="facebook" /></li>
</ul>
</div>
and what I am trying to do is setup a hover so when the user hovers over that list item the image changes.
here is the css I have tried..
.social ul img.facebook a:hover{
background-image:url(images/facebook.png);
width:50px;
}
any ideas?
It should be:
.social ul a:hover img.facebook
since the image is inside the anchor.
However, it may be better to remove the img tag all together and just use the anchor and set it's background-image property.
The image is inside the link, not the other way around. Also, you can't change the source of the image via CSS. Setting the background will work, but the source will be on top of it. From the looks of your image names, you won't see any effect.
Try something like this:
<div class="social">
<ul>
<li>Find Me</li>
</ul>
</div>
.social ul a {
background-image: url(images/facebookGrey.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 60px;
}
.social ul a:hover {
background-image: url(images/facebook.png);
}
You are confusing background images with actual images.
Set the background image of the <a> to images/facebookGrey.png, and then change the background image on hover.
Related
I am having a menu before each menu, and I am having an image before each li to illustrated the menu.
My code: http://jsfiddle.net/dtjmsy/7UHxa/2/
<div>
<ul>
<li><a href="">
<img width="40" height="14" src="http://img11.hostingpics.net/pics/902607libkgd.png" alt="li_bkgd">Example menu 1</a></li>
</ul>
</div>
My question is how would I do to position the text over the top of the image ?
Thanks for your help
Use image as the Background-Image of the list elements.
As per your comments I got your requirement. So here is the solution and its explanation.
1- You need to show the image beneath the text. So there should be some space at the bottom of li element. For that we have to use the padding bottom.
2- As you also need to use the background image so that image but the position of background image is not by default set as you want. So you also need to play with it.
Here is your css
#menu li
{
background :url('http://img11.hostingpics.net/pics/902607libkgd.png') no-repeat;
background-position:0px 10px; // 0px from the left and 10px from the top
padding:0px 0px 10px 10px; // 10px padding from the left and bottom to shift the text according to image position
}
Js Fiddle Demo
Just change you style as below
#menu {
list-style-type:none;
}
#menu li {
background :url('http://img11.hostingpics.net/pics/902607libkgd.png') no-repeat;
background-position:bottom left;
height:30px;
padding-left:15px;
}
Hope this should work..
Your HTML:
<div id="menu">
<ul>
<li>Example menu 1</li>
</ul>
</div>
And CSS example:
#menu li
{
background :url('example.png') no-repeat;
background-position: left 1px top -1px;
}
Also you can use different background for each item:
#menu li:first-child
{
background :url('example.png') no-repeat;
background-position: left 1px top -1px;
}
Also :last-child and nth-child(2) selects every <li> element that is the second child of its parent
I don't have control over the HTML that I'm styling, so each img is nested in an li. The li has padding, which cannot be changed to a margin because of a complex responsive grid system. And, yes, since it's responsive, the size of the image might change.
Here's the demo: Play with this gist on SassMeister.
Sass:
.active {
border: grey solid 4px;
opacity: .2;
}
ul {
list-style:none;
}
li {
width: 20%;
padding: 5%;
display: inline-block;
}
img {
width: 100%;
}
#thumbs {
width: 100%;
}
HTML:
<div id="thumbs">
<ul>
<li>
<img class="active" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
</ul>
</div>
How can I make a color overlay effect on the .active image?
Background color applied to the li parent is messy because of the padding, and I am having trouble figuring out how to create a pseudo element that's the same size as the image.
Edit: I thought maybe I could achieve this with an offset border, see this gist on SassMeister. But I would need to do some math to make the border width and offset exactly half the width (or height) of the image. Can I do that with Sass?
Sass:
.active {
border: grey solid 4px;
opacity: .2;
outline: 160px solid rgba(255,0,0,0.7);
outline-offset: -160px;
}
ul {
list-style:none;
}
li {
width: 20%;
padding: 5%;
display: inline-block;
}
img {
width: 100%;
}
#thumbs {
width: 100%;
}
HTML:
<div id="thumbs">
<ul>
<li>
<img class="active" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
</ul>
</div>
I got something working, try this on for size. It only works if you can add a class to the <li>.
Unfortunately, CSS doesn't allow any form of parent selection, so you can't say 'give me any <li> containing an <img> with the class <active> :( That's javascript turf
Unless you want to stuff around adding overlays with javascript, why not apply the tint color you want to the parent element <li>, then replace the padding with margins so the colour doesn't stick out, as it's obscured by the image within. Then apply the opacity to the img.active like you have. I think you were on the right track with the first idea.
The only control you really get over opacity is either the element itself or it's background color, as in rgba(red, blue, green, opacity). This means if you apply the BG colour to the image, it will be obscured by this image, and as any changes to transparency effect the whole thing.
I have this site here: http://jamessuske.com/freelance/seasons/
At the bottom you will see social media icons and the issue I am having is when I put my mouse over them, they are not clickable, only when I move my mouse to the left a little bit and I do not understand what I did wrong:
HTML
<ul class="social-media">
<li class="twitter"> </li>
<li class="instagram"> </li>
<li class="facebook"> </li>
</ul>
CSS
ul.social-media{
padding-top:30px;
}
ul.social-media li{
float:left;
padding-left:5px;
list-style:none;
}
ul.social-media li.twitter{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
}
ul.social-media li.instagram{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-26px;
width:25px;
height:26px;
}
ul.social-media li.facebook{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-52px;
width:25px;
height:26px;
}
Any help would be appreciated. Thanks.
The size of the clickable area depends on the content of the a tag. Your a tag does not have any content.
One solution is to apply your background image directly to the a tag and changing the display attribute to block.
ul.social-media li.twitter a {
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
display: block;
}
Note that we also need to set display to block since the anchor tag is an inline element by default. The width and height attributes only have an effect on block elements.
It's because of the padding-left you have set on the li element
it is probably because your links are so small.
try this :
.social-media a {
display:block;
height:100%;
width:100%;
}
So they fill entire <li> and stand over sprite.
I'm working on a "flat design" website, and I've decided to use Simple Icons. I wanted the background of the Simple Icon to get darker while the white overlay image stays the same. So, I created a list (it's a navbar). I also put an anchor inside of the list item. I tried setting the background image to the anchor as the icon, and the background color to the list item to whatever I wanted. I also tried adding a transition to the list item to change the background color, but that didn't work so I just got rid of it. Here is the CSS for that entire piece of the site:
div#nav{
float:right;
width:auto;
height:37px;
padding-top:15px;
padding-right:15px;
padding-bottom:5px;
background-color:rgba(100,100,100,0.3);
border-left-color:rgba(255,255,255,0.2);
border-right-color:rgba(255,255,255,0.2);
border-right-width:1px;
border-right-style:solid;
border-left-width:1px;
border-left-style:solid;
border-top-width:1px;
border-top-style:solid;
border-top-color:rgba(255,255,255,0.2);
margin-top:102px;
margin-left:2px;
}
#nav ul{
padding:0;
list-style:none;
margin:0;
}
#nav ul li{
width:32px;
height:32px;
margin-left:15px;
display:inline-block;
background-color:#000000;
border:0;
}
#nav ul li a{
z-index:10;
}
#facebook{
width:32px;
height:32px;
background-image:url('images/facebook.png');
}
And here is the HTML:
<div id="nav">
<ul>
<li><a id="facebook" ></a></li>
<li><a id="twitter" ></a></li>
<li><a id="youtube" ></a></li>
</ul>
</div>
In the CSS, I didn't include styling for the id "twitter" or "youtube" because I'm just trying to get it to work with one for now. Can anyone make the simple icons appear AND make the transition work? I'll provide the simple icons. The icon images are inside a folder called "images" inside of another folder called "_css" which contains the CSS file itself.
https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-32.png
Add
display: block;
to your anchors
anchor tags are naturally display inline and since you have no content in the anchors so you will not see them despite giving them the dimensions
display: block;
add this to your <a> tags
fiddle : http://jsfiddle.net/9CFGK/
I'm trying to make a CSS/javascript dropdown menu (based on this example. This works. But I want to have a background color for my whole menu. I tried to place the <ul> inside a div and give this div a background color. However, the actual menu items do not appear inside the div when I view the page, they are under it. After some experimenting, I found out that this was caused by setting float: left; on the li elements that comprises the main menu items. (of cause, taking float: left; away means that the menu items are stacked on top of eachother in stead of side by side).
Does anyone know how to fix this?
If you are just trying to get a background color for your main menu items, you can add overflow:auto; or float:left; to the containing div tag.
If you want to set the background color of the sub-items, add it to the li ul rule.
Brief example here: http://www.danfsmith.com/so/css/suckerfish/menu.html
try adding the CSS property overflow: auto; to your <div/> or <ul/> which has the background.
I think what you are asking is how to set a background color for each link in your dropdown menu. If you create the menu with:
<ul class="navigation">
<li id="youarehere">Home</li>
<li>Blog</li>
<li>Papers</li>
<li>Programs</li>
<li>Activities</li>
<li>Contact</li>
<li>About</li>
</ul>
Then the CSS to set the background color is:
ul.navigation li a {
width: 111px;
padding: .5em 1em;
background-color: #993333;
color: #fff;
text-decoration: none;
text-align: left;
float: left;
border-bottom: solid 0px #fff;
border-top: solid 0px #fff;
border-left: solid 1px #000;
}
If you want the background colour for the div to show you'll need to clear the floats.
<div style="background-color: red">
<ul>
<li>asda</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
<span style="clear: both"></span>
</div>
Notice the span with the "clear: both" style in. That should do it.
Heres a link to a nice quirks mode post about it
http://www.quirksmode.org/css/clearing.html