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>
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.
When I zoom my page in and out it works, but homepage button loses its color, it doesn't expand to the right side.
So I have 2 aims:
1) To center selected area (on the picture allotted by red color).
2) To have homepage's green color expanded to the right to the end of the page.
Sorry for my English. Ask me if I didn't make the question clear.
what I'm trying to do
what I have
what makes me cry
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Infusion</title>
<link rel="stylesheet" type="text/css" href="infusion.css">
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="unlist">
<li class="homepage"><p class="parhome">infusion</p></li>
<li class="nav-elements">design folio</li>
<li class="nav-elements">services</li>
<li class="nav-elements">our business</li>
<li class="nav-elements">how we help</li>
<li class="nav-elements">take the tour</li>
<li class="nav-elements">contact</li>
</ul>
</div>
</body>
</html>
CSS Code
body, html {
margin: 0;
padding: 0;
}
.navbar {
width: 2000px;
margin: 0 auto;
}
.unlist {
display: flex;
margin: 0;
padding: 0;
}
.homepage {
background-color: #63C6AE;
display: inline-block;
list-style: none;
width: 360px;
height: 70px;
color: white;
font-size: 25px;
text-align: right;
vertical-align: middle;
line-height: 75px;
}
.parhome {
height: 50px;
padding: 0;
margin-right: 30px;
margin-bottom: 0;
margin-top: 0;
}
.parhome:hover {
color: #586165;
}
.unlist.a:first-child {
width: 148px;
}
.nav-elements {
display: inline-block;
list-style: none;
height: 70px;
padding-right: 25px;
padding-left: 25px;
text-align: center;
vertical-align: middle;
line-height: 70px;
}
.unlist a {
text-decoration: none;
color: #63C6AE;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-weight: bold;
}
.inlist, a:hover {
color: #586165;
}
It's not valid HTML to put a p tag into an li element. You can use a span instead.
Apart from that, you are limiting the width of your navbar with this CSS rule .navbar { width: 2000px; [...] }.
So when you zoom out, those 2000px (on a large monitor at full screen view) are less than what the window shows (zoomed!), therefore the green area's left border starts where those zoomed 2000px start.
You might want to change the navbar width setting to 100%.
Different approaches can be used to achieve what you want. But all of these approaches that i can think of, need a little bit hack. Meaning, the solution that i am posting here is not an elegant way of handling things.
The reason for that, is what you aim consists of two things.
Center the navbar
Make the homepage container fill with green to all the way left.
Trying to solve both, creates some conflicts which are not easy to solve. And especially if you also want your page to be responsive.
Before start as #Johannes stated, your code consists of elements which are not valid, therefore i tried to change your code a little bit, as much as i could.
So here is my approach:
body, html {
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
padding: 0;
}
.cont {
width: 1280px;
display: flex;
margin: 0 auto;
height: 70px;
}
.unlist {
display: flex;
margin: 0;
padding: 0;
}
.homepage {
background-color: #63C6AE;
display: inline-block;
list-style: none;
width: 360px;
height: 70px;
color: white;
font-size: 25px;
text-align: right;
vertical-align: middle;
width: 1200px;
margin: 0;
margin-left: -950px;
}
ul.homepage a {
color: #fff;
}
.parhome {
height: 50px;
padding: 0;
margin-right: 30px;
margin-bottom: 0;
margin-top: 0;
}
.parhome:hover {
color: #586165;
}
.unlist.a:first-child {
width: 148px;
}
.nav-elements {
display: inline-block;
list-style: none;
height: 70px;
padding-right: 20px;
padding-left: 20px;
text-align: center;
vertical-align: middle;
line-height: 70px;
}
.unlist a {
text-decoration: none;
color: #63C6AE;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-weight: bold;
}
.inlist, a:hover {
color: #586165;
}
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
<div class="navbar">
<div class="cont">
<ul class="homepage">
<li class="nav-elements parhome">infusion</li>
</ul>
<ul class="unlist">
<li class="nav-elements">design folio</li>
<li class="nav-elements">services</li>
<li class="nav-elements">our business</li>
<li class="nav-elements">how we help</li>
<li class="nav-elements">take the tour</li>
<li class="nav-elements">contact</li>
</ul>
</div>
</div>
NOTE: You can play with numbers, such as margin-left and width for exact results.
I am just getting back to working with websites, and cannot for the life of me center this navigation bar. I have floated the header over to the left, and feel like I have tried every possibly property, but it just will not center. Any help would be very appreciated.
Not centered NavBar:
.container {
margin: 0 auto;
background-color: #fff;
}
.header-heading {
float: left;
padding-top: 8px;
padding-left: 5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
background: #000;
padding: 0;
width: 100%;
}
.nav {
margin: auto;
padding: 0;
list-style: none;
text-align: center;
width: 100%;
}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web Report Demo</title>
<styles></styles>
<link rel="stylesheet" href="ed.css">
</head>
<body>
<div class="container">
<h1 class="header-heading">Web Reporting Demo</h1>
<div class="nav-bar">
<ul class="nav">
<li>Daily Master</li>
<li>Route Progress</li>
<li>UL Move Query</li>
<li>Stock Query</li>
</ul>
</div>
</div>
</body>
This should work
.container {
margin: 0 auto;
background-color: #000;
position:relative;
width: 100%;
height: 40px;
}
.header-heading {
position: absolute;
top:-20px;
left:5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
padding-top: 5px;
}
.nav {
margin: auto;
padding: 5px;
list-style: none;
text-align: center;
width: 100%;
}
.nav li {
display: inline;
padding: 5px;
}
.nav li a {
text-decoration: none;
color: #fff;
}
You will need to do some changes as you work in your responsive design.
Try giving the .container text-align: center.
I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.
JSFiddle - With Information
JSFIDDLE - Without Information
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<h2>CSGOMarble</h2>
<u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
<p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want.
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
z-index: 2;
position: fixed;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
z-index: 1;
}
Change this Css Hope it helps
Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.
The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).
Change position:fixed to position:relative for the <div class="container">
I'm just getting back into Web Development and so I'm working on stretching those muscles again. What I wanted to achieve was a Header on top of my vertical menu with the Initials in the background and the full name in the middle of those initials. I was able to do that with the code in codepen, however it quickly becomes broken when resizing the window. I know that is due in part to the position absolute. Is there another way to achieve this effect and have it be scalable, but stay within the lines of the nav?
http://codepen.io/anon/pen/OPPKmq
<html>
<head>
<title>Scottish Arts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<aside>
</aside>
<nav>
<h1 id="navSA">SA<h1>
<h1 id="sa">Socttish Arts</h1>
<ul>
<li><h3></h3></li>
<li>Home</li>
<li>Scottish Arts</li>
<li>Bagpipes</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,h2,h3 {
padding: 0;
margin: 0;
}
#body {
display: flex;
height: 100%;
}
aside {
width: 25px;
height: 100%;
background: url("img/nhtar.gif");
background-repeat: repeat;
border-right: 2px #000 solid;
}
nav {
height: 100%;
width: 15%;
background-color: #7E717A;
border-right: 4px #A2969E solid;
overflow: hidden;
}
nav #navSA {
font-weight: bolder;
text-align: center;
padding: 0;
margin: 0;
font-size: 8em;
color: #A2969E;
}
nav #sa {
padding: 0;
margin: 0;
position: absolute;
top: 60px;
left: 40px;
font-size: 2em;
text-shadow: 2px 2px #7E717A;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: right;
}
nav ul li a {
display: block;
padding: 5px;
background-color: #A2969E;
text-decoration: none;
font-size: 1.5em;
font-family: "Verdana";
font-weight: bold;
color: #fff;
border-bottom: 4px #7E717A solid;
}
nav ul li a:hover {
background-color: #372E34;
}
Giving absolute Position to a child that does not have relative parent , will set it's position relating to BODY .
add position:relative; to nav in css , and everything will be OK ;)
http://codepen.io/anon/pen/LEEwOd