I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
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 Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li>Home</li>
<li>About
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li>Things to do
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li>News</li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
Read more on float
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.
I've never seen anything stupid like that, or may be it's 2:30 am and I am hallucinating. I've made simple anchor links within the header and I am completely unable to click on them. They are just plain text and are completely non-clickable.
I'll be thankful if you can give me a hint as what/where I am not obeying the HTML/CSS daemon.
HTML
<header>
<div class="confine">
<div class="complete-head-content">
<div class="left-width-less logo-width">
<img src="./imgs/twit-logo.png" />
</div>
<div class="right-width-less">
<div class="top-header-content">
<h1 class="pres-title">Defining Twisted Strategy</h1>
</div>
<div class="lower-header-content">
<div id="navcontainer">
<ul>
<li>Meet the Hobos</li>
<li>Why me?</li>
<li>Our Work in Oblivion</li>
<li>Our Perspective</li>
<li>Our Approach</li>
</ul>
</div>
</div>
</div>
<div class="c"> </div>
</div>
</div>
</header>
<div id="contend">
... ... ...
CSS
a {
color: #EA2E49;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #EA2E49;
cursor: pointer;
}
header {
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
z-index: 1;
}
.complete-head-content {
width: 100%;
background-color: #a0c654;
height: 130px;
}
.left-width-less {
float: left;
background-color: #fff;
width: 15%;
text-align: center;
height: 130px;
vertical-align: middle;
}
.left-width-less img {
width : 76px;
height: 100px;
margin-top: 10px;
}
.right-width-less {
float: right;
width: 85%;
}
.top-header-content {
width: 100%;
height: 70px;
background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}
.lower-header-content {
width: 100%;
height: 70px;
}
.logo {
cursor: pointer;
}
/* Navigation */
#navcontainer {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
text-transform: uppercase;
margin-top: 19px;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1.7em;
color: #fff;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
EDIT
Thanks to Nikhil, the had a Z-index:1 which when removed fixed the bug.
Thanks.
Unless you left something out. it is working for me with and without css.
Tested in IE 8
How did you include the CSS btw?
The <div id="contend"> right next to tag had a z-index:1. This made every link in <header> tag non-clickable.
The solution was to remove the z-index property.
Hope it helps someone.