So I am new in this HTML thing and I am experimenting with a navigation bar. With when I hover over a li/a element I get another color for the full height of the navigation bar.
This is what I get first
body{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
overflow: hidden;
}
.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}
.navbar ul li:hover{
background-color: #bdc3c7;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
And then I changed a few things in the code and came up with this (Here is the second experiment result) (erasing overflow:hidden; and changed it with line-height:55px;)
I got the full height hover but there's a white gap between the browser window and my navigation bar.
body{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
line-height: 55px;
}
.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}
.navbar ul li:hover{
background-color: #bdc3c7;
}
I know there's a bunch of similar questions like mine and I've read them before asking here, but I still don't get the result that I want.
Here you go, your navbar needs margin removed, so check the code ..
EDIT: I also modified a a little bit, so it doesn't overflow navbar and fills full height of it.
body {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
line-height: 55px;
}
.navbar ul {
margin: 0; /* <--- THIS IS WHAT REMOVES BLANK SPACE ABOVE/BELOW NAVBAR */
}
.navbar ul li {
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a {
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 0 50px; /* more proper use of padding */
line-height: 55px; /* line-height to allow full clickable area */
display: block; /* so the line-height can be applied */
}
.navbar ul li:hover {
background-color: #bdc3c7;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</div>
</div>
</body>
</html>
In your CSS , add
html,body {
margin: 0;
padding:0;
}
Related
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
I'm currently trying to write the css for a sliding side menu, as part of a personal project. Right now, my problem is that the styling for the text menu items in the sidebar (see the aside element below, with class = "nav-sidebar") is not coming through from the css sheet. Below is the HTML...
And the CSS (the styling which isn't coming through is at the bottom):
* {
margin: 0px;
padding: 0px;
}
header {
position: sticky;
background: #404040;
height: 85px;
margin: 0px;
padding: 0px;
width: 100%;
}
header::before {
content: '';
display: block;
margin: 0px;
height: 5px;
background-color: #8EFA00;
}
.nav-main {
position: fixed;
top: 0;
width: 100%;
height: 60px;
display: flex;
flex-wrap: wrap;
}
.btn-toggle-nav {
width: 60px;
height: 100%;
margin-top: 10px;
margin-left: 10px;
background-color: #8EFA00;
border-radius: 50%;
background-image: url(imgs/menu.png);
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
cursor: pointer;
}
.btn-toggle-nav:hover {
opacity: 0.5;
}
.nav-main ul {
text-align: center;
padding-top: 0px;
padding-left: 500px;
display: flex;
flex-wrap: wrap;
}
.nav-main ul li {
list-style: none;
line-height: 60px;
}
.nav-main ul li a {
display: block;
height: 100%;
padding: 0 10px;
text-transform: uppercase;
text-decoration: none;
color: white;
font-family: arial;
font-size: 16px;
}
.nav-sidebar {
position: fixed;
left: 0;
bottom: 0;
width: 50px;
padding: 0 5px;
height: calc(100vh - 60px);
background-color: #1b1b1b;
z-index: 1000;
}
.nav-sidebar aside ul {
padding-top: 15px;
text-decoration: none;
}
.nav-sidebar aside ul li {
line-height: 60px;
list-style: none;
text-decoration: none;
}
.nav-sidebar aside ul li span .nav-sidebar aside ul li a {
display: block;
height: 60px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
color: white;
font-family: arial;
font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Posidiff</title>
<link rel="shortcut icon" type="image/png" href="imgs/favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<header>
<nav class="nav-main">
<div class="btn-toggle-nav"></div>
<ul>
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contact us</li>
</ul>
</nav>
<aside class="nav-sidebar">
<ul>
<li><span>Home</span></li>
<li><a href=#>About</a></li>
<li><a href=#>Features</a></li>
<li><a href=#>Contact us</a></li>
</ul>
</aside>
</header>
<body>
</body>
</html>
I've included the entirety of both the HTML and CSS documents for the sake of providing some context, but right now I'm only interested in the styling for the items in the ul/li within the "nav-sidebar" class.
I've tried checking it in a different browser (safari - although i'm using it in chrome), and tweaking one or two things in the css doc, but to no avail.
I also wanted to mention that I'm fairly new to HTML and CSS, so it's entirely possible that there are a few other things wrong here as well!
So - ultimately my question is, why is the styling here not coming through for ".nav-sidebar aside ul li span .nav-sidebar aside ul li a"?
Many thanks in advance!
the order you were calling your element, class in was wrong. try notation like this.
<element>.class <child element>
/* or */
<element>#id <child element>
aside.nav-sidebar
aside.nav-sidebar ul
aside.nav-sidebar ul li
aside.nav-sidebar ul li a
You are missing a comma between “span” and “aside”. Should be
aside.nav-sidebar ul li span, aside.nav-sidebar ul li a
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>
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>
I'm currently learning HTML and CSS and I tried making my very first webpage but got stuck when I realized my h2 is not appearing anywhere on the page. Sorry Im a noob and have no idea what I did wrong. Please help! Thank you!
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
Your header is fixed ... You need to move your div down with margin ..FIDDLE
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="DIV">
<h2>Hello!</h2>
</div>
--
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
#DIV{
position:absolute;
margin-top: 125px;
}
The issue here is related to your use of a fixed header.
Take a look at this:
http://codepen.io/anon/pen/XXpggN
All I did was put some padding on the top of the div with the h2 in it, which brought it out from underneath the header. For future reference, a fixed position header will float above the rest of the contents, so the next elements that you add are going to begin appearing right at the very top of the body because the header div floating up top there is not occupying any space on the main body page.
If you ever want to organize your divs in a manner such as this, you just need to specify the z-index values of the divs. In this case though, all you needed was to push the first element (h2 div) down a bit.
position:inherit; padding-top:110px;
your header overwrite other tag.
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: relative;
padding-bottom: 50px;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: back;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
CSS:
h2 {
color: blue;
background-color: white;
text-align: center;
}
header {
background-color: black;
width: 100%;
height: 100px;
}
Hope this work :)