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;}
Related
I've created a website and the footer on the main page is alright on the bottom of the page. But the footer on other pages is in the middle of the page. On this page are actually two divs aligned next to each other and it looks like the footer is between them. I've tried everything I found on other questions like this (I mean position: absolute, relative, fixed) and nothing could move the footer on the bottom of the page. I'm very beginner in HTML and CSS, so I'm sorry if there are more problems in my code.
Here is my html code:
<div class="kontaktujte_nas">
<form class="kontaktni_formular" action="kontaktni_formular.php" method="POST">
<label for="jmeno">Celé jméno</label>
<input type="text" id="jmeno" name="jmeno" placeholder="Jan Novák">
<label for="email">Váš Email</label>
<input type="email" id="mail" name="mail" placeholder="jan.novak#email.cz">
<label for="predmet">Předmět</label>
<input type="text" id="predmet" name="predmet">
<label for="zprava">Zpráva</label>
<textarea id="zprava" name="zprava"></textarea>
<button type="submit" name="odeslat">ODESLAT</button>
</form>
<div class="kontaktni_informace" style="background-image: url(assets/icons/adresa.png);">
<span class="k_informace">Horní Domaslavice 293, 73951</span>
</div>
<div class="kontaktni_informace" style="background-image: url(assets/icons/mail.png);">
<span class="k_informace">info#bohmen.cz</span>
</div>
</div>
And my css:
body {
background-color: #212121;
}
.kontaktni_informace {
width: 40%;
float: right;
background-color: black;
background-repeat: no-repeat;
display: block;
margin-top: 40px;
}
.k_informace {
font-family: CovesLight;
font-size: 18px;
font-weight: bold;
padding: 8px 0px 8px 45px;
display: block;
color: #888888;
}
.kontaktujte_nas {
width: 50%;
margin: 0px auto;
padding-top: 40px;
display: block;
}
.kontaktni_formular {
font-family: TeXGyreAdventorRegular;
float: left;
width: 40%;
margin-top: 0px;
}
.kontaktni_formular input, textarea {
display: block;
width: 100%;
font-size: 16px;
padding: 7.5px;
border: 4px solid #888888;
}
.kontaktni_formular label {
display: block;
padding: 15px 0px 2.5px;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
}
.kontaktni_formular button {
font-family: TeXGyreAdventorRegular;
font-size: 18px;
margin-top: 15px;
padding: 5px 10px;
cursor: pointer;
margin-right: auto;
margin-left: auto;
display: block;
float: right;
}
.page_title {
margin-top: 0px;
text-align: center;
}
.title span {
font-size: 48px;
font-family: TeXGyreAdventorRegular;
color: #ffffff;
letter-spacing: 5px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
footer {
font-family: TeXGyreAdventorRegular;
text-align: center;
background-color: #111111;
padding: 5px;
color: #ffffff;
width: 100%;
}
.copyright {
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
Try adding overflow: auto; to .kontaktujte_nas
You probably want something like this: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
Found by googling "footer at the bottom of the page" ;)
I believe your problem has been resolved.
But a quick review of your website which I think might help you now and forever:
Try following a semantic structure e.g let the header tag do the job of a heading just as you have the footer and let the main tag handle the remaining content e.g aside and so on.
So basically, i see you have some navigation elements but they are not inside a form of header=>nav=>ul, let that navigation elements at the topest of your page go into the header tag and let the lis go into the ul tag and let the ul go into the nav tag eg:
<header>
<nav>
<ul>
<li>
<a href=".../home">
Home
</a>
</li>
</ul>
</nav>
</header>
The reason why following a standard structure is because they abide by a rule that is been considered when building accessibility tools e.g screen-reader for disable people. And if you dont follow this standard, you will drain yourself either not doing it or doing it imperatively.
So in summary a body holds the header,the main and the footer.
Happy coding, cheers 😉🍺
EDIT: The background is simply an image & the section where I place the image is the one I have given
My webpage currently looks like this and I have indicated where I want the button, however I'm very new to coding in general and not sure how to achieve this.
Picture of website page:
This is my html code, very simple just needed to add the button
<section class="slide kenBurns">
<div class="content">
<div class="container">
<div><p class="ae-2">
</p></div>
<div class="wrap">
<div class="fix-7-12">
<!-- <h1 class="ae-1">Messes Make Memories</h1> -->
</div>
</div>
</div>
</div>
<img
src="assets/img/background/flood2.png"
width="1450"
height="850"
></img>
</section>
well, try this one code
<!DOCTYPE html>
<html>
<head>
<style>
.img {
width:100%;
height: auto;
top:0;
left:0;
position: relative;
z-index: 1;
}
.anybutton {
top:11%;
left:55%;
width:100px;
height:40px;
position: absolute;
z-index: 2;
background: orange;
}
</style>
</head>
<body style="text-align:center; margin: 0px;">
<div class="mycenter" id="">
<img src="assets/img/background/flood2.png" class="img" id="img" />
<input type="button" class="anybutton" id="myab" value="Right Here" />
</div>
</body>
</html>
There 2 types of a buttons
There the real button. Its used to fire an event for JavaScript. It works as in the example below and can by styled like below. You can insert it whereever you want.
button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
cursor: pointer;
}
<button id="ID">I'm a Button</button>
Then there is the Pseudo-Button. Its not a real button. It is just a div box to style a link like a button:
.button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
text-align: center;
}
<div class="button">I'm a Button</div>
Insert a <button> tag in the same parent div which has code for this particular section
Set the css property of the parent element to position: relative
Set the css property for the <button> to position: absolute
Lastly, use
top : 40px;
right : 100px;
for the css property of button tag
Note: Change the value of top and right property as per convenience.
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
<button class="button button3">Button 3</button>
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
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 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>
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/