Centering navmenu within a div

Centering navmenu within a div - html

I have a drop down nav menu that I need to be centered within a div but text-align: center isn't working for me.
The site is at http://www.joekellywebdesign.com/churchsample1/index.html
HTML
<div id="navmenudiv">
<ul id="navmenu">
<li>Home</li>
<li>
About Us
<ul class="sub1">
<li>Introduction</li>
<li>Who We Are</li>
<li>Staff</li>
</ul>
</li>
<li>
Services
<ul class="sub1">
<li>Sunday Morning</li>
<li>Sunday Evening</li>
<li>Wednesday Evening</li>
</ul>
</li>
<li>Resources</li>
<li>Contact Us</li>
<li>News and Events</li>
</ul>
</div>
CSS
navmenudiv {
z-index:60;
margin: -30px 0;
height:50px;
background-color:#5340BF;
top:40;position:
relative;
text-align:center;
}

Here is an easy solution:
ul#navmenu li {
float:left; /* REMOVE */
display: inline-block; /* ADD */
}
Currently, the li are floating. By changing them to inline-block elements, they will center - given that you are already using text-align:center on the parent.
Updated CSS:
ul#navmenu li {
margin-right: 4px;
text-align: center;
width: 125px;
display: inline-block;
position: relative;
}

ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
margin-right: 4px;
display: inline-block;
margin: 0 10px;
}

Related

How to show second menu in center of page?

Problem
How to show second menu in center of page ?
Details
I have two menus.
The first menu show at the top of the page.
The second menu not show on center of page (this is my problem).
As fiddle below second menu display above first menu
actually i need to show second menu in center of page
my fiddle
second menu code
<div>
<nav class="main-nav">
<!--This in case we have more navs-->
<ul class="nav-list">
<li>Home</li>
<li>About</li>
<li>
Services
<ul class="dropdown">
<li>Web Design</li>
<li>Graphic Design</li>
<li>Video Production</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>

<div class="con">
<div>
<nav class="main-nav">
<!--This in case we have more navs-->
<ul class="nav-list">
<li>Home</li>
<li>About</li>
<li>
Services
<ul class="dropdown">
<li>Web Design</li>
<li>Graphic Design</li>
<li>Video Production</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="container second-menu">
<ul>
<li>الرئيسيه</li>
<li>نبذه عن<i></i></li>
<li>اتصل بنا</li>
<li>اللغه</li>
<li> تسجيل دخول</li>
</ul>
</div>
</div>
$(function() {
var heightOfPage = $(window).height();
console.log(heightOfPage);
$(".con").css("height", heightOfPage);
$("li").has(".dropdown").hover(
function() {
$(this).find(".dropdown").slideDown();
},
function() {
$(this).find(".dropdown").slideUp();
}
);
.con{
position: relative;
}
.main-nav ul li{
display: inline-block;
position: relative;
background: #000;
}
.main-nav ul li a{
color: #fff;
text-decoration: none;
padding: 10px;
display: inline-block;
}
.dropdown ul{
padding: 0;
margin: 0;
}
.dropdown{
display: none;
position: absolute;
top: 40px;
left: -30px;
width: 200px;
}
dropdown ul li{
width: 200px;
}
.second-menu ul li{
display: inline-block;
background: red;
padding: 10px;
}
.second-menu ul li a{
color: #fff;
}
.second-menu{
position: absolute;
top: 50%;
}
JsFiddle Link
https://jsfiddle.net/y97coxjo/2/
All you need is to calculate the height of Document and set that height to a container making its position relative and the secondary menu position absolute with top 50%

To have element in the center of page, make it absolute (or static if You want it to stay in center even when scrolling) and position it vertically in center:
#block{
position: absolute;
width: 100%;
left: 0;
height: 50px; //example
top: 50%;
margin-top: -25px; //half of height
}
Then You can put the menu inside that #block.

making an un-ordered list for (mega drop down)

Work on making an un-ordered list's with 100% of the body not the parent li which has display: inline-block (mega drop down menu).
I'm aware that width : 100% makes that element's width 100% of the parent. Right now I'm trying to make a mega drop down menu. I got a ul then an li then ul for a submenu if I put 100 % on the submenu I guess it will be 100% of the li(that's what I have now) . I want it to be 100% of the body or be the same size as the top nav.ul so Im having problem figuring out how to extend the width to be 100% of the body or the upper ul. I know I could set the submenu's width with px and put a negative margin left to position it (that seems messy). I'm wondering how you would make this mega drop down effect. the ul.submenu's li or a tag probably wont just be there any more I will put a div so I could put images text boxes, etc.
basically in the code below I can't put width: 100%; in .container ul ul.sub to be 100% of the body or top ul. I want to do something like that
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myDrop</title>
<script src="jquery.js"></script>
<script>
$(function(){
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
.container{
background: black;
}
.container ul > li{
display: inline-block;
list-style-type: none;
position: relative;
}
.nav a{
display: block;
padding: 0 10px;
font-size: 20px;
}
.container ul ul.sub{
position: absolute;
overflow: hidden;
height: 0;
opacity: 0;
left: 0;
width: 100%;
list-style-type: none;
padding: 0;
/*background: red;*/
}
.container ul li:hover > ul{
display: list-item;
opacity: 1;
height: 700%;
/*top: 60px;*/
}
.nav li{
position: relative;
}
.nav li ul{
position: absolute;
left: 0;
background: red;
}
.nav li ul li{
list-style-type: none;
}
.container a{
color:white;
text-decoration: none;
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Success
<ul class="sub">
<li>Success Submenu</li>
<li>Success Submenu</li>
</ul>
</li>
<li>Entrepeneurship
<ul class="sub">
<li>Entrepeneurship submenu</li>
<li>Entrepeneurship submenu</li>
</ul>
</li>
<li>Career
<ul class="sub">
<li>Career Submenu</li>
<li>Career Submenu</li>
</ul>
</li>
<li>Motivation
<ul class="sub">
<li>Motivation Submenu</li>
<li>Motivation Submenu</li>
</ul>
</li>
<li>Videos
<ul class="sub">
<li>Videos Submenu</li>
<li>Videos Submenu</li>
</ul>
</li>
<li>Quotes
<ul class="sub">
<li>Quotes Submenu</li>
<li>Quotes Submenu</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

I added
.nav{
position: relative;
}
*{
margin: 0;
padding: 0;
}
.container{
background: black;
}
.container ul > li{
display: inline-block;
list-style-type: none;
/*position: relative;*/
}
.nav{
position: relative;
}
.nav a{
display: block;
padding: 0 10px;
font-size: 20px;
}
.container ul ul.sub{
position: absolute;
overflow: hidden;
height: 0;
opacity: 0;
left: 0;
width: 100%;
list-style-type: none;
padding: 0;
/*background: red;*/
}
.container ul li:hover > ul{
display: list-item;
opacity: 1;
height: 400%;
/*top: 60px;*/
}
.nav li{
/*position: relative;*/
}
.nav li ul{
position: absolute;
left: 0;
background: red;
}
.nav li ul li{
list-style-type: none;
}
.container a{
color:white;
text-decoration: none;
list-style-type: none;
}
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Success
<ul class="sub">
<li>Success Submenu</li>
<li>Success Submenu</li>
</ul>
</li>
<li>Entrepeneurship
<ul class="sub">
<li>Entrepeneurship submenu</li>
<li>Entrepeneurship submenu</li>
</ul>
</li>
<li>Career
<ul class="sub">
<li>Career Submenu</li>
<li>Career Submenu</li>
</ul>
</li>
<li>Motivation
<ul class="sub">
<li>Motivation Submenu</li>
<li>Motivation Submenu</li>
</ul>
</li>
<li>Videos
<ul class="sub">
<li>Videos Submenu</li>
<li>Videos Submenu</li>
</ul>
</li>
<li>Quotes
<ul class="sub">
<li>Quotes Submenu</li>
<li>Quotes Submenu</li>
</ul>
</li>
</ul>
</div>

absolute positioning constrained by parent div width

I am creating a menu with hover-over submenus (just practicing my css) and I've come across a situation I don't understand. I'd like for the submenus to be positioned just below their parent menu item, and have no line breaks within them. The first two submenus behave just as I'd like, but as I move to the right two menu items, their submenus start to get line-breaks, because their width is constrained on the right side by the width of their parent's parent (div.menu-bar). How do I make it so that the submenu's widths are not constrained like this?
Here is a screencast to explain the situation: http://screencast.com/t/0fMjpA0MD
body {background: #77c4d3; padding:1%; }
div.menu-bar{position: relative; width: 700px;}
/*Styles for both menu and submenus: */
div.menu-bar ul { list-style-type: none; margin: 0; padding:20px; background: gray;}
div.menu-bar li { background:white; text-align:center; display:inline-block; padding:10px;}
/*Menu-specific styles: */
div.menu-bar > ul {width: 100%; text-align: center;}
div.menu-bar > ul > li {width:25%; border:0; margin: 0; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box;}
/* Submenu-specific styles */
div.menu-bar ul ul {background-color: blue; padding-left: 10px; padding-right: 10px;}
/*Hide any unodered lists that are descendents of a list element by default*/
div.menu-bar li ul {
display: none;
}
/*Select any unordered lists that are children of list elements that are being hovered on.*/
/* The <ul> is display:block, but the individual <li> elements are inline-block, which is what matters.*/
div.menu-bar li:hover > ul {
display: block;
position: absolute;
}
<div class="menu-bar">
<ul>
<li>
Home
<ul>
<li>Beach House</li>
<li>Ski Cabin</li>
<li>Country Cottage</li>
</ul>
</li
><li>
News
<ul>
<li>World News</li>
<li>National News</li>
<li>Local News</li>
</ul>
</li
><li>
Contact
<ul>
<li>Email Address</li>
<li>Phone Number</li>
<li>Postal Address</li>
</ul>
</li
><li>
About
<ul>
<li>About Me</li>
<li>About You</li>
<li>About Us</li>
</ul>
</li>
</ul>
</div>

#Thiyagesh's code is correct, but his explanation doesn't quite make sense to me. In my solution (which is essentially the same as Thiyagesh's), my relative/absolute positioning relationships are the same. The only difference is that I needed to add a width to the submenus. Apparently when you don't specify a width of an absolute-positioned element, its width is defaulted to stay inside the bounds of its first relative-positioned ancestor?
In any case, the solution was just to add "width:375px;" to "div.menu-bar li:hover > ul".

Each inner ul should be absolute to the respective li. Hence the li should be positioned relative for the inner ul.
body {
background: #77c4d3; padding:1%;
}
div.menu-bar{
position: relative; width: 700px;
}
div.menu-bar ul {
list-style-type: none;
margin: 0;
padding:20px;
background: gray;
}
div.menu-bar li {
background:white;
text-align:center;
display:inline-block;
padding:10px;
}
div.menu-bar > ul {
width: 100%;
text-align: center;
}
div.menu-bar > ul > li {
width:24%;
border:0;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
div.menu-bar ul ul {
background-color: blue;
padding-left: 10px;
padding-right: 10px;
}
div.menu-bar li ul {
display: none;
width: 375px;
position: relative;
}
div.menu-bar li:hover > ul {
display: block;
position: absolute;
}
<div class="menu-bar">
<ul>
<li>
Home
<ul>
<li>Beach House</li>
<li>Ski Cabin</li>
<li>Country Cottage</li>
</ul>
</li>
<li>
News
<ul>
<li>World News</li>
<li>National News</li>
<li>Local News</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Email Address</li>
<li>Phone Number</li>
<li>Postal Address</li>
</ul>
</li>
<li>
About
<ul>
<li>About Me</li>
<li>About You</li>
<li>About Us</li>
</ul>
</li>
</ul>
</div>

How to position a drop down list nav bar inside header in html css

I am having trouble stacking up the elements inside the nav bar next to each other.
Here's how it looks:
I want the nav elements to be side by side of each other.
Here's HTML code
HTML:
<div id="navbar">
<ul>
<li>COMPANY
<ul>
<li>OVERVIEW</li>
<li>CEO MESSAGE</li>
<li>LEADERSHIP</li>
<li>INVESTORS</li>
<li>AFFILIATION</li>
<li>CONTACT</li>
</ul>
</li>
<li>PRODUCTS
<ul>
<li>OVERVIEW</li>
<li>PRODUCTS</li>
<li>APPLICATION</li>
<li>USAGE</li>
</ul>
</li>
<li>PARTNER PROGRAM
<ul>
<li>PARTNER PROGRAM</li>
<li>BECOME A PARTNER</li>
</ul>
</li>
<li>LEARN ABOUT WGIG
<ul>
<li>OVERVIEW</li>
<li>VIDEOS</li>
<li>INDUSTRY ARTICLES</li>
<li>WHITE PAPERS</li>
</ul>
</li>
<li>MEDIA CENTER
<ul>
<li>LATEST NEWS</li>
<li>PRESS RELEASES</li>
<li>MEDIA COVERAGE</li>
<li>EVENTS</li>
<li>AFFILIATION</li>
<li>MEDIA KIT</li>
</ul>
</li>
</ul>
</div>
Here's the CSS
CSS:
#navbar {
position: relative;
margin-left: 25%;
border: 5px solid green ;
width: 55%;
height: 100%;
}
#navbar ul {
display: inline-block;
border-radius: 10px;
position: absolute;
}
#navbar li {
list-style: none;
position: relative;
display: inline-block;
float: left;
}
#navbar ul li a {
text-decoration: none;
text-align: center;
color:lime;
height:30px;
width:40px;
display: block;
}
#navbar ul ul {
display:none;
position:absolute;
}
#navbar ul li:hover ul {
display:block;
}

The first <ul> should be relatively positioned. Setting your <a> at a fixed 40px wide isn't such a great idea (nor is it necessary) as most of the text within is more than 40px. Also: your menu items will wrap (stack) unless you set a min-width on their container.
See here: http://jsfiddle.net/RKRWQ/1/

How to position submenus to appear correctly under the main menu (CSS)?

I've been able to create a horizontal menu using (display:inline) and I now have a drop menu thanks to sousMenu. My problem is that all the submenus, regardless of element I hovered over, appear in the same place. How do I work around this?
My menu code thus far:
<ul>
<li>Home</li>
<li class="sousMenu">About Us
<ul>
<li>Board of Directors</li>
</br>
<li>Student Profiles</li>
</br>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul>
<li>Donations</li>
</br>
<li>Job Board</li>
</br>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul>
<li>Connections</li>
</br>
<li>Gallery</li>
</br>
<li>Tours</li>
</ul>
</li>
CSS:
#navcontainer ul {
/*margin: 0;*/
margin-left: auto;
margin-right: auto;
padding: 0;
top:180;
right:20;
width:800px;
list-style-type: none;
text-align: center;
position: absolute;
color: #fff;
background-color: #003300;
padding: .2em 1em;
}
#navcontainer ul li {
display: inline;
padding-left:2cm;
}
#navcontainer ul li a {
text-decoration: none;
color: #fff;
background-color: #030;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #000;
}
.sousMenu:hover ul {
display: block;
}
.sousMenu ul {
text-align: center;
display: none;
list-style-type: none;
}

Try setting the parent list item to position: relative and the child ul to position: absolute for starters. I made some other slight modifications to your code to achieve the desired effect.
Here's the CSS:
* {
margin: 0;
padding: 0;
vertical-align: baseline;
}
li {
list-style-type: none;
}
ul.main li {
position: relative;
display: inline-block;
}
.main li:hover > ul {
display: block;
}
ul.sub {
position: absolute;
display: none;
top: 100%;
left: 0;
}
ul.sub li {
display: block;
}
I also cleaned up the HTML a bit. You were missing a closing </ul> tag as well:
<ul class="main">
<li>Home</li>
<li class="sousMenu">About Us
<ul class="sub about">
<li>Board of Directors</li>
<li>Student Profiles</li>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul class="sub get-involved">
<li>Donations</li>
<li>Job Board</li>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul class="sub resources">
<li>Connections</li>
<li>Gallery</li>
<li>Tours</li>
</ul>
</li>
</ul>
Here's the fiddle: http://jsfiddle.net/vXhZb/2/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Centering navmenu within a div - html

ul#navmenu li { width: 125px; text-align: center; position: relative; margin-right: 4px; display: inline-block; margin: 0 10px; }

Related

How to show second menu in center of page?

making an un-ordered list for (mega drop down)

absolute positioning constrained by parent div width

How to position a drop down list nav bar inside header in html css

How to position submenus to appear correctly under the main menu (CSS)?

Categories

Resources