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.
Related
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;
}
HTML
<body>
<nav>
<ul>
<li>Home</li>
<li>Content</li>
<li>Contact Us</li>
</ul>
</nav>
<p>Welcome to Top Imports! This website is created as an informational page which lays out the top and most popular Japanese imports of all time. Mainly of the cars that you will see in the content page will be older cars. All of these cars are iconic Japanese sports cars that are highly saught out for in the United States of America. I hope you enjoy the collection that we have put together. </p>
</body>
CSS
* {
margin: 0;
padding: 0;
height: 100%;
text-decoration: none;
}
body {
background-image: url("http://i67.tinypic.com/143dljp.png");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
nav {
width: 100%;
height: 50px;
background-color: white;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 50px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
font-family: arial;
color: grey;
padding: 0 35px
}
ul li a:hover {
color: black;
cursor: pointer;
}
So I have a background image set in CSS however, I want to add text under an image, how exactly would I add text or content under the image?
This is how my webpage looks right now but I want the text to be under the image not through it:
* {
margin: 0;
padding: 0;
height: 100%;
text-decoration: none;
}
.background-image {
background-image: url("http://oi67.tinypic.com/143dljp.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.under-text {
position: absolute;
z-index: -1;
}
nav {
width: 100%;
height: 50px;
background-color: white;
}
ul {}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 50px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
font-family: arial;
color: grey;
padding: 0 35px
}
ul li a:hover {
color: black;
cursor: pointer;
}
<div class="background-image">
<nav>
<ul>
<li>Home</li>
<li>Content</li>
<li>Contact Us</li>
</ul>
</nav>
<p class="under-text">Welcome to Top Imports! This website is created as an informational page which lays out the top and most popular Japanese imports of all time. Mainly of the cars that you will see in the content page will be older cars. All of these cars are iconic
Japanese sports cars that are highly saught out for in the United States of America. I hope you enjoy the collection that we have put together. </p>
</div>
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
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.
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/