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
Related
I can't seem to get the code in .wrapper{} to work. There is no change reflected on the browser. If the code in .wrapper{} works, the display on the browser should be repositioned closer to the centre.
Help needed: could someone point out the error in the code and suggest possible fixes?
/*index.html*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<div class= "wrapper">
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
<h1>Front page</h1>
</div>
</body>
</html>
/*style.css*/
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
}
.wrapper {
margin: 0 auto;
width: 1000px;
}
nav {
width: 100%;
height: 100px;
background-color: #fff;
}
ul {
margin-left: 0;
}
ul li {
list-style: none;
display: inline-block; /* changes from vertical dropdown to horizontal */
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
color:indianred;
padding: 0 20px;
}
ul li a:hover {
font-family:monospace;
color: green;
}
This is because you have made the .wrapper width 1000px. Try to change it or make half the width then you will find it into center or some changes.
Note: You should put a clear visible background color like red or yellow to see your changes.
fix it by replacing with this:
.wrapper {
margin: 0 auto;
width: 50%;
}
When I am trying to set the relative position of "ul" element nested under
div with id nav , it is adding Horizontal Scroll Bar on Web Page. Please help
to understand the reason for this & solution for this. Basically I want to bring the Navigation menu in centre of screen.
<!DOCTYPE html>
<html>
<head>
<title>TESTING PAGE</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
#nav ul {
list-style-type: none;
position: relative;
left: 100px;
}
#nav ul li {
display: inline;
}
</style>
</head>
<body>
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
The reason it overflows is because if you do not explicitly apply a value for the display property of ul, the value defaults to block.
Elements with display: block; take up 100% width, so, since you move the element 100px to the right, #nav ul will overflow the document by 100px.
You can test this by applying a border to ul and then try changing its display property to, say, inline for example.
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
#nav ul {
list-style-type: none;
position: relative;
left: 100px;
border: solid red 1px;
/* try un-commenting this and see what happens!
display: inline;
*/
}
#nav ul li {
display: inline;
}
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
And if you would like to move the ul element to the center of #nav, then simply add left: 50%; transform: translateX(-50%); to #nav ul.
Transform Translate positions an element relative to itself, so, if an element's width is 100px and you apply that specific transform, it will reposition that element 50px (half of its own width) to the left of its current left position.
It should be noted that you should also apply a padding-left: 0 to #nav ul since ul elements by default have padding applied to them.
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
#nav ul {
list-style-type: none;
position: relative;
left: 50%;
transform: translateX(-50%);
border: solid red 1px;
display: inline-block;
margin: 0 auto; /* to remove the default top & bottom margins for inline-blocks */
padding-left: 0; /* to remove the default padding-left for ULs */
}
#nav ul li {
display: inline;
}
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
Here is a solution to your problem:
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
li {
display: inline;
}
ul{
padding-left: 0px;
display: wrap;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTING PAGE</title>
</head>
<body>
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
Use display: wrap; property for the ul along with text-align: center;. This way they get aligned to the center without the need to add additional hard coded left: 100px; which is added in your code.
.body-color {
background: rgb(27,39,57)
}
a {
text-decoration: none;
color: red;
padding-right: 20px;
}
li {
display: inline-block;
padding-right: 30px;
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
}
I have tried to padding/margins in both the anchor and li but nothing happens.
How do I add spacing in between each menu option?
My HTML, am I assigning it to the wrong place?:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<title>My Website</title>
</head>
<body class="body-color">
<h1 class="logo"><h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Portrait</li>
<li>Product Showcase</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Assuming you aren't targetting edge or IE, display: flex is a better way of doing what you're doing.
#menu {
display:flex;
justify-content: space-between;
}
Would result in each list item being evenly spaced. For practicing basic css skills using flex, I would take a look at this website. They have a lot of great tutorials for basic flex usage.
Have you tried this? you don't have to give width but will manage equal width for each element.
ul {
width: 100%;
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
background: #ccc
}
ul > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
ul > li > a {
display:block;
padding:50px;
}
Answer Solved. Followed
.body-color {
background: rgb(27,39,57)
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
margin-left: 0;
padding-left: 0;
}
li {
display: inline-block;
padding-left: 15px;
padding-right: 15px;
}
a {
text-decoration: none;
color: red;
}
<ul id="menu">
<li>Home</li>
<li>Portrait</li>
<li>Product</li>
<li>Showcase</li>
<li>Contact</li>
</ul>
.body-color {
background: rgb(27,39,57)
}
a {
text-decoration: none;
transition: .3s;
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
}
#menu ul li {
display: inline-block;
}
#menu ul li + li {
margin-left: 30px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
color: #f10;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<title>My Website</title>
</head>
<body class="body-color">
<h1 class="logo"></h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Portrait</li>
<li>Product Showcase</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
If it doesn't need to support IE 9 or lower. I recommand flex:
* { margin: 0; padding: 0; }
#menu {
position: relative;
display: flex;
justify-content: space-evenly; /* 'space-around' for just filled space */
width: 100%;
/* list nav normalization */
list-style: none;
margin: 0;
padding: 0;
/* Additional Options */
align-items: center;
align-content: center;
/* For clarity in this example, remove this when your done */
background-color: rgba(0,0,0,.1);
}
#menu li {
display: inherit;
/* For clarity in this example, remove this when your done */
background-color: rgba(0,0,0,.1);
}
#menu a {
padding: 10px;
text-decoration: none;
color: red;
/* For clarity in this example, remove this when your done */
background-color: rgba(0,0,0,.1);
}
<nav id="menu">
<li>Home</li>
<li>Portrait</li>
<li>Product Showcase</li>
<li>Contact</li>
</nav>
I think that adding display: inline-block; to the menu item might work.
Check this link, you can add padding to any direction.
https://codepen.io/jackstride/pen/JLpPgZ
li a { padding: 50px;
}
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/
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