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;
}
Related
I am working on a fluid grid (DreamWeaver CC) site. I have a header-Wrapper div containing stacked elements using z-index. I am now trying to add a div after the header-Wrapper but this div is floating behind the header-Wrapper. This is my first time working with z-index so I'm rather flummoxed.
I have tried position and display css elements for the mobileNav div and also tried to use a height element for the header-wrapper. Nothing. the mobileNav div seems to be ignoring the header-Wrapper altogether and acting like it is the first div in the gridContainer.
Thanks for your help
site: miki.nantucket.net/redac-2.php
html
<body>
<div class="gridContainer clearfix">
<div id="header-wrapper" class="fluid">
<div id="rotation" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
<div id="Weather" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
<div id="Navigation" class="fluid "><ul>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
<li>Nav6</li>
<li>This is not styled yet</li>
</ul></div>
</div><!--end header-wrapper-->
<div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
</div>
</body>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 92.625%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
background-color:#FBFAF6;
}
#header-wrapper {
position:relative;
width: 100%;
padding:0;
margin:0;
}
#rotation {
position:absolute;
z-index:1;
}
#Navigation {
display:none;
width: 100%;
}
#Weather {
text-align:right;
font-size:13px;
padding:5px 0px 10px 0px;
position:absolute;
z-index:50;
top:0px;
left:0;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
}
#mobileNav {
position:relative;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.4166%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 23.7288%;
}
#Weather {
}
#mobileNav {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.875%;
max-width: 1232px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 17.7215%;
}
#Weather {
}
#mobileNav {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
CSS for included responsive slider
/*responsive hero slider*/
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.caption {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
margin:0;
text-align: center;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
font-size:18px;
font-stretch:expanded;
}
Thank you. Due to the various elements, I do need the absolute positioning but your comment about allowing for the space in the header-wrapper gave me an idea. I put an image into the header-wrapper, fiddled around with the z-index property here and there. Probably not the most elegant way to do it but it's working!
Thank you.
html
<div class="gridContainer clearfix">
<div id="header-wrapper" class="fluid">
<div id="rotation" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
<div id="Weather" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
<div id="Navigation" class="fluid "><ul class="navBump">
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
<li>Nav6</li>
<li>This is not styled yet</li>
</ul></div>
<div id="LogoWrapper" class="fluid "><div id="Logo" class="fluid "><img src="images/sitewide/Logo.png"></div><div id="LogoTag" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/logtag.php" ?></div></div>
<img src="images/rotations/redac2/image1a.jpg">
</div><!--end header-wrapper-->
<div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
</div>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 92.625%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
background-color:#FBFAF6;
}
#header-wrapper {
position:relative;
width: 100%;
padding:0;
margin:0;
}
#header-wrapper img {
position:relative;
z-index:1;
}
#rotation {
position:absolute;
top:0;
left:0;
z-index:5;
margin-left: 0;
width: 100%;
}
#Navigation {
display:none;
width: 31.0344%;
margin-left: 0;
}
#Weather {
text-align:right;
font-size:13px;
padding:5px 0px 10px 0px;
position:absolute;
z-index:50;
top:0px;
left:0;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
margin-left: 0;
width: 100%;
}
#mobileNav {
z-index:0;
width: 100%;
margin-left: 0;
}
#LogoWrapper {
position:absolute;
top:0;
left:0;
z-index:1000;
}
#Logo {
}
#LogoTag {
font-size:12px;
color:#797979;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.4166%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
width: 100%;
margin-left: 0;
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 23.7288%;
margin-left: 0;
}
#Weather {
width: 100%;
margin-left: 0;
}
#mobileNav {
margin-left: 0;
width: 100%;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.875%;
max-width: 1232px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
width: 100%;
margin-left: 0;
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 24.0506%;
margin-left: 0;
}
#Weather {
width: 100%;
margin-left: 0;
}
#mobileNav {
width: 100%;
margin-left: 0;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
rotating images CSS
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.caption {
position: absolute;
z-index:25;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
margin:0;
text-align: center;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
font-size:18px;
font-stretch:expanded;
}
Your #mobileNav is appearing behind all of the #header-wrapper content because all of the #header-wrapper content is using position: absolute;. Absolutely positioned elements like #Weather and #Navigation are removed from the flow of the document as if they were never there. You probably just want to float them into their positions, but if absolute positioning is required, then you'll need to account for them with some space in the parent element.
I have built a sample with two arrows. Basically the arrows are built with standard boxes - one with a h2 one with a p
<header>
<h2 class="maintitle">Test</h2>
<p class="subtitle">Test about a test</p>
</header>
each box has two pseudo elements :before and :after. One creates a rectangle the other extends the box towards the page border to get a borderless arrow. The used css looks like that.
html,
body {
overflow-x:hidden;
}
.wrap {
width: 50em;
margin: 0 auto;
}
section {
margin-top:6em;
width:100%;
background-color: green;
height:30em;
}
.maintitle,
.subtitle {
height: 3.5rem;
line-height: 3.5rem;
position:relative;
}
.maintitle {
background-color: orange;
padding-left:1rem;
top: -1.77rem;
text-align: left;
&:before {
content: "";
position:absolute;
top:0;
bottom:0;
width: 999em;
right:100%;
background-color: orange;
}
&:after {
content: "";
position:absolute;
top:0;
bottom:0;
width:999em;
left:100%;
}
}
.subtitle {
text-align: left;
left:0;
top:-1.77rem;
padding-left: 3rem;
background-color: grey;
&:before {
content: "";
position:absolute;
top:0;
bottom:0;
width: 999em;
right:100%;
}
&:after {
content: "";
position:absolute;
top:0;
bottom:0;
width: 999em;
left:100%;
background-color: grey;
}
}
#media(min-width: 800px) {
.maintitle {
text-align: right;
padding-right:1rem;
&:after {
right:-1.75rem;
width:0;
height:0;
background:transparent;
border-top: 1.8rem solid transparent;
border-left: 1.8rem solid orange;
border-bottom: 1.8rem solid transparent;
}
}
.subtitle {
top: 0;
left:1.75rem;
padding-left: 1rem;
&:before {
left:-1.75rem;
width:0;
height:0;
background:transparent;
border-top: 1.77rem solid transparent;
border-right: 1.77rem solid grey;
border-bottom: 1.77rem solid transparent;
}
}
}
A pen showing an output is here
Problem is the pseudo element of the grey arrow on the right is ignoring the overflow-x:hidden statement in e.g. safari (in chrome it works). if you click with the mouse and drag it to the right you get something like that:
if i remove the pseudo element on the right and just enlarge the width of the grey box extensively it respects the overflow-x:hidden like shown in the following pen. Is there a way to get it work properly with the .subtitle:after version too?
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;
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 am trying to make a mobile version of a menu. So I have a list of item. The li with class nav-current is only displayed.With the help of pseudo :after I create an arrow after the link of that li. I try to display all the li items when the arrow is clicked.
My html :
<ul class="top-nav">
<li>
<a href=#>Textbla</a>
</li>
<li class="nav-current">
<a href=#>Textlpops</a>
</li>
<li>
<a href=#>Google Res</a>
</li>
</ul>
and my sassy css:
$depends:none;
.top-nav {
float: none;
margin: 10px;
li,li.user-tools {
display:$depends;
float:none!important;
border-bottom: 1px solid #666;
&:last-child {
border-bottom:0 none;
}
&.nav-current {
display:block;
border-bottom:0 none;
a:after {
content:'arrow';
color:#1a1a1a;
position:absolute;
top:10px;
right:20px;
height:12px;
background: transparent url(../images/custom/arrow_down.png) no-repeat left top;
}
a:target:after {
$depends:block;
}
}
}
}
I don't want to use any javascript, so I search for an only css solution. Can this be done in sass? Or is there any css3 trick that I could take advantage of and make that happen?
The target selector does not work the way you are expecting I think. What you describe is, to my knowledge, not possible in css.
New Answer
I reread your question and realized you were seeking this for mobile browsers. They may not be recognizing pointer-events either. This new solution does not rely on pointer-events except as an enhancement, but does require a bit more mark up. So far I have tested in FF, Chrome, and IE8/9, and it works well. (I'm curious if my zero opacity on the hover-shield may need to be 0.01 in some browsers). You'll have to test your mobile application.
HTML
<div class="hidden-nav">
<div class="nav-expander"></div>
<div class="hover-shield"></div>
<ul class="top-nav">
<li>
<a href=#>Textlinks Adv</a>
</li>
<li class="nav-current">
<a href=#>Textlinks Publ</a>
</li>
<li>
<a href=#>Google Shopping</a>
</li>
</ul>
</div>
CSS
.hidden-nav {
position: relative;
display: inline-block;
}
.nav-expander { /* the activator arrow container */
width: 16px;
height: 8px;
position: absolute;
top: 5px;
right: 2px;
z-index: 4;
}
.nav-expander:before { /* the activator arrow */
content: '';
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid blue;
position: absolute;
top: 0;
left: 0;
}
.hover-shield { /* keep activation by the arrow only */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-color: white; /* needs background to act as hover shield */
filter: alpha(opacity=0); /* no opacity needed */
-moz-opacity: 0;
opacity: 0;
}
.nav-expander:hover + .hover-shield {
z-index: 0;
}
.top-nav {
padding-right: 20px; /* make space for arrow */
background-color: yellow;
position: relative;
z-index: 1;
}
.top-nav:hover {
z-index: 3;
}
.top-nav li {
display: block; /*not "none" as we want widest li to size the nav*/
visibility: hidden;
height: 0;
white-space: nowrap; /*keep the link text in one line*/
}
.top-nav .nav-current {
visibility: visible;
height: auto;
pointer-events: none; /* for browsers that recognize it, the user is prevented from reclicking the page they are on */
}
.nav-expander:hover ~ .top-nav,
.top-nav:hover {
height: auto; /*once triggered, let it be its height*/
}
/*show the nav if expander is hovered, or once that is done, the nave itself is hovered */
.nav-expander:hover ~ .top-nav li,
.top-nav:hover li {
visibility: visible;
height: auto;
}
Original Answer
However, I have worked up a pure css solution using hover on the arrow that works great in FF and Chrome (tested), works okay in IE8/9 (it does not recognize the pointer-events property on the nav-current, so it opens nav on hover of the nav-current); IE7 works like IE8/9 only without the arrow since :after is unrecognized.
One extra li is needed.
HTML
<ul class="top-nav">
<li class="nav-expander"></li>
<li>
<a href=#>Textlinks Adv</a>
</li>
<li class="nav-current">
<a href=#>Textlinks Publ</a>
</li>
<li>
<a href=#>Google Shopping</a>
</li>
</ul>
CSS
.top-nav {
float: left; /*fit to width of longest li*/
padding-right: 20px; /*make space for arrow*/
position: relative;
background-color: yellow;
height: 0; /*do not want expand on hover of nav-current*/
}
.top-nav li {
display: block; /*not "none" as we want widest li to size the nav*/
visibility: hidden;
height: 0;
white-space: nowrap; /*keep the link text in one line*/
position: relative;
}
.top-nav .nav-current {
visibility: visible;
height: auto;
z-index; 0;
pointer-events: none; /*don't want hover on this to open nav*/
background: inherit; /*show background to collapsed nav*/
}
.nav-current:after { /*fake background to collapsed nav*/
content: '';
position: absolute;
width: 20px; /*= top-nav right padding*/
top: 0;
bottom: 0;
left: 100%;
background: inherit;
}
.nav-current a {
color: red;
}
.top-nav a:hover {
color: #555555;
}
.top-nav .nav-expander {
visibility: visible;
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 1; /*cover nav-current when open*/
}
.top-nav .nav-expander:hover {
left: 0; /*these cause coverage of nav-current on expansion*/
bottom: 0;
}
.top-nav:hover {
height: auto; /*once triggered, let it be its height*/
}
.nav-expander:after { /*the activator arrow*/
content: '';
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid blue;
position: absolute;
top: 5px;
right: 2px;
}
/*show the nav if expander is hovered, or once that is done, any li is hovered*/
.top-nav:hover li,
.nav-expander:hover ~ li {
visibility: visible;
height: auto;
z-index: 2;
}
/*keeps z-index 0 on current; would use the :not(nav-current) selector to the above code, but IE8 does not recognize that*/
.top-nav:hover li.nav-current,
.nav-expander:hover ~ li.nav-current {
z-index: 0;
}