For some reason the social media icons on top of the left sidebar on www.hungryrunnergirl.com prevent the directly below archive widget from being clicked. I don't have this problem when I make each button position absolute (with the container remaining relative) but when I do that, The buttons appear in different places depending on which browser you are viewing from. Does anyone have any insight into why this could be happening (either the inconsistent positioning when using absolute or the un-clickable areas when using relative CSS positioning)?
Here's the code that I'm currently using to style the menu:
/* Menu Container */
.custom .sidebar .menu {
list-style: none;
padding: 0;
margin: 0 0 0 10px;
width: 190px;
height: 190px;
position: relative;
}
/* Facebook */
.custom #menu-item-15470 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 0px;
top: 0px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px 0px;
}
.custom #menu-item-15470 a:hover {
background-position:0px 0;
}
/* Pinterest */
.custom #menu-item-15471 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
position: relative;
left: 81px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -82px;
}
.custom #menu-item-15471 a:hover {
background-position:0px -82px;
}
/* Instagram */
.custom #menu-item-15472 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-top:10px;
position: relative;
left: 0px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -165px;
}
.custom #menu-item-15472 a:hover {
background-position:0px -165px;
}
/* Twitter */
.custom #menu-item-15475 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
margin-top:10px;
position: relative;
left: 81px;
top: -172px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -248px;
}
.custom #menu-item-15475 a:hover {
background-position:0px -248px;
}
Thank you so much for your help.
Add the following to li.widget (line 191):
position: relative;
z-index: 100;
Related
I am sure it is something simple I am overlooking. But the top nav (dropdown) of my website is no longer visible. I am 100% sure it has something to do with my css applied.
.ulTopmenu {margin:0; padding:0; width: 100%; overflow:hidden;}
.liTopMenu {width: 120px; height: 40px; float: left; margin:0 4px; list-style:none; display: inline;}
.divTopMenuInnerContainer {display: inline; overflow:hidden; height:500px;width:900px;}
.divTopMenuInnerContainer{position:relative;height:100%;width:80%;}
.divTopSpliter {float:left; width:1px; height:40px; display:block; border-right:1px;}
.divTopTopSpliter {float:left; width:30px; height:1px; display:block;}
.a {
width: 120px;
height:25px;
line-height: 40px;
text-decoration: none;
text-align: center;
}
/* End of General */
.divTopSubMenuSpliter {height:1px;width:auto;background:#0000; margin-top:1px; margin-bottom:1px;}
div.absolute {
position: relative;
right: 20px;
width: 200px;
height: 50px;
}
For the dropdown navbar's css, it may be necessary to tell it to be visible.
Try something like this:
navBar{
visibility: visible;
}
Let me know if this worked.
I resolved this by changing the following. Thanks for the help any way.
.ulTopmenu {margin:0; padding:0; width: 100%; overflow:visible; position:absolute;}
.liTopmenu{width: 120px; height: 40px; float: left; margin:0 4px;display:inline-block;}
What I am trying to do is to get the hover effect that puts the anchor link a bit down, but somehow it affects all the links. Can somebody point out what I did wrong here?
nav {
width: 100%;
height: 5rem;
background: red;
}
ul {
margin: 0 auto;
font-size: 0;
}
ul li {
display: inline-block;
line-height: 4.8rem;
position: relative;
}
ul li > a {
text-decoration: none;
color: #FFF;
font-family: "Verdana";
padding: .1rem 1.5rem;
font-size: 1.3rem;
display: block;
overflow: hidden;
position: relative;
transition: 300ms all;
height: 100%;
margin: 0;
}
ul li > a::before, ul li > a::after {
content: '';
width: 100%;
position: absolute;
left: 0;
transition: 200ms all;
}
ul li > a::before {
background: #FFF;
height: .5rem;
top: 0;
transform: translateY(-100%);
}
ul li > a::after {
background: #000;
height: .4rem;
bottom: 0;
transform: translateY(100%);
}
ul li::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #CCC;
position: absolute;
opacity: 0;
}
ul li:hover > a {
padding-top: 0.6rem;
padding-bottom: 0.1rem;
}
ul li:hover > a::before, ul li:hover > a::after {
transform: translateY(0);
}
ul li:hover::before {
opacity: 0.3;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</nav>
Why li:hover > a is affecting all list items?
The problem is not your :hover selector, it's the display-block on the lis. inline-blockelements align on the baseline, this means that when you add a padding-topto one of them, all the others move down as well. To fix it float the elements to the left to keep them on one line and aligned to the top:
Demo: https://jsfiddle.net/403zexop/
nav {
width:100%;
height:5rem;
background:red;
}
ul {
margin:0 auto;
font-size:0;
overflow: hidden;
li {
display:block;
line-height:4.8rem;
position:relative;
float: left;
>a{
text-decoration:none;
color:#FFF;
font-family:"Verdana";
padding:.1rem 1.5rem;
font-size:1.3rem;
display:block;
overflow:hidden;
position:relative;
transition:300ms all;
height:100%;
margin:0;
&::before,&::after{
content:'';
width:100%;
position:absolute;
left:0;
transition:200ms all;
}
&::before{
background:#FFF;
height:.5rem;
top:0;
transform:translateY(-100%);
}
&::after{
background:#000;
height:.4rem;
bottom:0;
transform:translateY(100%);
}
}
&::before{
content:'';
width:100%;
height:100%;
top:0;
left:0;
background:#CCC;
position:absolute;
opacity:0;
}
&:hover{
>a{
padding-top:0.6rem;
padding-bottom:0.1rem;
&::before,&::after{
transform:translateY(0);
}
}
&::before{
opacity:0.3;
}
}
}
}
Note: I cleared the floats by adding overflow: hidden; to the ul
"li:hover > a" is correct!
The problem is, that with changing the padding you alter the height of the element, and the parent container has to adapt and as well all other childs.
You can see it when you do not change the padding, but just the background-color of the hovered a. You will see, it is just altering the current element.
I'm using Font-Awesome for my web icons and I'm trying to add tooltips to them. I can't get my positioning correct such that on hover, it doesn't move the icon when it's displayed. The tag is how [Twitter] instructs implementing the icons.
Here's my code:
<ul>
<li>
<div class="tooltip">like me.</div>
<i class="icon-facebook-sign"></i>
</li>
[...]
#footer li {
display:inline;
margin:0px 5%;
}
#footer i {
position:relative;
font-size:74px;
}
#footer i:hover {
color:#3b8edb;
cursor:pointer;
}
.tooltip {
display:none;
position: relative;
background: #ffffff;
font-size:12px;
color:#2c6ca8;
border-radius:5px;
padding:10px;
}
.tooltip:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tooltip:after {
border-top-color: #ffffff;
border-width: 12px;
left: 50%;
margin-left: -12px;
}
$(function() {
$("#footer li i").mouseenter(function() {
$(this.parent()).find(".tooltip").toggle();
}).mouseleave(function() {
$(this.parent()).find(".tooltip").toggle();
});
});
.tooltip {
position: absolute; /* <- not relative */
top: 10px; /* <- position relative to #footer li */
left: 10px;
}
And you can drop the js and use CSS to show it on mouseover:
#footer li:hover .tooltip{
display:block;
}
I want to make an ul li menu and I want to place each li element over previous one.
I don't know if I can explain with words what I mean, so I've made an image showing desired effect:
How can I do this using plain CSS? Is it possible, or I must use javascript?
This is what I've tried so far:
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
}
li a {
display: block;
position: absolute;
top: -30px;
z-index: 1;
width: 225px;
height: 115px;
}
but each li appears on the same place over previous one.
You can use a negative margin-top to "lift" the li elements.
http://jsfiddle.net/tomprogramming/mbe9W/
relevant CSS
li { padding:10px; border:1px solid #000; margin-top:-10px; }
li:first-of-type {
margin-top:0;
}
I think this is close:
<ul>
<li><a class="a" href="#">A</a></li>
<li><a class="b" href="#">B</a></li>
<li><a class="c" href="#">C</a></li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
padding-top:30px;
}
li {
position: relative;
height:50px;
}
li a {
display: block;
position: absolute;
height:20px;
top: -30px;
left:0;
width:225px;
height:115px;
}
.a {
border:1px solid #ff0000
}
.b {
border:1px solid #00ff00
}
.c {
border:1px solid #ffff00
}
I've a problem with inserting an image after every element in my list. I used ":after" and it shows me the image but instead of after every element, the images are with a new linebreak under every element:
Should be (|=image):
Site1 | Site2 | Site...
Reality:
Site1 Site2 Site3
| | |
Following my css code, maybe someone can help:
/* Navigation */
#nav {
position:relative;
height:70px;
background:#191919;
position:relative;
}
/* The main menu */
.menu{
list-style: none;
position: relative;
float: left;
display: block;
left: 50%;
padding-top:20px;
}
/* First level of navigation */
.menu li{
position: relative;
float: left;
display: inline;
right: 50%;
padding-right:15px;
}
.menu li a{
display:inline;
width:auto;
word-wrap: break-word;
text-shadow: none;
color:#FFF;
text-decoration:none;
font-size:14px;
font-weight:normal;
}
.menu li:after {
display: block;
content: "";
width: 5px;
height: 50px;
background: transparent url('../images/nav_bar_line.png') no-repeat;
}
You can use absolute position for this. Write like this:
.menu li:after {
display: block;
content: "";
position:absolute;
top:0;
right:-5px;
width: 5px;
height: 50px;
background: transparent url('../images/nav_bar_line.png') no-repeat;
}