guys.
I'm pretty new to CSS and it's my first try to create a vertical navbar.
After learning that i need to use -40 margin for my <li> to center the text horizontal, i got the next challenge.
I don't get it to center the text vertical.
Maybe someone could help me :-)
body {
font-family: Lato;
}
.nav {
width: 300px;
height: 100%;
margin: -8px;
background-color: grey;
}
.nav li {
list-style: none;
text-align: center;
margin: 0 0 0 -40;
}
.nav li a {
text-decoration: none;
color: black;
font-weight: bold;
}
.nav li a:hover {
color: white;
}
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Webdesign</title>
</head>
<body>
<ul class="nav">
<li>START</li>
<li>HOME</li>
<li>CONTACT</li>
</ul>
</body>
</html>
Few things :
.nav li {
list-style: none;
text-align: center;
margin: 0 0 0 -40; // You forgot to define a unit, so it won't work. (40 what ? px, em, rem, %...)
}
I suggest you to reset margin and padding * {margin:0; padding:0;}, because you added a margin to your li to couterbalance the padding of th ul.
.nav {height:100%;} won't work if all parents (html, body, etc...) don't have a proper height defined.
You can achieve a vertical align in different way,
one would be :
*{padding:0; margin:0;}
html, body {height:100%;}
body {
font-family: Lato;
vertical-align:middle;
}
div {
display:table;
height:100%;
}
.nav {
width: 300px;
height: 100%;
background-color: grey;
display:table-cell;
vertical-align:middle;
}
.nav li {
list-style: none;
text-align: center;
}
.nav li a {
text-decoration: none;
color: black;
font-weight: bold;
}
.nav li a:hover {
color: white;
}
<body>
<div>
<ul class="nav">
<li>START</li>
<li>HOME</li>
<li>CONTACT</li>
</ul>
</div>
</body>
What I did is:
Added a div wrapping the ul
Added a height:100%; to html, body and that div
Added display:table; to that div
Added display:table-cell; vertical-align:middle; to your .nav
Something like this?
body {
font-family: Lato;
}
.nav {
width: 300px;
height: 100%;
margin: 0px;
padding: 0px;
background-color: grey;
text-align: center;
}
.nav li {
display: block;
list-style: none;
}
.nav li a {
text-decoration: none;
text-align: center;
color: black;
font-weight: bold;
display: block;
}
.nav li a:hover {
color: white;
}
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Webdesign</title>
</head>
<body>
<ul class="nav">
<li>START</li>
<li>HOME</li>
<li>CONTACT</li>
</ul>
</body>
</html>
Piece of cake! Just apply the following rule:
.nav {
padding: 0;
}
and don't use any negative margins. Hope that helps you :-)
You can use flexbox
you add to parent ul called in your code .nav
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
and to child elements (li)
flex-wrap: wrap-reverse;
align-self: center;
Flexbox can assure that you item will be 100% in middle verticaly using :
justify-content: center;
Related
I am currently working on a project for college and my nav bar is giving me issues, I have tried various ways to resolve the issue by doing some research.
The site is very basic as it is just a template at the moment.
My main goal for the nav bar was to centre it on the main background image and allow the "Rooms" tab to drop down.
nav {
background-color: transparent;
}
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Beachview - Home</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="" />
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<div class="container">
<nav>
<ul>
<li>ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<main>Main stuff goes here</main>
</body>
</html>
Not 100% sure if the above makes sense as the background image will not load.
Add a .dropdown class to your li containing the dropdown ul.
<li class="dropdown">ROOMS
<ul>...</ul>
</li>
Add these styles to align your dropdown below the "Rooms" link:
.dropdown {
/* Make it so you can position the child ul with absolute position
/ relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
Apply display: flex to your .bg-img container, and then adding margin: auto; to the child-element nav will center it vertically and horizontally.
.bg-img {
background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
height: 200px; // Sample height
width: 100%; // Sample width
display: flex; // Flex allows for easy centering of child-elements
}
nav {
background-color: transparent;
margin:auto; // this is the key to the centered alignment
}
I also moved your class="container" from the wrapper div to your nav and removed that div.
Here is the full working code. (Click "Run Code Snippet, then hit "Full Page" on the right-hand side to see it working):
.bg-img {
/* Replace this img url with your image */
background-image: url('https://via.placeholder.com/900x200/000/333');
height: 200px; /* Sample height */
width: 100%; /* Sample width */
display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}
nav {
background-color: transparent;
margin:auto;
}
.dropdown {
/* Make it so you can position the child ul with absolute position
relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
/* None of the below code was modified */
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<body>
<div class="bg-img">
<!-- this is where the old <div class="container"> was -->
<nav class="container">
<ul>
<li class="dropdown">ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<main>Main stuff goes here</main>
</body>
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.
.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 am trying to center my ul, but I can't seem to get it to center. I have tried using display: table margin: 0 auto That puts the ul in the middle, but not exactly in the center. I have also tried using display: block with margin: 0 auto but that doesn't center it either
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
You can add this rule to the <ul>:
display: inline-block;
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
I assume that the issue isn't so much that you want the ul element centered, but rather you want the menu items (the li items) inside the ul to be centered.
The entire issue is solved by simply changing the style on your li from float:left to display:inline-block. See below.
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display:inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
Updated answer: use flexbox
For the best control over spacing of elements in a column or a row, I'd recommend using flexbox now that it has widespread browser support.
To use flexbox here, set display: flex; on the ul, making it the flex container. By default, this will make the ul act as a row with the li acting as flex items within that row. CSS Tricks has a great guide about using flexbox.
I've left my original answer which uses display: inline-block; below.
Original answer
Sounds like display: inline-block; is exactly what you need.
As the name alludes, an element with display: inline-block; acts as if it's an inline element as far as its parent is concerned, and internally it acts like a block element.
Its use here requires a container with width: 100%; and text-align: center;. I've used the <nav> element below. The <ul> can then be given display: inline-block; to achieve the effect you want.
You can also use display: inline-block; in combination with display: inline; for the <li> and their child <a> elements as follows, in order to avoid the float: left; use.
li {
display: inline;
}
li a {
display: inline-block;
...
}
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
}
li {
display: inline;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
nav {
width: 100%;
margin: 0 auto;
text-align: center;
}
<header>
<h1>DROPLET GAMES</h1>
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Games
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</header>
So I am new in this HTML thing and I am experimenting with a navigation bar. With when I hover over a li/a element I get another color for the full height of the navigation bar.
This is what I get first
body{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
overflow: hidden;
}
.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}
.navbar ul li:hover{
background-color: #bdc3c7;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
And then I changed a few things in the code and came up with this (Here is the second experiment result) (erasing overflow:hidden; and changed it with line-height:55px;)
I got the full height hover but there's a white gap between the browser window and my navigation bar.
body{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
line-height: 55px;
}
.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}
.navbar ul li:hover{
background-color: #bdc3c7;
}
I know there's a bunch of similar questions like mine and I've read them before asking here, but I still don't get the result that I want.
Here you go, your navbar needs margin removed, so check the code ..
EDIT: I also modified a a little bit, so it doesn't overflow navbar and fills full height of it.
body {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
line-height: 55px;
}
.navbar ul {
margin: 0; /* <--- THIS IS WHAT REMOVES BLANK SPACE ABOVE/BELOW NAVBAR */
}
.navbar ul li {
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a {
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 0 50px; /* more proper use of padding */
line-height: 55px; /* line-height to allow full clickable area */
display: block; /* so the line-height can be applied */
}
.navbar ul li:hover {
background-color: #bdc3c7;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</div>
</div>
</body>
</html>
In your CSS , add
html,body {
margin: 0;
padding:0;
}