So this is my Menu Bar code:
<!DOCTYPE html>
<html>
<link href = menuBarStyle.css rel = "stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<div class = "menu">
<ul class = "bar">
<li>Home</li>
<li><a>Music</a>
<ul>
<li>DJ Dizz Home</li>
<li>Spotify</li>
<li>SoundCloud</li>
<li>iTunes</li>
</ul>
</li>
<li><a>Learn</a>
<ul>
<li><a>JavaScript</a></li>
<li><a>Java</a></li>
<li><a>Web</a></li>
<li><a>SQL Databases</a></li>
</ul>
</li>
<li><a>Credits</a>
<ul>
<li><a>Design & Code</a></li>
<li><a>Music</a></li>
<li><a>Marketing</a></li>
<li><a>Hosting</a></li>
</ul>
</li>
<li><a id = "login">Login</a></li>
</ul>
</div>
</html>
And this it's style:
import url('https://fonts.googleapis.com/css?
family=Amatic+SC:700|Hind+Siliguri|Shadows+Into+Light');
body {
background-size: cover;
font-family: 'Hind Siliguri', sans-serif;
color: white;
min-width:800px;
width: auto !important;
width:800px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
float:left;
left: 50%;
cursor:pointer;
max-width: 100%;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
display:block;
position: relative;
right: 50%;
}
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;
}
#login {
background-color: green;
text-decoration: none;
border: none;
}
#login:hover {
background-color: limegreen;
}
#menu {
z-index: 2;
position: relative;
}
Now all i want is to make all other elements independent from that style, but the ul li in my following code always has the style from my navigationBar.
<!DOCTYPE html>
<html>
<head><title>DJ Dizz iTunes</title></head>
<?php include ("menuBar.html"); ?>
<link href = "style.css" rel = stylesheet>
<body>
<div id="Startpage">
<p style="text-align: center">iTunes</p>
</div>
<div id="itunes" style="text-align:center">
</div>
<ul id="songs">
<li>Staying Down</li>
<li>It's Me</li>
</ul>
</body>
</html>
So now the other ul li elements with the iTunes href's are not changing at all, they just stay the same as the navigationBar. I tried classes and id's but none works. All of the files are in .php except for my menuBar, this is .html
Thanks for your answers
Lars (Beginner)
Your navigation has the class "bar", so you need to specify that class in your CSS to target that element only and not ALL of the uls on the page. Ex:
ul.bar {
margin: 0px;
padding: 0px;
... etc ...
}
ul.bar li {
float: left;
width: 200px;
... etc ...
}
Do that for all of your ul rules in your CSS and you should be fine.
Related
I'm currently working on multiple css dropdown menu and the problem is in the position that the menus appear . AS you can see , Shop menu is in its own position but the services menu appears just in the same position as the shop menu was before. I'm new to front-end web development so anyone can help me to fix this please?
*{
margin: auto;
}
a{
text-decoration: none;
}
header{
display: flex;
direction: ltr;
background-color: gold;
padding: 15px;
}
.primaryHeaderMenu ul li ul{
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
}
.primaryHeaderMenu ul li ul li{
padding-bottom: 10px;
}
.primaryHeaderMenu ul li:hover ul{
display: block;
}
.primaryItems{
display: inline;
padding-left: 30px;
}
.primaryHeaderMenu li a{
color: black;
font-weight: bold;
}
.secondaryHeaderMenu li a{
color: black;
font-weight: bold;
}
.primaryHeaderMenu{
flex-grow: 1;
}
.secondaryHeaderMenu li{
display: inline;
padding-left: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Irancell</title>
</head>
<body>
<header>
<div class="irancellLogo">
<a href="#">
<img src="/iracell_logo.png" alt="Irancell" width="60px" height="60px">
</a>
</div>
<div class="primaryHeaderMenu">
<ul>
<li class="primaryItems">Shop
<ul>
<li>ُSimcards</li>
<li>Packages</li>
<li>Devices</li>
<li>Methods</li>
</ul>
</li>
<li class="primaryItems">Services
<ul>
<li>HighSpeed Net</li>
<li>Applications</li>
<li>Conversation</li>
<li>Messaging</li>
<li>Entertainment</li>
</ul>
</li>
<li class="primaryItems">Festivals</li>
<li class="primaryItems">Support</li>
<li class="primaryItems">About Us</li>
<li class="primaryItems">Cooperation</li>
</ul>
</div>
<div class="secondaryHeaderMenu">
<ul>
<li>
<img src="/search.png" alt="Search">
</li>
<li>
Login
</li>
<li>
Register
</li>
</ul>
</div>
</header>
</body>
</html>
Add position: relative; to .primaryItems class. Then add left: 0; to your .primaryHeaderMenu ul li ul class. The issue is position: absolute; is hoisting it's self up to the first relative positioned element in the HTML DOM, then they overlap each other since they have the same parent with the same position. There are interactive examples of this on W3Cschools.
I hope the following is useful for you.
Try replacing
.primaryItems {
display: inline;
margin-left: 30px;
}
with
.primaryItems {
display: inline;
margin-left: 30px;
position: relative; // New Line
}
and
try replacing
.primaryHeaderMenu ul li ul {
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
}
with
.primaryHeaderMenu ul li ul {
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
left: 0; // New Line
}
Example here: https://codepen.io/yasgo/pen/BaLNvBN
I am currently working on a project for college and my nav bar is giving me issues, I have tried various ways to resolve the issue by doing some research.
The site is very basic as it is just a template at the moment.
My main goal for the nav bar was to centre it on the main background image and allow the "Rooms" tab to drop down.
nav {
background-color: transparent;
}
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Beachview - Home</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="" />
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<div class="container">
<nav>
<ul>
<li>ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<main>Main stuff goes here</main>
</body>
</html>
Not 100% sure if the above makes sense as the background image will not load.
Add a .dropdown class to your li containing the dropdown ul.
<li class="dropdown">ROOMS
<ul>...</ul>
</li>
Add these styles to align your dropdown below the "Rooms" link:
.dropdown {
/* Make it so you can position the child ul with absolute position
/ relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
Apply display: flex to your .bg-img container, and then adding margin: auto; to the child-element nav will center it vertically and horizontally.
.bg-img {
background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
height: 200px; // Sample height
width: 100%; // Sample width
display: flex; // Flex allows for easy centering of child-elements
}
nav {
background-color: transparent;
margin:auto; // this is the key to the centered alignment
}
I also moved your class="container" from the wrapper div to your nav and removed that div.
Here is the full working code. (Click "Run Code Snippet, then hit "Full Page" on the right-hand side to see it working):
.bg-img {
/* Replace this img url with your image */
background-image: url('https://via.placeholder.com/900x200/000/333');
height: 200px; /* Sample height */
width: 100%; /* Sample width */
display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}
nav {
background-color: transparent;
margin:auto;
}
.dropdown {
/* Make it so you can position the child ul with absolute position
relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
/* None of the below code was modified */
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<body>
<div class="bg-img">
<!-- this is where the old <div class="container"> was -->
<nav class="container">
<ul>
<li class="dropdown">ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<main>Main stuff goes here</main>
</body>
I am trying to use CSS so when you hover on something it changes background colors. The code I am using does not work though. I can't seem to find out why though. It should work, right?
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a :hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
Please help!
Adjust your on-hover rule slightly and consider the a element as well:
li:hover, li:hover a {
background: blue;
}
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
transition: .7s;
}
li:hover, li:hover a {
background: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
You have a VERY simple mistake.
When you have this code...
li a: hover
remove the space between a and :hover and see the magic.
Now, it should look like this.
li a:hover
#Joseph Young mentioned this, don't forget to upvote his comment.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a:hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}
<div class="wrapper">
<div class="menu">
<ul>
<li>HOME
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>
I'm a little new to HTML as my classes has recently started and etc. In our task we have to hand in a website that has different characteristics, one of them being a drop down menu.
I managed to almost get it all working, but when I tried to hover my mouse over one of the navigation menu tags, the drop down menu is a little bit to the left like it would be as a listing object?
Here is how it shows up
This is how it looks when I hover over About
I have no idea what I'm doing wrong! I tried to do some research where I ended up centering my navigation menu, but that was all I managed to do! What do I have to do to make it be aligned with the "About" tag?
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: white;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
Issue is because of padding you have for the child ul and anchor tag. If you remove those it will align properly. Try to add the classes to the child elements, as this is not the proper way to write the css.
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
border: 1px solid red;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li ul{
padding-left: 0;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
function ServicesMenu() {
document.getElementsByClassName("services-cont")[0].classList.toggle("showS");
}
#charset "UTF-8";
*{padding:0;margin:0;}
body{min-width:300px; margin: 0px; padding: 0px; background:#f8f8f8 }
.wrapper {
max-width: 980px;
height:2000px;
margin: 0px auto;
position: relative;
background-color: #fff;
}
header{
width:980px;
height:105px;
background: #e60000;
}
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top:63px;
right:60px;
width: 560px;
display: block;
position: absolute;
}
ul.navbar li {
display:inline-block;
Margin-left:15px;
background: black;
}
ul.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
ul.navbar li a:hover {background-color: #660000;}
.services-cont{display: none;}
.services-cont.showS {
list-style-type: none;
display: block;
background-color: #707070 ;
}
.services-cont.showS li {
float: none;
display: inline;
height:0;
border:none;
}
.services-cont.showS li a {
display: block;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menustyle.css">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<script src="MenuFunc.js"></script>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
</header>
<ul class="navbar">
<li>Home</li>
<li>Services
<ul class="services-cont">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
However, the parent <li> appears on top with the nested list below and the rest <li> of the parent list are below aligned with the end of the child list.
How do I get the parent list items Home, Services and Contact horizontally aligned in a straight line?
Explanation
The position: absolute and overflow: hidden properties were interfering and not allowing the dropdown list to display properly. I have commented them in the code so you can see.
You should refrain from using absolute positioning where you can achieve the same effect by simply nesting the tags properly. For instance, I nested your navbar inside the red header.
Code
Press the 'Run code snippet' button below to see the code output.
* {
padding: 0;
margin: 0;
}
body {
min-width: 300px;
margin: 0px;
padding: 0px;
background: #f8f8f8
}
.wrapper {
max-width: 980px;
height: 2000px;
margin: 0px auto;
/*position: relative;*/
background-color: #fff;
}
header {
padding: 20px;
width: 980px;
height: 30px;
background: #e60000;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
top: 63px;
right: 60px;
width: 560px;
display: block;
/*position: absolute;*/
}
.navbar li {
display: inline-block;
Margin-left: 15px;
background: black;
}
.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
.navbar li a:hover {
background-color: #660000;
}
.navbar li ul {
position: absolute;
top: auto;
list-style-type: none;
display: none;
background-color: #707070;
}
.navbar li ul li {
float: none;
display: inline;
height: 0;
border: none;
}
.navbar li ul li a {
display: block;
text-align: left;
}
.navbar li:hover>ul {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
<ul class="navbar">
<li>Home
</li>
<li>Services
<ul>
<li>Service 1
</li>
<li>Service 2
</li>
<li>Service 3
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</header>
</div>
</body>
</html>
Explanation
You need to add the following two line of CSS code for the nested <li> tag.
ul li ul {
position: absolute;
top: auto;
}
Setting the position to absolute and top to auto will display your nested ul under the parent tag.
Code
Press the 'Run code snippet' button below to see the code output.
ul li {
background: black;
color: white;
display: inline-block;
width: 100px;
}
ul li ul {
margin: 0px;
padding: 0px;
background: grey;
/*YOU NEED THE TWO LINES BELOW*/
position: absolute;
top: auto;
}
ul li ul li {
color: white;
background: grey;
display: block;
width: 80px;
padding: 10px;
}
<html>
<body>
<ul>
<li>
Home
</li>
<li>
Services
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</body>
</html>