I use a div tag but my about division is still overlapping my navbar division.
This is my demo:
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip p {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 16px;
}
#descrip h1 {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
<!----- references and resources
https://www.w3schools.com/html/default.asp
https://www.facebook.com/SmileToGoHongKong/
https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog
https://www.w3schools.com/css/default.asp
https://www.youtube.com/watch?v=hp-LP8Nv18s
https://www.youtube.com/watch?v=svv7jOxaSzw
https://slicknav.io/----->
I think this will help.
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip{text-align:center;}
#descrip p {
text-align: center;
font-size: 16px;
}
#descrip h1 {
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
so I will explain cause i have been in your place before ..
first you are making the elements inside #descrip position absolute and that's okay if u add position relative and a height to #descrip .. cause now the elements are flowing out of that #descrip container and that container's height is small so the about is coming after it therefore under the element
what would be better is using the margins and so on to place the element in the place u want .. read about margin auto also is really help full .. and be careful with float .. read about flex box also really helpful
Related
Simple problem but can't seem to find a functional solution. There's a finger-width white space at the top of the page that doesn't have anything highlighted under inspect.
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.btn {
position: relative;
overflow: hidden;
top: 45px;
left: 45px;
height: 45px;
width: 45px;
text-align: center;
background: #1b1b1b;
border-radius: 3px;
cursor: pointer;
transition: left 0.4s ease;
}
.btn.click {
left: 260px;
}
.btn span {
color: rgb(3, 3, 3);
font-size: 28px;
line-height: 45px;
}
.btn.click span:before {
content: '\f00d';
}
.sidebar {
position: fixed;
width: 225px;
height: 100%;
left: -225px;
background: #1b1b1b;
transition: left 0.4s ease;
}
.sidebar.show {
left: 0px;
}
.sidebar .text {
color: white;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
background: #1e1e1e;
letter-spacing: 1px;
}
nav ul {
background: #1b1b1b;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li {
line-height: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
position: relative;
color: white;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a {
color: cyan;
background: #1e1e1e;
border-left-color: cyan;
}
nav ul li a:hover {
background: #1e1e1e;
}
nav ul ul {
position: static;
display: none;
}
nav ul .feat-show.show {
display: block;
}
nav ul .serv-show.show1 {
display: block;
}
nav ul ul li {
line-height: 42px;
border-top: none;
}
nav ul ul li a {
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a {
color: #e6e6e6;
background: #1b1b1b;
border-left-color: transparent;
}
nav ul ul li a:hover {
color: cyan!important;
background: #1e1e1e!important;
}
nav ul li a span {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
color: black;
transition: transform 0.4s;
}
nav ul li a span.rotate {
transform: translateY(-50%) rotate(-180deg);
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #202020;
z-index: -1;
text-align: center;
}
.content .header {
font-size: 45px;
font-weight: 600;
}
.content p {
font-size: 30px;
font-weight: 500;
}
html {
height: 100%
}
body {
height: 100%
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PeePoo</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn">
<span class="fas fa-bars"></span>
</div>
<nav class="sidebar">
<div class="text">
Side Menu
</div>
<ul>
<li class="active">Dashboard</li>
<li>
<a href="#" class="feat-btn">Features
<span class="fas fa-caret-down first"></span>
</a>
<ul class="feat-show">
<li>Pages</li>
<li>Elements</li>
</ul>
</li>
<li>
<a href="#" class="serv-btn">Services
<span class="fas fa-caret-down second"></span>
</a>
<ul class="serv-show">
<li>App Design</li>
<li>Web Design</li>
</ul>
</li>
<li>Portfolio</li>
<li>Overview</li>
<li>Shortcuts</li>
<li>Feedback</li>
</ul>
</nav>
<script>
$('.btn').click(function() {
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
$('.feat-btn').click(function() {
$('nav ul .feat-show').toggleClass("show");
$('nav ul .first').toggleClass("rotate");
});
$('.serv-btn').click(function() {
$('nav ul .serv-show').toggleClass("show1");
$('nav ul .second').toggleClass("rotate");
});
$('nav ul li').click(function() {
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
<body>
<h2 class="text-center my-5">The Website of Truth</h2>
<div class="d-flex justify-content-center role=" columnheader ">The Code of Justinian, Book 1 Part 1</div>
<div class="container ">
<div class="justify-content-center "> 1. The Emperors Gratian, Valentinian, and Theodosius to the People of the City of Constantinople.
We desire that all peoples subject to Our benign Empire shall live under the same religion that the Divine Peter, the Apostle, gave to the Romans, and which the said religion declares was introduced by himself, and which it is well known that the Pontiff Damasus, and Peter, Bishop of Alexandria, a man of apostolic sanctity, embraced; that is to say, in accordance with the rules of apostolic discipline and the evangelical doctrine, we should believe that the Father, Son, and Holy Spirit constitute a single Deity, endowed with equal majesty, and united in the Holy Trinity.
(1) We order all those who follow this law to assume the name of Catholic Christians, and considering others as demented and insane, We order that they shall bear the infamy of heresy; and when the Divine vengeance which they merit has been appeased, they shall afterwards be punished in accordance with Our resentment, which we have acquired from the judgment of Heaven.
Dated at Thessalonica, on the third of the Kalends of March, during the Consulate of Gratian, Consul for the fifth time, and Theodosius.
</div>
</div>
</body>
Tried a bunch of things listed on google under the google search "white space at top of page bootstrap" with no luck. Still very new so simple explanations much appreciated <3
This is because your .btn has a top position of 45px therefore the rest of the content align itself to it as it is your first relatively positioned element.
Try adding top: 0; to your .sidebar so that it aligns with the top of the document independently of your button top position and you'll see this space disappear.
Please note that for this fix to work you'll first have to fix a few issues in your markup as mentioned in various comments (only one body tag and ending double quote missing after <div class="d-flex justify-content-center).
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 am new here and I am facing a very annoying problem which you would think could easily be fixed. But I have been trying to figure this out for the past hour.
Here is my problem, I have drawn a red box around it to indicate the problem -
See below
Here is the html code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>
</div>
</body>
</html>
Here is the css -
/* my official site styles */
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
I Appreciate the help!
Try this one...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
width:70%;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg" style="width:70%">
<img src="img/specials.png" style="width:30%;float:right;">
<div class="fix"></div>
</div>
</div>
</body>
</html>
This is badly formatted, dunno if it is the fix to your problem, but needs to be changed.
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
should be at least this:
<nav>
<ul>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
</ul>
<h1>REGION</h1>
</nav>
Without linking to the site and seeing the size of the images, I think your problem is with the CSS that deals with the slider.
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
I would start with removing the width and margin settings as I expect that is causing the problem and remove the first child part. First focus on getting the slider working as per the maker of the sliders css, then add your own.
I have to make a website for computer science at school and I have a problem with centering the menu bar. I want it to be centered around the menu button, but it puts the icon off-center the way I do it.
How can I center the entire menu around the central li element?
Here's the code:
body {
background-color: /*#C94421*/
#353535;
margin: 0;
/* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;
}
.menuBar ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 36px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<!DOCTYPE html>
<html>
<head>
<title> Homepagina </title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
</head>
<body>
<div class="menuBar">
<ul>
<li> Over mij </li>
<li> Hobbies </li>
<li>
<img src="logoNaam.jpg">
</li>
<li> Muziek </li>
<li> Waarom informatica </li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
</body>
</html>
Here are the changes in the code :
You have to add :
.menuBar ul{
padding-left: 0px;}
also relace this :
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;}
with
.menuBar ul li {
display: inline-block;
width: 150px;
padding-right: 15px;
line-height: 70px;}
Also remove width: 100px; from .menuBar ul li a
Better to reduce the font size to get it well aligned in the frame.
I got the image centered using a flexbox layout. The image is always in the exact center of the page, and the menu items flow to the left and right of the centered image.
I adjusted the font sizes and padding so that it shows up well in the demo. I also needed to change the li to div to get the menu to work semantically after the changes.
Live Demo:
body {
background-color: /*#C94421*/ #353535;
margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar {
display: flex;
}
.menuBar > div {
display: block;
line-height: 70px;
flex-basis: 0;
flex-grow: 1;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
.menuBar > div > div {
display: inline-block;
padding: 0 15px;
}
.menuBar > div.central {
flex-basis: auto;
flex-grow: 0;
padding: 0 15px;
}
.menuBar > div a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<div class="menuBar">
<div class="left"><div> Over mij </div>
<div> Hobbies </div></div>
<div class="central"> <img src="logoNaam.jpg"> </div>
<div class="right">
<div> Muziek </div>
<div> Waarom informatica </div>
</div>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
JSFiddle Version: https://jsfiddle.net/2ejfdoc3/1/