I made a simple webpage with header and navbar, but I came across this little problem that's actually pretty annoying. The links aren't 100% in the middle of the inline list, here's a screenshot:
https://i.gyazo.com/105d8156e667277d0b31f18ba6a3b7db.png
To prevent confusion, the whole page is centered, but the screenshot is just of the navbar part.
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Test website</h1>
<div id="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</div>
</body>
</html>
The CSS file:
/* navigation bar */
#nav {
width: 490px;
margin: auto;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
/* unordered list in navbar */
#nav ul {
text-align: center;
}
/* list items in navbar */
#nav li {
display: inline-block;
}
/* links in items of navbar */
#nav li a {
text-decoration: none;
margin: 20px;
font-family: Arial, sans-serif;
font-weight: bold;
}
/* header 1 */
h1 {
text-align: center;
font-family: Arial, sans-serif;
font-weight: bold;
}
The issue is the default padding that is being applied to the ul, simply zero out the padding:
#nav ul {
text-align: center;
padding:0;
}
JSFiddle
Just remove the padding and margin from the UL:
#nav ul {
text-align: center;
padding: 0;
margin: 0;
}
Above answer is correct, but in ideal scenario <a> should have padding so in future if we want to have a background-color for link, it will occupied entire block.
http://jsfiddle.net/5Lu5qjux/
Related
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.
I'm just learning CSS and am trying to make a very simple navigation bar, which changes colour when your mouse hovers over it.
I thought that, if I added padding to a child element, it would increase the size of its parent element. However, when I add padding to my link elements, they become bigger than the list items they are contained in, so I get this:
nav bar
I was wondering if anyone could anyone explain why this is? I'm so confused! Also, do you have any suggestions about how I can force the entire nav-bar to be the same height as the grey link shown in the image?
Thank you so much for your time. I really appreciate it! :)
Here is my html:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Other link</a></li>
<li><a>Another link</a></li>
</ul>
</div>
</body>
</html>
And here is my css:
#CHARSET "ISO-8859-1";
* {
padding: 0; /*I read that it's a good idea to set these to 0, to avoid unexpected differences between browsers*/
margin: 0;
/*border-style: solid*/
}
.nav {
background-color: black;
color: white;
position: fixed;
top: 0;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li{
display: inline-block;
}
.nav a {
padding: 1em 0.5em;
}
.nav a:hover{
background-color: Grey;
}
Take a look at this!
This should be enough to get you started!
You added padding to a single item, but what you needed to do was add display: block to your .nav a, which is all your anchor tags of your nav.
* {
padding: 0; /*I read that it's a good idea to set these to 0, to avoid unexpected differences between browsers*/
margin: 0;
/*border-style: solid*/
}
.nav {
background-color: black;
color: white;
position: fixed;
top: 0;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li{
display: inline-block;
}
.nav a {
padding: 1em 0.5em;
display: block;
vertical-align: middle;
text-decoration: none;
color: white;
}
.nav a:hover{
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Other link</li>
<li>Another link</li>
</ul>
</div>
</body>
</html>
.nav a { padding: 1em 0.5em; }
1em is what's making them become bigger. Change it to 1px and it will do the trick for you.
https://codepen.io/julysfx/pen/weOwwr
I have this basic navigation bar, and I want to make the menu buttons centered, and also I want a separating line between them. Also I think my code may have some unnecessary parts.
Here is an image of what I am trying to create:
Here is my source code:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="nav" align="center">
<span>
<ul>
<li><img src="img/notify_icon.png" alt="notify_icon" width="30px" /></li>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</span>
</div>
</body>
</html>
And here is my CSS file:
#charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
margin-left:auto;
margin-right:auto;
background-color: #353539;
height: 50px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
}
#nav ul {
padding: 7px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul li {
list-style-type: none;
text-align: center;
float: left;
margin: 0px;
padding-left:50px;
}
#nav ul li a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: block;
padding: 10px;
margin: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body
{
background-color:#c5c5c5;
}
DEMO
This should do what you like.
margin:0 auto centers elements on the page, so you simply had to set the li parent to an auto width with this css attatched.
I have two problems with my menu bar. What I want to achieve is to center the links on the header (including the logo picture) and have exactly the same height for the header as the menu. When I add the links it creates a margin on top and on bottom (so the header will extend) and I have no idea why. The margin size depends on the font size and if I want to remove it I have to add a -something px margin and have to try pixel by pixel what the number should be. I'm pretty sure there's an easier solution to that... My other problem is that I can't center the whole menu bar within the header unless I specify a specific width. Obviously I don't know how wide my menu bar will be (and even if I measure it somehow, what if I change the links later?) I'm fairly new to HTML and CSS so I've probably made a bunch of mistakes, I just keep changing the codes until I get what I want but since I'm trying to learn it better I'm aiming for more understanding than random coding so feel free to correct anything. Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><img src="images/ncs.png" /></li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li id="right">English</li>
</ul>
</div>
</div>
</body>
</html>
And the CSS:
#charset "utf-8";
body {
background-color: #efe8df;
}
#header {
width: 100%;
height: auto;
background-color: #afafaf;
position: absolute;
top:0px;
left:0px;
right:0px;
}
#menu {
margin: auto;
padding: 0px;
list-style: none;
font-family:'Belleza', sans-serif;
color: white;
font-size: 22px;
/*width: 1000px;*/
height: auto;
position: relative;
}
#menu li {
list-style: none;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
display: table-cell;
border-right: 1px solid #ebeaea;
}
#menu li a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:hover {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu li a:active {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu #right {
border-right: 0px;
font-family: Georgia;
font-size: 14px;
}
Thanks in advance!
Header is extending because for ul and li all browser have there margin and padding standards.
You should use reset.css and normalize.css to remove default css property of some common elements.
so if you want just for list use
ul,li{margin:0; padding:0} or how much you want.
To center align you can give following css properties
to header
display: table
to menu
display : table-cell;
text-align:center
to ul
display:inline-block
to li
float:left
Check fiddle
http://jsfiddle.net/gJFy8/1/
try adding this in your css, change the width to whatever you want according to your need
#menu {
width: 900px;
add width to the #menu div
menu {
margin: auto;
padding: 0px;
list-style: none;
font-family: 'Belleza', sans-serif;
color: white;
font-size: 22px;
width: 1000px;
height: auto;
position: relative;
width: 960px; //or whatever
}
I want to put a title (a larger font than other text in navbar) on the left hand side of my navbar, so far i have achieved getting it on the left side but the text is being half cut, like half the text is outside the navbar and half of it is inside it. How can i get the text to stay fully inside the navbar?
CSS
<style>
#navbar ul {
margin:0 auto;
padding: 10px;
list-style-type: none;
text-align: center;
background:#1c1c1c;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
font-family: calibri;
font-size: large;
text-decoration: underline;
font-weight: 200;
border: 0.5px solid #242424;
border-radius: 2px;
padding:.3em 1em;
color: #ffffff;
background-color:transparent;
}
#navbar ul li a:hover {
color: #000;
background-color: #ffffff;
border-radius: 5px;
color:#1c1c1c;
}
#navbar {
position: fixed;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
z-index:0;
}
#navbar {
overflow: hidden;
}
#navbar h1 {
float: left;
}
</style>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>ClickonDeal.com.au-Electronics</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<div id="navbar">
<h1>Click</h1>
<ul>
<li>Stuff</li>
<li>more stuff</li>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</form>
</ul>
</div>
</div>
</html>
You have a couple of errant closing tags that are throwing errors, but that's not what's causing you trouble.
Likely issue is that H1 in most browsers will have default margins that are pushing it out of whack.
I'd investigate adding a css reset (start at http://necolas.github.io/normalize.css/) but in the mean time, you can fix this by setting margins to 0 on your h1:
#navbar h1 {
float: left;
margin: 0;
}
Here's a simple jsfiddle showing that change: http://jsfiddle.net/adnrw/BjCBf/1/ (h1 color changed to white so we can see it)
Add the below CSS to your code:
#navbar h1 {
float: left;
margin:0;
}
Check this JSFiddle