The thing that's causing the problem is that when I make the size of the window smaller (restore down), the 4th sub div of class=Menu is not behaving like the other 3 divs, which I gave 25% width each. Instead, it is overflowing horizontally and going past the body, header and footer.
/*---------Dropdown----------*/
.Menu, .Menu ul {
padding: 0;
margin: 0;
list-style: none;
width:25%;
}
.Menu li {
width: 14.84em;
}
.Menu li ul { /*Hides dropdown*/
position: absolute;
left: -999em;
}
.Menu li:hover ul { /*Makes the dropdown show on hover*/
left: auto;
}
.Menu a { /*Styles the links on menubar */
color: black;
text-decoration: none;
display: block;
}
.Menu a:hover { /*background color of links change on
hover*/
background-color: #dcefdc;
}
.Menu div a{
padding-top:11px;
}
.Menu div a:hover{
height:50px;
}
.liwidth{
float:left;
background-color:#4CAF50 ;
height:50px;
}
/*----------Dropdown ends-----------*/
<div id="DivMenu">
<div class="Menu"><a style="text-decoration:none;" href="index.html">HomePage</a></div>
<div class="Menu"><a style="text-decoration:none;" href="About.html">About</a></div>
<div class="Menu"><a style="text-decoration:none;" href="Survey.html">Take our survey </a></div>
<div class="Menu">
<li>
Login/Register
<ul>
<div>
<li class="liwidth">
<a class="linkvalign" href="Login.html">Login</a>
</li>
<li class="liwidth" >
<a class="linkvalign" href="Register.html">Register</a>
</li>
</div>
</ul>
</li>
</div>
</div>
I can see that the thing causing the problem is the <li>'s in the 4th div, but I can't figure out how to arrange it so that it doesn't overflow.
I've tried removing the <li> tags altogether but that just causes more issues.
I'm not completely sure I understand what you're trying to do, and therefore what the proper solution should be, but adding overflow: hidden to .Main will prevent its content from overflowing at least.
Related
I have a navigation which uses a full width drop down sub-menu (the about drop down) but I am struggling to align the links within the submenu centeraly underneath their parent. I also need this to be responsive so the sub-links stay central no matter the view width.
Could anyone help me by telling me where I am going wrong or what I would need to do to achieve this effect?
Thanks in advance for any help.
.navigation--main li:hover>ul {
display: flex;
justify-content: center;
}
ul.navigation--main li ul {
background: #000;
color: #fff;
display: none;
position: absolute;
top: 114px;
left: 0;
width: 100%;
}
ul.navigation--main li ul li {
padding: 1.5em 0.5em;
}
<div class="navigation--container">
<div class="logo">
<img src="assets/img/Group 85.svg" alt="ORRAA Logo" class="homeLogo" height="78.93" width="260" />
</div>
<div class="navigation">
<ul class="navigation--main">
<li>Home</li>
<li>About
<ul>
<li>
Ocean risk</li>
<li>
About ORRAA</li>
</ul>
</li>
<li>Membership</li>
<li>Governance</li>
<li>Contact</li>
</ul>
<ul class="navigation--social-icons">
<li>
<img src="assets/img/facebook.svg" alt="facebook">
</li>
<li>
<img src="assets/img/instagram.svg" alt="instagram">
</li>
<li>
<img src="assets/img/Path 22.svg" alt="twitter">
</li>
</ul>
</div>
</div>
you can change in css file.. hope this solution help you.
.navigation--main li:hover>ul {
display:flex;
justify-content:center;
width: calc(100vw - 112px);
}
.navigation--main li:hover>ul li{
margin-left:20px;
}
ul.navigation--main li ul {
background: $brand-sky-blue;
display: none;
width: 100%;
}
ul.navigation--main li ul li {
padding:10px;
}
this is example for reference: codepen.io/arpita1030/pen/pMLQME
I do not know if I understood correctly, but here is my proposal
.navigation--main li:hover > ul {
display:flex;
justify-content: center;
position: static;
}
Now the div in question appears right underneath About navigation link and moves rest of the elements further down.
Good day, this is my first ever question on Stack Overflow, so I hope I get it as right as possible.
I have done extensive research on my problem, mostly reading all the questions I could find on Stack Overflow and some other sites, but I could not find one answer that worked.
Some background: I am trying to write a website for recruiting for my work and it's the first ever website I have ever written. I am using a wamp server to run the site on localhost for testing. My issue is described as best as I could in the title. Find below my html code:
<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> Home </li>
<li> Menu 1 </li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
<ul class="sub_menu">
<li>Ce Vrem</li>
<li>Aplica</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
And below my CSS code:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
}
.sub_menu li a{
display:none;
}
#angajari ul.sub_menu li {
float:left;
}
#angajari ul.sub_menu li a {
position:absolute;
top:0;
white-space: nowrap;
height:auto;
}
#angajari:hover ul.sub_menu li a {
display:block;
}
Here's a picture of what happens when I hover over the problematic menu item:
Display Issue
Final notes: I am running this only under Chrome for now. I have noticed that it doesn't read my css right in IE 8 (yes, I use IE 8, because one of my bosses wants us to.) Cross-platform compatibility fixes are welcome, but not in the scope of my current question. My WAMPSERVER has apache 2.4.9 and PHP 5.5.12.
I even tried my code on some online web code testing site whose name I forgot and got the same results. If you find that my code actually displays properly, then it may be an issue with my configuration.
Here is a jsfiddle.
You need your .sub_menu to be absolute, not your li as. That's it!
.sub_menu {
position:absolute;
}
Working demo here: http://jsfiddle.net/pxzhqqnb/1/
And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.
Why does it happen?
Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)
<div class="relative">
Text
<div class="absolute">Link 1</div>
<div class="absolute">Link 2</div>
</div>
Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div.
Link 2 follows the same rules, thus both links overlap.
Now let's change the code a little:
<div class="relative">
Text
<div class="absolute-wrapper">
<div>Link 1</div><!-- these are now static by default -->
<div>Link 2</div>
</div>
</div>
absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.
Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/
I've done a few tweaks to your css code:
body {
text-align: center;
}
a {
font-size: 150%;
text-decoration: none;
color: #000000;
font-weight: bold;
vertical-align: middle;
padding: 0px 10px; /* this is just for the hover effect to lose the spaces in the html */
}
a:hover {
background-color: #338533;
}
ul {
padding: 0;
margin: 0;
}
ul#nav_container {
background-color: #F2FFF2;
list-style-type: none;
text-align: center;
}
ul#nav_container li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
#angajari ul.sub_menu { /* do this with the menu, not just the link */
display: none;
position: absolute; /* set correct position */
}
#angajari ul.sub_menu li {
display: inline-block;
}
#angajari ul.sub_menu li a { /* we don't want top: 0 because it should not overlap */
white-space: nowrap;
}
#angajari:hover ul.sub_menu { /* see above -> menu not link */
display: block;
}
<div id="main_content">
<ul id="nav_container">
<li>
<img id="logo" src="http://lorempixel.com/150/75" style="width:150px;height:75px">
</li>
<li> Home <!-- I've removed the spaced and added the gap in css -->
</li>
<li> Menu 1
</li>
<li> Menu 2
</li>
<li> Menu 3
</li>
<li id="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href="Page4.html">Angajari</a>
<ul class="sub_menu">
<li>Ce Vrem
</li>
<li>Aplica
</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
So i tried to fix your Problem i end up with this result
I've adjusted the margin of the logo as shown below:
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>
because I adjust the width of the text container and replace the last 4 lines in your CSS CODE as shown below:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
width: 95px;
}
#main_content ul ul {
position: absolute;
visibility: hidden;
}
#main_content ul li:hover ul {
visibility: visible;
}
so i made minor changes but i dont know if that's what you want to happenenter code here
I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?
Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li
A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}
I'm tearing my hair out here.
I have horizontal dropdown menu on a site I am building. The menu is made up of an unordered list, with the dropdown part made up of hidden child elements that pop up when you roll over the parents.
In Firefox everything appears to be fine, but, in Chrome and Safari, while the last child element in each menu is acting as expected, all other child elements are shunted left by one pixel. So, in the example below, Child A3, Child B4, and Child C2 are aligned perfectly with their respective parents, while the rest are not.
Can someone please shed some light on what is going wrong here?
Code and screenshots below...
How it should look...
How it actually looks...
I have included the entire nav block of the CSS just in case I have missed something outside of the actual parent/child part.
HTML
<nav>
<div id="menu" class="menustrip">
<ul>
<li class="page_item">
Parent A
<ul class='children'>
<li class="page_item">Child A1</li>
<li class="page_item">Child A2</li>
<li class="page_item">Child A3</li>
</ul>
</li>
<li class="page_item">Parent B
<ul class='children'>
<li class="page_item">Child B1</li>
<li class="page_item">Child B2</li>
<li class="page_item">Child B3</li>
<li class="page_item">Child B4</li>
</ul>
</li>
<li class="page_item">Parent C
<ul class='children'>
<li class="page_item">Child C1</li>
<li class="page_item">Child C2</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS
#menu, #main-nav{
width: 950px;
margin: 0 30px 0 0;
padding-right: 30px;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #78B2E2;
text-align: right;
}
ul#main-nav{
list-style: none;
padding-top: 10px;
margin-right:30px;
}
.page_item, .navlink{
display: inline-block;
background-color: #243488;
height: 34px;
width: 110px;
margin-left: 1px;
text-align: center;
}
.page_item a, .navlink a{
padding-top: 4px;
display: block;
height: 34px;
width: 110px;
}
.page_item:hover, .navlink:hover{
background-color: #78B2E2;
}
.page_item:active, .navlink:active{
background-color: #78B2E2;
}
/* Hide Sub Menus by default */
#menu ul li ul.children {
display:none;
z-index:100;
}
/* Display Sub Menus on rollover of parent */
#menu ul li:hover ul.children {
display:block;
position:absolute;
top:205px;
margin: 0 0 0 -11px; /*pull child menus in line with parent */
width: 132px;
list-style: none;
}
/* Style sub menu items not to float like parent items */
#menu ul li ul.children li {
float:none;
width:110px;
height: 34px;
background-color:#243488;
border-top: 3px solid #ffffff;
font-size: 11px;
}
#menu ul li ul.children li:hover {
background-color:#78B2E3;
color:#243488;
}
/* Sub Menu link color */
#menu ul li ul.children li a:hover {
color:#243488;
}
#menu ul li ul.children li a {
color:#ffffff;
}
Not sure what causes it exactly, but it has to do with the fact that the list items in <ul class="children"> are inline-blocks and the ul itself is centered.
So you have two solutions: either align the ul to the left instead of centering it
.children {text-align:left;}
or, make its list items blocks instead of inline blocks.
.children > li {display:block;}
Either of those adjustments will get rid of the display anomaly. In both cases, you will also have to increase the left margin, but I'm sure that won't be a problem.
Changing .children .page_item to display:block rather than display:inline-block seemed to fix it in my Chrome. This also required a bit more margin-left to re-align things.
.children .page_item {
display:block;
margin-left:10px;
}
I am trying to add a dropdown menu in the right side of my top header, but I have got an issue with the "dropping down thing". The Header follows the menu, so it includes the nav and goes down, following what the menu is supposed to do.
I think the problem is related to the z-indexes which I haven't set properly, but I am not quite sure.
I would like to have a dropdown menu in the header, without being followed by the header itself.
This is the right side of the Header.
<div class="rightHeader">
<div class="rightContainer">
<div class="profile-nav">
<nav>
<ul>
<li><h3> edo1493</h3>
<ul>
<li> Notifications </li>
<li> Messages </li>
<li> Settings </li>
<li> Log out </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
And this is the CSS:
.rightHeader .rightContainer .profile-nav nav ul ul{
display: none;
background-color: yellow;
}
.rightHeader .rightContainer .profile-nav nav ul li:hover> ul {
display: block;
}
.rightHeader .rightContainer .profile-nav nav ul {
list-style-type: none;
display: inline-table;
padding: 0;
margin: 0;
}
.rightHeader .rightContainer .profile-nav nav ul:after {
content: ""; clear: both; display: block;
}
Any advice?
This is the Header's CSS:
#header-new{ position:fixed; width:100%; top: 0; left:0px; background-color:#3b3b3b;z-index: 1;}
Thanks
This will be accomplished with a simple change (adding position:absolute):
.rightHeader .rightContainer .profile-nav nav ul ul{
position:absolute;
display: none;
background-color: yellow;
}
This will then allow the navigation to fall below the header and not pull it with it.
See Example: http://jsfiddle.net/ZgzXE/12/
See: http://www.w3schools.com/css/css_positioning.asp for more information on positioning