Instead of it all being to the left how do i go about spreading it all across evenly or near enough? I have tried reading some blogs and posts on how to solve this solution however i still have not came to a conclusion.
Also how do i put the logo and heading side by side each other?
Thanks in advance, much appreciated.
.header img {
width: 100px;
height: 100px;
background: #555;
}
.header h1 {
display: inline;
}
ul {
display: flex;
justify-content: space-around;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
display: inline-block;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<div class="header">
<img src="Logo.png" alt="logo" />
<h1>Chollerton Tearooms</h1>
</div>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
</body>
</html>
flexbox to the rescue!
As for header - h1 has display:block by default so i've change it to display: inline;
Flexbox is ideal for this. Add display: flex to the parents css and flex: 1 to the li, so they occupy the full width of the viewport. display: block for the a-tag allows the whole space to be clickable, but that's more of a design decision.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
}
li {
flex: 1;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
Related
I am trying to create a NAV bar and I have tried putting 'display: inline-block;' in every single element but for the life of me it won't cross the whole page. Any idea's? I want to have my logo in the center of the navigation bar with the other links centered across the rest of the top of the page. It doesn't matter where I put the 'display: inline-block;' it never centers it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gingerich Tiling</title>
<link href="main.css" type="text/css" rel="stylesheet">
<link type="text/css" rel="stylesheet">
</head>
<body>
<header>
<nav class="nav1">
<div class="left-nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="logo">
<li><a class="logo" href="index.html"><img src="Images/Gingerich%20Final%20Logo.jpg" alt ="Gingerich Tiling Logo" height="250" width="300"</a></li>
</div>
<div class=right-nav-bar>
<ul>
<li>Tiling</li>
<li>Earthmoving</li>
<li>Septic</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: black;
}
body {
}
header {
text-align: center;
display: inline-block;
}
.nav1 {
align-content: center;
list-style: none;
text-decoration: none;
text-transform: uppercase;
}
nav a {
text-decoration: none;
}
nav ul {
}
.nav1 li {
display: inline-block;
}
.left-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
.logo {
}
.right-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
After re-reading the question, I think I got how you want it to look. The problem was that you were using inline-block a bit too much, actually!
You can achieve the look using display: flex (display: grid would also work, but I think flex layout is more straight-forward in this case) in conjunction with justify-content: space-evenly on your <nav> element.
Please also note that you cannot have a <li> element anywhere other than as a direct child element of a <ul> (that was not the case with your logo!)
Once you add a little padding to the sides of your navigation links, it should look good.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: black;
}
body {}
header nav {
text-align: center;
display: flex;
justify-content: space-evenly;
}
.nav1 {
align-content: center;
list-style: none;
text-decoration: none;
text-transform: uppercase;
}
nav a {
text-decoration: none;
padding: 0 0.3em;
}
nav ul {}
.nav1 li {
display: inline-block;
}
.left-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
.logo {
width: 48px;
}
.right-nav-bar {
margin: 0;
padding: 0;
text-decoration: none;
}
<header>
<nav class="nav1">
<div class="left-nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="logo">
<a class="logo" href="index.html"><img src="//placekitten.com/48/48" alt="Gingerich Tiling Logo" height="48" width="48"> </a>
</div>
<div class=right-nav-bar>
<ul>
<li>Tiling</li>
<li>Earthmoving</li>
<li>Septic</li>
</ul>
</div>
</nav>
</header>
You have a lot of unnecessary containers. But I didn't change the HTML but I did change your CSS. The best way to make navigation is by using display: flex;. They are easy to use and very effective.
Here is the CSS, just copy-paste this and see if you like the result :)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: black;
}
/* body {
} */
header {
width: 100vw;
height: 100px;
max-width: 100%;
}
.nav1 {
list-style: none;
text-decoration: none;
text-transform: uppercase;
width: 90%;
height: 100%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
}
/* nav ul {
} */
.nav1 li {
display: inline-block;
}
.left-nav-bar,
.right-nav-bar {
width: 33%;
height: 100%;
text-decoration: none;
display: flex;
justify-content: space-around;
align-items: center;
}
.left-nav-bar ul,
.right-nav-bar ul {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
row-gap: 20px;
}
I'm trying to recreate the nav bar at the top of the google landing page using flexbox, but I'm pretty confused as to how it works. I can't seem to get some of the content to the right of my nav bar, and the other content to the left. My #items are my ul of content for the nav bar, and .left and .right are the respective content that I want to move around, currently, everything is just squished together on the left.
Here is my HTML:
<html>
<head>
<meta charset="UTF-8" />
<title>Google Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- CODE HERE-->
<nav class="navbar">
<ul id="items">
<li class="left">About</li>
<li class="left">Store</li>
<li class="right">Gmail</li>
<li class="right">Images</li>
</ul>
</nav>
</body>
</html>
And here is my CSS:
body {
background-color: white;
padding: 0;
margin: 0;
}
#items {
list-style-type: none;
display: flex;
}
.left {
justify-self: flex-start;
}
.right {
justify-self: flex-end;
}
A better way to do this is instead of putting all of your items in one list put them in two separate lists and then style them individually like this:HTML:
<nav>
<ul>
<li>About</li>
<li>Store</li>
</ul>
<ul>
<li>Gmail</li>
<li>Images</li>
<button class="sign-in">Sign In</button>
</ul>
</nav>
CSS:
nav {
display: flex;
justify-content: space-between;
}
nav ul {
list-style-type: none;
padding: 0;
display: flex;
margin-left: 25px;
margin-right: 25px;
}
nav ul {
margin-top: 15px;
}
nav a,
i {
text-decoration: none;
display: block;
padding: 0.5em;
color: #000;
opacity: 0.75;
margin-left: 5px;
}
nav a {
font-size: 13px;
}
.sign-in {
font-weight: bold;
font-size: 13px;
border: 1px solid #4285f4;
background: -webkit-linear-gradient(top, #4387fd, #4683ea);
color: white;
cursor: pointer;
border-radius: 2px;
width: 70px;
margin-left: 10px;
}
My second question here.
I was able to make this work using CSS without flexbox.
I pasted the code for above here:
https://codepen.io/kkpm/pen/MWgdOZE
html,
body {
margin: 0px;
padding: 0px;
}
nav {
height: 60px;
background-color: maroon;
vertical-align: middle;
}
#links {
float: right;
line-height: 60px;
}
#links li {
display: inline-block;
}
#links li a {
display: table-cell;
vertical-align: middle;
height: auto;
padding: 1%;
padding-right: 20px;
padding-left: 28px;
color: white;
text-decoration: none;
}
#links li a:hover {
display: table-cell;
vertical-align: middle;
height: auto;
padding: 1%;
padding-right: 20px;
padding-left: 28px;
background-color: blue;
color: white;
text-decoration: none;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#logo {
float: left;
}
HTML below
<!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>Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo"><img src="flag.JPG" alt="" height="60px" /></div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome">Hi!</section>
</body>
</html>
The problem with the above code is that I eyeballed things by adjusting the px. I want to center the <li> text vertically at all times while having the blue box area around it fill up, for lack of a better term to describe it, the cell no matter what.
How do I get the same result using flexbox (or any other method) without using javascript to format the <ul>/<li> elements?
It's driving me crazy trying to do this. I searched Google thoroughly. I am having a difficult time, however, because my understanding of the flexbox is weak.
Some things I've tried:
I set padding and margin to 0px for *
I set box-sizing to border-box for HTML
I set nav to 60px
then I tried to set nav li to
display: flex;
justify-content: flex-end;
for the logo div I put it as position fixed and justify-content: flex-start
I read this site trying to format this https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem is I can't get the links to the center and the blue-highlighted section to highlight as it should. I'm very confused with flexbox and if someone could please guide me step by step his/her thought process as to how to get below result using flexbox, I would truly appreciate it. I will study your answer over and over again until I master how to create this fixed navigation bar.
You can use display: flex; and then apply align-items: center; to get elements vertically centred. This would be rather a cleaner approach over using floats
html,
body {
margin: 0px;
padding: 0px;
}
nav {
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
}
<nav id="navbar">
<div id="logo">
<img src="data:image/png;base64,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"
alt="" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome">Hi!</section>
.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>