I have a bit of experience with HTML and CSS and have just started to use flexbox today.
I am attempting to make a simple navbar using flexbox but it has a top and bottom margin of 16px that I cant figure out how it is occurring.
I have tested it on both Firefox and Chrome and get the same results. I have also tried giving the ul.menu a margin of 0 to no effect. I have google and searched here for a solution but was unable to find one.
any help would be greatly appreciated.
* {
margin: none;
padding: none;
font-size: 16px;
}
nav {
background-color: black;
}
ul {
display: flex;
flex-direction: row;
justify-content: end;
align-items: center;
/* list-style-type: none; */
margin: none;
}
ul.menu {
padding-left: 0rem;
margin-top: 0%;
}
a {
color: white;
text-decoration: none;
font-size: 1.5rem;
}
a:hover {
color: goldenrod;
text-decoration: underline;
}
.menu li {
padding: 1rem;
}
.logo {
margin-right: auto;
margin-top: 0.5%;
}
.logo img {
height: 4rem;
/* width: auto; */
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/navbar.css">
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><img src="/irishlogo.png" alt="24th georgia flag"></li>
<li class="item">Event Shedule</li>
<li class="item">History</li>
<li class="item">Pics & Vids</li>
</ul>
</nav>
</body>
</html>
Set body, ul, li to margin: 0; padding: 0; and it should take care of all phantom whitespace.
You should change the above code for margin: none; padding: none; to margin:0; and padding:0;
Your final code should look like this:
* {
margin: 0;
padding: 0;
font-size: 16px;
}
if you set
menu.li {
padding: 0px;
}
then the padding will remove.
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'm trying to make scroll nav like youtube nav
I want to make the scroll-horizontal div get the width of the inline-block elemtns which is <li>
I want someway to make the scroll-horizontal div get the current width automatically even if I added more <li> elements to the nav later
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item">Models</li>
<li class="menu-item">Photos</li>
<li class="menu-item">Videos</li>
<li class="menu-item">Youtube</li>
<li class="menu-item">Links</li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>
the nav that youtube has:
youtube nav
you can see that the nav that they had don't have empty space at the end of the nav like what I have
this might partly answer your question:
As I understand it, the horizontal scroll arrows for the tab menu on youtube are shown, depending on the window width. So I would use the css '#media' rule to specify the width, when the arrows should be displayed. Here is a solution that displays both left and right arrows as soon as the window gets too narrow to display the complete menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
one
two
three
four
five
six
seven
eight
nine
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>
I am fairly new to CSS and I'm trying to make my second website. My problem is that the entire navbar is clickable. The navbar items, on the other hand, is okay and it should have clickable fields.
The navbar should be set on the right side of the screen and it should display (portfolio, about me, contacts, and resume) from left to right.
I have tried messing the setting between "display: inline" and its padding to see if that fixed the issue but I'm still getting clickable fields around the entire navbar. I don't know how to fix this issue.
CSS:
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
background-color: #fff;
overflow: hidden;
}
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
}
.menu li {
display: inline;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #fff;
color: #272727;
text-decoration: none;
float: right;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
}
.menu a:hover {
background: #272727;
color: #fff;
transition: all 0.3s;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Beta Portfolio</title>
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<nav class="main-nav">
<ul class="menu">
<li>Resume</li>
<li>Contacts</li>
<li>About Me</li>
<li>Portfolio</li>
</ul>
</nav>
</body>
</html>
Again, the fields around each of the navbar items should be clickable not the entire navbar section. I'm aware of the jsfiddle website but I'm trying not to alter my style too much because I might not like the end result.
[EDIT]
Here is the revised CSS code with minor changes:
CSS (New):
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
float: right;
justify-content: space-between;
}
.menu li {
display: inline-block;
background: red;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #ccc;
color: #272727;
text-decoration: none;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
display: inline-block
}
Padding is clickable in anchors. Use margin instead. Display: inline-block is a mess when items are floated.
li a {margin: 15px; line-height: 40px;} /* just text clickable */
OR
li a {margin: 15px 0; padding: 0 15px; line-height: 40px;} /* text and left/right neighborhood clickable */
See this JSFiddle to see the differents. 1st is your code, 2nd and 3rd are my variants used in the answer. Red background shows you what area is clickable.
With a few suggestions from the community, the final CSS code is the following: (its the same as the [EDIT] version, but I'll post it here just in case)
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
float: right;
justify-content: space-between;
}
.menu li {
display: inline-block;
background: red;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #ccc;
color: #272727;
text-decoration: none;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
display: inline-block
}
You have set the cursor to look like it's clickable.
ul.menu {
cursor: pointer;
}
This will always make it look like it is clickable. Just get rid of that completely or use default instead.
ul.menu {
cursor: default;
}
Check this out to look at the different types of cursors
I am trying to center my ul, but I can't seem to get it to center. I have tried using display: table margin: 0 auto That puts the ul in the middle, but not exactly in the center. I have also tried using display: block with margin: 0 auto but that doesn't center it either
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
You can add this rule to the <ul>:
display: inline-block;
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
I assume that the issue isn't so much that you want the ul element centered, but rather you want the menu items (the li items) inside the ul to be centered.
The entire issue is solved by simply changing the style on your li from float:left to display:inline-block. See below.
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display:inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
Updated answer: use flexbox
For the best control over spacing of elements in a column or a row, I'd recommend using flexbox now that it has widespread browser support.
To use flexbox here, set display: flex; on the ul, making it the flex container. By default, this will make the ul act as a row with the li acting as flex items within that row. CSS Tricks has a great guide about using flexbox.
I've left my original answer which uses display: inline-block; below.
Original answer
Sounds like display: inline-block; is exactly what you need.
As the name alludes, an element with display: inline-block; acts as if it's an inline element as far as its parent is concerned, and internally it acts like a block element.
Its use here requires a container with width: 100%; and text-align: center;. I've used the <nav> element below. The <ul> can then be given display: inline-block; to achieve the effect you want.
You can also use display: inline-block; in combination with display: inline; for the <li> and their child <a> elements as follows, in order to avoid the float: left; use.
li {
display: inline;
}
li a {
display: inline-block;
...
}
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
}
li {
display: inline;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
nav {
width: 100%;
margin: 0 auto;
text-align: center;
}
<header>
<h1>DROPLET GAMES</h1>
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Games
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</header>