I'm attempting to build a phone directory into a CSS dropdown menu. I'm aiming for it to render like a typical phone book would, with the names aligned left and the phone extensions/numbers aligned right, like so:
James T. Kirk x1701
Mr. Spock (123) 555-8795
The HTML is pretty straightforward:
<ul id="phone">
<li>
Phone Category 1
<ul>
<li>
<span class="phone-description">Phone Description 1</span>
<span class="phone-number">x55555</span>
</li>
<li>
<span class="phone-description">Longer Phone Description 2</span>
<span class="phone-number">(800) 555-1234 x1701</span>
</li>
</ul>
</li>
...
</ul>
The basic formatting is fairly simple as well:
body {background: #999;}
ul {list-style: none; margin: 0; padding: 0;}
li {margin: 0; padding: 0.4em 2em 0.4em 1em; white-space: nowrap;}
#phone {position: fixed; top: 0; left: 0;}
#phone li {background: #FFF; position: relative;}
#phone li:hover {background: #CCC;}
#phone ul {display: none; position: absolute; top: 0; left: 100%;}
#phone li:hover ul {display: block;}
.phone-number {margin-left: 2em;}
Making the columns, however, has proven to be extremely difficult. I've attempted using text-align, floats, absolute positioning, and the CSS brilliance explained at "Fluid width with equally spaced DIVs."
I've put the above code up at http://jsfiddle.net/HQ4ZN/2/, along with each of my attempted solutions commented out. Any help you can provide would be much appreciated!
Is this what you're trying to accomplish?
#phone li ul li { overflow: hidden; }
.phone-description { float: left; }
.phone-number {float: right;}
http://jsfiddle.net/HQ4ZN/4/
just use css display:table
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.category{display:table}
.category li {display:table-row}
.category span {display:table-cell}
</style>
</head>
<body>
<ul id="phone">
<li>
Phone Category 1
<ul class="category">
<li>
<span class="phone-description">Phone Description 1</span>
<span class="phone-number">x55555</span>
</li>
<li>
<span class="phone-description">Longer Phone Description 2</span>
<span class="phone-number">(800) 555-1234 x1701</span>
</li>
</ul>
</li>
</ul>
</body>
</html>
You probably could play around with the text wrap of the different spans so the longer ones won't push the phone number down. But I believe this will fix your issues. You probably were not clearing your floats, which is why your previous methods were not working.
http://jsfiddle.net/feitla/HQ4ZN/5/
.phone-number {
margin-left: 2em;
float:right;
}
.phone-description {
float:left;
width:150px;
}
#phone ul {
display: none;
position: absolute;
top: 0;
left: 100%;
width:420px;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
<ul>
<li class="clearfix">
<span class="phone-description">Phone Description 1</span>
<span class="phone-number">x55555</span>
</li>
<li class="clearfix">
<span class="phone-description">Longer Phone Description 2</span>
<span class="phone-number">(800) 555-1234 x1701</span>
</li>
</ul>
Related
I have created a navigation bar using pure CSS coding and no JavaScript coding at all. But I have one problem in the browser interface of it. I want to make my 2nd level MENU ITEMS appear when I hover with my mouse over the 1 st level menu item ( AKA sub menu of MAIN MENU item). But as per the current situation, when I hover over the main menu item called "Online Services", I can see the 1st level menu item, "Communication" and the corresponding 2nd level menu item list, called "Email","Instant Messaging" and "Social Networking" altogether at once!
So as I said above, I want to hide the 2nd level menu items when the main menu item, "Online Services" is hovered. BUT, I want to make it ONLY appear, when the 1st level menu item, "Communication" is hovered as per the mentioned current situation above.
Here is my HTML code:
#charset "utf-8";
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 35px;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background-color: #222;
}
#navMenu ul li a {
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
height: 40px;
width: 170px;
display: block;
color: #fff;
position: relative;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 40px;
}
#navMenu ul ul ul {
position: absolute;
visibility: hidden;
display: inline-block;
top: 0px;
margin-left: 160px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Information Age</title>
<link href="css/dropDown.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Home
</li>
<li>Online Services
<ul>
<li>Communication
<ul>
<li>Email
</li>
<li>Instant Messaging
</li>
<li>Social Networking
</li>
</ul>
<!--inner 2nd UL-->
<li>Online Education
</li>
<li>Online Entertainment
</li>
<li>E-Commerce
</li>
<li>Web Storage
</li>
</li>
<!--inner LI-->
</ul>
<!--end inner UL-->
</li>
<!--end main LI-->
</ul>
<!--end main UL-->
</div>
<!--end navMenu-->
</div>
<!--end wrapper div-->
</body>
</html>
You need to select the direct descendant on hover:
#navMenu ul li:hover > ul {
visibility: visible;
}
that way it won't select unless it is a direct child, rather than all child elements.
The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM. ~ MDN
A full demo can be seen below:
#charset "utf-8";
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 35px;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background-color: #222;
}
#navMenu ul li a {
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
height: 40px;
width: 170px;
display: block;
color: #fff;
position: relative;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 40px;
}
#navMenu ul ul ul {
position: absolute;
visibility: hidden;
display: inline-block;
top: 0px;
margin-left: 160px;
}
#navMenu ul li:hover > ul {
visibility: visible;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Information Age</title>
<link href="css/dropDown.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Home
</li>
<li>Online Services
<ul>
<li>Communication
<ul>
<li>Email
</li>
<li>Instant Messaging
</li>
<li>Social Networking
</li>
</ul>
<!--inner 2nd UL-->
<li>Online Education
</li>
<li>Online Entertainment
</li>
<li>E-Commerce
</li>
<li>Web Storage
</li>
</li>
<!--inner LI-->
</ul>
<!--end inner UL-->
</li>
<!--end main LI-->
</ul>
<!--end main UL-->
</div>
<!--end navMenu-->
</div>
<!--end wrapper div-->
</body>
</html>
Working on this site:
https://voyagers.wildapricot.org/
Trying to get the font awesome arrow to the right of the menu nav items (which indicates there are sub-pages) to show up immediately to the right of the text instead of with a giant space in between text and arrow.
Would appreciate any help, thank you!
Technically, this is how you would do it:
Step 1: in the following CSS rule, change the display value to inline-block.
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
display: inline-block;
text-decoration: none;
text-align: center;
vertical-align: top;
white-space: nowrap;
position: relative;
font: normal 18px/26px Oswald, Helvetica, sans-serif;
overflow: hidden;
}
Step 2: In the following rule, change the right-padding to 15px (the second value in the padding rule).
.WaGadgetMenuHorizontal.menuStyle004 .menuInner ul.firstLevel > li > .item > a > span {
padding: 15px 15px 15px 10px;
...
}
Step 3: In the following, change the right offset to 0 (or equivalently 0px).
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a::after {
content: "\f107";
font-family: FontAwesome;
color: white;
position: absolute;
display: inline-block;
top: 15px;
right: 0px;
}
I am assuming that you have access to all the CSS stylesheets in your content management system (web builder platform).
If not, you need to add these rules to override the pre-existing rules, so you need to learn how to do that first. You may need to get help from the tech support people where you are hosting.
Note: I went to your website using Firefox and I inspected the various elements and tried out these three steps and that did the trick. Make sure
to check out the other major browsers (Chrome and IE).
Keep in mind that these changes will change the overall look of the navigation so you may have other visual side effects that may not be suitable for your design.
Aside: the HTML in questions looks like the following (I omitted a few wrapping div's):
<ul style="" class="firstLevel">
<li class="sel">
<div class="item"><span>Home</span></div>
</li>
<li class="">
<div class="item"> <span>Coop</span> </div>
</li>
<li class="dir">
<div class="item"><span>Resource Center</span>
<ul class="secondLevel">
<li class=" ">
<div class="item"><span>Home (Demo)</span></div>
</li>
</ul>
</div>
</li>
<li class="">
<div class="item"> <span>Events</span> </div>
</li>
<li class="dir">
<div class="item"> <span>About Us</span>
<ul class="secondLevel">
<li class=" ">
<div class="item"> <span>Donate</span> </div>
</li>
</ul>
</div>
</li>
<li class="last-child">
<div class="item"> <span>Volunteer</span> </div>
</li>
</ul>
i restructured so that it works but you have to adapt it to your case
.dir {
height: 40px;
width: 100%;
}
.item {
width: inherit;
height: inherit;
}
a {
background: blue;
height: 100%;
width: 100%;
position: relative;
display: block;
}
a:hover {
background: red;
cursor: pointer;
}
span {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span:after {
content:"<";
position: absolute;
right: -20px;
}
<li class="dir">
<div class="item">
<a href="https://voyagers.wildapricot.org/Resource-Center" title="Resource Center">
<span>Resource Center</span>
</a>
</div>
</li>
so I've encountered a bug that I can't figure out in IE8. I've seen some doozies, but this one might take the cake.
I tried replicating it in Codepen, but we have a lot of code for this so I'll try including the computed styles from IE8.
Using Foundation 5, I have a Top Bar that starts out looking like this:
The dropdown is positioned absolutely, so it obviously shouldn't be stretching out the parent container. It doesn't actually stretch out the parent, but the grandparent. Here's the markup:
<nav id="global-nav" class="top-bar has-dropdown show-for-large-up" data-topbar >
<section class="top-bar-section">
<ul class="title-area">
<li class="name">
Title
</li>
</ul>
</section>
<section class="links top-bar-section">
<ul class="left">
<li class="divider"></li>
<li>Create
</li>
<li class="divider"></li>
<li class="has-dropdown">
<a>Explore</a>
<ul class="dropdown tab-left" id="explore-menu">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
</li>
<li class="divider"></li>
<li>Find
</li>
</ul>
</section>
<section class="top-bar-section">
<ul class="right">
<li class="has-form search">
<form id="header_search" name="search_form">
<input type="search" placeholder="Search" class="search" results=3 id="search_term" name="search_value" maxlength="200" />
<button id="search_submit"></button>
</form>
</li>
<li class="login">
Login
</li>
</ul>
</section>
The computed CSS from IE8:
#global-nav{ //this is the topbar that is stretching
background: #2a2d43;
background-image: none;
color: #666;
display: block !important;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: 80px;
line-height: 60px;
margin: 0px;
overflow: visible;
padding: 0;
position: relative;
vertical-align: baseline;
width: 100%;
}
li.has-dropdown .dropdown{
background: #fff;
box-sizing: border-box;
clip: rect(1px 1px 1px 1px);
z-index: 99;
color: #666;
display: block;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: auto !important;
left: 10%;
line-height: 60px;
margin: 0;
max-height: none;
max-width: 200px;
overflow: hidden;
padding: 0px;
position: absolute !important;
right: auto;
top: 64px;
vertical-align: baseline;
visibility: hidden;
width: auto;
}
li.has-dropdown.hover .dropdown{ //the open dropdown state
clip: rect(auto auto auto auto);
visibility: visible;
}
If you need more information let me know. Thanks in advance.
For reference, I'm testing on a Parallels VM of Win7 with IE8, using IE8 document mode and IE8 Standards.
Do you have a link to view this? I am wondering if maybe you should set the ul to position relative. I think the li is falling back to the first relatively positioned item. Hopes this helps.
If any of the parent elements of the absolute element has position: relative then the absolute is computed relative to that,
try removing the position: relative from the parent containers maybe it could help
also make sure you have correct
<!DOCTYPE html>
at the beginning of your file
It is not an IE8 rendering error, but a coding error/incompatibility somewhere. This demo code shows that IE8 does take absolutely positioned drop-down elements out of the flow:
<!DOCTYPE html>
<head>
<title>Demo IE8 Drop-Down Menu</title>
<meta charset="utf-8">
<style>
#navDivParent { /* = grandparent of the dropdown menu */
background-color: darkblue;
text-align: right;
color: white;
height: 100px;
width: 550px;
}
#navDiv ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
#navDiv ul li {
float: left;
position: relative;
margin-right: 10px;
}
#navDiv ul li ul li {
clear: left;
}
#navDiv ul ul {
display: none;
}
#navDiv ul li:hover ul {
display: block;
position: absolute;
}
#navDiv a {
display: block;
padding: 0 10px 0 10px;
background: yellow;
color: blue;
text-decoration: none;
}
#navDiv #item2SubList a {
width: 175px;
}
#navDiv a:hover {
background: red;
color: white;
}
</style>
</head>
<body>
<div id="navDivParent">This is the grandparent<br> of the dropdown menu.
<div id="navDiv">
<ul>
<li>Menu item</li>
<li>Menu item w/ child
<ul id="item2SubList">
<li>Menu sub-item</li>
<li>Menu sub-item</li>
<li>Menu sub-item</li>
</ul>
</li>
<li>Menu item</li>
</ul>
</div>
</div>
</body>
</html>
.
I haven't made a live demo because JSFiddle, JSBin and the likes don't function in IE8, but I tested it in both a real IE8 and IE9 in IE8 mode.
As the in the question provided code does not contain a CSS :hover state declaration, the coding error/incompatibility might lie in the Javascript that would drive the hover state.
Your dropdown has a max-width of 200px. IE8 doesn't deal well with max-width. Essentially it's treated as a width declaration. Your forcing a width of 200px in IE8. You would need to set it to none...
max-width:none\9; /* IE8 */
I do not think this "bug" has anything to do with the position: absolute; not taking the .dropdown out of the flow. li.has-dropdown also has a .hover state applied to it. There is likely some other styling applied to li.has-dropdown that is causing #global-nav to shift. Perhaps some extra padding is being applied to li.has-dropdown. Unfortunately we don't have all the code to properly debug this.
I want the logo div to be on top of the nav container. How would I achieve this? I have been playing around with positioning and nothing seems to be working. They are both inside the header container.
Here is my CSS code:
and js link:
http://jsfiddle.net/4vA93/3/
header {
position: relative;
height:100px;
background-color: yellow;
}
.logo {
position: absolute;
margin-top:10px;
margin-left:20px;
width:80px;
height:80px;
background-color: red;
}
nav {
position: absolute;
width:100%;
bottom: 0;
background-color: bisque;
}
and HTML
<header>
<div id="logo">Logo</div>
<nav>
<ul>
<li>| Hours |</li>
<li> Facilities |</li>
<li> Restaurant Charlotte |</li>
<li> Penthouse Suite |</li>
<li> Gift Shop |</li>
</ul>
</nav>
</header>
Do you mean like this? http://jsfiddle.net/4vA93/4/
#logo {
z-index:10;
}
Or like this? http://jsfiddle.net/4vA93/5/
I want to remove the dots in a ul but when I do, the height of the ul is reduced to 0px, so the contained li s have a transparent background. Can you give me an alternative ? This is the code :
<ul class="class_1" style="z-index: 1; top: -557.15px; left: 801px; display: block; position: relative; width: 200px;">
<li class="class_2">
<a>Ba</a>
</li>
<li class="class_2">
<a>Baa</a>
</li>
<li class="class_2">
<a>Baar</a>
</li>
</ul>
<style>
li {
list-style-type: none;
}
.class1
{
background-color: #FFFFFF;
border: 1px solid;
}
</style>
Thanks.
add css style for <li> elements - add display:block for them as well. that should do the trick, assuming there's no other style that is messing with this <ul>