I am having troubles centering (horizontally) my ul# menu with the middle of the page. It is all functioning properly and as intended, I am just having issues with the centering.
Here is the CSS:
ul#menu, ul#menu ul.sub-menu {
padding: 0px;
margin: 0px;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
padding: 0px;
display: inline-block;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif
font-weight: bold;
font-size: 17px;
}
ul#menu li a {
padding: 15px;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 46px;
left: 15px;
width: 150px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li ul.sub-menu li a {
background-color:grey;
opacity:1;
height:20px;
border-bottom-style:solid;
border-bottom-color:#30F;
border-bottom-width:2px;
padding:5px;
font-weight:bold;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 12px;
}
#menucontainer {
position:absolute;
width:700px;
top:158px;
margin-left: auto;
margin-right: auto;
opacity:0.8;
z-index:20;
}
Here is the HTML:
<div id="menucontainer">
<ul id="menu">
<li>
Home
</li>
<li>
Games
<ul class="sub-menu">
<li>
>> Descent
</li>
</ul>
</li>
<li>
Prizes
</li>
<li>
Ladder
</li>
<li>
Community
<ul class="sub-menu">
<li>
>> Submissions
</li>
<li>
>> Support/Help
</li>
</ul>
</li>
<li>
Forums
</li>
<li>
About Us
<ul class="sub-menu">
<li>
>> Engage Arcade
</li>
<li>
>> Those Involved
</li>
</ul>
</li>
</ul>
</div>
Sorry for the big hunk of code, but I do not know exactly which parts would be relevant in helping solve the issue. The main thing to look for is the menucontainer.
Cheers for any suggestions.
Fiddle: http://jsfiddle.net/HcfMT/
The problem is that it's positioned absolutely. Get rid of that, since you're misusing it anyway.
http://jsfiddle.net/HcfMT/2/
width:700px;
margin-top:158px;
This is a simple fix... you are very close to having it.
#menucontainer
position:absolute;
width:700px;
top:158px;
margin-left: auto;
margin-right: auto;
opacity:0.8;
z-index:20;
to
#menucontainer {
position:relative;
width:700px;
top:158px;
margin: 0 auto;
opacity:0.8;
z-index:20;
}
You need the #menucontainer to be relatively positioned.
Related
I'm making a responsive top navbar that becomes vertically stacked when viewing on smaller screens. My problem is that in mobile view when you hover over a navigation item to expand the dropdown, the dropdown menu covers the other navigation links.
I'm trying to make the lower navigation elements move down to make room for the dropdown menu when a navigation link hovers over. I want to avoid using jQuery or Bootstrap and prefer to only use HTML and CSS if possible.
JSFiddle link (Be sure to resize the window or view on mobile):
https://jsfiddle.net/adilworth/fzrnvukm/3/
What I've tried:
I have played around extensively with changing the CSS position element but I cannot seem to get it to behave as I want.
HTML:
<ul id="navigation">
<li>Product 1
<ul>
<li>rx.com </li>
<li>Resources</li>
<li>Copay Cards</li>
</ul>
</li>
<li>Product 2
<ul>
<li>e.com </li>
<li>Resources</li>
<li>Copay Cards</li>
<li>Informational Video</li>
</ul>
</li>
<li>INSOMNIA EDUCATION
<ul>
<li>Complete Night Sleep Resources</li>
<li>sleep.com </li>
</ul>
</li>
<li>PAIN MGMT EDUCATION
<ul>
<li>Safer Pain Management Resources</li>
<li>painmanagement.com </li>
</ul>
</li>
<li>MEDICAL AFFAIRS
<ul>
<li>Request Clinical Reprints</li>
<li>Schedule a Scientific Session </li>
</ul>
</li>
</ul>
CSS:
/* Main Navigation */
#nav {
position:relative;
width:620px;
margin:0 auto;
margin-top:50px;
padding:10px;
}
ul#navigation {
margin:0px auto;
position:relative;
float:left;
}
ul#navigation li {
display:inline;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
float:left;
position:relative;
}
ul#navigation li a {
width: 234px;
padding:10px 25px;
color: black;
text-decoration:none;
display:inline-block;
background: #ebebeb;
}
ul#navigation li a:hover {
background:#ebebeb;
color:black;
}
ul#navigation li a.first {
border-left: 0 none;
}
ul#navigation li a.last {
border-right: 0 none;
}
ul#navigation li:hover > a {
background:#ebebeb;
}
/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
visibility:visible;
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
visibility:hidden;
opacity:0;
position: absolute;
z-index: 99999;
width:234px;
background:#ebebeb;
}
ul#navigation ul {
top: 43px;
left: 1px;
}
ul#navigation ul li ul {
top: 0;
left: 181px; /* strong related to width:180px; from above */
}
ul#navigation ul li {
clear:both;
width:55px;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:#black;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}
The problem is in using position: absolute;. Then you find that using visibility: hidden/visible isn't good too :-)
/* Main Navigation */
#nav {
position:relative;
width:620px;
margin:0 auto;
margin-top:50px;
padding:10px;
}
ul#navigation {
margin:0px auto;
position:relative;
float:left;
}
ul#navigation li {
display:inline;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
float:left;
position:relative;
}
ul#navigation li a {
width: 234px;
padding:10px 25px;
color: black;
text-decoration:none;
display:inline-block;
background: #ebebeb;
}
ul#navigation li a:hover {
background:#ebebeb;
color:black;
}
ul#navigation li a.first {
border-left: 0 none;
}
ul#navigation li a.last {
border-right: 0 none;
}
ul#navigation li:hover > a {
background:#ebebeb;
}
/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
display: block; /* here change visiblity > display */
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
/*visibility:hidden;*/
opacity:0;
/*position: absolute; */
display: none; /* change visibility > display */
z-index: 99999;
width:234px;
background:#ebebeb;
}
ul#navigation ul {
top: 43px;
left: 1px;
}
ul#navigation ul li ul {
top: 0;
left: 181px; /* strong related to width:180px; from above */
}
ul#navigation ul li {
clear:both;
width:55px;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:black;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}
<ul id="navigation">
<li>Product 1
<ul>
<li>rx.com </li>
<li>Resources</li>
<li>Copay Cards</li>
</ul>
</li>
<li>Product 2
<ul>
<li>e.com </li>
<li>Resources</li>
<li>Copay Cards</li>
<li>Informational Video</li>
</ul>
</li>
<li>INSOMNIA EDUCATION
<ul>
<li>Complete Night Sleep Resources</li>
<li>sleep.com </li>
</ul>
</li>
<li>PAIN MGMT EDUCATION
<ul>
<li>Safer Pain Management Resources</li>
<li>painmanagement.com </li>
</ul>
</li>
<li>MEDICAL AFFAIRS
<ul>
<li>Request Clinical Reprints</li>
<li>Schedule a Scientific Session </li>
</ul>
</li>
</ul>
<p> </p>
<div id="doral_resources">
<h4>Resources</h4>
</div>
<p><br /><br /><br /><br /><br /><br /> <br /><br /></p>
<div id="doral_copaycards">
<h4>Copay Cards</h4>
</div>
Can anyone tell me why this nav renders as it should do in everything but IE9 and how i can work around this.
The project needs to be IE9 compatible.
This works fine in IE11
Here is my code. Thanks.
HTML
<li> Tills
<ul>
<li>Base Unit</li>
<li>Card Reader
<ul id="secondMenu" onclick="navClick()">
<li>Not Reading Cards</li>
<ul></li>
</ul></li></ul>
<li>Cash Drawer</li>
<li>Customer Display</li>
<li>Reciept Printer
<ul id="secondMenu" onclick="navClick()">
<li> Printing with blank areas </li>
<ul></li>
</ul></li></ul>
<li>Scanner
<li>Touchscreen
<ul id="secondMenu" onclick="navClick()">
<li>Black or faint pictiure</li>
<li>Distorted or fuzzy display</li>
</ul>
</li>
</ul>
</li>
<li> Self Check Out</li>
<li> Controller</li>
<li> Photo</li>
<li> iPads
<ul id="secondMenu" onclick="navClick()">
<li> Not connecting to BUK Corporate </li>
<ul></li>
</ul></li></ul>
<li> Handhelds</li>
<li> Personal Computing</li>
<li> Printing</li>
<li> Password Resets</li>
<li> Other</li>
</ul>
</nav>
Here is the CSS
nav {
display:block;
margin:8px 0px 10px 0px;
padding:0;
border-radius:10px;
text-align:center;
width:15.6%;
font-weight: 4000;
float:left;
z-index:999;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul{
list-style:none;
background:#5e6ea6;
}
nav ul li {
position:relative;
text-align:center;
border:4px solid #2f4389;
color:#FFF;
z-index:98;
font-size: 118%;
}
nav ul li a{
text-decoration:none;
color:white;
display:block;
background:#5e6ea6;
padding-bottom:7.9%;
padding-top:7.9%;
}
nav ul li:hover > a{
background-color:orange;
display: block;
}
nav ul ul{
position:absolute;
display:none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
font-weight: 4000;
font-size: 70%;
}
nav ul ul li {
float: none;
border-top: 1px solid #2f4389 ;
border-bottom: 1px solid #2f4389;
position: relative;
width:275px;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li:hover > a {
background: orange;
border:1px solid white;
}
nav ul li:hover ul{
width:100%;
position:absolute;
left:100%;
top:0;
}
I'm putting up a site on Tumblr for my online store. Thing is, I can't get the dropdown menu to show up when I put "overflow:hidden" on the #topmenu part. When I set it to "overflow:visible", I get a huge chunk of white space to the right of the webpage. The white space isn't obvious when I'm using my laptop but it is when I use my phone.
I've tried changing the value of the z-index but it still won't work. I want to be able to have "overflow:visible" while not getting the white space at the right side of the page.
Please help me figure out what's wrong with the code and find a solution. I think there's something wrong with the width of the menu. But then when I change the width, all the links are pushed to the left side of the page.
Thank you in advance!
#topmenu {
font-family: 'Montserrat', sans-serif;
float:left;
width:100%;
background:transparent;
overflow:visible;
z-index:99999;
position:relative;
}
#topmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#topmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:3pt;
position:relative;
right:50%;
}
#topmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:4px 11px;
background: transparent;
color: #222222;
font-size:10px;
text-decoration:none;
line-height:2em;
letter-spacing: 3px;
}
#topmenu ul li a:hover {
background: none;
color: #b492a8;
}
#topmenu ul li ul.dropdown{
min-width: 125px;
max-width: 125px;
background: #ffffff;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
#topmenu ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
padding:0px 0px 0px 50px;
}
#topmenu ul li ul.dropdown li{
display: block;
}
<div id="topmenu">
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>FAQ</li>
<li>ORDER FORM</li>
<li>CUSTOMERS
<ul class="dropdown">
<li>OOTD</li>
<li>Feedbacks</li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
EDIT:
I tried using #gopalraju's code and it eliminated the white space while showing the dropdown menu. (Thank you gopalraju!)
How do I push the whole menu to the center of the page?
And how do I put the dropdown menu right under the word "Customers"?
#topmenu {
font-family: 'Montserrat', sans-serif;
float:left;
width:100%;
background:transparent;
overflow:visible;
z-index:99999;
position:relative;
}
#topmenu ul {
clear:left;
list-style:none;
margin:0;
padding:0;
position:relative;
display:table;
margin:0 auto;
text-align:center;
}
#topmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:3pt;
position:relative;
}
#topmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:4px 11px;
background: transparent;
color: #222222;
font-size:10px;
text-decoration:none;
line-height:2em;
letter-spacing: 3px;
}
#topmenu ul li a:hover {
background: none;
color: #b492a8;
}
#topmenu ul li ul.dropdown{
min-width: 125px;
max-width: 125px;
background: #ffffff;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
#topmenu ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
#topmenu ul li ul.dropdown li{
display: block;
}
<div id="topmenu">
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>FAQ</li>
<li>ORDER FORM</li>
<li>CUSTOMERS
<ul class="dropdown">
<li>OOTD</li>
<li>Feedbacks</li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
I have a CSS drop down menu built, that is working perfectly of course in Firefox and Chrome. But on Internet explorer 7 and 8, the drop down is moved to the right making it impossible to click the links.
I made a jsFiddle here :
http://jsfiddle.net/xMrPE/
And a screenshot of it under ie7 here :
http://s16.postimg.org/g90wthb2t/image.png
here is the HTML :
<div class="menu">
<ul>
<li>
La meunerie française
<ul>
<li style="margin-left:0;">Conseil d'administration</li>
<li style="margin-left:0;">Syndicats régionaux</li>
<li style="margin-left:0;">L'équipe</li>
</ul>
</li>
<li>
La filière
<ul>
<li style="margin-left:0;">Entités techniques de la meunerie</li>
<li style="margin-left:0;">Meunerie européenne</li>
<li style="margin-left:0;">Meunerie hors UE</li>
<li style="margin-left:0;">Organisations professionnelles</li>
<li style="margin-left:0;">Intercéréales</li>
<li style="margin-left:0;">FranceAgriMer</li>
</ul>
</li>
<li>
Les Moulins
<ul>
<li style="margin-left:0;">Régions meunières</li>
<li style="margin-left:0;">Régions administratives</li>
<li style="margin-left:0;">Farines & produits commercialisés</li>
<li style="margin-left:0;">Groupements meuniers</li>
</ul>
</li>
<li>
Fournisseurs
<ul>
<li style="margin-left:0;">Rubrique</li>
<li style="margin-left:0;">Liste Alphabétique</li>
</ul>
</li>
</ul>
</div>
The CSS :
.menu {
width:100%;
height:55px;
float:left;
position:relative;
z-index: 1000;
background-color: #5c4a29;
}
.menu ul {
list-style: none;
padding-top:7px;
font-size: 11px;
}
.menu ul li {
float:left;
margin-left:55px;
}
.menu ul li a {
color:#ffffff;
padding-bottom:25px;
}
.menu ul li a:hover, .menu ul li a.actif, .menu ul li:hover > a{
color:#DDD3AA;
}
.menu ul ul {
display:none;
}
.menu ul li:hover > ul {
display: block;
position:absolute;
z-index: 10000;
width:210px;
padding-bottom:20px;
top:55px;
-webkit-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
background-color: #5c4a29;
}
.menu ul ul li {
width:190px;
padding-left:10px;
float: left;
margin-top:10px;
}
.sidebar {
width:225px;
min-height:400px;
float:left;
position:relative;
}
I really can't see why it isn't working correctly.
Any help would be much appreciated. Thanks in advance !
Sébastien
For one on line 37 in your css I would change top from 55 to 45 so you can actually select the links. Also on line 1 change your height to 45.
.menu ul li:hover > ul {
display: block;
position:absolute;
z-index: 10000;
width:210px;
padding-bottom:20px;
top:45px;
-webkit-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
background-color: #5c4a29;
}
.menu {
width:100%;
height:55px;
float:left;
position:relative;
z-index: 1000;
background-color: #5c4a29;
}
When structuring a navigation menu with an UL(unordered list), I've noticed when I zoom in and out of the page the list items shift to the right making them come out of line.
How do make them stay in the same place at all times?
I have added the following at JSFiddle to play with it.
<div id="navigation">
<ul>
<font face="Verdana, Geneva, sans-serif">
<li > <a href="../index.html" > ANA SƏHIFƏ </a> </li>
<li> BIOQRAFIYA </li>
<li id="active-li"> XƏBƏRLƏR VƏ HADISƏLƏR </li>
<li><a> KİTABLAR </a></li>
<li> <a> VİDEOLAR </a> </li>
<li> <a id="last-item">FOTOLAR</a> </li>
</font>
</ul>
#navigation {
width: 900px;
margin: 0 auto 0px;
}
div#navigation ul li {
font-size:9px;
list-style:none;
background-color:transparent;
background-color:#FFF;
float: left;
}
div#navigation ul li:hover {
background-color:#9C1A35;
}
div#navigation ul li a {
color:#333333;
text-decoration:none;
display: block;
padding:10px 43px 20px;
}
#navigation ul li a:hover {
color:#fff;
}
ul {
padding:0;
}
#active-li {
background:#9C1A35 !important;
}
#active-li a {
color:#fff !important;
}
#last-item {
padding: 10px 42px 20px 42px !important;
}
div#navigation ul li #active {
background:#9C1A35 !important;
}
div#navigation ul li #active a {
color:#fff;
}
Most of pages loses their layout when zooming excessively. This happens when the "zoom only texts" option is enabled in the browser.
here is my suggestions:
decrease padding-right and padding-left of <a> items to a lower value (43px is too much for your menu).
try giving a height , min-heightand max-height to your items, and set overflow:hidden. This way, the text will stay in it's container box, and won't run out of it.
use relative values (percent, em) instead of px to size your elements.
#navigation {
width: 900px;
margin: 0 auto 0px;
display: inline;
}
Figured out a new way to make the nav bar stay in place
<div id="navigation">
<ul>
<font face="Verdana, Geneva, sans-serif">
<li > <a href="../index.html" > ƏSAS SƏHİFƏ </a> </li>
<li> BIOQRAFIYA </li>
<li id="active-li"> XƏBƏRLƏR VƏ HADISƏLƏR </li>
<li> KİTABLAR </li>
<li> <a> VİDEOLAR </a> </li>
<li> <a id="last-item">FOTOLAR</a> </li>
</font>
</ul>
</div>
#navigation {
width: 900px;
margin: 0 auto 0px;
}
div#navigation ul li {
font-size:9px;
list-style:none;
background-color:transparent;
background-color:#FFF;
float: left;
width:150px;
height:40px;
text-align:center;
}
div#navigation ul li:hover {
background-color:#9C1A35;
}
div#navigation ul li a {
color:#333333;
text-decoration:none;
display: block;
padding:6px 0px 18px;
border-left:1px thin black;
border-right:1px thin black;
}
#navigation ul li a:hover {
color:#fff;
}
ul {
padding:0;
}
#active-li {
background:#9C1A35 !important;
}
#active-li a {
color:#fff !important;
}
div#navigation ul li #active {
background:#9C1A35 !important;
}
div#navigation ul li #active a {
color:#fff;
}