I am trying to make a horizontal menu
but these empty blocks are between my menu items (aprox 50px x 50px)
I used chrome inspect tool and these random blank anchors are there with nothing inside and ==$0 at the end
.navbar{
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: red;
}
.navbar a{
float: left;
display: block;
text-align: center;
padding: 30px 25px;
border: none;
margin: none;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background: #54d5f2;
color: black;
}
<html>
<head>
<title>I Want Flowers</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
<a href="./homepage.html">Home Page<a/>
<a href="./products.html">Products<a/>
Store Locations
Contact Us
</div>
</body>
</html>
Its because you close your <a> like this: <a/> instead of </a> here:
<a href="./homepage.html">Home Page<a/>
<a href="./products.html">Products<a/>
I think you make mistake while closing the anchor tags
<a href="./homepage.html">Home Page<a/>
to
Home Page
Replace you HTML by this HTML
<div class="navbar">
Home Page
Products
Store Locations
Contact Us
</div>
That was the after effects of not closing the anchor tag as it should have been.
Just change <a/> to </a> and you're good to go.. :)
.navbar{
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: red;
}
.navbar a{
float: left;
display: block;
text-align: center;
padding: 30px 25px;
border: none;
margin: none;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background: #54d5f2;
color: black;
}
<html>
<head>
<title>I Want Flowers</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
Home Page
Products
Store Locations
Contact Us
</div>
</body>
</html>
Related
Story and What I Am Going For:
I just finished my full HTML and CSS course and decided I wanted to make a website, obviously. While making this is had a few issues but was able to fix them myself. This one I am curious about. I've tried adding a style="background-color: black;" inside the div tag. I've also tried multiple things, but it doesn't seem to color in between the left and right buttons of the Navbar. I attached the following below, My Css File, HTML File and an image of the Source Output. I could be having a brain fart but I just need help with this.
CSS File:
ul {
position: fixed;
top: 0;
left: 0;
list-style: none;
display: inline-flex;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li:last-child {
position: fixed;
top: 0;
right: 0;
}
li a {
display: block;
text-align: center;
text-decoration: none;
color: white;
background-color: black;
padding: 10px 11px;
font-size: 25px;
font-weight: bold;
font-family: Arial;
}
li a:hover {
background-color: gray;
}
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Languages
</li>
<li>
Support
</li>
<li>
An Amazing Website
</li>
</ul>
</div>
</body>
<br>
<h1>index.html</h1>
</html>
Output:
Set the ul width to 100%, then add background-color: black
ul {
position: fixed;
top: 0;
left: 0;
list-style: none;
display: inline-flex;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: black;
}
Just remove the background-color from the li a selector and you should be good.
I'm trying to figure out how to get the div topnav background color to fit the page width from side to side with no gaps. I hope you understand what I mean. if you need any more info just let me know.
Page showing gap:
HTML and CSS code:
body {background-color: burlywood;}
#heading1{position: relative; text-align: center; top: 50px;}
#topnav{background-color: chocolate;
font-size: 30px;
text-align: center;
overflow: hidden;
position: relative;
word-spacing: 70px;
width: 100%; height: 100%;
bottom: 80px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title></title>
</head>
<body>
<h1 id="heading1">Hello World</h1>
<div id="topnav">
<nav>
About
sales
cart
home
</ul>
</nav>
</div>
</body>
</html>
put body { padding:0; margin:0; } in style
The problem is of not removing default margin of body which is causing space in left and right direction.
body { padding: 0; margin: 0;}
#heading1 {
position: relative;
text-align: center;
top: 50px;
}
#topnav {
background-color: chocolate;
font-size: 30px;
text-align: center;
overflow: hidden;
position: relative;
word-spacing: 70px;
width: 100%;
height: 100%;
bottom: 80px;
}
#topnav ul { margin: 0;}
#topnav li { display: inline-block; list-style-type: none;}
<h1 id="heading1">Hello World</h1>
<div id="topnav">
<nav>
<ul>
<li> About </li>
<li> sales</li>
<li> cart</li>
<li> home</li>
</ul>
</nav>
</div>
There is also some syntax problem in the HTML part. Check the above solution which includes both removing of default space and HTML correction with styling.
If you want to mantain automatic margin and padding of body you can add this to #topnav
width: 100vw;
margin-left: -8px;
You also set to 0 margin and padding of body:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title></title>
<style>
body{padding: 0; margin: 0;}
#heading1{position: relative; text-align: center; top: 50px;}
#topnav{background-color: chocolate;
font-size: 30px;
text-align: center;
overflow: hidden;
position: relative;
word-spacing: 70px;
width: 100%; height: 100%;
bottom: 80px;}
</style>
</head>
<body>
<h1 id="heading1">Hello World</h1>
<div id="topnav">
<nav>
About
sales
cart
home
</ul>
</nav>
</div>
</body>
</html>
sorry for the odd wording but anyways, I've created a Navigation bar that works fine but it is slightly to the right even though I have it set to be all the way to the left.
< html>
<header>
<h1>Floor 3 </h1>
</header>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<title> Locker Map</title>
</head>
<style>
.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar {
background-color: #000;
overflow: hidden;
}
.navbar a.active {
background-color: #000000;
color: white;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
<body>
<div>
<ul>
<div class= "navbar">
<a class="active" href="AtomWTHSlockerMAP.html">Home</a>
Floor 1
Floor 2
Floor 3
</div>
</ul>
<p> </p>
</body>
</html>
Try to have width set to 100%, and margin to 0 for body.
.body {
width: 100%;
margin: 0;
}
I deleted the ul and it fixed it, thanks anyways
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.
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.