Okay, here it goes:
I am creating my first website. Immediately come across a problem which seems difficult to overcome.
I want to center my image between the header and footer which will stay centered vertically and horizontally, regardless of screen size.
I've seen examples using flexbox where you can center text and whatnot in the middle of the target area. Seems like its useful. I tried it but maybe i haven't applied it correctly.
My code so far
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
}
body {
color: grey;
font-family: 'Alegreya', sans-serif;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
.banner {
width: 100%;
height: 100%;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.banner-inner {
max-width: 60%;
margin: 0 auto;
}
header {
width: 100%;
height: 80px;
display: block;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
/*--- START NAVIGATION --*/
nav {
float: right;
/* Top, Right, Bottom, Left */
padding: 25px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
padding: 10px;
font-weight: bold;
}
nav ul li a {
color: grey;
text-decoration: none;
font-weight: bolder;
}
nav ul li a:hover {
color: lightgrey;
}
.current {
color: black;
}
/* --- MUSIC PAGE --*/
.music-wrapper {
width: 100%;
text-align: center;
}
.album-list figure {
display: inline-block;
margin: 10%;
}
.album-list figcaption {
text-align: center;
font-size: 150%;
font-family: 'Alegreya Sans', sans-serif;
font-weight: bold;
margin: 2%;
}
.album-list a {
text-decoration: none;
}
/* --- SOCIAL AND FOOTER --*/
footer {
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 200%;
margin: 0.5%;
padding: 0.5% 4% 0.5% 4%;
color: grey;
}
.social i:hover {
color: lightgrey;
}
footer.second {
max-height: 100px;
position: fixed;
bottom: 0px;
z-index: 10;
background: white;
border-top: 1px solid grey;
}
footer.second p {
padding-bottom: 5px;
text-align: center;
color: grey;
font-weight: bold;
}
/*---- MEDIA QUERIES---- */
#media screen and (max-width: 760px) {
header {
position: absolute;
}
#logo {
margin: 15px 0 20px -25px;
background: url(img/SA_mobile.png) no-repeat center;
}
.banner {
padding-top: 150px;
}
#menu-icon {
display: inline-block;
color: #000000;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
right: 20px;
top: 60px;
border: 2px solid #000000;
border-radius: 5px 0 5px 5px;
width: 50%;
}
nav:hover ul {
display: block;
background: #FFF;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.social i {
font-size: 150%;
padding: 2% 4% 2% 4%;
}
/*--- MUSIC PAGE --*/
.music-wrapper {
padding-top: 25%;
padding-bottom: 25%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Content fits mobile screens-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<title>SPAZ Attack</title>
</head>
<body>
<header>
<div class="header-inner">
<nav>
<!--- Icon For Moblie Version -->
<ul>
<li>Home</li>
<!--- Albums/Videos/Audio -->
<li>Music</li>
<!--- Calander gig dates/book us -->
<li>Gigs</li>
<!--- About the band -->
<li>Bio</li>
<!--- Merchandise -->
<li>Merch</li>
<!--- Contact Info -->
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!--- END HEADER -->
<section class="banner">
<div class="banner-inner">
<img src="img/spazAttackLogoSmaller1.png">
</div>
</section>
<!-- END BANNER -->
<!--- END FOOTER -->
<footer class="second">
<div>
<ul class="social">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-bandcamp"></i></li>
<!-- Don't Have YET
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
-->
</ul>
</div>
<p>© SPAZ Attack</p>
</footer>
<!--- END SOCKET -->
</body>
</html>
Checkout this fiddle: https://jsfiddle.net/8cyjc9qw/
.mid {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
I have used some other examples to demonstrate how it would look. I have used vh for header and footer and assign the remaining height to main content section and use flexbox to center the image. Hope this helps.
Related
I've been trying to search for a solution but I couldn't find any yet.
I would like to make a transparent navigational menu bar with a hero section just like in this website here https://paragonmigration.com/
I'm having trouble with the image part where the navigation menu overlapses it.
This is what I have done so far with html:
body {
padding: 0;
margin: 0;
width: 100%; /* fixes white space on the right side */
overflow-x: hidden; /* fixes white space on the right side */
}
h4 {
font-size: 18px;
}
/*#top-header {
height: 39px;
background-color: #36404a;
color: #fff;
line-height: 39px;
padding-left: 50px;
margin: 0;
padding: 0;
}*/
.top-header {
display: flex;
background-color: #36404a;
color: #fff;
height: 39px;
align-items: center;
}
.top-header > div {
margin: 0 15px;
}
.top-header > div > i {
margin-right: 5px;
}
.top-header-address {
padding-left: 50px;
}
.top-header-email {
flex: 2;
}
.top-header-facebook {
flex-basis: 2em;
}
.top-header-facebook a {
color: #fff;
}
.top-header-book {
display: flex; /* in order to center the elements inside */
background-color: #fa0505;
flex-basis: 251px;
height: 100%; /* in order to entirely stretch and fill to the parent element's* height */
align-items: center;
justify-content: center;
}
/* remove the right margin for the last div */
.top-header div:nth-last-child(1) {
margin: 0;
}
.top-header-book a {
text-decoration: none;
color: #fff;
margin-right: 5px;
font-weight: bold;
}
/*
#site-header-menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
*/
.nav-menu {
display: flex;
height: 80px;
background-color: rgba(255, 255, 255, 0.6);
align-items: center;
}
/* add sticky functionality to navigation menu */
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: #36404a;
color: #fff;
z-index: 2;
}
.sticky.nav-menu ul li a {
color: #fff;
}
.logo img {
height: 75px;
width: 156px;
}
.nav-menu ul {
display: flex;
flex: 4;
/*height: 100%;*/
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-menu ul > li {
font-size: 14px;
margin: 0 10px;
}
.nav-menu ul li a {
text-decoration: none;
color: #000;
}
.have-questions {
display: flex;
align-items: center;
justify-items: center;
text-align: center;
}
.message-icon i {
color: red;
}
.questions {
font-size: 18px;
margin: 10px;
line-height: 1.5em;
}
#slider {
position: relative;
top: -150px;
padding: 0;
background: url('../assets/images/slide.jpg') no-repeat center center fixed;
/* background-size: cover;*/
height: 750px;
color: #fff;
z-index: -1;
}
<div id="site-header-menu">
<div class="container top-header">
<div class="top-header-address">
<i class="fas fa-map-marker-alt"></i>
Address: 2903, Single Business Tower, Dubai
</div>
<div class="top-header-email">
<i class="far fa-envelope"></i>
Email Address: info#paragonmigration.com
</div>
<div class="top-header-facebook">
<i class="fab fa-facebook-f"></i>
</div>
<div class="top-header-book">
Book A Consultation
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div><!-- #site-header-menu -->
<div class="nav-menu" id="nav-menu">
<div class="logo"><img src="assets/images/logo.png" alt="logo"></div>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>CANADA</li>
<li>POLAND</li>
<li>AUSTRALIA</li>
<li>NEW ZEALAND</li>
<li>UK</li>
<li>CONTACT US</li>
</ul>
<div class="have-questions">
<div class="message-icon"><i class="far fa-comment-alt fa-3x"></i></div>
<div class="questions">
<div>Have any Questions?</div>
<div>04 303 3000</div>
</div>
</div>
</div><!-- .nav-menu -->
</div><!-- site-header-menu -->
<div id="slider">
<p id="welcome">WELCOME TO PARAGON</p>
<p id="migration">Migration and Visa</p>
<p id="consultants"><em>Consultants</em></p>
LEARN MORE >
</div><!-- #slider -->
I am trying to center everything vertically inside the container of the navbar, called (header-area) such that everything is inline. At the moment the img, left navigation and right navigation are all aligned differently in the container.
An alternative solution is welcome, too.
/*-----Global Styles-----*/
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 9px 97px 26px 98px;
height: 105px;
margin: 0 auto;
}
.logo-wrap{
float: left;
width: auto;
}
.main-logo{
width: 212px;
float: left;
}
.main-logo a{
float: left;
}
.main-logo img{
width: 100%;
}
.main-nav{
float: left;
margin: 0;
}
.main-nav ul li{
display: inline-block;
padding: 0 25px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 19px;
}
.header-right{
float: right;
width: auto;
display: flex;
align-items: center;
}
.header-right a{
vertical-align: middle;
display: flex;
align-items: center;
text-decoration: none;
}
.phone {
padding: 0 20px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>Who We Are</li>
<li>Products</li>
<li>Stories</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</div>
</header>
</div>
</body>
</html>
Add the following styles to menu-main-menu ul
display: flex;
align-items: center;
Your .logo-wrap value has a float value of left, so you'll want to make sure the other children have a similar quality to appear inline. To do this, add a float: left; styling with your header-left class. For this example, I shrunk the font size and padding to demonstrate the new float value and padding.
I highly recommend researching 'flex' to align your navigation. With flex, you can treat each nav item (logo, links, buttons) as child, and align them vertically with justify-content: center;. This way you won't have to worry about floats or padding issues.
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 9px 97px 26px 98px;
height: 105px;
margin: 0 auto;
}
.header-left {
float: left; /* added */
padding: 24px 0; /* updated */
}
.logo-wrap{
float: left;
width: auto;
}
.main-logo{
width: 48px; /* updated */
float: left;
padding: 24px 0; /* added */
}
.main-logo a{
float: left;
}
.main-logo img{
width: 100%;
}
.main-nav{
float: left;
margin: 0;
}
.main-nav ul {
padding: 0; /* added */
margin: 0; /* added */
}
.main-nav ul li{
display: inline-block;
padding: 0 6px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 8px;
}
.header-right {
float: right;
width: auto;
display: flex;
align-items: center;
}
.header-right a {
vertical-align: middle;
display: flex;
align-items: center;
text-decoration: none;
font-size: 8px; /* added */
}
.phone {
padding: 0 20px 0 10px;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>Who We Are</li>
<li>Products</li>
<li>Stories</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</div>
</header>
</div>
</body>
</html>
you achieve this using display: flex;align-items:center;. in ..header-area.
please run snippet in full page mode
/*-----Global Styles-----*/
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
width: 100%;
z-index: 9999;
padding: 9px 10px 26px 10px;
height: 105px;
margin: 0 auto;
display: flex;
align-items:center;
}
.main-logo img{
width: 100%;
}
.menu {
padding-left: 0;
display: flex;
}
.main-nav{
margin: 0;
}
.main-nav ul li{
display: inline-block;
padding: 0 25px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 12px;
}
.header-right{
width: auto;
display: flex;
align-items: center;
margin-left:auto;
font-size: 12px;
}
.header-right a{
vertical-align: middle;
text-decoration: none;
}
.phone {
padding: 0 20px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
</div>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</header>
</div>
</body>
</html>
I changed your font-size for demonstration purpose
I have tried applying a Overflow: hidden/auto to varios classes of CSS.
I have tried applying a Clear: both to various CSS sections as well, so far no go.
I am just unsure on how to fix this.
https://codepen.io/Tsukiyono/pen/KXLZbP
If you change the Codepen to a mobile size, the hamburger menu pops up, when clicked there is a small grey box that should cover the whole screen, but it only goes about 50px down or so. It used to work correctly, but I made a change at some point and something broke and now I cant seem to fix it.
If one of the above options is the correct fix, could someone help me figure out the correct CSS (or combination of CSS) that I can add it to to fix my issue?
//Variables
var overlay = document.querySelector(".fa-bars");
var times = document.querySelector(".fa-times");
var menuSelect = document.querySelector("#hiddenNav")
var quoteFade = document.querySelector(".toggleOff")
var navScroll = document.querySelector("#navbar");
//Hamburger Menu Display Overlay
overlay.addEventListener("click", function(){
if (times.classList.contains("closed")){
//toggle Display property for hiddenNav
menuSelect.classList.add("toggle");
//FadeOut Hamburger
overlay.classList.add("closed");
//FadeIn X Menu
times.classList.remove("closed");
}
})
//Closes Out Overlay Display Menu
times.addEventListener("click", function(){
if (overlay.classList.contains("closed")){
//toggle Display Property for hiddenNav
menuSelect.classList.remove("toggle");
//FadeIn Hamburger
overlay.classList.remove("closed");
//FadOut X Menu
times.classList.add("closed");
}
})
//Loads text after the page loads with transition
function onStart() {
quoteFade.classList.add("toggleOn");
quoteFade.classList.remove("toggleOff");
}
window.onload = onStart;
//Change Navbar Opacity on Scroll
window.onscroll = function (){
if (document.body.scrollTop >= 100){
navScroll.classList.add("colored");
navScroll.classList.remove("transparent");
alert("working");
}
else {
navScroll.classList.add("transparent");
navScroll.classList.remove("colored");
}
};
/* Simple Resets */
html, body {
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Raleway', sans-serif;
}
/*------------------------------------------------------------------
[1. NavBar - Primary]
*/
div.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}
nav {
float: left;
width: 100%;
outline: none;
position: fixed;
}
/* used to make Navbar change color on Scroll */
nav.transparent {
background-color: transparent;
}
nav.colored {
background-color: white;
transition: 1s;
}
nav h1 {
padding-left: .5em;
color: #000;
text-transform: uppercase;
float: left;
font-size: 1.5em;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 10px;
float: right;
}
nav ul li {
display: inline-block;
}
nav ul li:hover {
font-weight: bold;
text-decoration: underline;
transition: .7s;
}
nav ul li a {
padding: 1em;
color: #000;
display: block;
text-transform: uppercase;
text-decoration: none;
}
i.fa-bars {
color: blue;
float: right;
font-size: 28px;
padding: 5px;
margin-top: 20px;
display: none;
}
/*------------------------------------------------------------------
[1.5 NavBar - Hidden Overlay]
*/
div.overlay {
background-color: rgba(0,0,0,0.7);
position: absolute;
width: 100%;
height: 100%;
display: none;
transition: .7s;
}
/* Allows Hidden Nav to be displayed */
div.overlay.toggle {
display: block;
}
i.fa-times {
color: #fff;
font-size: 2.5em;
padding: 5px;
position: absolute;
right: 30px;
top: 20px;
display: block;
}
/* Shuts down the FA Icons on click with JS */
i.fa-bars.closed,
i.fa-times.closed {
display: none;
transition: .7s;
}
div.overlay ul{
padding: 0;
margin: 100px 0 0 0;
display: block;
width: 100%;
text-align: center;
}
div.overlay ul li {
display: block;
}
div.overlay ul li a {
font-size: 1.25em;
padding: 1em;
color: #fff;
display: block;
text-transform: uppercase;
text-decoration: none;
}
/*------------------------------------------------------------------
[2 Hero Image]
*/
.hero-section {
width: 100%;
height: 50em;
margin: auto;
background: url("img/alexandru-tudorache-17852.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
/*------------------------------------------------------------------
[2.5 Quote Text]
*/
#quoteBox .container-fluid {
padding-top: 9em;
text-align: center;
}
.toggleOn {
opacity: 1;
transition: 3s;
}
.toggleOff{
opacity: 0;
}
#content {
height: 35em;
}
p#quote {
max-width: 25em;
color: white;
text-shadow: 0 0 3px #000;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing: 0.1em;
text-align: center;
margin: 40px auto;
text-transform: lowercase;
line-height: 145%;
font-size: 2.1em;
font-variant: small-caps;
}
/*------------------------------------------------------------------
[9 Footer]
*/
footer {
background-color: #000;
height: 6em;
width: 100%;
margin: 0;
padding: 0;
}
footer p {
margin-bottom: .5em;
}
.social-media-contact {
color: white;
text-align: center;
}
.social-media-contact i {
padding: 0 .5em;
margin: 0px 10px;
}
.social-media-contact .fa {
font-size: 1.5em;
}
.footerNav ul {
text-transform: uppercase;
list-style-type: none;
margin-right: 3em;
}
.footerNav ul li {
display: inline;
color: #fff;
}
.footerNav ul li a {
color: #fff;
padding: .4em;
text-decoration: none;
}
.footerNav li:not(:first-child):before {
content: "|";
padding: .3em;
}
/*------------------------------------------------------------------
[10 Media Queries]
*/
/* Navbar */
#media all and (max-width: 768px){
nav ul {
display: none;
}
i.fa-bars {
display: block;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marlee Branding Site</title>
<!-- Google Fonts - RaleWay -->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<!--Font Awesome -->
<link rel="stylesheet" href="assets/fa/css/font-awesome.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar -->
<nav class="transparent" id="navbar">
<!-- Collapsed Navbar -->
<div class="overlay" id="hiddenNav">
<div class="container">
<i class="fa fa-times closed" aria-hidden="true"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul> <!-- End Collapse Nav -->
</div>
</div>
<!-- Standard Navbar -->
<div class="container" id="navbar">
<h1>Logo</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul> <!-- End Nav -->
<i class="fa fa-bars" aria-hidden="true"></i>
</div> <!-- End Container -->
</nav><!-- End Nav -->
<!-- Hero Image and Quote -->
<section class="hero-section">
<div class="hero-image">
<div id="quoteBox">
<div class="container-fluid full toggleOff">
<div id="content">
<p id="quote">"Action is the foundational key to all success"
<br> — Pablo Picasso</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="social-media-contact container">
<p>Connect With Me</p>
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
<div class="footerNav">
<ul>
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</footer>
<!-- Custom JS -->
<script src="scripts.js"></script>
</body>
</html>
This is because of this CSS rule:
div.overlay {
height: 100%;
}
Removing this makes it work:
Note: It's not because of overflow, but just limited in height.
A better alternative would be using min-height (thanks to G-Cyr):
div.overlay {
min-height: 100%;
}
I am just getting back to working with websites, and cannot for the life of me center this navigation bar. I have floated the header over to the left, and feel like I have tried every possibly property, but it just will not center. Any help would be very appreciated.
Not centered NavBar:
.container {
margin: 0 auto;
background-color: #fff;
}
.header-heading {
float: left;
padding-top: 8px;
padding-left: 5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
background: #000;
padding: 0;
width: 100%;
}
.nav {
margin: auto;
padding: 0;
list-style: none;
text-align: center;
width: 100%;
}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web Report Demo</title>
<styles></styles>
<link rel="stylesheet" href="ed.css">
</head>
<body>
<div class="container">
<h1 class="header-heading">Web Reporting Demo</h1>
<div class="nav-bar">
<ul class="nav">
<li>Daily Master</li>
<li>Route Progress</li>
<li>UL Move Query</li>
<li>Stock Query</li>
</ul>
</div>
</div>
</body>
This should work
.container {
margin: 0 auto;
background-color: #000;
position:relative;
width: 100%;
height: 40px;
}
.header-heading {
position: absolute;
top:-20px;
left:5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
padding-top: 5px;
}
.nav {
margin: auto;
padding: 5px;
list-style: none;
text-align: center;
width: 100%;
}
.nav li {
display: inline;
padding: 5px;
}
.nav li a {
text-decoration: none;
color: #fff;
}
You will need to do some changes as you work in your responsive design.
Try giving the .container text-align: center.
I have this html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>Sell<img src="money.png"></li>
<li>Buy<span><img src="tickets.png"></li>
<li>Sign in<span><img src="locked.png"></li>
</ul>
</div>
</div>
</header>
</body>
</html>
And this css below:
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
In the navigation list on the top right (ul) I want to center those images with the li text in my css. I tried putting text-align: center; on the .heading-list li img but it is not centering the image. Is there something else I have to do?
You can use flexbox, as I used in this example
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
display: flex;
align-items: center;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>
<span>Sell</span>
<img src="https://pbs.twimg.com/profile_images/3038657495/3d2f325c92060a35e7ac8c697c57d8d4.jpeg">
</li>
<li>
<span>Buy</span>
<img src="https://pbs.twimg.com/profile_images/630664501776527361/nIK2xTUE.jpg">
</li>
<li>
<span>Sign in</span>
<img src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg">
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
So an image by default has a display type of inline-block. To enable it to be centered, include the following in your images css.
display: block;
margin-left: auto;
margin-right: auto