it's my first year on coding and i'm doing this for a school Project. We have to do a responsive site and i'm already facing a problem when trying to add a navbar to my site. Whenever i add it, it just goes too much to the left and wont go in the middle. I tried searching google for help but none of them worked so thought i'd register here to ask. Thanks in advance!
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</div>
If you want your menu items centered inside the whole menu bar, just do as #Pete said:
li {
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center; <-----------
}
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</div>
Related
Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>
I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names
I have a navigation bar which is OK, but just underneath that there is a 1px line that I cannot get rid of, it should be flush with the address underneath. This is the code that I have can anyone suggest anything?
There is also some of the html which was so hard formatting on here anyhow they want me to add more text. So it is the address underneath the naviation
address.space {
width: 100%;
background: #FF9900;
font-family: 'Monserrat', sans-serif;
text-align: center;
display: inline-block;
font-size: 1em;
margin-bottom: 20px;
}
/*menu*/
.nav {
background-color: #3333FF;
width: 100%;
height: 40px;
line-height: 40px;
}
.menu {
font-family: Monserrat, sans-serif;
font-size: 20px;
color: white;
list-style-type: none;
padding: 0;
position: relative;
z-index: 1;
}
.menu a {
text-decoration: none;
color: #fff;
line-height: 40px;
height: 40px;
display: block;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 0 20px 0 20px;
width: 13.5%;
height: 40px;
}
.menu li:visited,
.menu li:active,
.active,
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 14px 0 0;
font-size: 20px;
display: none;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
html,
body,
#main,
#firstside,
.firstsidewider,
#second,
.wide {
width: 100%;
font-size: 1em;
}
h1 span {
display: none;
}
label {
cursor: pointer;
display: block;
color: #fff;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu li a {
border-bottom: 1px solid #F4F4F4;
display: block;
background: #3333FF;
margin: -20px;
padding: 0;
}
.active,
.menu li:hover {
color: #fff;
background: 0;
}
#toggle:checked+.menu {
display: block;
}
<header id="banner">
<div class="nav">
<label for="toggle">☰</label><input id="toggle" type="checkbox">
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts
</li>
<li>Members
</li>
<li>Policies
</li>
<li>Links</li>
<li class="active">
Volunteer/li>
</ul>
</div>
</div>
<address class="space">
Meeting Address: YMCA -The Lecture Room 29 Rush Green
Road
4.00pm - 6.00pm</address>
<section id="leftheader">
<h1>Hubb <span>support group</span></h1>
The navbar I created overlaps when I switch my site to a mobile view.
I tried making it fit-content, but it still overlaps. The part that overlaps is the listed items
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline;
padding-top: 23px;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
I expect the navbar items to be side by side but the actual result in them overlapping.
You can use inline-flex for that
change
#navBar ul {
padding: 0;
margin: 0; /* reset margin */
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex; /* change to inline-flex and remove the padding */
position: relative;
}
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
margin: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
I've been trying to make that website for YouTube views and like bot and the logo isn't clickable somehow.
navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: gray;
}
.navbar ul li {
float: left;
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bolbol.png);
width: 150px;
height: 100px;
text-indent: -1400px;
background-size: 100% 100%;
}
li:nth-child(2) {
position: relative;
top: 25px;
}
<div class="navbar">
<ul>
<li>Logo</li>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
https://jsfiddle.net/6L3jak0s/
I think what you are trying to do is to make things look like a header, it's better with flexbox. Something like this maybe..
.navbar {
display: flex;
background-color: gray;
margin: 0;
padding: 1rem;
justify-content:space-between;
align-items:center;
}
.navbar ul {
list-style-type: none;
display: flex;
align-items:center;
}
.navbar ul li {
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bololo.jpg);
background-size: 100% 100%;
}
.navbar a {
display: block;
}
<div class="navbar">
Logo
<ul>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
Remove this property "text-indent: -1400px;" from this rule "li:first-child Rule".
and then add the following CSS.
.navbar li a {
width: 100%;
height: 100%;
display: inline-block;
text-indent: -1400px;
}
I'm trying to create a navbar whith white bars on top of the options, but the position: absolute is not responding as I expect, even if I place it after a position: relative, the white bars are wider than the width of the options:As you can see here
This is the code I'm following from the tutorial, I would appreciate your help.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Another way to achieve the same:
Instead of using the pseudo element, you can use the property border-top along with padding-top to achieve the same, if what you need is the border width to be equal with the length of the option.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
border-top:5px solid #fff;
padding-top:10px;
}
nav a:hover {
color: black;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Here is another way, in-case you need the width of all borders be same. You must give a fixed width to the pseudo element, instead of 100%.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
/*width: 100%;*/
width: 100px;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Your line item element is wider than your link element which means that your white bar will copy the relatively positioned line item's width. If you look in inspector you can see this clearly.
The width
Use the border-top property instead on your links.
nav a{
color: white;
text-decoration: none;
border-top: solid 3px #fff;
padding-top: 35px
}
nav a:hover {
color: black;
}
nav a::before {
}
On nav a:before :
If you want to create it the same width as your text - substract the padding:
width: calc(100% - 80px);
or you want to place it the same size as your li item use:
left: 0;
You have to account for the 40px * 2 = 80 px of padding you have added to the li element.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: calc(100% - 80px);
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
/*delete padding */
margin-left: 70px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
/*add this */
padding: 40px 0;
display: inline-block;
border-top: 5px solid transparent;
}
nav a:hover {
color: black;
/*and this*/
border-top: 5px solid white;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100px;
}
*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
The nav a::before pseudo-element is a child of a::before. Pseudo-elements like ::before or ::hover are always children of the elements whose selectors preface them. You need to put the position:relative property on the rule for nav a. Currently, you have the position:relative property on the li element, which is wider than the a element.
You'll also need to add some other property to raise the line. I've added padding-top to solve that problem.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
position: relative;
padding-top: 20px;
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>