I am creating image which has a link on top with. Image has been set as relative, and the link as absolute on the bottom of the image. Basically it is a link on top of the image with absolute position and fixed widh and height. On hover, background of the link changes it's color. The problem occurs whenever I click on the link: it goes top of the image (on Opera and IE it stays there). Images as examples:In the picture below is a normal state of image with link (on hover background's transparency changes).
In this picture below is a state of a:active of the link.
It stays as absolute element, but changes it position. I have tried applying for a:active these options: copy everything from normal and hover states, position:static;, even tried to place a margin-top with a size that would be required to stay in bottom - no luck.
Here is the css code of it:
.image-with-link {width:300px; height:135px; position:relative; float:left; overflow:hidden;}
.image-with-link a {width:280px; height:18px; position:absolute; bottom:20px; left:0; padding:5px 10px; color:#fff; text-align:left; background: rgba(0,0,0,0.3); overflow:hidden;}
.image-with-link a:hover {background: rgba(0,0,0,0.5);}
(link is no longer needed).
You have conflicting CSS on lines 79 and 194 of custom.css that is overriding the absolute positioning:
You are declaring:
a:active, a:focus {
position:relative;
top:1px;
}
and on line 194:
.kategorijos .vienas a:active {
position:static;
}
Both of these are causing the problem. You want the item to keep position:absolute on :active.
This is your problem:
a:active,
a:focus{
/* Give clicked links a depressed effect. */
position:relative;
top:1px;
}
You overwrite position, but not top in following selector: .kategorijos .vienas a. You should add top: initial for fix.
I assume that position: static is by design here:
.kategorijos .vienas a:active {position:static;background: url('../images/arrow.png') 270px 4px no-repeat rgba(0,0,0,0.5);}
This moves link below image.
Try this, I guess this will work :)
a:active, a:focus {
position: relative;
top: 1px;
}
.kategorijos .vienas a:active {
position: static;
}
Related
I have found this awesome menu on codepen. Now I want to use it, but my problem is that I want to place it right-aligned on my website. Unfortunately this menu drops also right. But I want it to drop left. So how could I solve this problem. (Change the opening angle didn't work?)
Thanks for your help.
http://codepen.io/lbebber/pen/pvwZJp
$opening-angle:$pi*2;
change transform property at .menu-open:checked~.menu-item selector
from transform:translate3d(110px*$i,0,0); to transform:translate3d(-110px*$i,0,0);
And change left property to right in .menu class
Updated .menu
.menu{
#extend %goo;
$width:650px;
$height:150px;
position:absolute;
right:50%; /*Changed*/
margin-left:-80px;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:right; /*Changed*/
}
Codepen
I have a list of thumbnails with links and images, so when the user hover an li element, it's height becomes 100%, but the problem it works wrong in Chrome for some odd reason. I don't understand why in Chrome the hovered li width doesn't adjust to its "new" size.
(Note: this is a simplified version of my problem)
Also, this problem occurs only on :hover. but not, lets say, with :nth-child
Playground link
Update: problem continues... See my solution in the answers, BUT the problem continues..I've zoom in with the mouse and you will see it happening..note that number of images can be huge.
Update 2:
Force a redraw every mousehweel event fires...
thumbs.hide().show(0);
My solution: Solution playground
The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
li:hover{ height:100%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
li:hover a img{ min-height:96%; }
I am new here and I am not sure if this is a good practice but I will post my observation and not a precise solution:
The same problem appears on Opera.
This seemed strange to me - when li:hover a img{ border:1px solid black; } or any similar css code that is not supposed to make any change to the current situation is added it all starts to behave very strange. ex - http://jsbin.com/operib/43/edit
And here it is the solution I do not find elegant, just a quick fix:
http://jsbin.com/operib/39/edit
EDIT: After testing #Carol McKay's result I realized that the transition is making the whole mess. The next link (node 58) is node 43 linked above (which is basically node 1 just added border to the image on hover) with removed transition and it works just fine http://jsbin.com/operib/58/edit.
It seems that any css rule should be added on hover so the <img/> dimensions are recalculated.
Apply transition to the image instead.
css
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%;
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; - webkit-transition:0.15s; }
li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }
http://jsbin.com/operib/83/edit
I have a background image that I'd like to position just off the edge of my ul li item.
Image
I guess you can see what I'm trying to do, position that little right pointing arrow off the egde, similar to the one at the top that points downwards. (The lime will be changed for the same colour as the arrow, but at the mo I have put a contrasting colour so the arrow can actually be seen)
CSS
body ul#main_navigation li li:hover > a, body ul#main_navigation li li.over > a
{
background-image:url(/images/nav_arrow_right.png);
background-repeat:no-repeat;
background-position:center right;
background-color: #0F0;
color: #FFF;
}
Desired result
EDIT: I have managed to get the arrow positioned correctly, however it is cutting off... how can I make it not cut off anything that is outside of the item?
#Francesca so you can play with positioning you can set the background-positionwhere do you want the arrow image that will go there............
I am giving you some rough idea below i don't have your much code....
body ul#main_navigation li li:hover > a, body ul#main_navigation li li.over > a
{
background-image:url(/images/nav_arrow_right.png);
background-repeat:no-repeat;
background-position:center 10px;
background-color: #0F0;
color: #FFF;
}
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...
I'm really frustrated with this one. A few weeks ago I got it working in both firefox and ie just fine. Went back today to do some testing and found a problem with the display in firefox and I've been searching the code but can't find anything. I could use a few tips from anyone willing, I'm sure I'm looking at the wrong things. I upgraded my firefox version but I imagine my code is broke, not firefox. I'm assuming the problem is somewhere in my css file, but I'm not sure.
Here's what I've confirmed so far. There don't seem to be conflicts in other css files with < ul >'s or < li >'s that may be overriding settings. The other confirmation is that This works fine in Internet Explorer...therefore I must be an idiot, because its usually been the other way around (working in FF, but failing in IE).
Here's How it looks in IE (Notice the position of the folder icon right next to the text):
alt text http://www.redsandstech.com/ie_works.jpg
Here's how it looks in FF (Notice the folder icon is not being pushed down with its corresponding text).
alt text http://www.redsandstech.com/ff_broken.jpg
Here's the Unordered List:
<ul id="nav">
<li><a>Utah</a></li>
<ul>
<li><a>ParkCity</a>
<ul>
<li><a>Com1</a></li>
<ul>
<li class="folder_closed"><a>Timber</a></li>
<div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
</ul>
</ul>
</ul>
</ul>
Here's the CSS that is used for the whole menu:
/* MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
ul#nav div{
overflow: hidden;
}
#nav li>a:hover {
cursor: pointer;
}
#nav li > ul{
/* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
display:none;
margin-left:0px;
margin-right:0px;
padding-left:15px;
padding-right:0px;
text-indent:15px;
}
#nav li {
list-style-type:none;
list-style-image: none;
}
#nav > li{
vertical-align: top;
left:0px;
text-align:left;
clear: both;
margin:0px;
margin-right:0px;
padding-right:0px;
}
.menu_parent{
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.menu_parent_minimized{
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.folder_closed{
position:relative;
background-image: url(../images/folder_closed12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
.folder_open{
position:relative;
background-image: url(../images/folder_open12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
</ul>
You have encountered one of the greatest and most frustrating CSS differences between IE and other browsers.
My advice is to use a reset stylesheet, and to style tree icons as backgroundImages of their containers.
For example, one of your tree items might be
<div class="folder">This is a folder</div>
and have the following CSS:
.folder {
background-image: url(someImage.png);
background-repeat: no-repeat;
background-position: 0 0; /* or wherever you like */
text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}
}
I do this kind of thing always using DIVs, not UL>LI combinations. YMMV. You can do the same thing with UL>LI, but I don't like the differences in where the bullets are placed, etc., and if you use a reset stylesheet anyway, you are simply converting the LI containers to something resembling a DIV anyway.
Your markup has some errors, so it is up to the browser how to generate the DOM.
ul can only have li as child, not div or another ul. Fix the markup, and see what happens.
I've been having problems with firefox when I use overflow:hidden on my lists. Try taking out overflow:hidden and see if that changes things.
For my issue, if I use overflow hidden then it causes my ordered lists to not show their A.,B.,C. or 1., 2., 3. etc... (turns it into an unordered list, with no bullets)
Didn't test but this may have to do with the fact that FF uses margin to set the bullet marks while IE uses padding. Or is it the other way around? Forgot.