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.
Related
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>
Somehow there is this fixed white space between the name "Larry Rosenburg" and the picture below it. No matter how I change the margin, it doesn't affect the distance. Here is a screen shot screenshot!
How can i shorten the white space?
here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Larry Rosenburg Official Website </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src ="lincoln.jpg" width ="27%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home </li>
<li> Lincoln </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</div>
</header>
<div class="clearfix"> </div>
<div id="title">
<p>Larry Rosenburg </p>
</div>
<div id="profile">
<img src="picture.jpg" width="25%" alt="" id="profile-pic" >
</div>
</body>
<footer>
</footer>
</html>
And here is the css:
body{
width: 100%;
}
#logo_picture{
margin-left: 80px;
}
#logo img, #logo nav{
float: left;
}
#logo nav{
line-height: 120px;
margin-left: 250px;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display: inline;
}
nav a{
color: black;
font-size: 20px;
font-family:'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration:none;
}
nav a, nav a:visited {
color: black;
}
nav a.selected, nav a:hover{
color: grey;
}
#title{
font-size: 70px;
margin-top: 70px;
margin-bottom: 0;
text-align: center;
font-family: 'Anton','sans-serif';
}
#profile-pic{
border-radius: 30px;
background: url('picture.jpg');
margin: 30px auto;
display: block;
padding: 0;
border-top: 0;
}
.clearfix {
clear: both;
}
Your CSS margin: 30px auto; of #profile-pic sets the top and bottom margin as 30px. That is the white space you are seeing. Either set the margin individually or set it all at once. Don't use the current style.
Before posting questions like this, please try to inspect the html element using any Web Browser. All web browsers shows the layout and margins of elements. It would help you in solving issues faster.
I have edited this. now you may try this because it works fine in my device.
#profile-pic {
background: rgba(0, 0, 0, 0) url("picture.jpg") repeat scroll 0 0;
border-radius: 30px;
border-top: 0 none;
display: block;
margin: -60px auto;
padding: 0;
}
[here the screenshot][checked]
Try this.
<p style="margin-bottom:0px">Larry Rosenburg </p>
There might be some margin-top on the image as well.
I got a quick question. I tried to find out everything myself on the forum but no luck, so I will be straightforward. I created this navbar, but faced a problem. When I zoom in, it zooms in perfectly, doesn't clash or anything, but it doesn't scroll left or right (and at the same time it doesn't show the entire navigation bar, when zoomed in).
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='design.css' />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="brain.js"></script>
<body>
<div class="wrap">
<div id="navigation">
<ul>
<li> Home </li>
<li> Top rated </li>
<li> Suggestions </li>
<li> Latest news </li>
<li> About </li>
<li> Contact us </li>
</ul>
</div>
<div >
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
.wrap {
width: 80%;
margin: 0 auto;
height: 800px;
}
#navigation {
height: 40px;
font-size: 14px;
font-weight: bold;
text-shadow: 3px 2px 3px #333333;
width: 100%;
min-width: 800px;
}
#navigation a {
text-decoration: none;
color: #00F;
padding: 13px 12px 12px 12px;
color: white;
}
#navigation li {
display: inline-block;
}
#navigation ul {
background-color: #3d3f45;
text-align: left;
padding: 10.5px 0px;
margin: 0px;
}
#navigation ul li:hover a {
background-color: rgb(148, 145, 145)
}
The element that's dictating whether or not there's a scrollbar (in your case) is the <html> element. If you were to check out the CSS file link you've provided in the line:
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
You'd see something like this: html{overflow-x:hidden}
This line is causing the issue. You'll have to write some CSS that overrides it. I went ahead and created a demonstrational codepen that shows the fix. See link below:
http://codepen.io/anon/pen/KrybjR
I know that multiple questions has been discussed on this subject, I coped and pasted every suggestion/answers.. None of them work, please help!
Remember I would like the content, when scrolled to not overlap the menubar.
My Problem
Here is the image.
When ever I scroll the center div(the one that says "this website is dedicated to games") overlaps the menu bar.
How do I prevent this from happening?
Here's another image
Code Id(s)
Center div that is colored black. id="divCenter".
Element that is being overlapped("menu bar). id="NavDivef"
Code, html
<!DOCTYPE html>
<html>
<head>
<title>Home:</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id="nav">
<div id="maindic">
<div id="NavDivef">
<ul>
<h1>CPG</h1>
<li>Contact</li>
<li>Find out more</li>
<li>Contact</li>
<li>Find out more</li>
</ul>
</div>
</div>
</nav>
<center>
<div id="divCenter">
<p>
This website is dedicated to games.
</p>
</div>
</center>
<img alt="" id="gameImage" src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg"/>
</body>
</html>
Code, css
body{
font-family: arial, sens-serif;
background-size: cover;
}
*{
padding: 0px;
margin: 0px;
}
#NavDivef ul{
width: 100%;
height: 80px;
background-color: black;
line-height: 80px;
position: fixed;
line-height: 80px;
opacity: 0.8;
}
#NavDivef ul li{
list-style-type: none;
display: inline-block;
float: right;
}
#NavDivef ul a{
text-decoration: none;
padding: 30px;
color:White;
}
#NavDivef ul li:hover{
background: orangered;
color: #cc0000;
}
#NavDivef h1{
color:red;
width: 300px;
float: left;
font-size: 480%;
margin-left: 15px;
}
#divCenter{
position: absolute;
width: 50%;
height: 54%;
background-color: black;
margin-top: 280px;
margin-left: 350px;
}
#divCenter p{
color:red;
margin-top: 30px;
margin-left: 30px;
font-size: 40px;
}
#divExample{
width: 600px;
height: 700px
}
Thank you in advance.
So I am trying to make a web tutorials page just to help out my skills and I cannot seem to figure out why there is a space between the bottom of my navigation bar and the top of my first header? If anyone could possibly tell me what I wrote that would separate these two that would be amazing!
body{
margin: 0;
padding: 0;
background: #cccccc;
}
.nav ul{
list-style: none;
background-color: #444444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li{
font-family: 'Oswald'. sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888888;
}
.nav a{
text-decoration: none;
color: #ffffff;
display: block;
}
.nav a:hover{
background-color: #005f5f;
transition: .3s background-color;
}
.nav a.active{
background-color: #ffffff;
color: #444444;
cursor: default;
}
#media screen and (min-width: 600px){
.nav li{
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
}
.header{
background-color: blue;
height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Responsive design -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Tutorials - Making web development easier!</title>
<!-- Custom Css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class="home"><a class="active" href="#">HOME</a></li>
<li class="tutorials">HTML</li>
<li class="about">CSS</li>
<li class="contact">CONTACT</li>
</ul>
</div>
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
</body>
</html>
It's because the h1 element has a default margin set by the user agent stylesheet of the browser.
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
You have to remove this margin.
.header h1 {
margin-top: 0;
}
Obligatory CSS reset link.
body {
margin: 0;
padding: 0;
background: #cccccc;
}
.header h1 {
margin-top: 0;
}
.nav ul {
list-style: none;
background-color: #444444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald'. sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888888;
}
.nav a {
text-decoration: none;
color: #ffffff;
display: block;
}
.nav a:hover {
background-color: #005f5f;
transition: .3s background-color;
}
.nav a.active {
background-color: #ffffff;
color: #444444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
}
.header {
background-color: blue;
height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Responsive design -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Tutorials - Making web development easier!</title>
<!-- Custom Css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class="home"><a class="active" href="#">HOME</a>
</li>
<li class="tutorials">HTML
</li>
<li class="about">CSS
</li>
<li class="contact">CONTACT
</li>
</ul>
</div>
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
</body>
</html>
To fix that tiny issue is easy, to use a global reset framework is probably easy too. What I would suggest, you should study the basic default browser stylesheet rules, that will bring you CSS skills to the next level.
You can basically go and read through all the lines:
Mozilla Firefox etc
http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
Apple Safari etc http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
They are quite similar, I suggest to read Mozilla's first. We don't have to remember all of them, just the most common ones will be enough, such as the heading, paragraph, list and blockquote etc.
css:
h1
{
margin:0;
}
there is auto margin in h1 tag which you need to make it 0
Hope the above solved the issue.
Just wanted to follow up to ask if you're comfortable using the web inspector tools.
Sometimes you can try a million things with no luck, but inspect the area and it jumps right out. Troubleshooting issues like this is so much easier to do in the inspector.
I really like the ones built into Chrome, but everyone has a preference.
This article on TeamTreehouse.com blog is a pretty good intro!