Was just amusing myself with a little useless site, practicing this and that.
I came across a problem, where the link is only clickable on the left, not the right.
how it looks:
div, inside it a header(2) with in it a link
<div class="button one"><h2>example</h2></div>
It has a right border, a hover function and quite a width. It is absolute positioned. Been trying around a bit a came up with following code (it is a bith messy, sorry)
.button{
position:absolute;
padding:0px;
margin:0px;
width:300px;
height:70px;
background-color:#999999;
border-left:solid 7px #FF6600;
border-bottom:solid 1px #FF6600;
border-top:solid 1px #FF6600;
}
.button h2{
padding:0px;
margin:0px;
text-transform:uppercase;
color:#FFFFFF;
font-size:1,5em;
}
a{
margin:0px;
display:block;
text-decoration:none;
color:#FFFFFF;
padding:20px;
}
a:hover{
background-color:#FF6600;
}
problem: links are only links up about 1/2 the width. They background color of the hover changes the complete area, but only works when the mouse is in that link area. Not sure where I missed something. All help is appreciated!
For those who want to look into the css and html files themselves, i put them in a test.rar file:
http://www.sendspace.com/file/pe42e0
It's because the image #content_image_1 is positioned above your buttons. If you remove the z-index: 1; from that image, your buttons work as intended. Albeit with your image behind the buttons.
Related
When hovering cursor over the link, it's like it jumps down or adds extra pixel on the bottom. Looks like a common problem. I've tried solutions I found on this site, but none seem to work.
This is js fiddle
https://jsfiddle.net/srhjv284/
This is html
<div class="wrap">
Item 1 text
Some Other Text
Last Item
</div>
And this is css
.wrap {width:200px;}
.item {
display:block;
margin:2px 0;
padding:4px 8px;
background-color:#fff;
font-family:arial;
font-size:15px;
color:#ba050a;
border:1px solid #ba050a;
text-decoration:none;
transition:0.4s;
}
.item:hover {
color:#fff;
background-color:#ba050a;
}
This is just happening because you have the same border colour and the background colour on hover.
So when you hover, 1px border merge with background and it feels like that space increased.
Please change the border colour or background colour on hover and you will see the difference.
I have a rollover image, and the goal is that when the user mouses over the image, it darkens (which I achieved using a rollover image) and two links appear titled "learn more" and "visit site" (they should appear over the image). Before I get to styling I wanted to make sure everything was working properly, and my issue is that the links don't seem to appear at all. What am I doing wrong that I should fix to be able to see the links when the image is moused over?
The website with the issue is here and you can see if you mouse over one of the images how the link doesn't appear. My code is below.
HTML
<div id="example1" class="good_example"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ABC','','images/examples/abc_website_over.png',1)"><img src="images/examples/abc_website_desat.png" alt="visit site" width="300" height="200" id="ABC"></a>
<div class="options">
Learn MoreVisit Site
</div></div>
CSS
#example1:hover.options {
visibility:visible;
}
.options {
visibility:hidden;
position:absolute;
z-index:9999999;
top:50px;
left:75px;
}
.options a:link {
padding-right:15px;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
margin:10px;
color:#ffffff;
font-size:40px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
width:50px;
text-align:center;
opacity:0.7;
background-color:#069;
}
.options a:hover {
opacity:1;
}
There's a problem with your css selector
#example1:hover.options {
visibility:visible;
}
Replace the selector to something like this:
#example1:hover > .options {
visibility:visible;
}
and that should work.
here's a quick sample
you have .options {visibility:hidden;} so it is unseen no matter what content in it. you should at least change it to visible when .options:hover.
How can I create a box with a coloured "heading area" that has a shadow on the bottom just like this example on the right sidebar of this website: Box with heading on this website
This website uses images to create this effect. I would like to use pure CSS3 and HTML5 to achieve this.
I have tried looking for this on Google, but I can't find it anywhere. I'm assuming that I am calling it the wrong thing, that is why I cannot find it. Also, I've tried using a table with two cells, but it does not work out right and I cannot create or place the shadow correctly.
I would like my box to be exactly the same as the example except that I would change the colours.
I would really appreciate any help I can get.
My approach is to use borders for a triangular mask, and underneath use a background gradient.
Check out my code on codepen
The updated version. For pseudo elements (:before and :after) you had to make some space for the border (1px on left and right).
Remember that the tricky part is with adjusting the width with this sidebar. First thing to change is the sidebar class, then you should match the borders for the pseudo element :after.
try this code
<!DOCTYPE html>
<html>
<head>
<style>
#nav{
width:950px;
height:50px;
float:left;
position:relative;
background:#F4F4F4;
background:linear-gradient(top,#FFF,#F4F4F4);
background:-moz-linear-gradient(top,#FFF,#F4F4F4);
background:-o-linear-gradient(#FFF,#F4F4F4);
background:-webkit-gradient(linear,left top,left bottom,from(#FFF),to(#F4F4F4));
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.21);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC');
}
#nav ul{
list-style-type:none;
margin:0;
width:910px;
padding:0px;
padding-left:30px;
float:left;
}
#nav ul li{
display:inline;
}
#nav ul li a{
text-decoration:none;
color:#06C;
padding:8px;
padding-left:25px;
padding-right:25px;
font-family: 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
float:left;
margin:5px;
}
#nav ul li a:hover{
color:#FFF;
background:#666;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a >Home</a></li>
<li><a >Profile</a></li>
<li><a >About</a></li>
<li><a>Contact US</a></li>
</ul>
</div>
let me know if it work for you.
If you want to make this effect with CSS3 use box-shadow.
For example, check fiddle:
http://jsfiddle.net/PwerX/
More documentation check this link, it helped me!
http://css-tricks.com/snippets/css/css-box-shadow/
Have fun!
I have a sprite, consisting of 4 bubbles that I will use for the selected version of my navigation, that looks like this:
The best example of what I'm trying to achieve that I can find is Dribbble. Look at the header navigation selected navigation. They are using a bubble similar to mine to cover the "Jobs" link, except they use pure css to achieve the look, whereas I'm using images.
Here's my code:
.inline-block{
/* Inline block class for li navigation */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#header li a{
width:40px; /* without padding = 110px*/
height:15px; /* without padding = 31px*/
padding:8px 35px;
}
#header li a.selected{
background: url('../img/btn-header-sprite.png') 0 -1px;
display:inline-block;
}
#header li a{
color:#FFF;
font-weight:bold;
font-size:15px;
}
#header li:hover{
background-position:0 -34px;
}
#header li:active{
background-position:0 -67px;
}
Right now it looks like this:
I'm having to individually align the padding for each one, and as you can see, if the padding is not correct, the text is not centered in the bubble. Is there a better way to format this, than individually giving padding to each bubble?
Thanks for all help! If you need more clarification, just say!
You can try
display:table-cell;
vertical-align: middle;
How to show an edit link on the profile picture just like the one on facebook but positioned at the right-top corner of the image?
HTML Code:
<div class="topgrid">
<a href="#"><img src="C:/images/users/image1.png"/>
<span class="image" id="image">Edit Picture</span>
</a>
</div>
CSS Code:
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
right:0;
width:80px;
position:absolute;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
I am here using the fixed width of the span element, but when I don't specify the width of the span element, the element doesn't appears at the absolute top right-corner . So i have to adjust the right property as:
right:13%;
which is not the standard way to do it. I need your valuable suggestions!
I am also attaching the tried out fiddle here!
http://jsfiddle.net/nQvEW/81/
Try this Fiddle
css:
.image {
position:relative;
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
position:relative;
width:auto;
background:none;
top:-205px;
}
.topgrid {
text-align:right;
width:300px;
height:200px;
margin:20px;
}
Is this what your looking for ?
The span element has no fixed width and remains in the top-right corner!
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
width:auto;
float:right;
}
.topgrid:hover .image{
display:block;
margin:0 auto;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
Here's the updated Fiddle: http://jsfiddle.net/b6Yw6/15/
What i have done is :
made the span width to auto and gave float:right.
Removed position:absolute;top:0;right:0 property from span. Add them if it causes browser compatibility problems
You can also do
.image{
background:transparent;
color:white;
font-weight:500;
}
to make it look good!
Here's the new Fiddle as per your request! Tell me if there's anymore changes to be made.
First step is to have the image be a background image rather than a straight-up <img> tag. This will allow you to add child nodes.
Add one such child node: the edit link. Make it appear where you want it, ignore the "only when hovering" part for now.
When you're ready, add display:none. Then, in the :hover style for the container, (ie. #container:hover>#editlink), add display:block. Done.
Or you can use the dynamic html tag generations every time on hover