I've already added body margin and padding to 0. However, there is still white space above my navigation bar and beneath the image above it that I can't figure out how to remove.
*,
html,
body {
padding: 0;
margin: 0;
}
* {
font-family: Arial, sans-serif;
}
.nav {
width: 750px;
margin: 0 auto;
list-style: none;
}
.nav ul {
font-size: 0;
}
.nav li {
display: inline-block;
border-right: 1px solid black;
padding: 10px 30px 10px 30px;
font-size: 22px;
font-weight: 700;
}
.nav li:first-child {
border-left: 1px solid black;
}
.nav li:hover {
background-color: #00FFFF;
}
a {
text-decoration: none;
}
<img src="image.jpg" alt="image cannot be displayed" style="width: 100%; height:150px;" />
<div class="nav">
<ul>
<li>Home</li>
<li>Second Page</li>
<li>Third Page</li>
<li>Fourth Page</li>
</ul>
</div>
Either set display: block; on your image or wrap it in a div. The whitespace is essentially a single space showing up because of the img tag styles which default to display: inline.
img {
display: block; /*add this or set container's font-size to 0 */
}
body {
padding: 0;
margin: 0;
font-size: 0; /*add this, otherwise change the img to block*/
}
Related
I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
An element won't move to my intended position. I want to have some white space between the right of "Register" and the browser but don't know how to do it. I have tried padding but it seem to be kind of wrong thinking.
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: sans-serif;
color: black;
}
.firstpart {
background-color: #eee;
height: 30vh;
}
.navbar li {
list-style: none;
display: inline;
}
.navbar-left {
float: left;
padding: 20px 20px 0 20px;
}
.navbar-right {
float: right;
padding: 20px 20px 0px 20px;
}
.badge {
background-color: black;
color: white;
height: 35px;
width: 80px;
}
<div class="firstpart">
<div class="navbar">
<ul>
<li class="navbar-left">ABOUT</li>
<li class="navbar-left">CONTACT</li>
<li class="navbar-left">FAQS</li>
<div class="navbar-right badge">
<li>REGISTER</li>
</div>
<li class="navbar-right">SIGN IN</li>
<li class="navbar-right">MANAGE BOOKING</li>
</ul>
</div>
</div>
You just need to add:
.navbar {
padding-right: 10px;
}
You can also remove the div inside of your unordered list as this isn't valid HTML. Replace it with:
<li class="navbar-right badge">REGISTER</li>
Code (open in "Full page" view as otherwise "Manage Booking" gets wrapped):
/* Add this */
.navbar {
padding-right: 10px;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body{
font-family: sans-serif;
color: black;
}
.firstpart{
background-color:#eee;
height: 30vh;
}
.navbar li{
list-style: none;
display: inline;
}
.navbar-left{
float: left;
padding: 20px 20px 0 20px;
}
.navbar-right{
float: right;
padding: 20px 20px 0px 20px;
}
.badge{
background-color: black;
color:white;
height: 35px;
width: 80px;
}
<body>
<div class="firstpart">
<div class="navbar">
<ul>
<li class="navbar-left">ABOUT</li>
<li class="navbar-left">CONTACT</li>
<li class="navbar-left">FAQS</li>
<li class="navbar-right badge">REGISTER</li> <!-- Use an li element instead -->
<li class="navbar-right">SIGN IN</li>
<li class="navbar-right">MANAGE BOOKING</li>
</ul>
</div>
</div>
</body>
I think you could simply set a width for .navbar div to say, 98%
.navbar {
width:98%;
}
I am practicing html/css by making this website but there are some white spaces to the left and right around the links in list of contents. I have added a sample of html code of how complete list is coded.
I have tried setting the margins and paddings of all elements to zero but nothing is working.
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: 20% 80%;
margin: 0;
}
.nav_bar {
min-height: 100vh;
overflow-y: auto;
margin: 0;
padding: 0;
}
.nav_bar ul {
display: block;
padding: 5px;
list-style: none;
font-size: 0;
margin: 0;
}
.nav_bar li {
padding: 10px 5px;
border-bottom: 2px solid black;
}
<div class="container">
<div class="nav_bar">
<h3>JS DOCUMENTATION</h3>
<ul class="nav_list">
<li>
Introduction
</li>
</ul>
</div>
</div>
enter image description here
You have given the padding to the ul tag that is the reason why the line did not touch two extreme ends.
just change the padding in the ul to 0
Is this what you are looking for ?
I added the color in order to show where the problem occured
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: 40% 30%;
margin: 0;
padding:0;
}
.nav_bar {
min-height: 100vh;
overflow-y: auto;
margin: 0;
padding: 0;
}
h3 {
padding: 10px 5px;
}
ul {
display: block;
padding: 0px;
font-size: 0;
margin: 0;
}
li {
padding: 10px 5px;
border-bottom: 2px solid black;
}
li:first-child {
border-top: 2px solid black;
}
a {
text-decoration: none;
color: black;
font-size: 18px;
font-weight: 300;
}
<div class="container" style="background-color:green;">
<div class="nav_bar" style="background-color:lightblue;">
<h3 style="background-color:red;">JS DOCUMENTATION</h3>
<ul style="background-color:pink;" class="nav_list">
<li>
Introduction
</li>
Are u expecting like this :
NOTE: CHECK MY ANSWER IN FULL SCREEN MODE
#drop-down{
padding-inline-start:0; /*use this css */
}
HTML:
<ul class="nav_list" id="drop-down"> <!-add id="drop-down" to ul-->
<li>
Introduction
</li>
</ul>
#drop-down {
padding-inline-start: 0;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: 20% 80%;
margin: 0;
}
.nav_bar {
min-height: 100vh;
overflow-y: auto;
margin: 0;
padding: 0;
}
.nav_bar h3 {
padding: 10px 5px;
}
.nav_bar ul {
display: block;
padding: 5px;
list-style: none;
font-size: 0;
margin: 0;
}
.nav_bar li {
padding: 10px 5px;
border-bottom: 2px solid black;
}
.nav_bar li:first-child {
border-top: 2px solid black;
}
.nav_list a {
text-decoration: none;
color: black;
font-size: 18px;
font-weight: 300;
}
<div class="container">
<div class="nav_bar">
<h3>JS DOCUMENTATION</h3>
<ul class="nav_list" id="drop-down">
<li>
Introduction
</li>
</ul>
</div>
</div>
Assuming you mean the padding on the list items (which you don't currently confiugre in your css), you can do the following;
.nav_list li {
padding-left: 0;
padding-right: 0;
}
This will remove the padding on the left and right side side for each list item in your unordered list.
Also note that in your question, you have not yet set all paddings to 0.
.nav_bar ul {
display: block;
padding: 5px;
list-style: none;
font-size: 0;
margin: 0;
}
If this is not desired behaviour, be sure to set the padding of the unordered list to 0 too.
I have a navigation menu link that has extra whitespace at the bottom of the div tag with the id of nav. It is not because margin or padding, but there is some sort of whitespace that is not allowing the ul tag to touch the bottom of the div with the id of nav. How do I get it to do so. Here is the link
* {
padding: 0;
margin: 0;
}
#nav {
border: 1px solid black;
text-align: center;
min-width: 300px;
}
#nav ul {
padding: 10px 0;
display: inline-block;
}
#nav li {
float: left;
list-style: none;
margin-left: 50px;
}
#nav a {
text-decoration: none;
color: black;
padding: 15px 10px;
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</div>
The gap is reserved space given to descender text elements (e.g. j, y, g). Remove it by adding vertical-align:top to your <ul>
* {
padding: 0;
margin: 0;
}
#nav {
border: 1px solid black;
text-align: center;
min-width: 300px;
}
#nav ul {
padding: 10px 0;
display: inline-block;
vertical-align: top;
}
#nav li {
float: left;
list-style: none;
margin-left: 50px;
}
#nav a {
text-decoration: none;
color: black;
padding: 15px 10px;
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</div>
Note that the list items poke out below the div because of the padding you applied to #nav a which can be adjusted.
To fix your problem do this:
Change #nav ul to this:
#nav ul {
padding: 10px 0;
}
Change #nav li to this:
#nav li {
display: inline-block;
list-style: none;
margin-left: 50px;
}
remove margin-left: 50px; from your #nav li.Its creating unwanted white space on your menu.The width of menu will depend on the lenth of text
Something to do with the inline-block it seems. There's no space with inline-flex or display: table;
#nav ul {
padding: 10px 0;
display: inline-flex;
background-color: black;
}
inline-block's biggest problem was it's handling of fonts, it adds a ghost 'padding' of 4 to 5px after each element, depending on browser.
Here's a rewrite that uses the font-size: 0 method to negate the effects.
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* allow percentages to be calculated without border and padding messing things up */
}
#nav {
border: 1px solid black;
min-width: 300px;
}
#nav ul {
list-style-type: none;
font-size: 0; /* font-size: 0; is a method to remove the ghost padding added after inline-blocks, one of the many reasons display: flex is becoming so popular */
}
#nav li {
display: inline-block;
width: 25%; /* control width here */
text-align: center;
}
#nav a {
display: block; /* allow element to expand to match parent size by changing from <a> default display: inline to block */
text-decoration: none;
color: black;
font-size: 15px; /* reset font-size here */
line-height: 30px; /* control element height here */
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
fiddle
https://jsfiddle.net/Hastig/wfrxgxjm/
It's strange, my unsorted list with display: inline-block is inside an height: auto div element. But the div is 3px higher then the unsorted list. Do someone see the problem ?
html, body {
margin: 0;
width: 100%;
height: 100%;
font-family: monospace;
}
#main_navigation {
width: 100%;
background-color: #3e3e3e;
text-align: center;
}
#main_navigation img {
height: 5em;
width: 5em;
position: absolute;
left: 1em;
top: 0.5em;
}
#main_navigation ul {
padding: 0px;
margin: 0 auto;
display: inline-block;
}
#main_navigation ul li {
padding: 2em;
list-style-type: none;
display: table-cell;
border-left: 1px solid #000;
}
#main_navigation ul li:hover {
background-color: #e04100;
}
#main_navigation ul li:first-child {
display: none;
}
#main_navigation ul li:nth-child(2) {
border: none;
}
#main_navigation ul li a {
font-size: 1.75em;
color: #cecece;
padding: 2em;
text-decoration: none;
}
<nav id="main_navigation"> <img src="res/logo.png">
<ul id="main_navigation_ul">
<li>Navigation
<div id="menu_symbol" onclick="nav_toggle()">
<div></div>
<div></div>
<div></div>
</div>
<hr>
</li>
<li>Home
</li>
<li>Projects
</li>
<li>About me
</li>
<li>Imprint
</li>
</ul>
</nav>
JSFIDDLE
You can see the space very good by hovering over the nav points.
Change the vertical-align value on your list: Fiddle example
#main_navigation ul {
padding: 0px;
margin: 0 auto;
display: inline-block;
vertical-align: top;
}
The extra pixels come from the fact that the element with display: inline-block is an inline element, so it will be treated as a character on a text line.
The element is placed on the base line of the text line, and there is space below the base line for hanging characters like j and g. That's where the extra pixels come from.
From what I can tell, you can just remove the display: inline-block style without any problems.