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
Related
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
}
nav{
height: 85px;
width: 100%;
z-index:1001;
}
label.logo{
color: rgb(255, 255, 255);
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #1b9bff;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
position: fixed;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 0px;
font-weight: bold;
}
nav {
z-index: 1001;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
}
.vid-background {
z-index: -100;
width:100%;
height:80vh;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
.reg-element {
width:100%;
height:80vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title>SnowWarrior Landing Page</title>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<img src="https://img.icons8.com/ios-glyphs/30/000000/menu--v1.png" alt="menu"/>
</label>
<label class="logo">SnowWarrior</label>
<ul>
<li>Home</li>
<li> Shop</li>
<li> Contact</li>
</ul>
</nav>
<div class="vid-background">
<video autoplay loop muted>
<source src="./assets/winter1.mp4">
</video>
</div>
<section></section>
<div class="reg-element">
<span>Just saying</span>
</div>
</body>
</html>
The video overflowing into the navbar is by choice since that is what I'm trying to achieve. However, when I try to add more div elements with text in there, it shows up behind the video instead of below the video. I'm very new to HTML and CSS (just dived into these two days ago) so I may be doing some things wrong here. But I would be glad if someone could point the right thing out to me.
Edit: Does anyone know how to embed a video into an HTML so it shows on StackOverflow?
This would be my approach:
Using modern layout algorithms such as flexbox&grid rather than absolute positioning hell. Here I have a header with the nav and video as children. The header is a grid where the nav is explicitly set to take up the top section and the video explicitly told to take up the full grid.
Smaller components use flexbox to flex along a single axis, and when out of room, wrap onto a new line to allow the website to be responsive on small screen widths, removing the need for media queries here.
If you don't understand something and want me to update this answer to explain it, drop a comment.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: montserrat;
}
header {
display: grid;
grid-template: min-content 9fr / 1fr;
width: 100%;
min-height: 80vh;
color: white;
}
nav {
grid-area: 1 / 1 / 2 / 2;
height: min-content;
z-index: 10;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
padding: 1rem;
background-color: #0004;
background-blend-mode: darken;
}
.vid-background {
grid-area: 1 / 1 / 2 / 3;
}
.vid-background>* {
width: 100%;
}
h1 {
font-size: 2rem;
}
nav ul {
flex-basis: max-content;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
nav ul li a {
padding: .5rem 1rem;
border-radius: 3px;
color: inherit;
text-transform: uppercase;
transition: .5s;
}
a:active,
a:hover {
background: #1b9bff;
}
<header>
<nav>
<h1>SnowWarrior</h1>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="vid-background">
<img src="https://source.unsplash.com/random/800x400">
</div>
</header>
Just saying
This is because you're using position:fixed for everthing at the top, which then sadly makes your next element not care about its existance.
Simply put, if you put position:fixed, and then simply add an div with no position defined, they will not relate to eachother. As I do not know how you wish this to work I cannot fix the code for you, hence I will have to simply inform you about this and hopefully you'll be pointed in the direction you asked for - check position out in some css tutorials.
Display:flex is a good place to start.
So I was creating the beginning of my hopefully, useful website. I started making the header and the menu part. In the search engine part, my intention is to create a dropdown menu with some options when I hover over Search Engine, until that it should disappear. I commented out in the CSS code display: none so that you can see how the dropdown looks like. I tried the pseudo-class .dropdown: hover but it didn't work. How can I make the dropdown menu only appear when I hover over the search Engine?
The linked image as the example of how it looks like, not how it should
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>SerFin</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<style>
.title {
font-family: 'Cinzel', cursive;
}
</style>
<link href='test.css' rel='stylesheet'/>
</head>
<body>
<header>
<nav>
<ul class="menu">
<li><a href='#'>Customer Service</a></li>
<li><a href='#'>Submission</a></li>
<li class="dropdown">Search Engine ▾<li>
</ul>
<ul class="dropdown-menu">
<li>Universities</li>
<li>Jobs</li>
<li>Courses</li>
<li>Internships</li>
<li>Services</li>
</ul>
<ul class="setup">
<li><a href='#'>Login</a></li>
<li>Sign up</li>
</ul>
</nav>
<img class="logo" src="Logo.jpg"></img>
</header>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 18px;
line-height: 1.8em;
}
header {
background-color:#5D6063;
}
nav {
display: flex;
justify-content: space-around;
background-color: #54575A;
width: 100%;
height: 40px;
}
li {
list-style: none;
display: inline;
padding-left: 10px;
padding-right: 10px;
}
a {
color: #D3D3D3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #54A5C4;
}
.menu {
color: #EEEEEE;
padding: 5px;
}
.setup {
color: #EEEEEE;
padding: 5px;
}
.title {
color: white;
display: flex;
justify-content: center;
padding: 150px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
padding: 100px;
}
/*
---------------------------------------------------------------------------------------------
All of this is the heading, from now on everything has to do with the dropdown menu
*/
.dropdown {
position: relative;
z-index: 2;
}
.dropdown-menu {
display: flex;
flex-direction: column;
background: #54575A;
border-radius: 1px;
padding-top: 60px;
position: absolute;
top: -25px;
left: 490px;
z-index: 1;
}
.dropdown-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown-menu li:last-of-type {
border-bottom: none;
}
.dropdown > span {
z-index: 2;
position: relative;
cursor: pointer;
}
/*.dropdown-menu {
display: none;
}*/
You can use plain javascript or jquery in this.
This is how to do it using jquery.
$('.dropdown').hover( function(){ $('.dropdown-menu').show(); });
If you are using Javascript, you can use the following attachment, onmouseover inside the html element. Such as:
<img onmouseover="yourfunction()" src="path">
or you can do the following in the javascript file:
object = document.getElementByID("element") (or any other reference to element)
object.addEventListener("mouseover", myScript);
I had assistance from: https://www.w3schools.com/jsref/event_onmouseover.asp
Hopefully this was helpful.
I have a photo of the most recent post on my page and would like to put a small portion of text onto the top left corner of the picture. I have tried code to do so from other online resources, but none of them have worked. Can someone please check why my code isn’t working or provide an alternate method of putting text on an image?
Here is my HTML + CSS:
* {
margin: 0;
padding: 0;
}
body {
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 130px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover img {
height: 50%;
width: 100%;
position: relative;
display: inline-block;
}
.newest-review-cover .newest-review-title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-title">
<p> The 5AM Club </p>
</div>
</section>
</body>
</html>
Thanks in advance for your help!
For starters, you are targeting your newest-review-title class wrong in your CSS, by using a period between review and title. Change that. Also, try making your container the relative element instead of your image, like so:
.newest-review-cover {
position: relative;
}
.newest-review-cover img {
display: block;
width:100%;
}
.newest-review-title {
position: absolute;
display:block;
z-index: 999;
margin:0 auto;
text-align: center;
top: 50%;
width: 60%;
left:20%
}
This method provides an alternative solution using the CSS background image property. Then you can place your text in the div using the CSS you already had in place. You can adjust the height by adjusting the height of the div. The size of the image can be adjusted using the CSS background-size property.
* {
margin: 0;
padding: 0;
}
body {}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
/* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px;
/* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li {
width: 130px;
/* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover {
position: relative;
height: 383px;
width: 100%;
}
.newest-review-cover_bg {
background-image: url('https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg');
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.newest-review-cover .newest-review.title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%;
/* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial, sans-serif;
color: #fff;
width: 60%;
/* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel="stylesheet" type="text/css" />
<link href="Homepage.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<div class="newest-review-cover_bg">
<p class="newest-review-cover_title">
The 5AM Club
</p>
</div>
</section>
</body>
</html>
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;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.