I am trying to make a navbar using HTML and CSS but my CSS float: right and float: left statements aren't working, everything is still on the right side.
.nav {
width: 100%;
text-align: center;
display: flex;
align-items: center;
padding: 15px;
overflow: hidden;
}
.nav-item {
color: black;
display: block;
list-style-type: none;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
padding: 0px 8 px;
text-transform: uppercase;
}
<div class="header">
<div class="nav">
<img src="img/logo.png" class="logo" width=50 height=50>
<li class="nav-item">Download</li>
<li class="nav-item">Contact</li>
</div>
</div>
As was already mentioned in a comment you need to wrap your list items in a <ul> tag. This is both the correct syntax and will allow you to have the entire list of links go to the right.
I also added justify-content: space-between to tell flex to align items left/right, and display: inline-block to the nav-item for them to display in a single line, rather than stacked as block level elements.
.nav {
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
.nav-item {
color: black;
display: inline-block;
list-style-type: none;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
padding: 0px 8px;
text-transform: uppercase;
margin-left: auto;
}
<div class="header">
<div class="nav">
<img src="img/logo.png" class="logo" width=50 height=50>
<ul>
<li class="nav-item">Download</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</div>
You're almost good, please don't use float, instead you can use display: flex and use margin-left: auto to move things to the left.
.nav {
width: 100%;
text-align: center;
display: flex;
align-items: center;
overflow: hidden;
}
.nav-item {
color: black;
display: block;
list-style-type: none;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
padding: 0px 8px;
text-transform: uppercase;
margin-left: auto;
}
<div class="header">
<div class="nav">
<img src="img/logo.png" class="logo" width=50 height=50>
<li class="nav-item">Download</li>
<li class="nav-item">Contact</li>
</div>
</div>
Related
So for one of my school projects, we have to design a website using Html & CSS and I've encountered a problem where I don't know how to fit 2 logos (left & right) into the corners of my footer. I've tried to change the position, float, width etc and it doesn't seem to work, the logo always seems to not go in the place I want it to be. Sorry if this sounds amateur as I've only started doing Html & CSS a few weeks ago.
This is the current image where the logo is below my ul's and is in the incorrect position. -
This is what I want the footer to look like, it would be great to have the text on the left "Sponsored by HP omen gaming" to be a image as I may swap it out with another logo in the future. -
Thanks to anyone in advance who may be able to solve this problem for me, below would be my html & CSS code.
.footer {
background-color: #035642;
margin-top: 10px;
height: 60px;
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 100%;
font-family: Arial;
display: block;
}
.footer ul {
padding: 5px;
list-style-type: none;
text-align: center;
margin: 10px;
overflow: hidden;
}
.footer li {
text-decoration: none;
text-align: center;
font-family: arial;
font-weight: bold;
list-style-type: none;
display: inline-block;
}
.footer ul li {
display: inline-block;
}
.footer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #efe5d0;
background-color: #5c755e;
text-align: center;
font-family: arial;
font-weight: bold;
}
.footer ul li a:hover {
color: #000;
background-color: #fff;
}
#footer-right {
height: 50px;
width: auto;
position: fixed;
float: right;
}
<div class="footer">
<li>WBHS ESPORTS</li>
<ul>
<li>Facebook</li>
<li>|</li>
<li>YouTube</li>
<li>|</li>
<li>Twitch</li>
</ul>
<img src="hp-omen-logo.png" id="footer-right">
</div>
Try look into flexbox. Here's a quick template to do what you want.
.footer {
display: flex;
justify-content: space-between;
}
.center {
text-align: center;
}
<div class="footer">
<p>Left</p>
<div class="center">
<p>Some text</p>
<p>Your list</p>
</div>
<p>Right</p>
</div>
I think a solution can be the use of display:flex
And to be more clean try to use also the widgets, you can see in this example how it works.
.footer {
background-color: #035642;
margin-top: 10px;
height: 60px;
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 100%;
font-family: Arial;
display: block;
}
.footer ul {
padding: 5px;
list-style-type: none;
text-align: center;
margin: 10px;
overflow: hidden;
}
.footer li {
text-decoration: none;
text-align: center;
font-family: arial;
font-weight: bold;
list-style-type: none;
display: inline-block;
}
.footer ul li {
display: inline-block;
}
.footer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #efe5d0;
background-color: #5c755e;
text-align: center;
font-family: arial;
font-weight: bold;
}
.footer ul li a:hover {
color: #000;
background-color: #fff;
}
#footer-right {
height: 50px;
width: auto;
position: fixed;
float: right;
}
/*my-edit*/
#the-footer{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
height: auto;
margin: 0;
padding: 10px;
}
#the-footer .widget{
width: 30%;
}
#the-footer .widget.left{
text-align: left;
}
#the-footer .widget.right{
text-align: right;
}
#the-footer .widget.center{
text-align: center;
}
#the-footer .widget .title{
font-weight: bold;
letter-spacing: 2px;
}
#the-footer .widget .logo-link{
color:#fff;
display: inline-block;
text-decoration: none;
max-width:150px;
}
#the-footer .widget .logo-link:hover{
color:#000;
}
<div class="footer" id="the-footer">
<div class="widget left">
<a class="logo-link" href="#" target="_blank">Sponsored by HP omen gaming</a>
</div>
<div class="widget center">
<div class="title">WBHS ESPORTS</div>
<ul class="footer-nav">
<li>Facebook</li>
<li>|</li>
<li>YouTube</li>
<li>|</li>
<li>Twitch</li>
</ul>
</div>
<div class="widget right">
<a class="logo-link" href="#" target="_blank"><img class="logo-footer" src="https://via.placeholder.com/60" alt="logo"></a>
</div>
</div>
You can use the display: grid property so you can separate your footer into 3 parts
You can learn about the grid property here: https://www.w3schools.com/css/css_grid.asp
This question already has answers here:
How to center an unordered list?
(8 answers)
How can I center <ul> <li> into a div?
(16 answers)
Closed 2 years ago.
I have a list and css.
However the ul goes to the left. I have tried many things but it either stays inline and floats to the left or it goes to the center as I want it to, but then it's not inline, they stack on one another..how can I have both an centered ordered list and inline?
.navbar {
display: table;
margin: 0 auto;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
To center the navbar ul add text-align: center;
.navbar {
display: table;
margin: 0 auto;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
text-align: center;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
All you need is "text-align:center;" on your .navbar ul like below:
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
text-align: center;
}
<li> runs as a text element because of your css .navbar ul li { display: inline-block; }. therefor you can center it with text-align. In this case just add: .navbar { text-align: center; }
.navbar {
margin: 0 auto;
width: 100%;
text-align: center;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
Just use display: flex; justify-content: center; for either <ul> tag or navbar div container.
.navbar {
display: table;
margin: 0 auto;
width: 100%;
}
.navbar ul {
display: flex;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
Just change your .navbar class like this
.navbar {
display: flex;
justify-content: center;
}
I tried several times, float: right or display: inline-block, but it didn't work on my side. Can anyone guys help me to achieve it? I want to display my navigation next to each other just like below.
I tried to run several codes just what I mention above. But seems it need your help to work it properly.
.menu {
list-style-type: none;
display: inline-block;
padding: 0 11px;
font-size: 1.5rem;
margin-right: 6rem;
font-family: "Montserrat", sans-serif;
}
ul li .link {
position: relative;
display: inline-block;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
}
.head {
position: relative;
text-align: right;
width: 100%;
padding: 22px 48px 25px;
border-bottom: 1px solid #f5f5f5;
}
div .logopix {
height: 5rem;
display: inline-block;
font-size: 0;
top: 1.1rem;
left: 37px;
position: absolute;
}
<div class="head">
<img class="logopix" src="./images/logo.png" alt="HUB Motivator Logo" >
<ul class="menu">
<li class="link"> About </li>
<li class="link"> Contact Us </li>
</ul>
</div>
add css in
.menu {
display: flex;
justify-content: flex-end;
}
Following same technique as you used with inline-block, to display li on same line add:
ul li {
display: inline-block;
}
Here is the code: Codepen
You can achieve the same requirement by writing very minimal semantic code and styling. Please check the code below.
Semantic HTML code
<header class="header">
<img src="http://via.placeholder.com/150x60"/>
<nav class="navbar">
About
Services
Contact
</nav>
</header>
CSS Style
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar a {
padding-left: 10px;
font-size: 20px;
}
View Demo : jsfiddle
I am trying to add a div between the header and footer. Both are flex boxes, however the div in between (which in the end needs to be a slider) does not get positioned well. I am trying to get the header on top and the slider to fill up the remaining space of the view height. Only on the scroll it should show the footer (and eventually other div's as well). Somehow I have the feeling flex box is not working correctly..
Basically the same effect as this website: ArsThanea.
Another problem that I have when opening the JSFiddle is that the header and footer do not take the complete width of the view box, although the div does. When running the html and css in the browser using Gulp / Jekyll it works and it takes up the complete width.
header {
height: 130px;
background: white;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
}
header .logo img {
height: 73px;
width: 146px;
padding-left: 60px;
}
header p {
text-transform: uppercase;
font-family: 'StratumNo1';
font-size: 14px;
margin: 0;
padding-left: 50px;
}
header .site-nav {
margin-left: auto;
}
header .site-nav ul {
list-style: none;
margin: 0;
}
header .site-nav ul li {
display: inline;
font-family: 'StratumNo1';
color: black;
margin: 10px;
text-transform: uppercase;
font-size: 14px;
}
header .site-nav ul li a {
text-decoration: none;
color: black;
}
header .site-nav ul li a:hover {
text-decoration: underline;
}
header .site-nav ul li a:first-child {
margin: 0px 10px 0 0;
}
header .search-form {
width: 300px;
height: 20px;
margin-left: 10px;
}
header .search-form .search-input {
width: 240px;
border-bottom: black 1px solid;
border-left: 0;
border-right: 0;
border-top: 0;
font-family: 'StratumNo1';
font-size: 14px;
}
header .search-form .search-input:focus {
outline: 0;
}
.footer-lockup {
height: 100px;
background-color: #1d1c1c;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.footer-lockup .copyright {
margin: 0;
color: white;
font-size: 14px;
font-family: 'Open Sans Light';
margin-left: 60px;
color: #4d4c4c;
width: auto;
}
.footer-lockup ul {
list-style: none;
margin-right: 60px;
padding: 0;
}
.footer-lockup ul li {
display: inline;
font-family: 'Open Sans Light';
font-size: 14px;
margin: 10px;
text-transform: uppercase;
}
.footer-lockup ul li:last-child {
margin-right: 0px;
}
.footer-lockup ul li a {
text-decoration: none;
color: #4d4c4c;
}
.social-logos {
position: relative;
min-width: 200px;
display: -ms-flexbox;
display: flex;
}
.social-logos .social-logo {
height: 20px;
min-width: 20px;
margin-right: 18px;
}
.social-logos .social-logo:last-child {
margin-right: 0;
}
.social-logos .social-logo .social-media {
text-align: center;
height: 20px;
cursor: pointer;
}
.social-logos .social-logo img {
height: 20px;
}
.social-logos .social-logo img.youtube {
height: 35px;
margin-top: -7px;
}
.projects-wrapper {
display: block;
background: pink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 130px;
}
<header>
<div class="logo">
<img src="/assets/img/YourLogo.svg" />
</div>
<p>Your Placeholder Text</p>
<nav class="site-nav">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</nav>
<form class="search-form">
<input placeholder="What are you looking for?" type="search" name="search-input" class="search-input" />
</form>
</header>
<div class="projects-wrapper"></div>
<footer>
<div class="footer-lockup">
<p class="copyright">© 2016 “Your Company Name” All rights reserved</p>
<div class="social-logos">
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/behance-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/facebook-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/linkedin-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/twitter-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/youtube-icon.svg" class="youtube" />
</div>
</div>
</div>
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</footer>
DEMO: JSFiddle
Taking a look at your Fiddle, there are many improvements you can make to your markup & CSS, but coming to your issue first, the reason why its not sliding down as expected is this :
position: absolute
you added this to your main div which should go in between .projects-wrapper. First thing I would say is make this a flex as well instead of block element.
Secondly, add a wrapper to your entire project body & Make that flex. like so
<div class="wrapper"> //this should be flex
<header>..</header> //this "could" be flex depending on its contents
<div class="projects-wrapper"></div>
<footer>...</footer> //this "could" be flex depending on its contents
</div>
let me know if you are facing any other problems
I made code for You, please have a look, and tell mi is it good for You.
fiddle
I use calc() to do that
Use 100vh to get the 100% view-port height and subtract the height of header and footer.
min-height: calc(100vh - 50px);
where 50px is the height of header+footer.
partial support for ie
So I've got my navbar set up pretty close to the way I'd like it to look, but for some reason it won't go to the center of my page. I've tried putting text-align: center; on most of the different elements that make up my nav bar, but it won't go no matter what I do. What am I doing wrong?
.navbar {
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid #000;
border-width: 1.5px 0;
list-style: none;
height: 25px;
width: 1000px;
}
.navbar a {
text-decoration: none;
padding: 0;
margin: 10px;
border-bottom: 10px;
color: #000;
text-align: center;
}
li {
display: inline-block;
font-family: 'Muli', sans-serif;
font-size: 19px;
margin: 0;
padding: 0;
text-align: center;
}
<div class="banner">
<h1>Brian Funderburke Photography & Design</h1>
<div class="nav">
<ul class="navbar">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
Set the .banner width to 100% and then set .nav to center:
.banner{width: 100%;}
.nav{text-align: center;}
See fiddle: https://jsfiddle.net/c51kr3jo/
How I fix this problem usually is by following 3 steps:
Adding a full-width or a big width to the navbar container (.nav div in your case)
Adding a width to the navbar (usually try to find a width that will fit the most elements)
Adding margin: 0 auto to the navbar (this will center align the .navbar div)
Here is a jsfiddle I've created. Hope it helps.
I added
.nav {
display: flex;
justify-content: center;
}
Which I got from this AMAZING article.
http://jsfiddle.net/abalter/44w7b73f/
navbar center
.navbar {
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid #000;
border-width: 1.5px 0;
list-style: none;
height: 25px;
width: 1000px;
}
.navbar a {
text-decoration: none;
padding: 0;
margin: 10px;
border-bottom: 10px;
color: #000;
text-align: center;
}
li {
display: inline-block;
font-family: 'Muli', sans-serif;
font-size: 19px;
margin: 0;
padding: 0;
text-align: center;
}
/* center */
.nav1 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
text-align: center;
}
.navbar1 {
-webkit-align-self: center;
align-self: center;
}
li a:hover {
color: red;
cursor: pointer;
}
/* || center */
<div class="nav1">
<h1>Brian Funderburke Photography & Design</h1>
</div>
<div class="nav nav1">
<ul class="navbar navbar1">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
Your code appears to already be working from what I can tell (though you were missing a closing </div> in your example). Make sure your CSS is being properly imported and applied.
Here is a working example to prove it is looking okay: http://jsfiddle.net/611mbvtu/