Hover function will not work in css and html.
I have a navigation menu across the top and i would like a drop down menu off one of the menu icons. I have positioned everything correctly however the hover just wont work.
My code is as follows:
#charset "utf-8";
body {
margin: 0px;
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: #EFF5F8;
}
#wrapper {
background-color: #FFFFFF;
width: 100%;
width: 860px;
margin-left: auto;
margin-right: auto;
}
#slideshow {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
position: relative;
clear: left;
width: 860px;
height: 470px;
padding-right: 0px;
padding-left: 0px;
}
h1,
h2 {
color: #3399CC;
font-style: normal;
font-weight: 600;
font-family: source-sans-pro;
}
h1 {
font-size: 75px;
text-align: center;
text-transform: uppercase;
margin-top: 0px;
margin-bottom: 0px;
}
#main {
width: 58%;
margin-left: 2%;
float: left;
}
#sidebar {
width: 34%;
margin-left: 4%;
float: left;
}
footer {
clear: left;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2%;
background-color: #43A6CB;
color: #FFFFFF;
}
figure {
width: 420px;
}
figure img {
padding: 10px;
background-color: #FFFFFF;
-webkit-box-shadow: 1px 1px 15px #999999;
box-shadow: 1px 1px 15px #999999;
}
figcaption {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.floatleft {
margin-right: 10px;
float: left;
}
.floatright {
margin-left: 10px;
float: right;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #FF6600;
}
a:visited {
color: #FF944C;
}
a:hover,
a:active,
a:focus {
color: #7F3300;
text-decoration: underline;
}
#mainnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainnav a {
width: 20%;
display: block;
float: left;
background-color: #4D4D4D;
text-align: center;
color: #FFFFFF;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 6px;
}
#mainnav a:hover,
#mainnav a:active,
#mainnav a:focus,
#mainnav a.thispage {
text-decoration: none;
background-color: #43A6CB;
}
article,
aside,
figure,
footer,
header,
nav {
display: block;
}
ol {
font-weight: 600;
fobt-size: 25px;
color: red;
}
#dropdown1 {
visibility: hidden;
display: block;
position: absolute;
top: 208px;
left: 345px;
z-index: 1;
}
#dropdown1 > li {
width: 861px;
float: left;
}
.review:hover ul {
visibility: visible;
z-index: 10;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Movie Night Reviews</title>
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header id="top">
<h1>Movie Night Reviews</h1>
<nav id="mainnav">
<ul>
<li>Home
</li>
<li>Trailers
</li>
<li class="review">Reviews
<ul id="dropdown1">
<li>Civil War
</li>
<li>Furious 7
</li>
<li>Fantastic Four
</li>
<li>Jurassic World
</li>
<li>Agents of Shield
</li>
</ul>
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</nav>
</header>
<div id="slideshow">
<div id="comslider_in_point_720546"></div>
<script type="text/javascript">
var oCOMScript720546 = document.createElement('script');
oCOMScript720546.src = "comslider720546/comsliderd.js?timestamp=1437916662";
oCOMScript720546.type = 'text/javascript';
document.getElementsByTagName("head").item(0).appendChild(oCOMScript720546);
</script>
</div>
<article id="main">
<h2>Top 10 Highest Grossing Movies</h2>
<p>The following list is of the highest grossing movies ever made. Director James Cameron currently holds the top two spots after directing both Avartar and Titanic.</p>
<ol>
<li>Avatar</li>
<li>Titanic</li>
<li>Juassic World</li>
<li>The Avengers</li>
<li>Furious 7</li>
<li>Avengers: Age of Ultron</li>
<li>Harry Potter and the Deathly Hallows – Part 2</li>
<li>Frozen</li>
<li>Iron Man 3</li>
<li>Transformers: Dark of the Moon</li>
</ol>
<figure class="centered">
<img src="Images/titanic.jpg" width="400" height="266" alt="" />
<figcaption>Titanic, the oldest film in the top 10 still sits in a comfy second place just below Avatar. Both directed by world-renowned director James Cameron.</figcaption>
</figure>
<h2>Top 10 Highest Grossing Movie Franchises</h2>
<p>The following list is of the Top 10 Highest Grossing Movie Franchises of all time. The Marvel Cinematic Universe franchise currently sits at the top nearly a billion higher than Harry Potter and roughly 2.5 billion higher than James Bond which is
the closest franchise that is also still running.</p>
<ol>
<li>Marvel Cinematic Universe</li>
<li>Harry Potter</li>
<li>James Bond</li>
<li>Middle-Earth</li>
<li>Star Wars</li>
<li>Spider-Man</li>
<li>The Fast and the Furious</li>
<li>Batman</li>
<li>Transformers</li>
<li>Pirates of the Caribbean</li>
</ol>
<figure class="centered">
<img src="Images/antman.jpg" width="400" height="266" alt="" />
<figcaption>Ant-Man, the latest film in the Marvel Cinematic Universe franchise looks set to push them even further ahead than the rest of the Top 10.</figcaption>
</figure>
</article>
<aside id="sidebar">
<h2>Tweets by IMDb</h2>
<a class="twitter-timeline" href="https://twitter.com/IMDb" data-widget-id="625318734555693056">Tweets by #IMDb</a>
<script>
! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</aside>
<footer>
<p>© Copyright 2013 Bayside Beat</p>
</footer>
</div>
</body>
</html>
The big white gap is an image slideshow not just a massive gap.
If anyone an help me get this working it would be appreciated.
Updated your code to make it work.
you need to use .review > a:hover + #dropdown1 to change the visibility.
#dropdown1 {
visibility: hidden;
display: block;
position: absolute;
top: 208px;
left: 345px;
z-index: 10;
}
#dropdown1:hover {
visibility: visible;
}
#dropdown1 > li {
width: 861px;
float: left;
}
.review > a:hover + #dropdown1 {
visibility: visible;
}
problem is your menu is too far away to stay visible when you leave .review. you need to bring the menu up closer or use a thick white border at the top so it still looks spaced how you have it
https://jsfiddle.net/gL54eevn/3/
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'm having a bit of trouble in regards to background color being applied to all at once to pages within a part of my navigation section. Currently when I hover over Brass, the background color is being applied to Brass and the pages within this section. What I'm trying to accomplish is getting the background color to appear only when I hover over these elements instead of all at once.
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%;
}
nav ul li {
list-style: none;
padding: 10px;
}
nav ul li:hover {
background-color: #b1b6b6;
}
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;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
}
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 .middle {
width: 50%;
}
main .row .right {
width: 25%;
}
.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;
}
<!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 can use this
nav ul li ul li:hover {
background-color: #b1b6b6;
}
instead of
nav ul li:hover {
background-color: #b1b6b6;
}
I'm having issues where my website will cut off all information at the bottom of the screen and not scroll when at smaller aspect ratios. It will show the image no matter what but will cut the text below it. I have tried using overflow-y and overflow but neither allow scrolling. I'm not sure if it is due to elements being fixed or not but having the elements fixed is the only way I've been able to get them to look right.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aeronaut Travel Agency</title>
<meta charset="utf-8">
<link rel = "stylesheet" href = "css/travel.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Aeronaut Travel Agency</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Vacation Packages</li>
<li>Things to Pack</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
<main>
<h2>
Vacation Packages
</h2>
<div>
<img src="images/LasVegas.png" alt="Las Vegas, seen at night" class="floatleft">
</div>
<div class="row">
<div class="column">
<h3>
Visit beautiful, sunny Las Vegas. A wonderland of all kinds of entertainment.
</h3>
<p>Want to have dinner and a show, come to the world-famous Caesar's Palace. With hundreds of live shows, thousands of high-end restaurants and the iconic Strip, there is always something fun and new to do in the city that never sleeps. </p>
<p> Las Vegas has so many entertainment, dining, shopping, nightlife, golf, and spa options, it can be tough to choose which experiences are perfect for your trip. That’s where we come in. Visit Vegas with Aeronaut Travel Agency.</p>
<br class="clear">
</div>
<div class="column">
<h3><i>Top Attractions</i></h3>
<ul>
<p></p>
<li>
Mystere by Cirque du Solie
</li>
<li>
Vegas! The Show
</li>
<li>
The Strip
</li>
<li>
Venetian Gondolas
</li>
<li>
Madame Tussaud’s
</li>
<li>
Las Vegas Motor Speedway
</li>
</ul>
<h3><i>Top Hotels</i></h3>
<ul>
<p></p>
<li>The Venetian</li>
<li>The Bellagio</li>
<li>Caesar’s Palace Hotel & Casino</li>
<li>The Luxor Casino & Hotel</li>
<li>Mandalay Bay</li>
<li>The MGM Grand</li>
<li>Excalibur Hotel & Casino</li>
</ul>
<br class="clear">
</div>
</div>
</main>
<footer>
<small><i>Copyright © </i> 2020 Aeronaut Travel Agency Inc, <i>All rights Reserved<br>
</i></small>
</footer>
</div>
</body>
</html>
and here is the CSS
HTML {
height: 100%;
margin: auto;
}
* {
box-sizing: border-box;
}
header, nav, main, footer {
display: block;
}
body {
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, sans-serif;
overflow-x:hidden;
overflow-y: auto;
}
header {
background-color: #9DC3E6;
background-image: url(../images/Logo.png);
background-size: contain;
background-position-x: 35px;
background-repeat: no-repeat;
height: 150px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}
h1 {
padding-top: 50px;
padding-left: 7.5em;
color: #F2F2F2;
text-shadow: 2px 2px #656565;
font-style: italic;
}
h2 {
color: #2E75B6;
font-style: italic;
}
h3 {
font-style: italic;
}
nav {
display: inline;
padding: 0em;
width: 160px;
position: fixed;
top: 150px;
left: 0px;
width: 100%;
}
nav a {
text-decoration: none;
display: block;
text-align: center;
padding: .8em;
}
nav a:link {
color: #FFFFFF;
}
nav a:visited {
color: #FFFFFF;
}
nav a:hover {
color: #C8C8C8;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1F4E79;
list-style-type: none;
}
nav li {
border-right: 1px solid #bbb;
float: left;
padding-left: 10px;
padding-right: 10px;
}
li:last-child {
border-right: none;
}
li:first-child {
padding-left: 40px;
}
nav li a:hover:not(.active) {
background-color: #1360A6;
}
#active {
background-color: #4CAF50;
}
.studio {
font-style: italic;
}
footer {
background-color: #9DC3E6;
font-size: small;
font-style: italic;
text-align: center;
padding: 1em;
width: 100%;
position: fixed;
bottom: 0;
}
main {
padding-left: 2em;
padding-right: 2em;
display: block;
margin-left: 170px;
width: 1550px;
padding-top: 1em;
position: fixed;
top:175px;
}
.floatleft {
float: left;
margin-right: 4em;
}
.clear {
clear: both;
}
img
{
width: auto;
position:relative;
}
#hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/Hero.jpg);
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
padding: 1em;
}
#wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
}
Any advice on this is appreciated.
You should refrain from using the property "fixed" because as the documentation says here: https://www.w3schools.com/css/css_positioning.asp.
The fixed property implies that elements with this property don't move no matter what, even if you scroll down the page. So when you scrolled down, your header didn't move your class called "main" too and such...
(This part was corrected, sorry about that but I made mistake but now it's all good !)
So a solution would be to do this:
replace all "position:fixed" by "position: absolute" they are the same, exept
that fixed as I said below prevent you from scrolling "normally" your page, see
the documentation link above
Once the previous is done, inside the "wrapper" container you used "position:
absolute" which force you to use "position: absolute;" for every element inside
wrapper (i am not talking about the childs of these elements, just the parent)
As such footer too, which you already did, but you used "bottom:0" to describe
it, you should use "top:x px" instead where x is the number you chose to put
Basically, try not to use "fixed" no matter what, unless you want the element to be unmovable.
I tried this solution on my PC and your code works just fine.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aeronaut Travel Agency</title>
<meta charset="utf-8">
<link rel = "stylesheet" href = "website-is-not-scrolling-and-cuts-off-text-depending-on-aspect-ratio.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Aeronaut Travel Agency</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Vacation Packages</li>
<li>Things to Pack</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
<main>
<h2>Vacation Packages</h2>
<div>
<img src="images/LasVegas.png" alt="Las Vegas, seen at night" class="floatleft">
</div>
<div class="row">
<div class="column">
<h3>
Visit beautiful, sunny Las Vegas. A wonderland of all kinds of entertainment.
</h3>
<p>Want to have dinner and a show, come to the world-famous Caesar's Palace. With hundreds of live shows, thousands of high-end restaurants and the iconic Strip, there is always something fun and new to do in the city that never sleeps. </p>
<p> Las Vegas has so many entertainment, dining, shopping, nightlife, golf, and spa options, it can be tough to choose which experiences are perfect for your trip. That’s where we come in. Visit Vegas with Aeronaut Travel Agency.</p>
<br class="clear">
</div>
<div class="column">
<h3><i>Top Attractions</i></h3>
<ul>
<p></p>
<li>
Mystere by Cirque du Solie
</li>
<li>
Vegas! The Show
</li>
<li>
The Strip
</li>
<li>
Venetian Gondolas
</li>
<li>
Madame Tussaud’s
</li>
<li>
Las Vegas Motor Speedway
</li>
</ul>
<h3><i>Top Hotels</i></h3>
<ul>
<p></p>
<li>The Venetian</li>
<li>The Bellagio</li>
<li>Caesar’s Palace Hotel & Casino</li>
<li>The Luxor Casino & Hotel</li>
<li>Mandalay Bay</li>
<li>The MGM Grand</li>
<li>Excalibur Hotel & Casino</li>
</ul>
<br class="clear">
</div>
</div>
</main>
<footer>
<small><i>Copyright © </i> 2020 Aeronaut Travel Agency Inc, <i>All rights Reserved<br>
</i></small>
</footer>
</div>
</body>
CSS :
HTML {
height: 100%;
margin: auto;
}
*{
box-sizing: border-box;
}
header, nav, main, footer {
display: block;
}
body {
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, sans-serif;
overflow-x:hidden;
overflow-y: auto;
}
header {
background-color: #9DC3E6;
background-image: url(../images/Logo.png);
background-size: contain;
background-position-x: 35px;
background-repeat: no-repeat;
height: 150px;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
h1 {
padding-top: 50px;
padding-left: 7.5em;
color: #F2F2F2;
text-shadow: 2px 2px #656565;
font-style: italic;
}
h2 {
color: #2E75B6;
font-style: italic;
}
h3 {
font-style: italic;
}
nav {
display: inline;
padding: 0em;
width: 160px;
position: absolute;
top: 150px;
left: 0px;
width: 100%;
}
nav a {
text-decoration: none;
display: block;
text-align: center;
padding: .8em;
}
nav a:link {
color: #FFFFFF;
}
nav a:visited {
color: #FFFFFF;
}
nav a:hover {
color: #C8C8C8;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1F4E79;
list-style-type: none;
}
nav li {
border-right: 1px solid #bbb;
float: left;
padding-left: 10px;
padding-right: 10px;
}
li:last-child {
border-right: none;
}
li:first-child {
padding-left: 40px;
}
nav li a:hover:not(.active) {
background-color: #1360A6;
}
#active {
background-color: #4CAF50;
}
.studio {
font-style: italic;
}
footer {
background-color: #9DC3E6;
font-size: small;
font-style: italic;
text-align: center;
padding: 1em;
width: 100%;
position: absolute;
top: 1000px;/*here*/
left:0px;
}
main {
padding-left: 2em;
padding-right: 2em;
display: block;
margin-left: 170px;
width: 1550px;
padding-top: 1em;
position: absolute;
top:175px;
}
.floatleft {
float: left;
margin-right: 4em;
}
.clear {
clear: both;
}
img
{
width: auto;
position:relative;
}
#hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/Hero.jpg);
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
padding: 1em;
}
#wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
}
https://jsfiddle.net/9g0qp2cs/2/
<main> doesn't need to be position:fixed; if you want it to scroll with the viewport. Try position:relative;.
Add a z-index: 10 to your <nav> and <header> elements so when you scroll the text is below the header.
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.
I'd like to ask your help with my bottom navigation bar and a link on both my navigation bars.
I can't seem to make it appear in the center. Will using padding be able to fix it? I've been trying to use it, but I have to estimate the number of pixels.
My second problem is that my bottom navigation bar doesn't have the correct spacing. I already changed the font size, but it doesn't fix the problem. Right now, it appears like this: "HomeWho We AreWhat We Do...".
My third problem is that one of my links don't appear to be working. It's a link to another webpage I coded. I think I've typed it correctly, but it won't work.
Here's a fiddle:
https://jsfiddle.net/captainpokey/66szogpm/
And here's the code:
html {
100%
}
body {
background: #cecdcc;
margin: 0;
padding: 0;
color: #8c8b8a;
font-size: 18px;
font-family: "Lato", sans-serif;
}
#wrap {
background-color: #fff;
width: 1000px;
margin: 0 auto;
}
#nav {
width: 1000px;
height: 45px;
background: #dcdbda;
font-family: "Lato";
font-size: 18px;
}
#nav ul {
padding: 0;
margin: 0;
background: #dcdbda;
float: left;
margin-left: 50px;
}
#nav li {
height: 40px;
padding-top: 4px;
float: left;
position: relative;
width: 150px;
list-style: none;
}
#nav a {
display: block;
text-decoration: none;
text-align: center;
color: #949392;
}
#nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
margin: 0;
padding: 0;
}
#nav li:hover, #nav li:hover li {
background: #fff;
}
#nav li li:hover, #nav li li:hover li {
background: #bbb;
}
#nav li:hover ul {
visibility: visible;
}
#header {
width: 1000px;
height: 485px;
background-image: url(../images/headerphoto.jpg);
}
#content {
background-color: #fff;
font-family: "Lato", sans-serif;
color: #777674;
padding-top: 10px;
padding-bottom: 20px;
}
#content h4 {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 20px;
text-transform: bold;
}
#content p {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 18px;
text-transform: bold;
}
#footer {
background-image: url(../images/footerphoto.jpg);
width: 1000px;
height: 255px;
}
#navbottom {
padding-left: 130px;
width: 1000px;
color: #fff;
font-size: 12px;
font-family: "Lato";
}
#navbottom ul {
padding: 0;
margin: 0;
float: left;
margin-left: 20px;
margin-right: 20px;
}
#navbottom ul li {
float: left;
position: relative;
list-style-type: none;
}
#navbottom li:hover ul {
visibility: visible;
}
#navbottom a {
display: block;
text-decoration: none;
text-align: center;
color: #fff;
}
#copyright {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 16px;
}
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<title>Powers & Grant, Inc.</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="nav">
<ul>
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Our Services</li>
<li>The Powers Team</li>
<li>Contact</li>
</ul>
</div>
<div id="header"></div>
<div id="content">
<p>As the Country's pioneer in sales force outsourcing, Powers knows the intricacies of managing the critical tasks involved in increasing revenues as well as saving the company from the costly maintenance of agents with minimal increase in sales growth.<br><br>
Powers and Grant Inc. currently handles and manages sales teams for various industries principally involved in the Real Estate, Consumer, and
Pharmaceutical and Direct Selling companies.<br><br>
We assist companies in enhancing their competitiveness through application of competencies and integrate these essential factors needed to survive
today's need for continued innovation.<br><br></p>
</div>
<div id="footer">
<div id="navbottom">
<ul>
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Our Services</li>
<li>The Powers Team</li>
<li>Contact</li>
</ul>
</div><br>
<div id="copyright">Copyright © Powers and Grant, Inc. All Rights Reserved</div>
</div>
</div>
</body>
Please help! Thank you very much in advance.
I have made the changes here.
https://jsfiddle.net/66szogpm/1/
code to align your top nav text to center
#nav li {
line-height: 40px;
float: left;
position: relative;
width: 150px;
list-style: none;
}
code to align your bottom nav
#navbottom {
padding-left: 100px;
width: 1000px;
color: #fff;
font-size: 14px;
font-family: "Lato";
margin: 0 auto;
}
#navbottom ul {
padding: 0;
margin: 0;
margin-left: 20px;
margin-right: 20px;
}
#navbottom ul li {
display: inline-block;
position: relative;
list-style-type: none;
margin: 5px 10px;
}
You have used float: left in many places, which isn't necessary. All you had to do was change the display property to inline-block.
I haven't changed it for the top nav. But, you can try it out.