This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I'm a beginner. I tried to build a navbar with flex but failed to get the desired result.
what I want is
Logo Home About Services Contact
* {
margin: 0;
padding: 0;
font-family: monospace;
}
.nav {
display: flex;
background-color: gray;
}
.menu {
list-style: none;
display: inline-block;
padding: 20px
}
a {
text-decoration: none;
}
.con {
float: right;
}
<header class="nav">
<img src="./Logo.png" width="80px" class="logo" alt="">
<nav>
<ul>
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
<li id="contact" class="menu con">Contact </li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
font-family: monospace;
}
.header {
display: flex;
background-color: gray;
width: 100%;
}
nav {
width: 100%;
}
ul {
display: flex;
justify-content: space-between;
}
.menu {
list-style: none;
display: inline-block;
padding: 20px
}
a {
text-decoration: none;
}
.con {
float: right;
}
<header class="header">
<nav>
<ul>
<img src="./Logo.png" width="80px" class="logo" alt="">
<div>
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
</div>
<li id="contact" class="menu con">Contact </li>
</ul>
</nav>
</header>
I believe this is what you are looking for
You can use display flex and justify-content property to move items.
.nav
{
width:100%;
display:flex;
justify-content:space-evenly;
align-items:center
}
.img-wrapper
{
width:33.33%;
}
.nav-items-center
{
width:33.33%;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.nav-item-right
{
width:33.33%;
display:flex;
justify-content:space-evenly;
align-items:center;
}
<header class="nav">
<div class="img-wrapper">
<img src="./Logo.png" width="80px" class="logo" alt="Logo">
</div>
<ul class="nav-items-center">
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
</ul>
<ul class="nav-item-right">
<li id="contact" class="menu con">Contact </li>
</ul>
</header>
Related
https://codepen.io/zaidzac95/pen/qBKWKep
I want to have navigation links and image in the same line.
This is what HTML of header looks like:
<div class="container">
<div class="header">
<nav class="sub-header">
<ul>
<li> Home </li>
<li> AboutUs </li>
<li> Products </li>
<li> Services </li>
<li> Contact Us </li>
</ul>
</nav>
<img src="ethereum-eth-logo.png" class="logo">
</div>
</div>
You need to add the image like this(inside the nav tags):
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="image.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>
Use display:inline-block on your .sub-header. If your image is still not aligned, it's because of the padding you set. consider removing it or use other units of measure.
.sub-header {
display: inline-block;
/* padding-left: 450px; */
}
li {
display: inline-block;
}
<nav class="sub-header">
<ul>
<li>Home</li>
<li>AboutUs</li>
<li>Products</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<img src="https://via.placeholder.com/50x50" class="logo">
you have many typos in your code, and you should fix your HTML structure because it's very important. here is a rework for your code. you can check how things work in this code and then read more about them. good luck
* {
margin: 0;
padding: 0;
overflow-y: hidden;
text-decoration: none;
}
.header {
width: 100vw;
height: 200px;
background: lightslategray;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo-container {
background: lightcoral;
width: 20%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo {
height: 100px;
}
.nav-container {
background: lightblue;
width: 80%;
height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.nav-list {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.nav-list :nth-child(n) {
/* nav children */
color: black;
padding: 10px;
}
.nav-list :nth-child(n):hover {
/* nav children */
color: white;
background: lightslategray;
}
<div class="container">
<div class="header">
<div class="logo-container">
<img class="logo" src="ethereum-eth-logo.png">
</div>
<nav class="nav-container">
<ul class="nav-list">
<li><a href="">Home</a</li>
<li><a href="">AboutUs</a</li>
<li>Products</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
First clean-up your HTML!
HTML :
<nav class="sub-header">
<img src="../avatar_114.jpg" alt="ACME logo" class="logo">
<ul>
<li>Home</li>
<li>AboutUs</li>
<li>Products</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
If You're not sure about the syntax, check it on https://validator.w3.org/nu/#textarea
I'm trying to get the icons to look like this, and centered on the page.
HTML:
<aside class="social">
<ul class="smicons">
<li class="fbicon"><img src="img/fbicon.png"></li>
<li class="twicon"><img src="img/twicon.png"></li>
<li class="yticon"><img src="img/yticon.png"></li>
<li class="igicon"><img src="img/igicon.png"></li>
</ul>
</aside>
CSS:
.social {
display: inline-block;
}
.smicons {
background-color: transparent;
list-style-type: none;
border: none;
float: left;
padding-top: 15px;
display: inline-block;
}
here is a solution based on your css .. check the css section and those comments. sorry for my bad english.
.social {
display:block; /*need aside as a block element by default aside is block */
text-align:center;/*text align center set the ul section to center ;*/
}
.smicons {
background-color: transparent;
list-style-type: none;
border: none;
padding-left:0;/*ul element by default padding-left:40px;*/
padding-top: 15px;
display: inline-flex;/*inline-flex set those icon side by side */
}
<aside class="social">
<ul class="smicons">
<li class="fbicon">
<img src="https://cdn2.iconfinder.com/data/icons/social-18/512/Facebook-3-128.png">
</li>
<li class="twicon">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
</li>
<li class="yticon">
<img src="https://cdn2.iconfinder.com/data/icons/social-icons-color/512/youtube-128.png">
</li>
<li class="igicon">
<img src="https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Instagram-128.png">
</li>
</ul>
</aside>
Here is a flexbox solution.
.smicons,
.smicons li {
margin: 0;
padding: 0;
list-style: none;
}
.smicons {
display: flex;
justify-content: center;
}
.smicons li {
margin: 5px;
}
<aside class="social">
<ul class="smicons">
<li class="fbicon"><img src="http://placehold.it/25x25/FC0"></li>
<li class="twicon"><img src="http://placehold.it/25x25/FC0"></li>
<li class="yticon"><img src="http://placehold.it/25x25/FC0"></li>
<li class="igicon"><img src="http://placehold.it/25x25/FC0"></li>
</ul>
</aside>
I'm trying to center these images in the UL. I've looked at some of the other topics on this, but couldn't apply the solutions to my situation. If anyone can help me, I'd appreciate it. Thank you.
JSFiddle: https://jsfiddle.net/dvbL2d5y/1/
HTML
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
Please apply below css. i have removed the float property and introduce display:inline-block.
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
padding:0;
}
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
I have modified your code. I hope it helps. You just need to add inline-block to an element if you want to center it with the help of text-align: center tag.
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display:inline-block;
margin:0;
padding:0;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Is this what you were looking for?
#equipment-gallery li {
float: left;
list-style: none;
margin: 0 auto;
display: block;
width: 100%;
}
Remove "float:left" from this class"#equipment-gallery li" and add "display:inline-block"
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
display: inline-block;
padding: 0;
text-align: center;
}
#equipment-gallery li {
float: none;
list-style: none;
margin: 20px;
display: inline-block;
}
You can see link fiddler add this css https://jsfiddle.net/zdso82b7/1/
To align center I had used flexbox concept in ul tag
ul.medium-grid {
display: flex;
align-items: center;
justify-content: center;
flex-flow: wrap row;
}
for more details regarding flex box, please find on CSS-Tricks A Complete Guide to Flexbox
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display: flex;
justify-content: center;
flex-flow: wrap row;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I'm recreating an article I found on The Economist and I'm having trouble creating the header. Please keep in mind I'm doing this without recreating their code verbatim. I'm trying to create my own implementation.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I'm having trouble getting the paragraph element, and ultimately its container to sit to the right as shown in the article.
Thoughts on this?
You can use display: flex; justify-content: space-between; on the element that wraps the the left/right portions of the header to put those in a row separated by the available space left over. And you can use align-items to align that content vertically.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
This is happening due to your class="header__site-functions" is ablock element and is taking the 100% of the width, so it doesn't fit in a line. You can use a floating element to fix it:
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline-block;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
.header__site-functions{
float:right;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I am designing a webpage. I have two levels of navigation, the social media buttons on the first level and later a navigation bar. I am having issues getting the background colour of the navigation bar to go the complete length of the webpage, at present it starts and stops with the navigation bar. I am guessing it is an issue related to the location or my coding of the clearfix? Anyways I would appreciate your advice. My coding is below, I have attached a photo of my site so you can see what it looks like.
My Html code:
<div id="wrapper">
<header id="header" role="banner">
<div id="logo">
<img src="Images/title.png" alt="logo" width="1018" height="140">
</div>
<div id="social">
<ul>
<li>
<img src="images/twitter.png" alt="Twitter" width="32" height="32">
</li>
<li>
<a href="https://www.facebook.com/Save-NSW-Government-Disability-
Services-ADHC-709029659182219/" target="_blank"><img src="images/facebook.png" alt="Facebook" width="32" height="32"></a>
</li>
<li>
<img src="images/youtube.png" alt="Youtube" width="32" height="32">
</li>
</ul>
</div>
<div id="clearfix">
</div>
<nav id="page_nav">
<div class="menu">
<ul id="navmenu">
<li class="active">Home</li>
<li>About Us</li>
<li>Get Involved<span class="darrow">▼</span>
<ul class="submenu">
<li>Social Media</li>
<li>Union Meetings</li>
<li>Rally</li>
</ul>
</li>
<li>News<span class="darrow">▼</span>
<ul class="submenu">
<li>Shrew's News</li>
<li>Update</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact Us</l>
</ul>
</div>
<div id="clearfix">
</div>
</div>
</nav>
</header>
</div>
My Css:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: sans-serif;
background-color: black;
}
#wrapper {
width: 1366px;
height: auto;
background-color: black;
margin: 0 auto;
padding: 10px;
}
#header {
width: 100%;
height: 140px;
background-color: black;
}
#logo {
float: left;
margin: 0px 0px 20px 50px;
padding-left: 100px;
}
#social {
float: right;
top: 0px;
margin: 0 auto;
}
#social ul li {
float: left;
list-style: none;
padding: 5px;
}
#clearfix:after {
display: block;
clear: both;
}
#page_nav {
background-color: #c50a13;
}
ul#navmenu {
list-style-type: none;
width: 800px;
margin: auto auto 5px auto;
}
ul.submenu {
list-style-type: none;
}
ul#navmenu li {
outline: 1px solid white;
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
color: #26b0f1;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #c50a13;
border: 1px solid white;
border-radius: 5px;
color: white;
}
ul#navmenu .submenu a {
margin-top: 3px;
}
ul#navmenu li:hover > a {
background-color: white;
color: #c50a13;
}
ul#navmenu ul.submenu {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .submenu {
display: block;
}
.darrow {
font-size: 14pts;
position: absolute;
top: 10px;
right: 1px;
color: dodgerblue;
}
Update:
You forgot something in your CSS clearfix.
#clearfix:after {
display: block;
clear: both;
content: ''; /* add me */
}
In addition, you have some errors in your HTML which can affect rendering in different ways in different browsers.
[1] Invalid close tag for an <li>
[2] Extra </div> before the close of your </nav>.
[3] Duplicate IDs: id="clearfix"
First, fix the duplicate IDs. In your CSS, change this:
#clearfix:after {
display: block;
clear: both;
}
To this:
.clearfix:after {
display: block;
clear: both;
}
Here is your HTML without errors.
<div id="wrapper">
<header id="header" role="banner">
<div id="logo">
<img src="Images/title.png" alt="logo" width="1018" height="140">
</div>
<div id="social">
<ul>
<li>
<img src="images/twitter.png" alt="Twitter" width="32" height="32">
</li>
<li>
<img src="images/facebook.png" alt="Facebook" width="32" height="32">
</li>
<li>
<img src="images/youtube.png" alt="Youtube" width="32" height="32">
</li>
</ul>
</div>
<div class="clearfix">
</div>
<nav id="page_nav">
<div class="menu">
<ul id="navmenu">
<li class="active">Home</li>
<li>About Us</li>
<li>
Get Involved<span class="darrow">▼</span>
<ul class="submenu">
<li>Social Media</li>
<li>Union Meetings</li>
<li>Rally</li>
</ul>
</li>
<li>
News<span class="darrow">▼</span>
<ul class="submenu">
<li>Shrew's News</li>
<li>Update</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<div class="clearfix">
</div>
</nav>
</header>
</div>