I'm trying to get a ul horizontally centered within the space but no matter what I try it remains left aligned.
<nav>
<div id="home">
<ul id="topnav">
<li class="home">home</li>
<li class="products">products</li>
<li class="support">support</li>
<li class="wtb">where to buy</li>
<li class="webstore">web store</li>
<li class="contact">contact us</li>
<li class="facebook"><a href="#" target="_blank"
title="Hauppauge Computer Works">facebook</a></li>
</ul>
</div>
</nav>
CSS:
CSS file here
ul#topnav {
padding: 0px;
list-style: none;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
left: auto;
width: 123px;
}
Related
I have searched for the answer to this but out of the questions/answers I found none of them worked in my case.
What I have is a "Mega Menu" with links down the left side, when one of the links are hovered with the mouse it expands to the right showing hidden links with images. What I would like to do is have the left side "hoverable" link area expand to be the same size as the right side area that contains the images.
Currently the left side is a fixed height and when I attempted to apply clear: both overflow: hidden as the other answers on questions suggested it broke the layout. I am hoping there is a pure CSS way of doing what I need. I could write it in JS but would prefer not to if its not needed. I have included a codepen that shows what I have currently.
https://codepen.io/anon/pen/wGZjpp?editors=1100
<div class="megaMenuWrapper">
<div class="megaMenuContainer" style="display: block;">
<ul id="menu-main-menu" class="menu">
<div class="background"><span class="megamenu-title">SHOP BY CATEGORY</span>
<li class="category-item" id="menu-item-3">Showers
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-4">
<img src="http://placekitten.com/180/180">Shower Stalls
</li>
<li id="menu-item-8">
<img src="http://placekitten.com/180/180">Shower Bases
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-5">
<img src="http://placekitten.com/180/180">Shower Walls
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-9">Toilets
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-10">
<img src="http://placekitten.com/180/180">Bidets
</li>
<li id="menu-item-11">
<img src="http://placekitten.com/180/180">Portable Toilets
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-17">
<img src="http://placekitten.com/180/180">Bed Pans
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-16">Bathtubs
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-18">
<img src="http://placekitten.com/180/180">Clawfoot
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-19">
<img src="http://placekitten.com/180/180">Copper
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-20">Sinks
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-21">
<img src="http://placekitten.com/180/180">Modern
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-25">Bathroom Accessories
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-22">
<img src="http://placekitten.com/180/180">Bathtub Faucets
</li>
<li id="menu-item-27">
<img src="http://placekitten.com/180/180">Shower Curtains
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-23">
<img src="http://placekitten.com/180/180">Toilet Brushes
</li>
<li id="menu-item-28">
<img src="http://placekitten.com/180/180">Vanities
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-24">
<img src="http://placekitten.com/180/180">Toilet Seats
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-26">
<img src="http://placekitten.com/180/180">Mirrors
</li>
</ul>
</li>
</ul>
</li>
</div>
</ul>
</div>
</div>
CSS:
body{
background: #ddd;
}
ul#mainnav>li>a:not(.last) {
border-right: 1px solid #fff;
}
ul#mainnav>li>a {
padding: 5px 15px;
margin-top: 20px;
}
.megaMenuWrapper {
position: relative;
margin-top:30px;
}
.megaMenuContainer {
position: absolute;
width: 100%;
/* display: none; */
z-index: 2;
/* height: auto; */
}
ul#menu-main-menu {
width: 100%;
height: 100%;
position: relative;
margin:0;
list-style: none;
}
ul#menu-main-menu .background > li:first-of-type {
margin-top: 5px;
}
.background {
width: 20%;
height: 100%;
background: rgb(255, 255, 255);
border-right: 2px solid #000;
}
.column.menu-item {
padding: 1%;
width: 23%;
}
ul.sub-menu {
list-style: none;
margin: 0;
}
.right-side {
position: absolute;
top: 0;
left: 20%;
height: auto;
right: 0;
width: 80%;
display: none;
}
.right-side li.menu-item {
float: left;
width: 23%;
padding: 1%;
height: 100%;
}
.megamenu-title {
color: #545454;
margin-top: 20px;
display: inline-block;
width: 100%;
margin-left: 20px;
font-weight: bold;
}
li.category-item a{
padding: 5px 0px 5px 20px;
display: block;
}
li.category-item a:hover {
background-color: white;
color: #3C3C3C !important;
text-decoration: none;
}
li.category-item a:hover + ul,
.right-side:hover
{
display: block;
background: rgb(255, 255, 255);
border-left: 1px solid #000;
}
ul#menu-main-menu li.menu-item ul.sub-menu li a {
color: #3c3c3c;
padding: 0;
text-align: center;
}
ul#menu-main-menu li.menu-item ul.sub-menu li a:hover {
background: none;
}
ul#menu-main-menu li.menu-item ul.sub-menu li img {
display: block;
margin: 0 auto;
}
ul#menu-main-menu li a {
color: #4C4C4C;
}
UPDATE:
This is ultimately the jQuery that I have ended up going with. Unless someone answers with a pure CSS solution.
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);
the idea is the following :
.megaMenuContainer {
height:auto;
}
.category-item {
height:2em;
}
.category-item:hover {
height:3em;
}
in fact if you put the height of the parent equal to auto the height of the child element will follow it.
This is not possible with pure CSS like I wanted with the current structure so I decided to go with the jQuery solution below.
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);
When the browser page is full size, the menu is centered in the middle page (That's the correct position) but when resizing the window, the menu isn't visible anymore except by scrolling to the max right of the site. I looked it up to be a responsiveness problem, however i failed to solve it. Any ideas??
HTML:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
<li id="item2"><button onclick="myFunction2()">A </button></li>
<li id="item3">B </li>
<li id="item4">C </li>
<li id="item5">D </li>
<li id="item6">E </li>
<li id="item7">F </li>
</ul>
</div>
css:
lu, li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
left: 725px;
right: 0;
margin: auto;
border-style:none;
}
Add margin:0 auto; in .menu
Remove left: 725px; from .menu li
See Fiddle: https://jsfiddle.net/sachinkk/61capLqy/
lu, li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
margin:0 auto;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
right: 0;
margin: auto;
border-style:none;
}
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
<li id="item2"><button onclick="myFunction2()">A </button></li>
<li id="item3">B </li>
<li id="item4">C </li>
<li id="item5">D </li>
<li id="item6">E </li>
<li id="item7">F </li>
</ul>
</div>
I have an ul that isn't stacking properly (or is, but not to my desired outcome.)
http://jsfiddle.net/rrrpy1rk/
html:
<ul id="footer_site_map">
<li class="footer_parent">About
<ul class="footer_of_children">
<li class="footer_children">Our Veterinarians
</li>
<li class="footer_children">Our Staff
</li>
</ul>
</li>
<li class="footer_parent">Preventative Medicine
<ul class="footer_of_children">
<li class="footer_children">Puppies
</li>
<li class="footer_children">Kittens
</li>
<li class="footer_children">Adult Care
</li>
<li class="footer_children">Senior Care
</li>
<li class="footer_children">Rabbits
</li>
</ul>
</li>
<li class="footer_parent">Surgical
<ul class="footer_of_children">
<li class="footer_children">Spaying
</li>
<li class="footer_children">Neutering
</li>
<li class="footer_children">Orthopedic Surgery
</li>
<li class="footer_children">Soft Tissue Surgery
</li>
<li class="footer_children">Declawing Cat
</li>
</ul>
</li>
<li class="footer_parent">Medical
<ul class="footer_of_children">
<li class="footer_children"> Complete Medical Assessment
</li>
<li class="footer_children">Cardiology
</li>
<li class="footer_children">Flea Treatment
</li>
<li class="footer_children">Dentistry
</li>
<li class="footer_children">Radiology
</li>
<li class="footer_children">Laboratory
</li>
</ul>
</li>
</ul>
CSS:
#footer_site_map {
position:absolute;
padding:0;
margin:0;
top: 20px;
left: 0;
width:100%;
}
.footer_parent {
position: relative;
width: 180px;
height:20px;
padding: 0 5px;
display: inline-block;
}
.footer_parent a {
color: #FFF;
text-decoration: none;
font-family: MyriadProSemibold;
font-size: 120%;
}
.footer_children {
padding: 5px 0;
width: 200px;
}
.footer_children a {
color: #FFF;
list-style-type: none;
text-decoration: none;
font-family: ralewayregular !important;
font-size: 100%;
}
.footer_of_children {
padding: 0;
margin:0;
}
As seen from the fiddle the parent ul li's are stacking on top of the children ul li's. I need it to go the other way around.
Is there some easy fix, or should I re-structure it.
If you look at the fiddle, you may need to drag the bar to increase the size of the Result.
Addding vertical-align: top; to your .footer_parent fixes the issue:
.footer_parent {
position: relative;
width: 180px;
height: 20px;
padding: 0 5px;
display: inline-block;
vertical-align: top;
}
I have a couple multi-column drop down menus as a part of my main nav. The anchor hit area around each of the links in both multi-column drop down menus is for some reason positioned above the link itself. How do I fix it so the hit area centers around the link text like a normal anchor would?
Here's the site:
http://www.zrrdigitalmedia.com/_ADU/index.html
Here's the HTML & CSS of the nav:
HTML:
<nav class="top-bar bottom-bar" data-topbar>
<section class="top-bar-section">
<ul class="right">
<li>CLIENTS</li>
<li class="divider"></li>
<li>COMPANY</li>
<li class="divider"></li>
<li>DEMO</li>
</ul>
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown not-click">
COURSES
<ul class="dropdown dropdown-wrapper mega-menu">
<li>
<div>
<div class="mega-menu-category small-4 columns">
<ul>
<li><h3>MATH</h3></li>
<li class=""></li>
<li class="mega-menu-item active">GENERAL STUDIES</li>
<li class="mega-menu-item">FINANCE & BUSINESS</li>
<li class="mega-menu-item">ENGINEERING & TECHNICAL</li>
</ul>
</div>
<div class="mega-menu-category small-4 columns">
<ul>
<li><h3>SCIENCE</h3></li>
<li class=""></li>
<li class="mega-menu-item active">PREPERATORY PHYSICS</li>
</ul>
</div>
<div class="mega-menu-category small-4 columns">
<ul>
<li><h3>MARITIME</h3></li>
<li class=""></li>
<li class="mega-menu-item active">SHIP SUPERINTENDENT (MARINE)</li>
<li class="mega-menu-item">SHIP SUPERINTENDENT (GENERAL)</li>
<li class="mega-menu-item">SHIP SUPERINTENDENT (TECHNICAL)</li>
<li class="mega-menu-item">BREAKBULK SHIPPING</li>
<li class="mega-menu-item">LNG CARGO OPERATIONS</li>
<li class="mega-menu-item">MARITIME LOGISTICS 1</li>
<li class="mega-menu-item">MARINE ENGINEERING</li>
<li class="mega-menu-item">SHIP OPERATIONS</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
INDUSTRIES
<ul class="dropdown dropdown-wrapper-2 mega-menu-2">
<li>
<div>
<div class="mega-menu-category small-6 columns">
<ul>
<li><h3>HIGHER EDUCATION</h3></li>
<li class=""></li>
<li class="mega-menu-item">HIGHER EDUCATION OVERVIEW</li>
<li class="mega-menu-item">TEACHERS</li>
<ul>
<li class="mega-menu-sub-item">OVERVIEW</li>
<li class="mega-menu-sub-item">COURSES</li>
<li class="mega-menu-sub-item">FEATURES</li>
<li class="mega-menu-sub-item">FAQ</li>
</ul>
<li class="mega-menu-item">ADMINISTRATORS</li>
<ul>
<li class="mega-menu-sub-item">OVERVIEW</li>
<li class="mega-menu-sub-item">IMPLEMENTATION</li>
<li class="mega-menu-sub-item">FAQ</li>
</ul>
</ul>
</div>
<div class="mega-menu-category small-6 columns">
<ul>
<li><h3>MARITIME</h3></li>
<li class=""></li>
<li class="mega-menu-item">MARITIME INDUSTRY</li>
<li class="mega-menu-item">MARITIME INSTITUTIONS</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="divider"><li>
</ul>
</section>
</nav>
CSS:
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background-color: #d5b93f;
}
.mega-menu{
position: relative;
bottom: 44px;
left: -220px !important;
background-color: #d5b93f;
padding-bottom: 200px;
}
.mega-menu-2{
position: relative;
bottom: 44px;
left: -220px !important;
background-color: #d5b93f;
padding-bottom: 200px;
}
.mega-menu-item a{
height: 20px;
background: #d5b93f !important;
font-size: 12px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.mega-menu-sub-item a{
height: 20px;
background: #d5b93f !important;
font-size: 12px !important;
padding-left: 0px !important;
padding-right: 0px !important;
position: relative;
left: 25px;
}
.mega-menu-item a:hover{
height: 20px;
background-color: none !important;
font-size: 12px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.top-bar-section li a{
background: none !important;
}
.top-bar-section ul li{
background: none;
font-family: "FuturaStd-Book";
font-size: 20px;
}
.top-bar-section ul li:hover{
background-color: none;
font-family: "FuturaStd-Book";
font-size: 20px;
}
.top-bar-section ul li > a{
color: #60100f;
font-family: "FuturaStd-Book";
font-size: 16px;
}
.top-bar-section ul{
height: 270px !important;
}
.top-bar-section .dropdown li{
height: 20px;
}
.top-bar-section li.active:not(.has-form) a:not(.button){
padding-left: 0px;
padding-right: 0px;
}
.mega-menu-category{
padding-left: 30px !important;
padding-right: 30px !important;
}
h3
{
color: #fff !important;
font-family: "FuturaStd-Book";
}
#media only screen and (min-width: 641px)
{
.dropdown-wrapper
{
background-color: rgba(96, 16, 15, 0.7) !important;
width: 740px !important;
}
.dropdown-wrapper-2
{
background-color: rgba(96, 16, 15, 0.7) !important;
width: 640px !important;
height: 400px !important;
}
}
I'm using Zurb Foundation 5 as a Front-End framework. Been working on this for days & can't figure out why this is happening. All of your support is welcomed & greatly appreciated! Thank you!!
I viewed your site's source code and tried some things and found that you problem is in line 1365 of foundation.css. Just remove the display:block; and your problem disappears!
Ok! So I made this nav bar and it works perfectly in all browsers except IE7.
It is a left side nav and for some reason it collapses in IE7 but every other browser displays it fine.
Here's the html.
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="navbar">
<li class="nav_head"><div class="navhd_outline">Products</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">View Categories</div></li>
<li class="nav_subhead"><div class="navsub_outline">Add/Remove</div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline">Email</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">New Blast</div></li>
<li class="nav_subhead"><div class="navsub_outline">View Blast</div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline">Reports</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">By Month</div></li>
<li class="nav_subhead"><div class="navsub_outline">By Type</div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline">Recipes</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">View Recipes</div></li>
<li class="nav_subhead"><div class="navsub_outline">Add/Remove</div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline">Television</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">View List</div></li>
<li class="nav_subhead"><div class="navsub_outline">Add/Remove</div></li>
</ul>
</li>
<li class="nav_head blog_head"><div class="navhd_outline">Blog</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">View Posts</div></li>
<li class="nav_subhead"><div class="navsub_outline">Add/Remove</div></li>
</ul>
</li>
<li class="nav_bottom"> </li>
</ul>
</body>
</html>
And here is the CSS.
.navbar {
float: left;
background-color: #4d89d1;
background-repeat: no-repeat;
background-position: 18px 0px;
top: -25px;
width: 200px;
margin-top: 20px;
margin-left: 30px;
padding-top: 25px;
padding-bottom: 30px;
}
.nav_head {
margin: 0 auto;
padding: 1px;
height: 36px;
list-style: none;
}
.nav_head a {
font-size: 15px;
color: #900606;
}
.nav_head a:hover {
color: #f5bf2b;
}
.navhd_outline {
margin: 1px;
padding-top: 8px;
padding-left: 40px;
padding-bottom: 22px;
border: 1px dashed #f5bf2b;
width: 154px;
height: 2px;
}
.nav_subhead {
padding: 1px;
background-color: #900606;
height: 36px;
list-style: none;
margin-left: 25px;
width: 155px;
text-align: right;
}
.nav_subhead a {
color: #ffffff;
text-decoration: none;
padding-right: 10px;
}
.nav_subhead a:hover {
color: #f5bf2b;
}
.navsub_outline {
margin: 1px;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 20px;
border: 1px dashed #f5bf2b;
width: 131px;
height: 2px;
}
.nav_bottom {
height: 30px;
background-position: 33px 0px;
background-repeat: no-repeat;
}
You still have invalid HTML. The problem repeats through every single <li> so I'm only showing the first one...
<ul class="navbar">
<li class="nav_head">
<div class="navhd_outline">Products</div>
</li> <!-- <<< this one closes the LI item -->
<ul>
<li class="nav_subhead">
<div class="navsub_outline">View Categories</div>
</li>
<li class="nav_subhead">
<div class="navsub_outline">Add/Remove</div>
</li>
</ul>
</li> <!-- <<< this is presently an extra one outside of the LI item -->
...
<li class="nav_bottom"> </li>
</ul>
You still have an extra closing </li> tag for every single <li> item. The inner <ul> needs to be contained inside the <li></li>, where you have it outside along with another </li>. Remove </li> tags as indicated below...
<ul class="navbar">
<li class="nav_head">
<div class="navhd_outline">Products</div>
<ul> <!-- <<< the entire child UL is inside the LI where it belongs -->
<li class="nav_subhead">
<div class="navsub_outline">View Categories</div>
</li>
<li class="nav_subhead">
<div class="navsub_outline">Add/Remove</div>
</li>
</ul>
</li> <!-- <<< this one closes the LI item -->
...
<li class="nav_bottom"> </li>
</ul>
Run your page through the W3C Validator.