Hello I added a bottom navigation bar in HTML and CSS code on my webpage but I want have that centered on the bottom of the website any help and solutions is greatly appreciated I have attached screenshots of the HTML, CSS codes and the webpage of where I have my navigation bar currently in the left hand side thanks very much in advance.
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
<div class="navbar">
About
Contact
Facebook Page
</div>
HTML navbar code
CSS navbar code
webpage navbar
Just Replace your CSS code with below css code:
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
and your HTML with this code:
<div class="navbar">
<div class="navbar-inner">
About
Contact
Facebook Page
</div>
</div>
Hope this code will work as you expect ..
Add to .navbar:
text-align:center;
Delete from .navbar a:
float: left;
Update in .navbar a:
display: inline-block;
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #DDA0DD;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="navbar">
About
Contact
Facebook page
</div>
<div class="main">
<h1>Bottom Navigation Bar</h1>
<p>Some text some text some text.</p>
</div>
</body>
</html>
How to center a nav-bar at the bottom of a page
Related
I might be missing something blatantly obvious but for some reason, I cannot get my dropdown nav menu to center underneath my flavors button without it dragging the entire header down with it. I'm not sure how to proceed, it's not a major issue as it's nothing that's going to take away from what I'm trying to display but it would be a lot cleaner if it wouldn't do what it's doing.
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-image: url("https://i.imgur.com/dxqafWb.png");
background-repeat: repeat;
background-size: auto;
background-blend-mode: soft-light;
background-color: #AAAAAA;
}
.navbar a {
font-size: 16px;
color: #330300;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #330300;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: darkgray;
}
.dropdown-content {
display: none;
position: relative;
background-image: url("https://i.imgur.com/dxqafWb.png");
background-position: center;
background-repeat: repeat;
background-size: auto;
background-blend-mode: soft-light;
background-color: #AAAAAA;
min-width: 160px;
max-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: #330300;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: darkgray;
}
.dropdown:hover .dropdown-content {
display: block;
}
.logo {
max-width: 50%;
height: auto;
float: none;
text-align-last: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>VapeJoose</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<center>
<header class="header">
<div class="navbar">
<div class="logo">
<img src="css/img/logo.png" class="logo">
</div>
Home
About Me
Contact Me
Order Search (Coming Soon)
<div class="dropdown">
<button class="dropbtn">Flavors
</button>
<div class="dropdown-content">
Fruit Flavors
Desert Flavors
Cereal Flavors
Candy Flavors
Beverages Flavors
Menthol Flavors
Tobacco Flavors
</div>
</div>
</div>
</header>
<!-- ^ header ^ -->
</center>
<p>test</p>
</body>
<footer>
</footer>
</html>
.dropdown-content have position: relative. Make it absolute and if you want to center it relative to .dropdown you need also add this:
.dropdown {
position: relative;
}
.dropdown-content {
left: 50%;
transform: translateX(-50%);
}
And don't forget to remove overflow: hidden from parents of .dropdown-content, else your .dropdown-content block would be hidden.
I'm trying to make scroll nav like youtube nav
I want to make the scroll-horizontal div get the width of the inline-block elemtns which is <li>
I want someway to make the scroll-horizontal div get the current width automatically even if I added more <li> elements to the nav later
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item">Models</li>
<li class="menu-item">Photos</li>
<li class="menu-item">Videos</li>
<li class="menu-item">Youtube</li>
<li class="menu-item">Links</li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>
the nav that youtube has:
youtube nav
you can see that the nav that they had don't have empty space at the end of the nav like what I have
this might partly answer your question:
As I understand it, the horizontal scroll arrows for the tab menu on youtube are shown, depending on the window width. So I would use the css '#media' rule to specify the width, when the arrows should be displayed. Here is a solution that displays both left and right arrows as soon as the window gets too narrow to display the complete menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
one
two
three
four
five
six
seven
eight
nine
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>
I am creating a web page with HTML and CSS, however, when I created the footer CSS it appears in the middle of the page. I've gone through w3Schools but I couldn't find anything on it.
The footer should be on the bottom of the page. However, it is in the middle.
I'd like it to keep it on the bottom of the page as a footer should do.
Would anyone know how to fix this issue?
I've attached my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="The Dusty Garage">
<title> The Dusty Garage </title>
<style>
html,
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva, Tahoma, sans-serif;
}
#wrapper {
margin: auto;
width: 100%;
max-width: 100%;
}
#navigationbar {
clear: both;
height: 50px;
max-width: 100%;
background-color: cornflowerblue;
}
#companyname {
margin: 0;
float: left;
padding: 5px;
font-size: 12px;
text-decoration: none;
}
#companyname a {
color: black;
text-decoration: none;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
nav ul li {
color: #fff;
display: block;
float: left;
padding: 1rem;
border-right: 1px solid #bbb;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
nav ul li a {
display: block;
text-decoration: none;
color: white;
}
nav ul li:hover,
nav ul li:focus-within {
background-color: royalblue;
cursor: pointer;
}
nav ul li:focus-within a {
outline: none;
}
nav ul li ul {
background-color: cornflowerblue;
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
white-space: nowrap;
}
nav ul li:hover>ul,
nav ul li:focus-within>ul,
nav ul li ul:hover,
nav ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
nav ul li ul li {
background-color: cornflowerblue;
width: 100%;
display: inline-block;
}
nav li:last-child {
border-right: none;
}
nav .active {
background-color: black;
}
/* Navigation CSS End */
/* Banner Image CSS Start */
.hero {
height: 70vh;
display: block;
justify-content: center;
align-items: center;
text-align: center;
color: white;
background-image: url(https://memberpress.com/wp-content/uploads/2015/06/Google-tools#2x-1.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.hero>* {
color: black;
}
.hero>h2 {
font-size: 3rm;
padding-bottom: 20rem;
text-align: center;
vertical-align: middle;
}
/* HERO IMAGE BANNER END */
/* START SECTION CSS FOR BROWSE AND SELL */
.browsesellarea {
display: flex;
flex-wrap: wrap;
}
/* Heading Style */
.browsesellarea-heading {
position: absolute;
margin-top: 0;
}
.browsesellarea-area {
flex: 1 0 500px;
box-sizing: border-box;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
margin: 3rem .5rem .5rem .5rem;
padding: .1rem .1rem .1rem .1rem
}
.browsesellarea-area img {
display: block;
border: black;
width: auto;
height: 290px;
padding: .1rem .1rem .1rem .1rem
}
/* END BROWSE-SELL CSS */
/* START FOOTER CSS */
.footer {
display: flex;
align-items: center;
justify-content: center;
background-color: cornflowerblue;
color: white;
margin: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<!---Contains Navigation and Logo-->
<header>
<div id="navigationbar">
<div id=companyname>
<a href="#">
<h1>The Dusty Garage</h1>
</a>
</div>
<nav>
<ul>
<li>
Home
</li>
<li>
Browse Tools
<ul>
<li>
Browse Tools
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<h2>Find the Perfect Tool</h2>
</section>
<main>
<!---Contains Main Content-->
<div class="goal-heading">
<h1>Our Aim</h1>
</div>
<p> The Aim of this project is to develop a peer to peer marketplace for used and new tools. Many people own tools they don’t use anymore, so instead of gathering dust in the garage, this marketplace aims to give old tools a new lease on life. From
garden to industrial tools, users can list tools they own for sale and make bids on other user’s listed tools. Users can see a list of bidders and contact the user who has made the most appealing bid, for transaction outside the website. Once
a sale has been made, all the seller needs to do is mark the item as sold .</p>
<section class="browsesellarea">
<section class="browsesellarea-heading">
<h2>Looking for Tools?</h2>
<div class="browsesellarea-area">
<img src="Images/2925.jpg" alt="Browse Tools to Buy" />
</div>
<button>Browse Categories</button>
<h2> Got a shed full of dusty tools?</h2>
<div class="browsesellarea-area">
<img src="Images/10975.jpg" alt="Browse Tools to Buy" />
</div>
<button>Sell Your Tools Here</button>
</section>
</section>
</main>
</div>
<!-- FOOTER -->
<footer class="footer">
<div>
<p>Copyright © 2019</p>
</div>
</footer>
</body>
</html>
Remove position: absolute from .browsesellarea-heading class. Because of this the footer is not coming on bottom
I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.
JSFiddle - With Information
JSFIDDLE - Without Information
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<h2>CSGOMarble</h2>
<u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
<p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want.
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
z-index: 2;
position: fixed;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
z-index: 1;
}
Change this Css Hope it helps
Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.
The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).
Change position:fixed to position:relative for the <div class="container">
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>