I wanted to reduce the space between my links for the navigation on the left side. I tried padding but it messes with my float.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>projekt</title>
</head>
<body>
<header>
<nav>
<ul>
<li class="home">home</li>
<li class="nav">contact</li>
<li class="nav">list</li>
<li class="nav">office</li>
<li class="nav">projects</li>
<li class="nav">plans</li>
</ul>
</nav>
</header>
<div class="navline"></div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
}
nav ul{
margin: 0;
padding: 0;
font-family: proxima-n-w01-reg,sans-serif;
list-style-type: none;
}
.navline
{
border-bottom:1px solid rgb(226, 223, 223);
padding-bottom:80px
}
nav li.home{
display: flex;
margin: 30px 0 0 160px;
float: left;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}
nav li.nav{
display: flex;
margin: 30px 100px 0 0px;
float: right;
font-size: 18px;
}
nav li a{
display: flex;
text-decoration: none;
color: black;
}
Should I not use float to position my navigations on the left and right side and rather display:flex and also to reduce the space?
Solution would be like:
plans projects office ....
But it's more like this:
plans projects office...
Try changing your CSS file, this is the example css file for a nav bar. You can add the missing attributes for the specific class in your css file. This would solve your purpose.
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline-block;
width:33%;
margin:0;
padding:0;
}
.nav a {
text-align:center;
padding:12px 0 13px 0;
margin:0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display:block;
}
.nav a:hover {
background:#A26A42;
border:none;
}
You have to decrease the size of the margin ..
nav li.nav{
display: flex;
margin: 30px 20px 0 0px;
float: right;
font-size: 18px;
}
There's no point of adding display:flex on li. Logically, I would say this css code for li as incorrect. Instead modify your css this way:
nav ul{
margin: 30px 0 0 0;
padding: 0;
font-family: proxima-n-w01-reg,sans-serif;
list-style-type: none;
display: flex;
justify-content: space-evenly; /* You may also play around this css attribute for evenly distributed spacing instead of applying margin or so on li tag */
}
nav ul > li{
margin: 0 10px; /* You may change this spacing as per your need */
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}
nav ul > li > a{
display: block;
}
I'll usually suggest applying margin-top on ul instead of individual li but that depends on you also.
Related
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.
I'm trying to give the hover effect to the li which appears to cover only the text part and not the whole li-box. I wonder why is it happening like this?
*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html, body{
margin: 0;
padding: 0;
}
.container {
display: grid;
background-color: rosybrown;
border: 1px solid black;
justify-items: center;
}
.heading{
order: 2;
}
.main-nav{
order:1;
text-align: center;
width: 100%;
border-bottom: 1px solid rebeccapurple;
padding: .5em;
}
.main-nav ul{
margin:0;
}
.main-nav li:hover{
background-color: rgba(255,255,255,0.3);
}
ul{
padding: 0;
}
.main-nav li{
display: inline;
margin: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
</head>
<body>
<div class="container">
<h1 class="heading">The Love</h1>
<nav class="main-nav">
<ul class="ulContainer">
<li>Home</li>
<li>About</li>
<li>Store</li>
</ul>
</nav>
</div>
</body>
</html>
The hover effect only covers the text part because that is the size of the rendered li element.
If you want the effect over a block, you could use padding instead of margin CSS property:
Refer the given link of W3 Schools below
*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html, body{
margin: 0;
padding: 0;
}
.container {
display: grid;
background-color: rosybrown;
border: 1px solid black;
justify-items: center;
}
.heading{
order: 2;
}
.main-nav{
order:1;
text-align: center;
width: 100%;
border-bottom: 1px solid rebeccapurple;
padding: .5em;
}
.main-nav ul{
margin:0;
}
.main-nav li:hover{
background-color: rgba(255,255,255,0.3);
}
ul{
padding: 0;
}
.main-nav li{
display: inline;
/*padding: 1em;
padding-bottom: 0.5em;*/
padding: .5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
</head>
<body>
<div class="container">
<h1 class="heading">The Love</h1>
<nav class="main-nav">
<ul class="ulContainer">
<li>Home</li>
<li>About</li>
<li>Store</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Box Model
You can add padding to give space around text and display hover on it.
.main-nav li{
display: inline;
margin: 1em;
padding: 1em;
}
If I am interpreting it right you are trying to get the li element to cover the entire height of the bar. If so the problem would be that you need to set the height of the li element to 100%. So edit your css script to look something like this:
.main-nav li{
display: inline;
margin: 1em;
height:100%;
}
*Basically the text is the entire element because no dimensions are set so you have to set them like this.
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
So, I'm currently trying to make a Navigation bar for my website and it works just fine! but right now I'm stuck with this annoying picture that can't properly move.
Problem:
I want the navigation picture just a few pixels away from the side of the page but when I use padding-left I also move the navigation section but I want this to be centerd and the picture to be a few pixels from the left. Hope anybody could help me
body {
margin: 0 0 0 0;
padding: 0 0 0
font: arial;
}
nav {
margin: 0;
background-color: #595959;
color: #ffffff;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
nav > ul > li {
display: inline-block;
padding: 0 25px 0 50px;
}
nav > ul> li > a {
text-decoration: none;
color: white;
font-family: Roboto;
}
nav > ul> li > a:hover {
color: #c1c1c1
}
nav > .logo > img {
float: left;
padding: 0 0 0 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>Branco - Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<img src="http://ikbenbranco.nl/assets/icon.png" height="60px">
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Thanks, Branco
So in this case u have to position it absolutely if u don't want it to affect the other elements in the nav bar.
here's the css:
body {
margin: 0;
padding: 0;
font: arial;
}
nav {
margin: 0;
background-color: #595959;
color: #ffffff;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
position: relative;
}
nav > ul > li {
display: inline-block;
padding: 0 25px 0 50px;
}
nav > ul> li > a {
text-decoration: none;
color: white;
font-family: Roboto;
}
nav > ul> li > a:hover {
color: #c1c1c1
}
nav > .logo > img {
position: absolute;
top:50%;
transform: translateY(-50%);
left: 10px;
}
Try to replace your img styles for this. Remove your float and padding lines. Add a position absolute. Then, also add a left and a top properties. Adjust the values as you wish the picture to be positioned. This should fix your issue.
How to align the logo to my navigation bar?
My HTML code is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
<img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
<nav>
<ul>
<li>Monitoring</li>
<li>Process</li>
<li>Post and Create Email/Excel</li>
<li>Reports</li>
<li>Tools</li>
<li>Sales</li>
</ul>
</nav>
</div>
</body>
</html>
and heres my style.css code:
body{
margin: 0;
padding: 0;
font-size: 15px;
}
/* Navigation */
nav{
margin: 0;
overflow:hidden;
text-align: center;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
display: inline-block;
list-style-type: none;
}
nav > ul > li > a{
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 1em;
text-decoration: none;
}
-----------
.logo-img{
position: relative;
margin: 10px 15px 15px 10px;
}
.bg-div{
background:#333;
}
I want to display the logo at the left side and the navigation bar to the right side.
Made a pen far more simpler:
https://codepen.io/DevAlokes/pen/yLEJEYY
* {
text-decoration: none;
list-style-type:none;
color: white
}
.bg-div {
background-color: #333;
display: flex;
justify-content: space-between;
}
nav ul {
display: flex;
}
nav ul li{
margin: 0 12px;
}
The simplest and most basic answer is, use floats.
.logo-img {
float: left;
}
nav {
float: right;
}
Normally, it's better to use "position: fixed;" for navigation bars on top. So, your css can do like this:
.logo-img{
position: fixed;
margin: 10px 15px 15px 10px;
left: 0;
display:inline;
}
.bg-div{
background:#333;
height: 50px;
}
.bg-div nav {
position: fixed;
display:inline;
right: 0;
}