I am trying to code a menu with a mega menu option.
The top level links have an underline animation.
If the top level nav has a mega class, the mega menu container shows, but the underline animation does not.
If I lower the mega menu container, the animation does show, but as soon as the mouse moves off the top link into the container, the container hides as there is a gap because the un-hover switches it off.
Also, moving right from the top level from Option1 to Option 2, nav hides the mega container and the animation shows(correct), but moving right to the Sign In link does not hide the mega container or do the animation.
body #mainMenu {
background-color: #fff;
height: 80px;
position: absolute;
top: 0px;
left: 0;
width: 100%;
padding: 10px;
align-items: center;
display: flex;
padding-left: 40px;
padding-right: 40px;
}
#menuOptions {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
position: relative;
width: 100%;
padding: 0;
list-style-type: none;
font-size: 12px;
font-weight: 400;
}
#menuOptions li {
display: flex;
}
#menuOptions li a {
color: #000;
}
#menuOptions li a:link {
text-decoration: none;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: red;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.mega-container {
display: none;
position: absolute;
top: 0px;
left: 0;
height: 120px;
width: 100%;
}
.mega:hover .mega-container {
display: block;
padding-top: 30px;
}
.mega-menu {
background-color: yellow;
height: 100px;
padding: 60px;
}
<html>
<head>
<title>Mega Menu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id='mainMenu'>
<ul id='menuOptions'>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Sign In</a></li>
<li class='mega'><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 1</a>
<div class='mega-container'>
<div class='mega-menu'>
<p>This is mega menu 1</p>
</div>
</div>
</li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 2</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 3</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 4</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 5</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 6</a></li>
</ul>
</nav>
</body>
</html>
try below code for animation with mega menu using css only.
set column in menu using float and width property of css or you can use table also.
you can use font.awesome style or html entity for icon of submenu.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: skyblue;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h4>Mega Menu</h4>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
Related
I'm pretty new to web coding, but working currently on a small project for a community of mine, where I try to create a small simple website with basic information.
My issue here is I can't get to work with my dropdown menu, it wont show on hove over or show my dropdown menu, but once I remove button my dropdown menu will work proberly.
body {
font-family: Arial;
}
/* used # is id="" under html code */
/* used . is class="" under html code */
/* Change value inside #navbar, will change style on main menu */
#navbar {
overflow: hidden;
position: fixed;
list-style-type: none;
top: 0;
width: 100%;
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
#navbar a {
float: left;
display: block;
color: #732119;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 12px;
}
#navbar a:hover {
background: #F2CDA0;
color: #732119;
opacity: 0.7;
}
/* Change value inside navdown, will change style on Dropdown menu */
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 0;
outline: 0;
padding: 10px 10px;
background-color: inherit;
color: #732119;
}
.dropdown-content {
display: none;
position: absolute;
background-color: inherit;
min-width: 140px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: #732119;
padding: 10px 10px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover .dropbtn {
background: #F2CDA0;
color: #732119;
}
/* Change value inside this, will change logo on the site */
#img_center {
display: block;
margin-right: auto;
margin-left: auto;
}
/* Center everything on the side inside <table> */
#table_main {
margin-left: auto;
margin-right: auto;
}
/* Footer style, customize footer bar here */
#footer {
position: fixed;
text-transform: uppercase;
text-align: center;
font-size: 12px;
font-weight: bold;
color: black;
left: 0;
bottom: 0;
width: 100%;
}
#h2_headertext {
font-size: 16px;
text-transform: uppercase;
}
<table id="table_main">
<tr>
<td>
<!-- Main Menu -->
<ul id="navbar">
<li>Forside</li>
<li>Bliv Medlem</li>
<li>Medlemsfordele</li>
<!-- Dropdown Menu -->
<div class="dropdown">
<button class="dropbtn">Information</button>
<div class="dropdown-content">
Vedtægter
Regler
Hvem er vi
Bestyrelsen
</div>
</div>
<li><a class="active" href="#kontakt">Kontakt</a></li>
</ul>
<!--Center picture of the side -->
<div id="img_center">
<img src="images/logo.png" alt="">
<h2 id="h2_headertext">Velkommen</h2>
</div>
</td>
</tr>
</table>
<div id="footer">
<p>Copyright 2022</p>
</div>
Please study the following model code carefully. It shows the principle of a dropdown menu on CSS . There is literally nothing there. Learn to understand how it works.
ul,
li {
list-style: none;
padding: 0;
}
.submenu {
display: none;
}
.item:hover>.submenu {
display: block;
}
<ul class="menu">
<li class="item">
Hover me!
<ul class="submenu">
<li class="subitem">subitem1</li>
<li class="subitem">subitem2</li>
<li class="subitem">subitem3</li>
</ul>
</li>
</ul>
I have an unordered linked list. I'm trying to shift one of the items in the navigation all the way to the right (Order) as if it had text-align: right;. I tried using float: right; and text-align: right;, but none of them seemed to work. If I set the margin-left to a really high number (such as 100px) it does shift to the right, but if I resize my window then I can't see it anymore or it's not on the right side of the page. Here is the HTML:
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks!
Assuming you're looking to move your .order element, you'll want to apply the float: right rule to the parent (<li>) element. I've added a class to this, .order-container, to make this easier to achieve in the following example.
Note also that once you float to the right, it will be off the screen by default. You'll want to set a negative margin-right to circumvent this. I've gone with margin-right: -10em in the following, to match the offset from the image on the left.
Ultimately, you may wish to consider using a framework to achieve responsive design, ensuring that the offset is correct regardless of screen size.
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
float: right;
}
.order-container {
float: right;
margin-right: 10em;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="order-container">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
MDN still advises that <div> is not a valid child of <ul>. Furthermore float adds a whole heap of side effects by removing the items from the natural flow of the document. To modernize this we can make use of display:flex
/*Normalise body*/
body {
margin:0;
}
/*Set flex on the nabar top position logo and links*/
.navbar {
display: flex;
}
/*Ad a maring to the logo link*/
.navbar > a:first-of-type {
margin-left: 5em;
}
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
/*Ad flex to the nav link element*/
display: flex;
/*Vertically center the links*/
align-items:center;
}
/*Push the last element right but give it a little margin to the right*/
.navbar ul>li:last-of-type {
margin-left: auto;
margin-right:1em;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
}
.navbar a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
You should use media queries for making navbar responsive.
a {
text-decoration: none;
color: black;
}
.navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
border-bottom: solid 1px black;
}
.div-links {
display: flex;
align-items: center;
width: 70%;
}
.nav-links {
width: 100%;
display: flex;
justify-content: end;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-links li {
padding: 2rem;
}
.nav-items {
width: 30%;
display: flex;
justify-content: space-around;
}
.order {
overflow: hidden;
color: #ffffff !important;
background: #1419e2;
text-decoration: none;
padding: 0.8rem;
border-radius: 5px;
}
<div class="navbar">
<a href="glacier_hills.html">
<img
src="Images/Glacier-Hills-Logo.svg"
alt=""
width="182"
height="90"
/>
</a>
<div class="div-links">
<ul class="nav-links">
<div class="nav-items">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="btn">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
</div>
I am currently trying to make a (responsive) navigation bar, and while I have already troubleshooted with it a lot I can't find my way through it. :(
I have 2 issues at the moment.
1) In wide screen, I want to center the dropdown under its "button" title.
2) In smartphone/tablet screen, I want to make the dropdown, when appearing, push down the rest of the "button" titles and not covering them.
About 1, I have tried changing right and left attributes of the dropdown list but it justs sticks to the side of the screen no matter the changes I make to the position of dropdown list and parent element.
About 2, I have messed around with position but still I can't make it work as if it was static.
Ideally I would like to use just HTML and CSS.
Here is a demo: https://jsfiddle.net/SteliosKts/01o6cem5/10/
PS.I am sorry if it's a repost, it's just that I can't solve my prolbem although I have checked most of the relative threads
You need to:
remove position:absolute; from the .dropdownItem:hover .dropdownList.
change display: block; to display: inline-block; in .dropdownList.
remove max-height: 55px in li:nth-child(n + 2)
Add flex-basis: 30px; for mobile view.
html,
body {
font-size: 100%;
margin: 0px;
padding: 0px;
height: 100vh;
width: 100vw;
align-content: center;
text-align: center;
overflow-y: auto;
}
* {
box-sizing: border-box;
}
/*------------Top Header & Logo------------*/
#background_Header {
display: inline-block;
background-color: #9a999b;
width: 350px;
height: 100px;
}
#vertical_top_header_placeHolder {
float: left;
background-color: #9a999b;
width: 100%;
height: 45px;
position: absolute;
}
/*------------------------------------------*/
/*-------------------Navgiation Bar---------------*/
ul {
list-style-type: none;
display: flex;
justify-content: center;
/*border: 1px solid black;*/
padding-left: 0px;
}
li {
/* required for logo positioned in center */
flex-basis: 90px;
padding-top: 10px;
padding-right: 0px;
/*border: 1px solid black;*/
}
li a:hover {
background-color: #f1f1f1
}
li:first-child,
li:nth-child(n + 5) {
order: 3;
}
li:first-child {
flex-basis: auto;
z-index: 1;
}
li:nth-child(n + 2) {
padding-top: 65px;
}
li:nth-child(6) {
padding-top: 55px;
}
.dropdownItem:hover .dropdownList {
display: inline-block;
}
.dropdownButton {
display: inline-block;
text-align: center;
text-decoration: none;
color: black;
}
.dropdownList {
display: none;
position: relative;
background-color: #d6d6d6;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdownList a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*---------------------------------------------------*/
/*---------------Smartphone Header Style---------------*/
#media only screen and (max-width: 600px) {
li:first-child {
background-color: #9a999b;
}
li {
flex-basis: 30px;
}
#vertical_top_header_placeHolder {
display: none;
}
}
/*-----------------------------------------------------*/
/*---------------Vertical Navigation Style---------------*/
#media only screen and (max-width: 900px) {
ul {
flex-direction: column;
}
.dropdownItem {}
.dropdownButton {}
.dropdownList {
margin: 0 auto;
width: 100%;
}
li {
flex-basis: 30px;
}
li:first-child,
li:nth-child(n + 5) {
order: 0;
}
li:nth-child(n + 2) {
padding-top: 10px;
}
}
/*--------------------------------------------------------*/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,greek" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,greek-ext,greek" rel="stylesheet" type="text/css" />
</head>
<body>
<!--<div id="vertical_Conteiner">-->
<div id="vertical_top_header_placeHolder"></div>
<nav>
<ul>
<li>
<div id="background_Header">
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 1
</a>
<div class="dropdownList">
T1I1
T1I2
T1I3
T1I4
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 2
</a>
<div class="dropdownList">
T2I1
T2I2
T2I3
T2I4
T2I5
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 3
</a>
<div class="dropdownList">
T3I1
T3I2
T3I3
T3I4
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 4
</a>
<div class="dropdownList">
T4I1
T4I2
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 5 BigWord
</a>
<div class="dropdownList">
T5I1
T5I2
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 6
</a>
<div class="dropdownList">
T6I1
Team6_BigItem2
T6I3
T6I4
T6I5
</div>
</li>
</ul>
</nav>
<article>
<div>
</div>
</article>
</body>
</html>
Just remove the absolute from here and you will see the dropdown list in large screen some below your button and in small screen too it will come below the button:
.dropdownItem:hover .dropdownList {display: block;/* position: absolute; */}
I am new to CSS, building this calendar i made this, i need this calendar to fit into a JSP page.
This spans the whole page. can anyone suggest how to make resizable
Also when i have to make boxes empty to move the 1st of the month to
the day of the week as the boxes move up and down. What can be done
to fix that
Is there a better way to do this, need this a in this way with tool
tip. Thanks for looking.
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
body {
font-family: Verdana, sans-serif;
}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
height: 75px;
text-align: center;
margin-bottom: 20px;
font-size: 17px;
border: 3px solid #73AD21;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
#media screen and (max-width:720px) {
.weekdays li,
.days li {
width: 13.1%;
}
}
#media screen and (max-width: 420px) {
.weekdays li,
.days li {
width: 12.5%;
}
.days li .active {
padding: 2px;
}
}
#media screen and (max-width: 290px) {
.weekdays li,
.days li {
width: 12.2%;
}
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head/>
<body>
<h1>CSS Calendar</h1>
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li style="text-align:center">
August<br>
<span style="font-size:18px">2016</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days">
<li> </li>
<li>1<br><br>$1.25
</li>
<li>2<br><br>$1.25
</li>
<li>3<br><br>$1.25
</li>
<li>4<br><br>$1.25
</li>
<li>5<br><br>$1.25
</li>
<li>6<br><br>$1.25
</li>
<li>7<br><br>$1.25
</li>
<li>8<br><br>$1.25
</li>
<li>9<br><br>$1.25
</li>
<li>10<br><br>$1.25
</li>
<li>11<br><br>$1.25
</li>
<li>12<br><br>$1.25
</li>
<li>13<br><br>$1.25
</li>
<li>14<br><br>$1.25
</li>
<li>15<br><br>$1.25
</li>
<li>16<br><br>$1.25
</li>
<li>17<br><br>$1.25
</li>
<li>18<br><br>$1.25
</li>
<li>19<br><br>$1.25
</li>
<li>20<br><br>$1.25
</li>
<li>21<br><br>$1.25
</li>
<li>22<br><br>$1.25
</li>
<li>23<br><br>$1.25
</li>
<li>24<br><br>$1.25
</li>
<li>
<div class="tooltip">25<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">26<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">27<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">28<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">29<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">30<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">31<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
</ul>
</body>
</html>
I am not sure if this is what your are looking for.
Used vertical-align: bottom to fix the box alignment.
Horizontally centered the calendar in the page using margin: 0 auto.
https://jsfiddle.net/yxhgq1tz/3/
.wrapper {
width: 500px;
margin: 0 auto;
}
To center it vertically. there are couple of options.
Using css3 flexbox.
Using vertical-align: middle along with display: table
I've made a website for a school project and want to improve the design a little more. I think the logo makes the header a little bit to big. So I want to move my navbar from under the header to inside the header, to make it look smaller. That's all. I'll post the code and photos underneath.
This is how it looks now
How I want it to be
/* -----------------------
Layout
------------------------*/
.container {
max-width: 70em;
margin: 0 auto;
}
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
}
.header-heading {
margin: 0;
max-width: 300px;
margin-left: 400px;
max-height: 300px;
}
.nav-bar {
background: #e9f1f1;
padding: 0;
}
.content {
overflow: hidden;
padding: 1em 1.25em;
background-color: #fff;
}
.main,
.zijkant {
margin-bottom: 1em;
}
.footer {
color: #fff;
background: #656565;
padding: 1em 1.25em;
}
/* -----------------------
Navbar
------------------------*/
.nav {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Open Sans Condensed', sans-serif;
}
.nav li {
display: inline;
margin: 0;
}
.nav a {
display: block;
padding: .7em 1.25em;
color: #black;
text-decoration: none;
border-bottom: 1px solid gray;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:focus {
color: black;
background-color: white;
}
.nav a:hover {
color: black;
background-color: #eededb;
}
.nav a:active {
color: white;
background-color: #f4ebe9;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="stylesheet" href="etc/css/styles.css">
</head>
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "-20%"
}
</script>
<body onload="zoom()">
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
</html>
Put the image container and navbar in the same container:
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
Give the header position relative and the position the navbar using absolute positioning:
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
position: relative;
}
.nav-bar{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;//adjust to center vertically
width: 300px;//adjust to your liking
}
You have to set a height to nav-bar in order to make sure it is centered vertically