I can't get the dropdown to align in the same row as the rest of the bar (code below). I tried working with margins and paddings but that doesn't help either. Any guidance would be appreciated.
I need the drop-down menu to be on the right corner of the bar. You don't have to do the code for me, but I am trying to figure if there are two different styles intersecting each other and causing this or what should I do next?
* {
margin: 0;
}
body {
background-color: #f2f2f2;
font-family: "Verdana";
}
.headDivider {
background-color: #ff7200;
color: #ffffff;
font-size: 30px;
line-height: 50px;
height: 63px;
vertical-align: middle;
padding-top: 3px;
}
.back {
border-radius: 13px;
font-family: "Verdana";
text-align: left;
color: #ffffff;
float: left;
font-size: 16px;
background: #7c7c7c;
padding: 10px 26px 10px 26px;
border: none;
display: inline-block;
margin-top: 10px;
margin-left: 10px;
}
.title {
text-align: center;
margin-right: 95px;
}
h1 {
text-align: center;
}
.topText {
font-size: 38px;
line-height: 270px;
color: #ff7200;
}
.bottomText {
line-height: 280px;
font-size: 38px;
color: #ff7200;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
text-align: right;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="headDivider">
<button type="button" class="back">Back</button>
<h4 class="title"> Viking Vote + </h4>
<div class="dropdown" style="text-align:right;">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
As one of the variants is to use flexbox for headDivider
.headDivider {
background-color: #ff7200;
color: #ffffff;
font-size: 30px;
line-height: 50px;
height: 63px;
vertical-align: middle;
padding-top: 3px;
display: flex;
justify-content: space-between;
align-items: center;
}
Here is the fiddle with this solution and small fixes for other elements
<div class="headDivider">
<div style="float:left;">
<table>
<tr>
<td>
<button type="button" class="back">Back</button>
</td>
<td>
<h4 class="title"> Viking Vote + </h4>
</td>
</tr>
</table>
</div>
<div style="float:right;">
<table>
<tr>
<td>
<div>
<button class="dropbtn">Dropdown</button>
</div>
</td>
<td>
<div class="dropdown" style="text-align:right;">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
Related
I am incredibly new to html and css, so please bear with me. I am attempting to make a website for two airbnb listings, and the webpage looks fine on a computer: Display on Webpage Here
However, on mobile, everything looks completely different: Display on Mobile Here
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.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-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column {
text-align: center;
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
flex-direction: column;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" style="width:450px;height:300px;margin:auto">View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" style="width:450px;height:300px;margin:auto">View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
</div>
<div class="row">
<div class="column">
Learn More
</div>
<div class="column">
Learn More
</div>
</div>
</body>
</html>
Is there any way that I can make it so this doesn't occur and the mobile browser looks similar to the desktop? What are my alternatives if this is impossible?
I'd recommend using flexbox instead of floats, which are an older and less efficient way to do your layout. In the code below I stacked the airbnb frames vertically for mobile and tablet view, then horizontally for desktop like you had them. I had to rearrange some of your html code to achieve this, and use media queries. It was easier for me to use style tags to add the CSS for this example. I also had to change the width of the airbnb-embed-frame and remove the inline style rules in the html for that, as the 450px width was causing problems with the layout in mobile view. I tried to put the code in the example setting for the answer but it wasn't showing the airbnb frames. I hope this answer is satisfactory, this is kind of my take on how I'd like to make it look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<style>
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.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-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media (min-width: 1024px) {
.row{
display: flex;
justify-content: space-around;
}
}
.airbnb-embed-frame{
width: 300px;
margin: auto;
}
#media (min-width: 768px) {
.airbnb-embed-frame{
width: 450px;
}
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.column-2{
margin: 30px;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" >View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" >View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
</div>
</body>
</html>
I'm doing a site in Shopify and I'm using supply theme, I want to use my own menu instead of using Shopify menu. I wrote code in HTML and CSS but I was wondering if it is possible for someone to help me to change following code in liquid because my friend does not know any HTML and CSS and for him, it's easier to change it through the liquid.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
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: red;
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;
}
</style>
</head>
<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">
<h2>Mega Menu</h2>
</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>
<div style="padding:16px">
</div>
</body>
</html>
Even though I agree with drip's comment:
StackOverflow is not a "Write the code for me" platform.
Here is some helpful information, Liquid is templating language and there are many places to get you started with Liquid:
Shopify - Liquid reference
Shopify - Getting started Guide
Shopify Partners Blog - Learning Liquid
I am having an issue with the second level menu only in Safari. Top level and submenu work fine on mouse hover on chrome, firefox etc but when opened in Safari, only first menu is opening on hover. I have already tried other solutions available here and on other forums but it's still same.
.nav {
margin: 2% 10% 0 35%;
/*margin-bottom: 4px;
margin-top: 2%;
margin-left: 35%;
margin-right: 10%;*/
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family:"Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {
/*padding-left: 30px;*/
padding-left: 0px !important;
margin-left: 30px;
}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
margin-left: -200px;
margin-top: -50px;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
margin-left: 200px !important;
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css"/>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have included the HTML and CSS code for the menu. I have also checked it on chrome using windows OS, and it works but the only issue is with safari browser.
There are a couple of suggestions I have that may help.
Firstly, I would not recommend using position: fixed; to position your submenus because fixed is a position relative to the browser window. You likely want the submenus to be positioned according to the parent, not the window.
Secondly, you have overflow: hidden; on .navbar-nav, which means anything that falls outside the borders of it should be invisible - which would include your submenus.
Here is a JSFiddle with a working example of your snippet with my suggestions, tested and working in Safari:
.nav {
margin: 2% 10% 0 35%;
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family: "Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: relative;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: absolute;
top: 0;
left: 100%;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/m59vk802/4/
I am making a website with a navigation menu on the top. I have multiple buttons with dropdown menus. I want to make the buttons in all in a row at the same height and I want the buttons to be in the middle. Here is my code:
/* Links CSS */
a,
a:visited,
a:active {
text-decoration: underline;
color: white;
}
a:hover {
color: red;
text-decoration: underline;
}
/* Element CSS */
html,
body {
margin: 0px;
background-color: white;
}
html {
height: 100%;
width: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
padding-bottom: 6rem;
min-height: 100%;
}
.button,
.games,
.programs,
.apps,
.misc {
font-family: 'Arsenal';
font-size: 18px;
text-decoration: underline;
background: transparent;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1.5%;
padding-right: 1.5%;
cursor: pointer;
border: 0px;
}
.content {
font-family: 'Arsenal';
font-size: 15px;
text-decoration: none;
background-color: white;
border: 0px;
cursor: pointer;
}
.button:hover,
.content:hover,
.games:hover,
.programs:hover,
.apps:hover,
.misc:hover {
background-color: #f0efef;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 0.5%;
}
.games-dropdown {
position: relative;
display: inline-block;
}
.progams-dropdown {
position: relative;
display: inline-block;
}
.apps-dropdown {
position: relative;
display: inline-block;
}
.misc-dropdown {
position: relative;
display: inline-block;
}
.show {
display: block;
}
/* Div CSS */
#page {
margin-top: 0px;
}
#title {
font-family: 'Arsenal';
font-size: 37px;
padding-top: 0.5%;
color: black;
display: inline-block;
cursor: pointer;
}
#links {
margin: auto;
display: inline-block;
overflow: auto;
}
#content {
background-color: white;
border: 1px solid black;
border-radius: 3px;
margin-left: 10%;
margin-right: 10%;
box-shadow: 1px 1.5px #8f8f8f;
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #f0efef;
text-align: center;
border-top: 1px solid black;
font-family: 'Arsenal';
font-size: 15px;
}
<!-- HTML -->
<center>
<div id="links">
<!-- Code For Dropdown Menus | Code From http://www.w3schools.com/ | Thanks To Them!-->
<!-- Games Dropdown Menu: Browser and Downloadable-->
<div class="programs-dropdown">
<button class="programs" onclick="games()" title="Games">Games</button>
<div id="gamesDropdown" class="dropdown-content">
<button class="content" onclick="download()">Download</button>
<button class="content" onclick="online()">Online</button>
</div>
</div>
<!-- Programs Dropdown Menu: Windows and Max OS X-->
<div class="programs-dropdown">
<button class="programs" onclick="programs()" title="Programs">Programs</button>
<div id="programsDropdown" class="dropdown-content">
<button class="content" onclick="windows()">Windows</button>
<button class="content" onclick="mac()">Mac OS X</button>
</div>
</div>
<button class="button" onclick="websites()" title="Websites">Websites</button>
<button class="button" onclick="home()" title="Home">Home</button>
<!-- Apps Dropdown Menu: IOS and Android -->
<div id="apps-dropdown">
<button class="apps" onclick="apps()" title="Apps">Apps</button>
<div id="appsDropdown" class="dropdown-content">
<button class="content" onclick="ios()">IOS</button>
<button class="content" onclick="android()">Android</button>
</div>
</div>
<button class="button" onclick="blog()" title="Blog">Blog</button>
<!-- Misc. Dropdown Menu: Chrome Extensions, GitHub, Etc.-->
<div id="misc-dropdown">
<button class="misc" onclick="misc()" title="Misc.">Misc.</button>
<div id="miscDropdown" class="dropdown-content">
<button class="content" onclick="chrome()">Chrome Extensions</button>
<button class="content" onclick="github()">GitHub</button>
</div>
</div>
</div>
</center>
The easiest way to center elements is to use flexbox.
You can learn about it more at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Using flexbox to center elements is actually quite simple. Assuming you have set of elements:
<div class="elements">
<div class="element__item">Element one</div>
<div class="element__item">Element two</div>
<div class="element__item">Some other element</div>
</div>
You can center them horizontally & vertically using css like this:
.elements {
display: flex;
justify-content: center;
align-items: center;
}
You can check this on JSfiddle: https://jsfiddle.net/kf405784/
I was able to build my first veterinarian Angular app with three partial templates and a dropdown menu using tutorials and SO's community great feedback, so I am very happy! :)
Intro page:
However, when I select "employees", I get my whisker box plots that block the dropdown menu:
I assume it's a matter of CSS, but I have been stuck for quite a while and would greatly appreciate the community's feedback.
Moreover, if I may ask, how could I have the menu button on the far right, same height as the topBanner with the dropdown menu aligned with the right edge (instead of the left edge as shown)? Thank you very much!
My webform:
...
<body onload="loadPikaday()" data-ng-app="myModule">
<%-- Header --%>
<div id="topBanner" class="topBanner">
<div id="menu" class="menu">
Report from:
<input id="startDate" size="6" type="text" data-ng-model="startDate" /> To
<input id="endDate" size="6" type="text" data-ng-model="endDate" />
<%-- Dropdown menu --%>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">MENU</button>
<div id="myDropdown" class="dropdown-content">
Cases
Protocols
Employees
</div>
</div>
</div>
</div>
<%-- Where html is injected--%>
<div id="currentPage" class="currentPage">
<div data-ng-view=""></div>
</div>
<%-- Footer --%>
<div id="footer" class="footer">Veterinary Application</div>
</body>
...
my CSS file:
body,html{
margin: 0;
padding: 0;
}
.topBanner{
width: 100%;
background-color: #BDBDBD;
}
.menu{
text-align: left;
font-size: 40px;
font-family: Arial;
padding-bottom:5px;
padding-top:5px;
}
#startDate, #endDate{
font-size: 40px;
}
#button{
font-size: 40px;
}
.currentPage{
background-color: #E6E6E6;
width: 100%;
}
.footer{
font-size: 30px;
font-family: Arial;
background-color: #BDBDBD;
text-align: center;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}