I've been following this video online on how to create dropdown menu using css. I followed it and there's no any signs of a dropdown menu on my website. It's so frustrating because i want to get over with it so i can focus now on backend dev. Hope you guys can figure this one out.
Code for html:
<!DOCTYPE>
<html lang="en">
<head>
<title>MUSIC STORE</title>
<script src="js/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="shortcut icon" type="image/png" href="../Music Store/img/rockSign.png"/>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul id="nav">
<li>HOME</li>
<li>INSTRUMENTS
<ul class="sub-menu">
<li>ELECTRIC GUITARS</li>
<li>BASS GUITARS</li>
<li>DRUMS</li>
</ul>
</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="../Music Store/img/ibanez.jpg"/></li>
<li><img src="../Music Store/img/raven.jpg"/></li>
<li><img src="../Music Store/img/metallica.jpg"/></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
</script>
<section class="one-third">
<div class="border_section">
<h3>NEW BASS AMPS THIS YEAR</h3>
<img src="../Music Store/img/fender_amps_bassbreaker.jpg"/>
<p>We would like to proudly announce the new shipment of fender bass amps that you all have been
waiting for. It will provide you that rich rock and roll tone like no other. Please check
out our bass amp section for more details.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>NEW FEATURE ARTIST</h3>
<img src="../Music Store/img/feature_markHolcomb.jpg"/>
<p>Behold Mark Holcomb from Periphery is in the house! Check out his info and new signature guitar
at our feature artists section. He will also be having a 20-minute guitar clinic on Oct 8 2016 right
here at Music Store.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>ATTENTION VOCALISTS!</h3>
<img src="../Music Store/img/GoMic.jpg"/>
<p>Check out the new Samson Go Mic Connect. It has a top-notch noise cancellation feature that can
definitely minimize the annoying sound that your dog makes while your recording. For more details,
Go to Accessories section.</p>
</div>
</section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Code for CSS:
#import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
*
{
margin: 0;
border: 0;
padding: 0;
}
body
{
background-image: url('../Music Store/img/background.png');
background-repeat: repeat-x;
}
.clearfix
{
clear:both;
}
#wrapper
{
margin: 0 auto;
max-width: 1120px;
overflow: auto;
border: 1px solid black;
}
#main_header
{
width: 100%;
font-family: 'Black Ops One', sans-serif;
background-color: black;
border: 1px solid black;
color: white;
}
#main_header h1
{
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout
{
margin: 50px 20px 0 0;
}
#callout h2{
text-align: right;
color: white;
}
#callout p{
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu
{
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li
{
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a
{
text-decoration: none;
color: black;
}
#nav_menu li a:hover
{
color: grey;
}
.sub-menu
{
position: absolute;
background-color: black;
list-style-type: none;
width: 124px;
padding-left: 0px;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
.sub-menu li
{
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
#nav_menu li:hover .submenu
{
opacity: 1;
}
.sub-menu li:hover
{
color: green;
background-color: yellow;
}
/*--- Start Image Slider --*/
.slider{
max-width: 1120px;
box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img{
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a{
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev{
background: url("../Music Store/img/arrow_left.png") no-repeat 7px 9px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover{
background: url("../Music Store/img/arrow_left.png") no-repeat 8px 15px;
}
.slider .bx-wrapper .bx-next{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third img{
text-align: center;
max-width: 100%;
height: auto;
opacity: 0.9;
}
.border_section p{
font-family: 'Lato', sans-serif;
padding: 2%;
color: white;
text-align: justify;
}
.border_section h3
{
font-family: 'Open Sans', sans-serif;
text-align: center;
color: white;
text-transform: uppercase;
letter-spacing: 1%;
}
.border_section
{
border: 1px solid black;
background-color: black;
}
.one-third{
width: 27.35%;
float: left;
margin: 2% 0 3% 4.5%;
text-align: center;
background-color: white;
}
footer{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: black;
overflow: auto;
}
footer p
{
margin-top: 1%;
color: white;
}
Add this to your CSS :
It will help you to have the result you want. Of course there are still adaptations to do regarding your preferences.
/* Without this line, the submenu elements are black on black background */
#nav_menu .sub-menu li a {
color: #fff;
}
/* With this line you will remove the opacity:0; of the submenu when you hover the parent li */
#nav_menu li:hover .sub-menu {
opacity: 1;
}
/* Don't set a width so you have a better output */
#nav_menu li .sub-menu {
width: auto;
}
/* This lines make the submenu li dislay verticaly and not inline */
#nav_menu li .sub-menu li {
display: block;
}
Edit:
Instead of changing the opacity property to show/hide the submenu, you should use the display property.
Currently, the submenu is just transparent, but always opened. If your menu were bigger in height, you could open it by hovering the mouse on the slide at the location where it is when opened.
By using the display property, you're actually hiding it, and it will be opened only if you hover the menu element (as it should be).
To do this, you have to replace the opacity: 0; in your .sub-menu class by : display: none;
Then change the code opacity: 1; in the #nav_menu li:hover .sub-menu by : display: block; (in the code I gave you before).
It will be cleaner than handling it with the opacity.
Related
I'm trying to make my navigation section a little nicer. Currently when I hover over the menu items to display the pages within, the pages show up instantly. I'd like them to show up gradually instead of all at once. I've tried adding transition: 2s; underneath nav ul li:hover ul in my CSS file, but that doesn't seem to work.
header {
color: #348899;
background-color: #343642;
background-image: url(Images/heading.png);
background-position: right;
background-repeat: no-repeat;
}
#wrapper {
width: 90%;
margin-right: auto;
margin-left: auto;
}
h1 {
margin: 0;
padding: 10px;
font-size: 42pt;
line-height: 36pt;
font-weight: lighter;
}
h2 {
margin: 0;
padding: 0 10px 5px;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
h3 {
margin: 0;
padding: 0 10px 5px 0;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
nav {
color: #343642;
background-color: #979C9C;
float: left;
width: 160px;
font-weight: bold;
height: 100%;
position: relative;
}
nav ul li {
list-style: none;
padding: 10px;
}
nav ul li a {
display: block;
text-decoration: none;
color: #343642;
}
nav ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
nav ul li:hover ul {
display: block;
transition: 2s;
}
nav ul li ul li:hover {
background-color: #b1b6b6;
width: 80px;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
background-color: #b1b6b6;
}
main {
color: #17354A;
background-color: #F2EBC7;
margin-left: 160px;
padding: 10px;
z-index: 0;
display: flex;
}
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
margin: 0 20px 0 0;
}
main .row .left {
width: 25%;
}
main .row .left p {
margin-right: 5px;
}
main .row .middle {
width: 50%;
}
main .row .middle h3 {
text-align: center;
}
main .row .right {
width: 25%;
}
main .side .left {
width: 50%;
}
main .side .right {
width: 50%;
}
.brass {
float: right;
margin: 0 0 5px 5px;
}
.logo {
float: right;
margin: 0 0 5px 5px;
}
body{
background-color: #348899;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
footer {
color: #348899;
background-color: #343642;
font-style: italic;
text-align: center;
margin-left: 160px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>
Beginning Band Players
</h1>
<h2>
Home
</h2>
</header>
<nav>
<ul>
<li>Home</li>
<li>Brass
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
</li>
<li>Woodwind
<ul>
<li>Clarinet</li>
<li>Flute</li>
<li>Oboe</li>
<li>Saxophone</li>
</ul>
</li>
<li>Percussion
<ul>
<li>Bells</li>
<li>Snare Drum</li>
</ul>
</li>
<li>Maintenence</li>
<li>Additional Equipment</li>
</ul>
</nav>
<main>
<div class="column left">
<div class="logo">
<img src="Images/Logo-E.png" alt="logo" height="200" width="355">
</div>
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
It's our hope that prospective music students find what they're looking
for and enjoy a lifetime of music.
</p>
<div class="brass">
<img src="Images/brass-1.jpg" alt="brass" height="238" width="425">
</div>
</div>
</div>
<div class="column right">
<h3>
What to Expect:
</h3>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources:
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>
<footer>
Copyright © 2022, Carter Thomas Wolfe <br>
Web Project Prototype
</footer>
</div>
</body>
</html>
You have to tell the CSS which property you'd like to transition, and how you'd like it to transition. If you changed your transition line to something like:
transition: opacity 2s ease-in;
That's saying: fade the opacity in over 2 seconds, with an "easing in" function. https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function That line above should work - but only if it has different states of opacity to transition between. Elements default to an opacity of 1, so simply defining the transition for opacity won't be enough, you have to also different states to change between. If you were using opacity, I'd try setting the default state for the element/class/whatever to 0, and the hover state to 1.
.classYouWantToFadeIn {
opacity:0;
/*rest of the CSS*/
}
.classYouWantToFadeIn:hover {
opacity: 1;
}
If the transition still doesn't seem to work, read up on "specificity rules" in CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
try this instead:
nav ul li:hover ul {
display: block;
transition: 2s ease-in-out;
}
I have a navigation bar which is transparent, and thus shows my gradient background at first. However when I scroll, it shows the text and/or pictures underneath, but I would like it to show the background and cover over the text. Main page: https://gyazo.com/6c5e35ca0ed4f6f37e9e72f490737c78 , scrolled down website: https://gyazo.com/9a2957d728e36ae23e0cd9af604e8de1; scrolled down more: https://gyazo.com/4849fb7f11689a5360e2e8686713d01d .
As you can see the navigation-bar is above everything - but I would like there to be a box around the navigation-bar which only shows the background when you scroll - if that makes sense - How would you do that? GIF showing scrolling problem: https://gyazo.com/6626f65e632e61127413c673d92a2cba
Relevant HTML:
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="smoothscroll.js"> </script>
<body>
<div class="main">
<nav class="fixed-nav-bar">
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>General<li>
<li>Computers in <br>the Workforce</li>
<li>Automated <br>Decision Making</li>
<li>Artificial <br>Intelligence</li>
<li>Environmental <br>Effects</li>
<li>Censorship &<br> The Internet</li>
<li>Monitoring<br> Behaviour</li>
<li>Analysis of<br> Personal<br> Information</li>
<li>Piracy &<br> Offensive<br> Communications</li>
<li>User Interface<br> Design<br> Considerations<li>
<li>Contact</li>
</ul>
</div>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</nav>
Relevant CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
font-size-adjust: auto;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px 35px;
width: 15%;
transition: transform .9s ease;
overflow: hidden;
}
.logo img:hover{
transform: scale(1.35)
}
.fixed-nav-bar{
position:fixed;
z-index: 9999;
height: 200px;
width: 100%;
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -230px;
margin-right: 106px;
padding-right: 15px;
/* note position zzzz*/
}
.navigation-links ul {
display: inline-flex;
}
.navigation-links ul li {
margin: 10px 9px;;
margin-top: 14px;
padding: 6px 5px;
font: Montserrat;
font-weight: normal;
position: relative;
list-style: none;
font-size: 85%;
word-spacing: 0px;
overflow: hidden;
z-index: 3;
}
#media screen and (max-width: 1580px) {
.navigation-links ul li {
font-size: 0.75rem;
margin: 10px 6px;
word-spacing: 0px;
padding: 6px 3px;
}
.navigation-links{
margin-right: 74px;
margin-top: -180px;
}
.logo img{
width: 230px;
height: 230px;
}
}
#media screen and (max-width: 1220px) {
.navigation-links ul li {
font-size: 0.65rem;
margin: 10px 5px;
word-spacing: 0px;
padding: 6px 2px;
}
.navigation-links{
margin-right: 74px;
margin-top: -163px;
}
.logo img{
width: 205px;
height: 205px;
}
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.navigation-links ul li a:hover{
font-weight: bold;
}
.gift img{
width: 5.5%;
float: right;
margin-top: -76px;
margin-left: 10px;
margin-right: 30px;
padding-left: 30px;
padding-right: 30px;
}
I do not know if i need to add a block which is like transparent for the background but not for the text/pictures in the html file?
Hopefully that is the relevant code so that you understand my problem and know how to possibly help me?
Thanks
Maybe you can achieve that by using JQuery. You can trigger a function that displays the border on the navigation bar whenever the page is scrolled. Here is the sample code.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('nav').css("border","1px solid black");
}
});
I am having a hard time on how to re-arrange my HTML/CSS code in order to move a few links inside of a hamburger nav menu.
I would like to have 'home' always visible but then, I would like the other linked pages to fall inside the hamburger menu, only visible when clicking the menu...
I would like the following to be inside the hamburger menu:
About
Contact
Portfolio ,etc.
Any suggestions on how to achieve this?
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
What you are looking for is called toggle. For this you need to use javascript or jquery (a simplified javascript "version"). To easy explain this, put for example a parent div for the child elements you want to toggle. Then in your css display this parent div none. Then you use jquery to be able to tell what you want to be clickable and then later what you want to toggle.
//Script.js
$(document).ready(function(){ //Use ready to make a function available after the document is loaded
$(".nav").click(function(){
$("#hamburger").toggle(250);
});
});
/* Style.css */
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
#hamburger{
display:none;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/javascript" src = "script.js">
</head>
<header>
<div class="header-logo">
<img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div id = "hamburger">
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</div>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
Edit: I added the src to the new script.js file which should contain your click function:)
Don't think you could achieve what you want only using CSS, maybe with a lot of CSS "hacks". I'd suggest adding some javascript to show on click.
I'd recommend checking this page https://www.w3schools.com/howto/howto_js_mobile_navbar.asp since they have an example just like the one you trying to achieve.
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
For some reason my navbar is bigger than it's supposed to be. Or atleast I think it's my navbar. Whenever I remove #rect It goes away. What's the problem here?
#tagline {
font-style: italic;
padding-right: 150px;
padding-left: 10px;
}
nav {
background-color: white;
display:flex;
align-items:center;
overflow: hidden;
}
#logo {
padding-top: 8px;
padding-left: 30px;
vertical-align: middle;
}
li, li>a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-block;
float: right;
padding: 5px 10px 5px 10px;
}
li>a:hover {
background-color: #7bcc1d;
color: white;
}
.active {
background-color: #7bcc1d;
color: white;
}
#main-bg {
background-image: url('https://s15.postimg.org/ra1dhmjkb/main-bg.png');
background-size: 100% 100%;
height: 500px;
margin: 0;
}
#rect {
background-color: white;
position: relative;
top: 50px;
left: 100px;
width: 400px;
height: 400px;
text-align: center;
}
h2 {
padding-top: 15px;
margin-bottom: 0;
}
span {
margin: 0;
}
#enroll_button {
text-decoration: none;
padding: 10px 20px 10px 20px;
background-color: #7bcc1d;
color: white;
}
<nav>
<img src="https://s12.postimg.org/n0yt5tenx/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
<div id="main-bg">
<div id="rect">
<h2>3 Steps to Complete<br>Your High School Foreign<br>Language Requirement</h2><br>
<span><strong>Convenient Scheduling: </strong>Pick lessons<br>to fit your schedule.</span><br><br>
<span><strong>Interactive Courses: </strong>Learn through<br>live, personal lessons.</span><br><br>
<span><strong>Earn Approved Credits: </strong>Earn credits<br>to satisfy high school requirements.</span><br><br>
Enroll in Your Course
</div>
</div>
You haven't set #rect as a block element and the h2 margin is pulling the whole thing down.
#rect h2{margin-top:0;}
That's because of margins which set in user agent stylesheet from the browser. You can link the reset.css and set your desire margins in your own css.