This question already has answers here:
Image inside div has extra space below the image
(10 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
I was trying to create a horizontal navbar using lists inside a container div, I came across confusing things.
When I try to place elements next to each other, if I dont use float at all, there is a gap between list items, but margin and padding wise it is fine.
body {
margin: 0px;
padding: 0px;
}
div {
text-align: center;
background-color: gray;
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
display: inline-block;
}
ul li {
display: inline-block;
color: white;
background-color: blue;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<ul>
<li>Home</li>
<li>Youtube</li>
<li>Contact</li>
<li>Support</li>
</ul>
When I use float: left; there is an unwanted padding in div or margin on list.
body {
margin: 0px;
padding: 0px;
}
div {
text-align: center;
background-color: gray;
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
display: inline-block;
}
ul li {
display: inline-block;
float: left;
color: white;
background-color: blue;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<ul>
<li>Home</li>
<li>Youtube</li>
<li>Contact</li>
<li>Support</li>
</ul>
To solve that, I used font-size: 0px and font-size: 16px for <ul>.
That solved my problem but I don't know if it's right thing to do and more importantly what causes the problem there.
body {
margin: 0px;
padding: 0px;
}
div {
font-size: 0px;
text-align: center;
background-color: gray;
margin: 0px;
padding: 0px;
}
ul {
font-size: 16px;
list-style-type: none;
margin: 0px;
padding: 0px;
display: inline-block;
}
ul li {
display: inline-block;
float: left;
color: white;
background-color: blue;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<ul>
<li>Home</li>
<li>Youtube</li>
<li>Contact</li>
<li>Support</li>
</ul>
Is it bad to use list items as navigation bars or I am using it wrong? I am curious what causes that gap at the bottom of the list.
Is it bad to use list items as navigation bars?
Definitely not! That's the most common way to do it.
If I don't use float at all, there is a gap between list items
I still think that your first variant, using only inline-block and no float, is the best one.
The spaces between the elements are caused by the spaces (indents) in your HTML code between the li elements. You can either remove them by putting all of the li elements on one line in your code, or by putting the space between them in a comment, as I prefer to do and have demonstrated below:
body {
margin: 0px;
padding: 0px;
}
div {
text-align: center;
background-color: gray;
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
display: inline-block;
}
ul li {
display: inline-block;
color: white;
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css">
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<ul>
<li>Home</li><!--
--><li>Youtube</li><!--
--><li>Contact</li><!--
--><li>Support</li>
</ul>
</body>
</html>
Related
I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #333;
height: 70px;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
float: right;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.
You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.
You can fix this using flexbox, by adding the following rules to .navigation-bar ul:
.navigation-bar ul{
...
display: flex;
justify-content: right;
}
Here are some extra observations on your code, that are unrelated to the main problem
There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.
:root{
--navbar-height: 70px;
}
.logo {
height: calc(var(--navbar-height) - 10px);
}
#navigation-container {
height: var(--navbar-height);
}
.navigation-bar {
height: var(--navbar-height);
}
/* etc */
You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.
However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.
Adapted code:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
}
.navigation-bar {
background-color: #333;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
display: flex;
justify-content: right;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
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>
I've been trying to create a pretty basic CSS navbar, comprised of a "navbar" container div, and within that a "logo" div and a "menu" div.
However, I seem to have run into some trouble with getting the "menu" div (which contains an unordered list of links) to nest within the "navbar" container div.
Perhaps I'm missing something very simple, but I've tried doing some Googling and can't seem to find a solution to this issue.
I did see a tutorial that showed how to create a similar type of navbar using only an unordered list, but given that I'm also looking to have a logo and potentially other elements in the navbar, I don't think that's what I'm looking for.
Please see below for the HTML and CSS that I've been working with. Any assistance would be greatly appreciated.
Thanks!
body{
padding: 0px;
margin: 0px;
}
.navbar{
height: 50px;
width: 100%;
background: #b4cef7;
}
.logo{
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul{
list-style-type: none;
}
.navbar ul li{
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a{
text-decoration: none;
color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Simple CSS Navbar</title>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You have a set height on the navbar and a block level element, forcing the navbar to a new line.
There's many ways you could have the elements on the same line, such as floating or displaying inline-block.
Here's a simple demo of using inline-block:
body {
padding: 0px;
margin: 0px;
}
.navbar {
height: 50px;
width: 100%;
background: #b4cef7;
}
.navbar>* {
display: inline-block;
vertical-align: top;
}
.logo {
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.navbar ul li {
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a {
text-decoration: none;
color: black;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
There isn't generally a option you should use, be it inline-block, floating, or flexbox; it really just depends on your preferences and target browsers.
There is a little white gap in between the top of my navigation bar and the bottom of my logo graphics. How can I get these to stick together? Am I missing a selector like header or nav? Maybe I missed a declaration?
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 140px;
font-weight: bold;
color: #20dbd4;
background-color: #000000;
text-align: center;
padding: 12px;
text-decoration: underline;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #20dbd4;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow, noarchive"/>
<title>Grid Design</title>
</head>
<body>
<header>
<img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/>
</header>
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>about</li>
<li>products</li>
<li>photos</li>
<li>contact</li>
</ul>
</nav>
</body>
</html>
Just declare the image as display:block and then centre as required.
The image is display:inline by default which means it is affected by whitespace...making the image into block element resolves the issue.
JSfiddle Demo
CSS
header img {
display: block;
margin: 0 auto;
}
You could set the margin of the nav to -4 so:
CSS:
nav {
margin: -4px 0 0 0;
}
But this is not the only way...actually this should be your last resort !! There are several better ways to do this.
This navigation bar rearranges itself when the browser window is re-sized, all of the buttons go from being in a straight horizontal line to stacking on top of each other, one by one, as the window is made smaller and smaller. How can they be set to stay in place and stick nicely to the bottom of the header logo, no matter what size the window is?
Screenshot of problem:
http://s29.postimg.org/3tnroxls7/Screenshot1.png
Screenshot of goal:
http://s24.postimg.org/vzuruvqb9/Screenshot2.png
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
header img {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 139px;
font-weight: bold;
color: #20dbd4;
background-color: #000000;
text-align: center;
padding: 12px;
text-decoration: underline;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #20dbd4;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow, noarchive"/>
<title>Grid Design</title>
</head>
<body>
<header>
<img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/>
</header>
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>about</li>
<li>products</li>
<li>photos</li>
<li>contact</li>
</ul>
</nav>
</body>
</html>
If I get right, you just want the menu to stay the same size and to stay in line, right? So you could just add a width to your <ul>
ul {
list-style-type: none;
width: 978px;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
See fiddle here.
When you are talking about resizing and respsonsivness you should already be thinking about widths in percentages. For example you have 6 li-s which u are trying to fit in a 100% width...Which means each li should have 16.66% width. In theory this should all work and wrap up nicely, but because of whitespace your problem will persist. To fix that you need to fight the whitespace. refference here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
nav{
width: 1000px;
margin: 0 auto;
}