Please read my profile before proceeding. Anyone who doesn't keep the critique to only the code itself will be disregarded. Okay? Okay.
I'm trying to do tooltips to my navigation header, using the code on this page. The bottom tooltip, specifically.
I've snagged out the relevant parts of code from my own CSS and webpage to tool around with in their Try It Editor to get it working, and I've been cussing at this since last week and this is the furthest I've gotten to making it work, and even that came with some sacrifices in design I'm not sure how to fix. I will admit that tooltips like this are a very new area for me, and I'm trying to learn a new thing, and it's making me give it a very salty side-eye. So pointers to where I'm going wrong and what I need to be doing to correct it are what I'm looking for. Links to any sites that explain this better would also be tremendously appreciated.
<!DOCTYPE html>
<html>
<style>
body {
margin: 0px;
padding: 0;
background-color: #000000;
background-image: url(http://www.metathriving.com/img/index2bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #72809F;
}
/* Header */
#header {
width: 960px;
height: 160px;
margin: 0px auto;
background-color:rgba(0,0,0,0.5);
}
/* Boy Without A Fairy */
#navi {
float: left;
width: 900px;
height: 55px;
}
#navi ul li {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#navi a {
display: block;
float: left;
height: 45px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #578fa8;
}
#navi a:hover {
color: #9dd0ed;
}
#navi a.active {
color: #FFFFFF;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #c0c0c0;
color: #000000;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body>
<div id="header">
<!-- Hey! Listen! -->
<div id="navi">
<ul>
<li><span style="color:#c0c0c0; font-weight: bold;">Just Another<br>Brick in<br>the Wall</span></li>
<li><div class="tooltip">Weary Eyes Still<br>Stray to the<br>Horizon <span class="tooltiptext">More About Me</span><div></li>
<li><span style="font-style: italic;">A Heavenly Ride<br>Through<br>Our Silence</span></li>
<li><span style="font-style: italic;">A Thousand<br>Miles of<br>Moonlight Later</span></li>
<li><span style="font-style: italic;">Trade Your Heroes<br>For Ghosts</span></li>
<li><span style="font-style: italic;">If You Can Hear<br>This Whispering<br>You Are Dying</span></li>
<li><span style="font-style: italic;">I'll See You On<br>the Dark Side<br>of the Moon</span></li>
<li><span style="font-style: italic;">Frontiers Shift<br>Like<br>Desert Sands</span></li>
<li><span style="font-style: italic;">You Are Only<br>Coming Through<br>In Waves</span></li>
</ul>
</div>
</body>
</html>
Here's a screencap of what that code renders in the w3schools.com Tryit Editor panel. (Ignore the font colors and the fact it's not easy to see in some spots because of text + background. the font will be tweaked when I have the layout done, I change up font colors as I work to make sure things are working and to single out stuff. And the full code does give a solid background under the text for better legibility.)
Screencap of what the code makes
As you can see, it line breaks. Where it does, the tool tip works. But it's not supposed to move the rest of it to a new line. At least, I don't want it to do that. I'm not sure where it's going off the rails here. Like I said, this is a new trick I'm trying to learn and I'm stumped, after a week of working, research, and several books studying. It's right in front of me, and it's gotta be bloody obvious, but what IS it?
Two issues:
There were a few tags in the tooltip incorrectly wrapped. Namely, <a></span></a></span>. I corrected this.
Then, the tooltip is causing the break you don't want. Add a float: left; to the .tooltip class.
body {
margin: 0px;
padding: 0;
background-color: #000000;
background-image: url(http://www.metathriving.com/img/index2bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #72809F;
}
/* Header */
#header {
width: 960px;
height: 160px;
margin: 0px auto;
background-color: rgba(0, 0, 0, 0.5);
}
/* Boy Without A Fairy */
#navi {
float: left;
width: 900px;
height: 55px;
}
#navi ul li {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#navi a {
display: block;
float: left;
height: 45px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #578fa8;
}
#navi a:hover {
color: #9dd0ed;
}
#navi a.active {
color: #FFFFFF;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
float: left;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #c0c0c0;
color: #000000;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style> <body> <div id="header"> <!-- Hey! Listen! -->
<div id="navi">
<ul>
<li><span style="color:#c0c0c0; font-weight: bold;">Just Another<br>Brick in<br>the Wall</span>
</li>
<li>
<div class="tooltip"><a href="about.html">Weary Eyes Still<br>Stray to the<br>Horizon <span class="tooltiptext">More About Me
</span></a>
</div>
</li>
<li><span style="font-style: italic;">A Heavenly Ride<br>Through<br>Our Silence</span>
</li>
<li><span style="font-style: italic;">A Thousand<br>Miles of<br>Moonlight Later</span>
</li>
<li><span style="font-style: italic;">Trade Your Heroes<br>For Ghosts</span>
</li>
<li><span style="font-style: italic;">If You Can Hear<br>This Whispering<br>You Are Dying</span>
</li>
<li><span style="font-style: italic;">I'll See You On<br>the Dark Side<br>of the Moon</span>
</li>
<li><span style="font-style: italic;">Frontiers Shift<br>Like<br>Desert Sands</span>
</li>
<li><span style="font-style: italic;">You Are Only<br>Coming Through<br>In Waves</span>
</li>
</ul>
</div>
Related
I need some help with a dropdown menu that's hiding behind a div. I tried setting the z-index to higher value, set the li to position:relative, checked for overflow in css (none). I see these as common causes for this issue, but nothing works for me.
Please note that z-index, positive and negative, were added whilst trying to find a solution. It makes no difference.
NOTE: dropdown is hiding behind "text-on-banner", yet showing in front of "main-banner".
Thanks for looking at this.
HTML:
<div class="wrapper">
<div class="header">
<ul class="PrimaryNav with-indicator">
<li class="Nav-item">
A
<li class="Nav-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">B</a>
<ul class="dropdown-menu">
<li class="Nav-subitem">B.1</li>
<li class="Nav-subitem">B.2</li>
<li class="Nav-subitem">B.3</li>
</ul>
<li class="Nav-item">
C
</ul>
</div>
</div>
<div class="section-wrapper">
<div class="main-banner">
<div class="text-on-banner">
<h2><strong>SOME TEXT HERE</strong></h2>
</div>
</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.header {
width: 100%;
background: #26282c;
color: #f5f5f5;
text-align: center;
}
.PrimaryNav {
list-style: none;
margin: 7px auto;
max-width: 1220px;
padding: 0;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 130%;
font-weight: 600;
}
.with-indicator {
position: relative;
z-index: 0;
}
.Nav-item {
background: #26282c;
display: block;
float: left;
margin: 0;
padding: 0;
width: 14.28%;
text-align: center;
}
.Nav-item a {
color: #c2c5ca;
display: block;
padding-top: 20px;
padding-bottom: 20px;
text-decoration: none;
}
.Nav-subitem {
background: #26282c;
display: inline-block;
width: 100%;
text-align: center;
position: relative;
z-index: 999999;
}
.section-wrapper {
max-width: 1250px;
margin: auto;
padding: 20px 0 0 0;
}
.main-banner {
text-align: center;
font-weight: 700;
font-family: 'Titillium Web', sans-serif;
font-size: 36px;
line-height: 40px;
padding: 10px 2px 1px 2px;
color: #26282c;
box-shadow:
inset 0 0 0 1px rgba(232, 45, 0, 0.1),
inset 0 0 5px rgba(232, 45, 0, 0.2),
inset -285px 0 35px white;
border-radius: 10px;
background: #fff url(banner00.jpg) no-repeat center left;
z-index: -1;
}
.text-on-banner {
font-weight: 1000;
width: 95%;
max-width: 95%;
background-color:white;
opacity:0.6;
border-radius: 10px;
z-index: -1;
}
.text-highlight {
color: #e82d00;
font-weight: 800;
}
After spending 2-3 hours on this, I just realize that it was the .with-indicator ul which had to have z-index > 0. All working as expected now.
Hope this helps somebody else though. Thanks for looking.
How do I create something like this in bootstrap ?
I was thinking of making 4 columns each one of the nodes using the grid layout. But the center node is taking more space than it should take.
Here is the bootply http://www.bootply.com/5ni6EJeTWM
As of now it looks like this
Here is what I came up with. It is not perfect but it should help you get on the track.
UPDATED the code - FULLY RESPONSIVE NOW !!!
.node-list {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
padding: 0px;
margin: 0px;
}
.node-list li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 14px;
width: 25%;
float: left;
position: relative;
text-align: center;
}
.node-list li p {
color: #000;
font-weight: bold;
}
.node-list li:after {
content: '';
width: 20px;
height: 20px;
line-height: 20px;
display: block;
font-size: 18px;
color: #000;
background: #fff;
border: 10px solid #000;
margin: 0 auto 5px auto;
}
.node-list li:before {
content: '';
width: 100%;
height: 6px;
background: #000;
position: absolute;
left: -50%;
bottom: 20px;
z-index: -1
}
.node-list li:first-child:before {
content: none;
}
<ul class="node-list">
<li class="active">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
</ul>
I'm trying to create a very basic page of weblinks, arranged into 7 columns. Some of the links have sub-links. What I want to happen is when the mouse is held over a link that has sub-links, the sub-links are to appear just below it and just to the right (as shown in menu 2.2)
I've cobbled the code together from various websites (I'm not a coder!), and I'm almost there I think, but if you take a look at the jsfiddle you will see there is a problem with the 3rd column (I've cut the menu down in the example).
HTML
<div id="container">
<ul id="menu">
<li><h3>Menu 1</h3></li>
<li>1.1</li>
<li>1.2</li>
</ul>
<ul id="menu">
<li><h3>Menu 2</h3></li>
<li>2.1</li>
<li>2.2
<ul id="sub1">
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
</li>
</ul>
<ul id="menu">
<li><h3>Menu 3</h3></li>
<li>3.1
<ul id="sub2">
<li>3.1.1</li>
<li>3.1.2</li>
<li>3.1.3</li>
</ul>
</li>
<li>3.2</li>
<li>3.3</li>
</ul>
CSS
a {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration:none;
color:black;
display:block;
padding-top: 17px;
padding-bottom: 17px;
outline: 0;
}
a:visited {
color:black;
background-color:#fff;
}
a:hover {
color:#fff;
background-color:#302403;
display:block;
}
ul {
padding: 10px 0px 0px 0px;
margin: 1px;
display: inline-block;
text-align: center;
position:relative;
list-style-type:none;
float: left;
width: 160px;
background-color: #fff;
height: 400px;
}
ul#sub1 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#sub2 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#menu li:hover #sub1 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
ul#menu li:hover #sub2 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
http://jsfiddle.net/87u27aw0/
I can get it to work if I give each sub-menu it's own absolute position, but I'm sure there is a better way than how I'm doing it - using relative maybe? Oh, and it has to work in IE8 onwards.
Thanks in advance.
Graybags
Ok so below is a representation and description of what I am trying to achieve.
I am trying to add a navigation on the same line but after an hr tag so that the outcome is something like this...
----------------------------------------------------------------------------- Home Services Facilities About Contact
The best I can do shows one of the nav links but the others are not rendered
HTML
<ul>
<li class="active">HOME</li>
<li>SERVICES</li>
<li>FACILITIES</li>
<li>WITH US</li>
<li>CONTACT</li>
</ul>
</div>
css
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #FFF;
}
.divider {
margin-top: 100px;
text-align: right;
position: relative;
}
.divider hr {
position: absolute;
z-index: 1;
width: 100%;
}
.divider ul {
float: right;
}
.divider li {
float: left;
}
.divider a {
position: absolute;
right: 0px;
top: 0px;
text-decoration: none;
color: #68C5DE;
background: #fff;
z-index: 10;
padding: 2px 20px;
}
jsfiddle
I think I may have over or under complicated things but this has left me scratching my head for 4 hours now.
Is this possible to achieve this in a way that still enables percentiles on the hr?
Any help would be much appreciated.
You have placed all links on top of each other with
.divider a {
position: absolute;
}
If the background isn't an issue then you can use a pseudo element :before to create the line then have the list items overlap it with a white background color to hide it.
HTML
<div class="nav-wrapper">
<ul class="navigation">
<li class="active">HOME</li>
<li>SERVICES</li>
<li>FACILITIES</li>
<li>WITH US</li>
<li>CONTACT</li>
</ul>
</div>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #FFF;
}
.nav-wrapper { margin-top: 50px; overflow: hidden; position: relative; }
.navigation {
float: right;
margin: 0;
padding: 0;
}
.navigation:before {
border: solid 1px #000;
content: '';
height: 0;
left: 0;
position: absolute;
top: 0.5em;
width: 100%;
}
.navigation li {
background-color: #fff;
float: left;
height: 1em;
line-height: 1em;
list-style-type: none;
margin: 0;
padding: 0 5px;
position: relative;
}
jsfiddle
I am tearing my hair out over this, I have a dropdown menu using CSS and jQuery (thanks to Soh Tanaka) and it works perfectly in Firefox, Safari, Google chrome and I.E. 8, but in IE 7 it will not drop down outside the 'Banner div'. It drops below the nav div however. I have moved the nav div higher in the banner the result is the same, menu drops until it reaches the border of the banner div and then vanishes....
Below is the css. This is my first website and I have some limited understanding of what I am doing. The drop down menu includes transparent png's as links (I know, I know...but it's what the Boss wants...) please could someone take a quick scan at the below CSS and let me know what is wroong? Is this some form of the IE z-index bug? i have tried all different combinations of z-index and still I can't get a different result. . The html is below as well.
I set all the z-indexes to 0 out of sheer frustration, I know it won't work as is.
Thankyou in advance
#banner {
position: relative;
width: 62.5em;
height: 12em;
background-color: #46280A;
background-image: url('images/includes/banner2.jpg');
background-repeat: no-repeat;
background-position: center;
-moz-box-shadow: -4px 6px 8px #000;
-webkit-box-shadow: -4px 6px 8px #000;
box-shadow: -4px 6px 8px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=225, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=225, Color='#000000');
z-index: 1;
}
/*------------------------------------SCROLLER---------------------------------------------*/
#headlines{
position: absolute;
top: 1.3em;
right: 2.75em;
overflow: hidden;
height: 2.5em;
width: 24em;
background-color: #000000;
display: block;
z-index: 3;
}
#news{
position: relative;
height: 3.1em;
line-height: 2.5em;
font-size: 0.8em
color: #FFFF99;
white-space: nowrap;
overflow: hidden;
font-family: Georgia,Arial;
}
#scrollerglass{
position: absolute;
top: 0.95em;
right: 2em;
height: 52px;
width: 410px;
border: none;
padding: 0.2em 0em 0em 0em;
line-height: 0.7em;
text-align: center;
background-image: url('images/includes/scrollerglass.png');
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
opacity: 20;
z-index: 10;
}
#scrollerglass a i {
visibility: hiddn ;
}
/-------------------------------------NAVIGATION-----------------------------------------/
#nav {
position: absolute;
top: 5.8em;
left: 0.2em;
font-family: trebuchet, sans-serif;
font-size: 1em;
line-height: 3.75em;
text-align: center;
color: #FFFF00;
z-index: 3;
}
ul.navlist {
list-style: none;
padding: 0em;
margin: 1em;
float: left;
width: 62.5em;
background: transparent;
font-size: 1em;
}
ul.navlist li {
position: relative; /*--Declare X and Y axis base for sub navigation--*/
float: left;
margin: 0em 1.4em;
padding: 0em 0.7em 0em 0em;
z-index: 1;
}
ul.navlist li a{
display: block;
text-decoration: none;
float: left;
border: 0px solid;
}
ul.navlist li img{
border: 0px solid;
}
ul.navlist li span { trigger styles--*/
width: 1.2em;
height: 5.25em;
float: left;
background: url(images/links/downlogo.png) no-repeat center top;
}
ul.navlist li span.subhover { background-position: center bottom;
cursor: pointer;
}
ul.navlist li ul.navdrop {
list-style: none;
position: absolute;
float: left;
top: 5.3em;
left: -2.4em;
height: 15.0em;
width: 11.25em;
margin: 0;
padding: 0.5em 0em 0em 0em;
display: none; background-position: center;
background-image: url('images/includes/slider.jpg');
background-color: transparent;
background-repeat: no-repeat;
-moz-box-shadow: -4px 6px 8px #000;
-webkit-box-shadow: -4px 6px 8px #000;
box-shadow: -4px 6px 8px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=225, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=225, Color='#000000');
z-index:1;
}
ul.navlist li ul.navdrop li{
margin: 0em 2.3em 0em 0em;
padding: 1em 0em 0em 0em;
width: 8em;
clear: both;
}
html ul.navlist li ul.navdrop li a {
border: 0px solid;
width: 11.25em;
}
html ul.navlist li ul.navdrop li a:hover { background: transparent;
}
<div id="banner">
<div id="headlines">
<div id="news">
Whatever we want to promote
</div>
</div>
<div id="scrollerglass">
<a href="vintagecigars.php">
<i>------s-c-r-o-l-l-e-r - - - -l-i-n-k-s--------<br />
<br>------s-c-r-o-l-l-e-r - - - -l-i-n-k-s------</i></a>
</div>
<div id="nav">
<ul class="navmenu">
<li><img src="images/links/home.png" alt="Home" ></li>
<li><img src="images/links/ourbar.png" alt="Our Bar" >
<ul class="navdrop">
<li ><img src="images/links/cockteles.png" alt="Our Cocktails" ></li>
<li ><img src="images/links/celebrate.png" alt="Celebrate in Style" ></li>
</ul>
</li>
<li><img src="images/links/ourcigars.png" alt="Our Cigars" >
<ul class="navdrop">
<li ><img src="images/links/edicioneslimitadas.png" alt="Edition Limitadas" ></li>
<li ><img src="images/links/cigartasting.png" alt="Cigar Tastings" ></li>
</ul>
</li>
<li><img src="images/links/personalcigar.png" alt="Personal Cigar Roller" ></li>
<li><img src="images/links/photogallery.png" alt="Photo Gallery" ></li>
<li><img src="images/links/contactus.png" alt="Contact Us" ></li>
</ul></div></div><!--end banner-->
OK, I've fixed it. The answer is that the drop-down will not display over the 'filter' effect in IE. 7 and below.
Apologies to all you IE 7 users, but it's just not gonna look so pretty for you.
Another solution which I found for my dropdown menu is to add to the content Div z-index:-1;
I can't tell exactly whats going on just by your css, but I have had a similar problem and it woldn't let me hover unless the drop down section had a background color on it otherwise it would 'see through' it and lose the hover state. You could try that.
Please also view your HTML.
However, let's say this is your structure (simplified):
<div id="#nav">
<ul>
...
</ul>
</div>
<div id="content">
</div>
You have to verify, that #nav's z-index is bigger than that of #content. So:
#nav {
position:relative;
z-index:2;
}
#content {
position:relative;
z-index:1;
}
Don't forget, that z-index works only on the elements that have position other than static (default);
The idea is that parent of the element that is not shown (parent of the drop-down element), has to have z-index bigger, than the element that "overlaps" the drop-down.
You can read an excellent article on the subject here: http://aplus.rs/lab/z-pos/