Im learning html & css and after few tutorials I decided to write webpage from nothing.
But I've got a problem. When I add "display: inline" in CSS .nav, it ignores all .nav css properties, including "display: inline".
Here's code:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Neni okurka, nebudou caciky</title>
</head>
<body>
<div class="nav">
<ul>
<li class="active">Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</div>
<div class="nav2">
<ul>
<li class="active">Navi 1</li>
<li>Navi 2</li>
<li>Navi 3</li>
<li>Navi 4</li>
<li>Navi 5</li>
</ul>
</div>
</body>
</html>
CSS
body {
background-image: url("background.png");
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav {
display: inline;
width: 500px;
background: #fff;
}
If you want background(image) you need to have it in the container as soon you give it width and height because body is the "Base" you can give it margin: 0; padding: 0; to reset it only and you can add background to it but not height and width. Inside containeryou have created you can play with the height and width as you like.
html,
body {
margin: 0;
padding: 0;
background-color: cadetblue;
}
.container {
width: 1050px;
height: 100vh;
margin: 0 auto;
position: relative;
background-size: 100% 100%;
background: url("http://www.myfreetextures.com/wp-content/uploads/2013/07/free-grunge-texture-of-old-vintage-paper-background-image.jpg") no-repeat center;
}
.nav {
width: 1000px;
height: 50px;
margin: 0 auto;
background: beige;
border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav ul li {
margin-left: 12px;
}
.nav ul li a {
float: left;
font-size: 16px;
font-weight: lighter;
text-decoration: none;
font-family: sans-serif;
margin: 10px 0px 10px 0px;
padding: 8px 15px 8px 15px;
}
.nav ul li a:hover {
color: #fff;
border-radius: 3px;
background: cadetblue;
}
<div class="container">
<div class="wrapper">
<div class="nav">
<ul>
<li class="active">Navigation 1
</li>
<li>Navigation 2
</li>
<li>Navigation 3
</li>
<li>Navigation 4
</li>
<li>Navigation 5
</li>
</ul>
<ul>
<li class="active">Navi 1
</li>
<li>Navi 2
</li>
<li>Navi 3
</li>
<li>Navi 4
</li>
<li>Navi 5
</li>
</ul>
</div>
</div>
</div>
this code without display:inline; or display :inline-block; which
it works but it's another way to align nabbar in nice way compatible
with all browsers too.
I hope you like it and it helps you, let me know if you have another question.
The right usage is:
.nav li {
display: inline;
}
You should put display: inline-block;
Man try to put .nav ul lit to refer to the li but I will not use that let me tell you now one sec
.nav ul li`display:inline`
in orther to display betther ur nav thing u shuld not use .nav ul li display:inline
i know i say that was for answer ur question but this thing i will tell you will be betther
.nav ul lifloat:left
this will do the items in the li will float left and will do the same as the inline but isbetther to use that rather than the inline
Related
I've been trying to figure out how to make a Navbar with a drop down menu. I feel like I'm super close, but for some reason when I hover over my main list element, it shows the entire contents of the submenus as well.
This is the point I keep getting stuck, I've tried adding in, switching around li, and ul in my CSS, but its just not working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}
body {
background-color: pink;
}
h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height: 2em;
width: 100%;
}
nav {
background: red;
margin: auto;
padding: 10px;
line-height: 1.6em;
width: 100%;
}
nav>ul>li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}
nav>ul>li>ul {
background-color: blue;
list-style: none;
position: absolute;
/*display: none;*/
width: 100%;
}
nav>ul>li:hover ul li {
display: block;
}
nav>ul>li>ul>li>ul {
list-style: none;
background-color: black;
position: absolute;
left: 100%;
top: 0px;
width: 40%;
display: none;
}
nav>ul>li>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing 1
</li>
<li>Thing 2
</li>
<li>Thing 3
</li>
<li>Thing 4
</li>
<li>Thing 5
</li>
<li>Thing 6
</li>
</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
The first drop-down items should be centered with the Navbar element (Music).
Every sub-menu after that should appear top 0px; left 100%, of the list item (Song 1 in this case). You can see the expected results in my CSS.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}
body {
background-color: pink;
}
h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height:2em;
width: 100%;
}
nav {
background: red;
margin: auto;
padding:10px;
line-height: 1.6em;
width: 100%;
}
nav > ul >li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}
/* i added only following codes */
nav ul li ul li ul {
display:none;
}
nav ul li ul li:hover ul {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css"
href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing
1</li>
<li>Thing
2</li>
<li>Thing
3</li>
<li>Thing
4</li>
<li>Thing
5</li>
<li>Thing
6</li>
</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
A very similar example of what you are trying to achieve, in this case is on click but you can get the idea on how to do it on :hover
https://codepen.io/Angel-SG/pen/JwXRZo
I'm a beginner in CSS but I'm currently trying to create a material-design header with "line" under each tab like on this Google site : Our Products | Google
If possible I'd also like the animation when changing tab.
For now my header html is :
<header>
[MY LOGO]
<nav>
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
</nav>
</header>
And my CSS :
header {
display: table;
background:#FFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
width:100vw;
clear: both;
display: table;
overflow: hidden;
white-space: nowrap;
}
nav {
display: inline-block;
margin-left: 5vw;
vertical-align: middle;
}
nav ul {
display: inline-block;
margin 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 3vw;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: inherit;
}
nav a:hover,:active,:focus {
color: #b82525;
}
How do I position the shape to be under the .current-nav tab ?
If you inspect the example you have linked to, you will see that one way they do this is by adding a border-bottom to the selected element. You can do this like so
.current-nav {
border-bottom:1px solid #4285f4;
}
They have another technique which is to add an element below, but i'll leave that for you to investigate/reverse engineer.
just use nav ul li a.current-nav{ border-bottom: 1px solid red; } and you are done.
Try this:
<header>
[MY LOGO]
<nav>
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div class="line-selected right" style="display: block; left: 322px; right: 0.078px;"></div>
</nav>
</header>
The left and right values depends on the sizes of your Logo and of your <li>. You have to change the style of the "line-selected right"class for each event.
Sorry, my bad, was really tired of trying to figure out the issue. So lemme rephrase the question - "How do i make drop-down menu appear below specific item of my centered horizontal menu". ( I've changed the code a bit)
HTML
<div class="menu">
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4🔽
<ul id="dropdown">
<li>sublink1</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
CSS of centered .menu
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
height: 30px;
position: relative;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
margin-top: 40px;
font-family: "oswald", sans-serif;
color: black;
text-decoration: none;
}
#nav a:hover {
background-color: rgba(107, 163, 252, 0.28);
}
just add
ul#dropdown
{
padding: 0px;
}
see jsfiddle here : https://jsfiddle.net/yxLzbkL3/
edit fyi : if the padding is not specified the user-agent styling from your browser will auto indent multiple lists using padding.
I have a responsive drop down menu that will center on its smallest size when the width is 100% but wont when its changed to a max width of 100%. I have its parent and its parent's parent's ect set to a max-width of 100% but the max-width property doesn't seem to work like its supposed to.
From my understanding max-width is relative to the parent so if its parent and its parent's parents are set to a max width of 100%, the smallest child that is set to a width of max-width should have same width as the highest parent, which is max width of 100%.
Is there something wrong with my code or am I understanding something wrong? I know I can just solve the problem with width of 100% but I want to understand why the max-width isnt workng
nav {
color: white;
background-color: orange;
margin: auto;
padding: 0;
max-width: 100%;
}
nav li > span, nav a {
font-size: 1.3em;
}
nav ul {
padding: 0;
text-align: center;
max-width: 100%;
margin: auto;
}
nav li {
border-style: solid;
border-width: 0 1px 0 0;
border-color: rgba(0,0,0,.1);
list-style: none;
max-width: 100%;
}
.main-nav {
position: relative;
}
.sub-nav {
box-shadow: 5px 5px 10px rgba(0,0,0,.1);
z-index: 1;
position: absolute;
display: none;
background-color: white;
max-width: 100%;
}
.sub-nav li {
max-width: 100%;
}
.sub-nav li a {
max-width: 100%;
}
.main-nav:hover .sub-nav {
display: block;
}
#media screen and (min-width: 450px){
nav li {
display: inline-block;
margin: 3px;
padding: 2px;
}
nav ul {
text-align: right;
padding: 0 5% 0 0;
}
.main-title {
text-align: left;
margin: 0 0 15px 15%;
padding: 15px 0 0 0;
color: orange;
font-size: 4em;
}
}
<header>
<h1 class="main-title">This Is a Test</h1>
<nav>
<ul>
<li class="main-nav home-page active">
HOME</li>
<li class="main-nav">
<span> Content 1 </span>
<ul class="sub-nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li class="main-nav">
<span> Content 2 </span>
<ul class="sub-nav">
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="main-nav">
<span> Content 3 </span>
<ul class="sub-nav">
<li>Page 7</li>
<li>Page 8</li>
<li>Page 9</li>
</ul>
</li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
</footer>
Demo
I'm not really sure what max-width has to do with it, but simply removing the text alignment results in a centered menu.
#media screen and (min-width: 450px) {
...
nav ul {
/* text-align: right; */
...
}
Demo
Here I've removed every instance of max-width, and nothing seems to change.
I have looked a few questions so far that are very similar to this one, but still can't find the answer to my question. (Please note that I am new to HTML and that this is my first post).
I want to have a navigation bar that spans the width of the page no matter the width of the screen that it is being viewed on. I tried making the 's width 100%, but it still did not do anything.
The code for the navigations bar is here:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</body>
</html>
Can you please help me to find a way to make the navigation bar span the width of the page?
Thanks!
If you want to expand the li to be the same size and fill the width of the ul, flexbox can do that.
Modern Browsers - Flexbox
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}
li {
flex:1 0 auto;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding:10px 0;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
Alternative Solution: Old Browsers - CSS Tables
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
You have already given your nav a width of 100%. Now try adding a width to your LI element in your CSS to evenly distribute them across the 100% width of the nav.
li {
float: left;
width:25%;
}
nav is already 100% width,with this css configuration.Give it some background you will be able to see it.
So right how, the navigation bar is spanning the width of the page, however the objects inside aren't large enough to fill the gap. This can be seen if you add a background color to the navigation bar. What you might consider is center-aligning the objects within the nav bar or expanding the width of each object to near 25%
Are you trying to make the nav tag expand from window edge to window edge?
If so you will want to remove the margin on your body:
body {
margin: 0;
}