I believe I have a very unique problem. I am trying to create a menu and basically I have some floated child div's inside the main menu holding div at the top of a web page. The problem is that I need to have the parent element have an automatic height because I want it to be dynamic just in-case I change the padding on the menu buttons (child DIV's). Also, the parent has a width of 100% and a child inside of it that has an automatic width with a max-width set so that I can basically have the left and right child menu buttons inside of it come together when the page is sized smaller. However all is working well until you resize the page to the point where the left right right menu portions come together, then all of the child menu buttons want to stack instead of automatically create a vertical scrollbar for the main page.
I don't know if this will pose a problem because I plan on using media queries later to automatically switch up the CSS for mobile compatibility. However, I would like to find a solution to this problem. If I need to post all of my code to get the right answer please let me know and I will do.
Thank you so much.
Oh and by the way, I have searched on a solution to this for about an hour and nothing is working. I may as well post the code below because I really want to find a solution.
The HTML:
<body>
<div id="header" class="clearfix">
<div id="wrapper">
<div id="main-nav" class="float-left">
<ul id="main-nav-menu" class="menu">
<li id="main-menu-button">
<a href="#" data-description="Since 1976">
Pardee Electric
</a>
</li>
</ul>
</div>
<div id="main-nav" class="float-right">
<ul ud="main-nav-menu" class="menu">
<li id="main-menu-button" class="float-right">
<a href="#">
Get in Touch
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Residential
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Commercial
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Industrial
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
The CSS:
/* body data */
body {
margin-top: 0px;
-webkit-font-smoothing: subpixel-antialiased;
background-color: #F0F0F0;
}
ul {
list-style: disc;
}
/* header data */
#header {
width: 100%;
height: auto;
background-color: #456DC0;
border-bottom: 1px solid #FFFFFF;
}
#wrapper {
width: auto;
max-width: 1024px;
height: auto;
background: none;
margin: 0 auto;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
margin-top: 0;
}
#main-nav-menu {
}
#main-nav {
width: auto;
height: auto;
position: relative;
}
#main-nav ul, #main-nav .menu {
margin: 0px;
}
#main-nav li {
width: auto;
list-style: none;
margin: 0px;
position: relative;
display: inline;
}
#main-nav a {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
padding: 15px 20px 15px 20px;
position: relative;
letter-spacing: 0px;
text-align: center;
text-decoration: none;
text-transform: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
display: block;
color: #F0F0F0;
z-index: 98;
-webkit-transition: background-color .2s ease, border .2s ease, color .4s ease, opacity .2s ease-in-out;
background-color: #4186D2;
}
#main-nav a:active {
background-color: #000000;
}
#main-nav a:hover {
background-color: #333333;
color: #FFFFFF;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
Demo in Jsfiddle
Hopefully the css posted OK. I am new to Stack.
Thanks again!
you need to give class="clearfix" to id="wrapper".
Related
This is a solution-way question to another question I asked before (Open 100% width Navigation on hover over navigation item)
I am trying to build a navigation bar that shows more in depth search terms as soon as you hover over the respective navigation bar item.
Now I think I am close to a solution: I created this separate div that should be visible as soon as one hovers over "Produkte" / #navigation-item2. Now with the way I am acustomed to :hover this does not work. How can I make this work?
.navigation {
width: 100%;
height: auto;
max-height: 20vh;
background: white;
display: flex;
;
align-items: center;
justify-content: center;
}
.navigation-item {
position: relative;
height: 10%;
width: 15%;
font-size: 1.2em;
color: black;
font-weight: bold;
padding: 0.5em 1em 0.5em 1em;
margin: 0px 1% 0px 1%;
text-align: center;
text-transform: uppercase;
transition: background 200ms linear;
text-decoration: none;
}
.navigation-item:hover {
background: lightgrey;
}
.nav-menu {
height: 200px;
position: absolute;
width: 100%;
max-height: 25vh;
opacity: 0;
}
#navigation-item2:hover #nav-menu2 {
opacity: 1
}
<header>
<nav class="navigation">
<a href="https://www.amazon.com" style="flex: 0.5; margin-left: 20px">
<img src="/images/Logo.png" alt="Logo" style="height:100%; width:auto; max-height: 16vh; margin-top: 3px;">
</a>
<a class="navigation-item" href="https://www.amazon.com">
Home</a>
<a class="navigation-item" href="https://www.amazon.com">
Portfolio</a>
<a class="navigation-item" id="navigation-item2" href="https://www.amazon.com">
Produkte</a>
<a class="navigation-item" href="https://www.amazon.com">
Über uns</a>
</nav>
<div class="nav-menu" id="#nav-menu2">
<ul class="dropdown">
<li>
<ul>
<li>Kochmesser</li>
<li>Küchenmesser</li>
</ul>
<li>Scheren</li>
<li>Klingen</li>
</ul>
</div>
</header>
What #navigation-item2:hover #nav-menu2 means, is that it targets the child element #nav-menu2 when the parent #navigation-item2 is hovered.
What you need to do is to move the #nav-menu2 inside the nav-tag, because you can only target siblings (with + or ~) or child elements.
I moved #nav-menu2 so it's directly follows the relevant a tag. Then you can use #navigation-item2:hover + #nav-menu2 to increase the opacity to 1.
By positioning every single sub-menu in the same order in the DOM, you can even go a step further, which I show-case in the code below, using only the classes.
For the sake of demonstration, I changed the #nav-menu2 to a starting opacity of 0.1. I also positioned #nav-menu2 to align at the bottom of .navigation (hence, adding position: relative to .navigation), and then translated it's full height (100%) to have the #nav-menu2 position itself under the navbar.
I would even go one step further and place #nav-menu2 inside #navigation-item2, so you automatically get the correct x-position. It would also solve the issue that you look the hover state if you got outside the .navigation-item. But I leave that up to you to figure out.
.navigation {
position: relative; /* ADDED */
width: 100%;
height: auto;
max-height: 20vh;
background: white;
display: flex;
;
align-items: center;
justify-content: center;
}
.navigation-item {
height: 10%;
width: 15%;
font-size: 1.2em;
color: black;
font-weight: bold;
padding: 0.5em 1em 0.5em 1em;
margin: 0px 1% 0px 1%;
text-align: center;
text-transform: uppercase;
transition: background 200ms linear;
text-decoration: none;
}
.navigation-item:hover {
background: lightgrey;
}
.nav-menu {
height: 200px;
bottom: 0px; /* ADDED */
transform: translateY(100%); /* ADDED */
position: absolute;
width: 100%;
max-height: 25vh;
opacity: 0.1; /* CHANGED */
}
.navigation-item:hover + .nav-menu { /* CHANGED */
opacity: 1;
}
<header>
<nav class="navigation">
<a href="https://www.amazon.com" style="flex: 0.5; margin-left: 20px">
<img src="/images/Logo.png" alt="Logo" style="height:100%; width:auto; max-height: 16vh; margin-top: 3px;">
</a>
<a class="navigation-item" href="https://www.amazon.com">
Home</a>
<a class="navigation-item" href="https://www.amazon.com">
Portfolio</a>
<a class="navigation-item" id="navigation-item2" href="https://www.amazon.com">
Produkte</a>
<div class="nav-menu" id="nav-menu2">
<ul class="dropdown">
<ul>
<li>Kochmesser</li>
<li>Küchenmesser</li>
</ul>
<li>Scheren</li>
<li>Klingen</li>
</ul>
</div>
<a class="navigation-item" href="https://www.amazon.com">
Über uns</a>
</nav>
</header>
I'm trying to make a navigation bar with a border-bottom as the hover effect which purpose is to follow the user mouseover and highlight the item. However, the border-bottom is including the padding of its parent, which I don't like. Using padding: 0px; doesn't do it.
Here's what I've got so far, bear with me since I'm fairly new to HTML & CSS and this is my first time making a website:
*{
padding: 0px;
margin: 0px;
}
#navdiv ul {
width: 100%;
height: 80px;
line-height: 80px;
vertical-align: middle;
background: #333;
margin-top: 5px;
}
#container {
margin-left: 200px;
margin-right: 200px;
}
#navdiv ul a {
width: 80%;
text-decoration: none;
color: #f2f2f2;
padding: 15px;
font-size: 16px;
}
#navdiv ul li {
height: 63px;
list-style-type: none;
float: right;
}
#navdiv ul li:hover {
border-bottom: 5px solid #FF9933;
transition: all 0.3s ease-in-out;
}
#highlight {
display: inline-block;
line-height: 1em;
padding: 0;
border-bottom: 5px solid #FF9933;
}
#navdiv img {
width: auto;
height: auto;
max-width: 100%;
max-height: 60px;
vertical-align: middle;
}
<nav>
<div id="Maindiv">
<div id="navdiv">
<ul>
<div id="container">
<img src="../img/menu-logo.png" alt="Menu Logo">
<li>Item 4</li>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</div>
</ul>
</div>
</div>
</nav>
As you can see, the orange border-bottom is taking "Item 1" padding which is making the border-bottom larger than it's content, which I find it ugly and I would like to fix it.
While at it, is there a way to make the border-bottom animation come from the left to right? If so, is there also a way to make it "smart" enough to know that if the user's cursor comes from the left of the item, it should animate from "left to right" and if the cursor comes from the right animate it from "right to left" accordingly?
I would also love to make it follow the user cursor instead of instantly disappearing after leaving the previous item and immediately appearing once the next item is hovered.
Sorry for the long post, I've got so many questions and so little luck while troubleshooting using google with the little knowledge that I know.
Massive thanks!
- Kay.
Removing width: 80%; from #navdiv ul a will fix the larger border-bottom issue.
Please find below for left-to-right border-bottom effect.
https://codepen.io/julysfx/pen/qXBzYL
The reason for the border looking like that is because the border is around the outside of the HTML element. Padding is within the element so the border will incorporate that and thus do a border at that boundary. This stack overflow question explains this with diagrams:
Difference between margin and padding?
You might want to change to using margin to space out the items. Also, width: 80% might also make the border look a bit longer than you imagined. You could either increase the margin between items, or if you really want the items to be 80% wide, you could have a parent div which is 80% width so that it doesn't affect the border.
Is this more what you are looking for?
*{
padding: 0px;
margin: 0px;
}
.slider {
position: absolute;
display:block;
left: 0;
top: 90%;
margin: 0 auto;
height: 2px;
width: 0%;
border-bottom: 5px solid #FF9933;
transition: width 1s ease;
}
#navdiv {
background: #333;
}
#navdiv ul {
width: 100%;
display: inline;
}
#container {
margin-left: 200px;
margin-right: 200px;
height: 63px;
line-height: 63px;
}
#navdiv ul a {
text-decoration: none;
color: #f2f2f2;
font-size: 16px;
}
#navdiv ul li {
list-style-type: none;
float: right;
position:relative;
display:inline;
background-color: red;
line-height: 29px;
margin-top: 16px;
margin-right: 10px;
}
#navdiv ul li:hover .slider {
border-bottom: 5px solid #FF9933;
transition: all 0.3s ease-in-out;
width: 100%;
}
#highlight {
display: inline-block;
line-height: 1em;
padding: 0;
border-bottom: 5px solid #FF9933;
}
#navdiv img {
width: auto;
max-width: 100%;
}
<nav>
<div id="Maindiv">
<div id="navdiv">
<div id="container">
<img src="../img/menu-logo.png" alt="Menu Logo">
<ul>
<li>
Item 5
<span class="slider"></span>
</li>
<li>
Item 4
<span class="slider"></span>
</li>
<li>
Item 3
<span class="slider"></span>
</li>
<li>
Item 2
<span class="slider"></span>
</li>
<li id="highlight">
Item 1
<span class="slider"></span>
</li>
</ul>
</div>
</div>
</div>
</nav>
This is my html code below:-
.header {
background-color: #b6b4b4;
padding: 5px;
}
.logo {
border-radius: 30px;
float: left;
}
#social {
width: 50px;
border-radius: 100%;
float: right;
}
.navigatbar {
margin-top: -16px;
}
#navigat {
display: inline;
color: #b6b4b4;
font-size: 21px;
font-family: 'Poppins', sans-serif;
margin: 0 10px;
padding: 0 3px 0 3px;
}
.topnav {
background: #ffffff;
}
a {
color: #2ad2c9;
}
.active {
background-color: #e8e8e8;
}
.droplinks {
position: absolute;
background-color: #ffffff;
min-width: 140px;
display: none;
}
.droplinks a {
padding: 10px;
display: block;
}
.dropbutton:hover .droplinks {
display: block;
}
<body link="#008080" vlink="#66b2b2">
<div class="header">
<img src="images/logo.jpg" class="logo">
<img src="slike/yt.png" id="social">
<img src="slike/ig.png" id="social">
<img src="slike/fb.png" id="social">
</div>
<div class="navigatbar">
<ul class="topnav">
<li class="active" id="navigat">Početna</li>
<li class="dropbutton" id="navigat">Fitnes
<div class="droplinks">
Treninzi
Dijagnostika
</div>
</li>
<li id="navigat">Školica sporta</li>
<li id="navigat">Boks</li>
<li id="navigat">Personalni treninzi</li>
<li id="navigat">Ishrana i zdravlje</li>
<li class="dropbutton" id="navigat">Prevencija i rehabilitacija
<div class="droplinks">
Prevencija
Rehabilitacija
Kiropraktika
Kinezitejping
</div>
</li>
<li id="navigat">Kontakt</li>
</ul>
</div>
</body>
Now, here is the problem: my dropdown menus work, but both of them open on the left side of the navigation bar, under the first element. Where have I gone wrong?
I've tried to add some margin-left and it works, butthe problem is that it moves both of them for the same amount of pixels, and they're still opening on the same place. I could give different classes to them and add them a different margin-left, but I'm kind of sure that that is not the only possible solution.
Can anyone help me, please?
Change your CSS in 2 places:
#navigat {
display: inline;
color: #b6b4b4;
font-size: 21px;
font-family: 'Poppins', sans-serif;
margin: 0 10px;
padding: 0 3px 0 3px;
position: relative; /* add this line */
}
.droplinks {
position: absolute;
background-color: #ffffff;
min-width: 140px;
display: none;
left: 0; /* add this line */
z-index: 1; /* add this line */
}
Add this to your css
.dropbutton { position: relative; }
Absolutely positioned elements are positioned relative to their first ancestor that have a non-static position. position: static is the default for all elements, unless otherwise supplied.
That means in your case, the drop down menus are both positioned relative to the body of the document. What you want, is to position them relative to the button that triggers them. The above suggestion should take care of that.
Also, use left, top, right and bottom instead of margin to position your dropdowns.
I'm trying to fit a few navigation tabs onto an <article> tab but it doesn't work properly on firefox and when on different screens, it messes up. Does anyone know an alternative that works with all browsers and doesn't change as the screen is resized?
Here is the result I want:
Exactly that except I don't want to use a fixed margin-top
EDIT:
Code:
Navigation:
nav {
width: 100%;
height: 4%;
}
nav ul {
list-style-type: none;
}
nav li {
width: 100%;
background-color: #9A9489;
display: inline-block;
text-align: center;
width: 11%;
font: 1.4em/1.3em Bonveno, Open Sans, Sans-Serif;
float: right;
cursor: pointer;
margin-right: 0.5%;
border-top-left-radius: 0.3125em;
border-top-right-radius: 0.3125em;
transition: background-color 0.2s ease-in-out;
}
Article (without margin-top):
article {
width: 99.5%;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0.3125em 0 #9A9489;
padding: 0 0 0.5% 1.5%;
}
HTML:
<nav>
<ul>
<a href="contact.php">
<li>Contact</li>
</a>
<a href="pictures.php">
<li>Pictures</li>
</a>
<a href="about.php">
<li class="selected">About</li>
</a>
<a link="black" href="index.php">
<li>Home</li>
</a>
</ul>
</nav>
<article>
<h1>Hello World</h1>
<p>Hello world</p>
</article>
Well you can always try position as an alternative to margin.
In this case, I think you would have to use a relative position, so do the following:
.YOUR_TABS_SELECTOR{
position: relative;
top: 10px;
}
I am building a CSS only two-level horizontal navigation bar with relative sub-navigation to the parent. All menu items are inline. Dependent upon the classes 'right' or 'left', the sub-nav aligns to the parent. This is what I've managed to accomplish so far:
html:
<body>
<div class="navbar">
<ul class="topnav left">
<li>nav</li>
<li>menu1
<span class="subnav">
<ul class="subnav subnav-left">
<li>item1-1</li>
<li>item1-2</li>
<li>item1-3</li>
</ul>
</span>
</li>
<li>menu2
<span class="subnav">
<ul class="subnav subnav-left">
<li>item2-1</li>
<li>item2-2</li>
<li>item2-3</li>
</ul>
</span>
</li>
</ul>
<ul class="topnav right">
<li class="right">menu3
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</span>
</li>
<li class="right">menu4
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</span>
</li>
</ul>
</div>
</body>
css:
body {
font-family: arial;
margin: 0;
}
.navbar {
height: 40px;
background-color: black;
}
ul.topnav {
margin: 0;
padding: 0;
}
.subnav {
position: absolute;
}
.subnav-right {
right: 0;
}
ul.subnav {
position: relative;
margin: 4px 0 0 -8px;
padding: 0;
display: none;
}
ul.topnav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
ul.subnav li {
background-color: red;
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
.topnav li:hover {
background-color: red;
}
.topnav li:hover ul.subnav {
display: inline-block;
background-color: red;
}
.nav ul li:hover {
background-color: black;
}
.nav ul li {
width: 100%;
}
.nav li ul {
display: inline-block;
clear: none;
position: absolute;
background-color: red;
margin: 4px 0 0 -8px;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
The jsfiddle:
jsfiddle.net/aLZqZ
Here is what I'm trying to accomplish:
image to nav menu
I got this for you http://jsfiddle.net/aLZqZ/99/. In under 100 tries, too. I became a little obsessed and spent at least 5 hours total. A good challenge for me and I have never really fiddled with sub navs before.
This issue was three fold:
Using float:right for a horizontal nav bar is usually not good in my experience because it causes unexpected issues, also it is negated and ignored by browsers if the same element is positioned relative or absolute (you had a lot of superfluous code, btw). I changed float:right to text-align:right where necessary. See this for horizontal nav I fixed for someone recently: Aligning/floating my nav bar to the right
The li element containing the sub menu was not positioned, therefore, the position:absolute and right:0 on the ul within it moves according to the closest containing element that is position:absolute or :relative. In this case there was not one so that element was html; thus the ul would be pushed all the way right to the end of the page. I added position:relative to these li elements which then made the right:0 behave as expected, but did not put all the li element on one line and stacked them instead.
You had tags with display:inline-block when :inline would have done it, but more importantly, no one ever really mentions that white-space:nowrap on the same elements to do what you are trying here is important. inline-block and nowrap together should force one line block like elements that you can align or float as whole as if they were a paragraph. BTW, IE7 needs some special attention for inline-block. See here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I made special css at the bottom of yours in your fiddle to separate the left and right navs, and I basically left your original css alone. I also adjusted the html a bit. Here it all is.
HTML for the right nav (follows the HTML for the left nav):
<ul class="rightNav">
<li>menu3
<ul class="rightSubNav">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</li>
<li>menu4
<ul class="rightSubNav">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
</ul>
CSS that I added to separate the right and left nav:
ul.rightNav {
margin:0;
padding:0;
text-align: right;
}
.rightNav li:hover {
background-color: red;
}
ul.rightNav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
position:relative;
}
ul.rightSubNav {
position: absolute;
right:0;
margin: 4px 0 0 -20px;
padding: 0;
display: none;
white-space:nowrap;
}
ul.rightSubNav li {
background-color: red;
list-style: none;
display: inline;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
}
.rightNav li:hover ul.rightSubNav {
display: inline-block;
background-color: red;
}
If this helped I would appreciate the up votes and answer select. If you figured something else out and got it working differently please post. I would love to see it.