There is currently an unexplainable gap between my nav element and the div element that's below it.
Using inspect element on said gap refers me to the body. Meaning that there's literally nothing in that gap. I've used Chrome developer tools to check the margin and padding of every element that exists in the html file already and from what I can see there really isn't anything that should be causing the gap.
Here's the code. Running the code snippet in a new window would be best:
/* Load required font faces */
#font-face {
font-family: Nunito;
src: url("../fonts/Nunito/Nunito-Regular.ttf") format('truetype');
font-weight: normal;
}
/* CSS for text */
p, a, h1, h2, h3 {
font-family: Nunito;
}
/* CSS Styles for body */
body {
margin: 0 !important;
}
/* CSS Styles for the Navbar */
nav {
height: 8vh;
padding: 0% 2% 0% 2%;
background-image: linear-gradient(to right, #00B9FF, #9316FF);
}
nav a {
color: white;
font-size: 1.5em;
text-decoration: none;
}
nav a:hover {
color: #adadad;
}
#nav-wrapper {
height: 100%;
display: flex;
align-items: center;
}
#nav-content {
width: 100%;
}
.nav-logo {
float: left;
}
#nav-navigation {
width: 20%;
float: right;
margin: 0;
}
.nav-button {
display: inline-block;
margin: 0% 2% 0% 2%;
}
/* CSS for the page header */
#page-header {
height: 9vh;
background-color: #F3F3F3;
}
<html>
<head>
<title>Webpage</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Navbar -->
<nav>
<div id="nav-wrapper" class="align-middle">
<div id="nav-content">
<!-- Company name on the left of navbar -->
<div class="nav-logo">
Company Name
</div>
<!-- Navigation buttons for the navbar -->
<ul id="nav-navigation">
<li class="nav-button">
Nav 1
</li>
<li class="nav-button">
Nav 2
</li>
<li class="nav-button">
Nav 3
</li>
<li class="nav-button">
Nav 4
</li>
<li class="nav-button">
Nav 5
</li>
</ul>
</div>
</div>
</nav>
<!-- Main content -->
<div id="page-header">
<div>
<div>
<p>About Company Name</p>
</div>
<div>
<p>Over here at company....</p>
</div>
</div>
</div>
</body>
</html>
Any help would be welcome. Thank you.
The "p" element in the "page-header" div is causing the gap. Elements may have a default margin or padding. You can reset all default margins and paddings at the beginning of your css file like this:
* {
margin: 0;
padding: 0;
}
or you can select that certain "p" element and remove its margin.
Your p element is getting a margin on it. that's what's causing your gap. If you set a new css rule of:
p {
margin-top:0;
}
or even:
p {
margin:0;
}
then it'll work as expected. At least - it works for me running your snippet - there may be other stuff on your page doing that, but it's worth a shot I think.
Always remember to reset the rules that browsers set by default. A typical reset is
* {
margin: 0,
padding: 0,
box-sizing: border-box,
}
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 2 years ago.
I am trying to learn CSS basics. Below is the HTML and CSS for which I am unable to understand something
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.section-title {
color: #2ddf5c;
}
main {
background-color: burlywood;
}
#product-overview {
background: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.main-header {
background: #2ddf5c;
padding: 0px 16px;
}
<header class="main-header">
<div>
<a href="index.html">
uhost
</a>
</div>
<nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">Packages</li>
<li class="main-nav__item">Customers</li>
<li class="main-nav__item">Start hosting</li>
</ul>
</nav>
</header>
<main>
<section id="product-overview">
<h1>Get the freedom you deserve</h1>
</section>
<section id="plans">
<h1>Choose your plan</h1>
</section>
</main>
We can see that there is a small gap between red and green area.
As per my understanding, this gap exists because both nav and main are block elements.
Right now, height of header element is 90px(approx.)
But if I am trying to update padding of main-header, then browser is removing blank area between header and main elements, and also updating the height of header to 106px
.main-header {
background: #2ddf5c;
padding: 1px 16px;
}
Please help me understand why this is happening.
This has nothing to do with block elements. What happens: The ul at the bottom of your header has a default margin, top and bottom. The margin-bottom goes out of the header and creates the white space (this is known as "collapsing margins").
If you manually set that margin to zero:
.main-nav ul {
margin-bottom: 0;
}
, the space disappears. But when you add a padding-bottom to the header (regardless which value), the (default) margin-bottom of the ul remains inside the header element, also causing the white space to disappear.
Here's the situation without the added padding, but with header's margin-bottom set to zero:
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.section-title {
color: #2ddf5c;
}
main {
background-color: burlywood;
}
#product-overview {
background: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.main-header {
background: #2ddf5c;
padding: 0px 16px;
}
.main-nav ul {
margin-bottom: 0;
}
<header class="main-header">
<div>
<a href="index.html">
uhost
</a>
</div>
<nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">Packages</li>
<li class="main-nav__item">Customers</li>
<li class="main-nav__item">Start hosting</li>
</ul>
</nav>
</header>
<main>
<section id="product-overview">
<h1>Get the freedom you deserve</h1>
</section>
<section id="plans">
<h1>Choose your plan</h1>
</section>
</main>
Well, I'm not sure If I understood you right,
you are bothered about the white gap between the two elements? (I don't have the Privilege to comment your question)
If so the reason of the white gap is because UL elements have "default" style that the browser gives them.
you need to change those default style settings by doing:
ul {
margin: 0;
}
Hope I got you right :)
So im making a website for a school project and all was hunky dory until i tried to put a paragraph element in and it displays above the title text behind the background color
.container {
width: 80%;
margin: 0;
padding: 0;
}
#logotext {
float: left;
font-family: 'Doppio One';
margin-left: 25px;
}
nav {
float: right;
}
#nav {
list-style-type: none;
text-decoration: none;
margin-top: 35px;
}
ul li {
display: inline;
}
li a {
text-decoration: none;
color: white;
}
li a:hover {
color: #fc9516;
}
.darkwrap {
background-color: #414a4c;
position: fixed;
overflow: hidden;
}
.active {
color: #22cc25;
}
#clock {
position: absolute;
top: 0;
right: 0;
margin-top: 25px;
margin-right: 25px;
font-family: Rajdhani;
font-size: 30px;
}
<div class="container darkwrap">
<div id="logotext">
<h1>JF Web Design</h1>
</div>
<!-- Navigation Bar -->
<nav>
<ul id="nav">
<li> Page 1 </li>
<li> About </li>
<li> Page 3 </li>
</ul>
</nav>
</div>
</header>
<span id="clock"></span>
<p>
Hello
</p>
<footer></footer>
i usedchrome to highlight the faulty element so its clear whats happening here its literall positioned at the top behind the bg color
Console Highhlighted element
.darkwrap is position: fixed.
This takes it out of normal flow and locks its position relative to the viewport.
The rest of the content is laid out as normal as if the .darkwrap element didn't exist … so it ends up covered up by it.
You could use margins to compensate for the space covered up by .darkwrap when the viewport is scrolled to the top. I would simply avoid using position: fixed in the first place: The benefits of having the menu on screen all the time very rarely outweigh the drawback of using up all that vertical space all the time.
If you use float: left and float:right please remember to add clear:both to the next element on the website. Here is fixed code:
https://codepen.io/anon/pen/jKRqLz
I am trying to clone google's home page.I Started from the footer of the page and got stuck at the alignment of the links in the footer.
my html code:
<div class="footer">
<hr >
<footer >
Advertising
Business
About
Privacy
Terms
Settings
</footer>
</div>
my css code :
.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer{
background-color: #F4F6F7;
height: 45px;
}
hr{
border-color: #CCD1D1;
margin-bottom: 0px;
}
.advertising, .business, .about, .privacy, .terms, .settings{
color: #909497;
font-size: 1.2em;
margin-top: 11px; //THIS LINE.
}
.advertising, .business, .about{
margin-left: 40px;
}
.privacy, .terms, .settings{
margin-right: 40px;
float: right;
}
can anyone tell me, why the line "margin-top : 11px" is not applied to the first 3 links in the footer(advertising,business,about). Screenshot of footer:
Although the above answer will work, a better solution is this:
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer {
background-color: #F4F6F7;
height: 45px;
}
hr {
border-color: #CCD1D1;
margin-bottom: 0px;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
.footer-links {
list-style-type: none;
}
.footer-links li {
display: inline;
}
.footer-links li a {
color: #909497;
font-size: 1.2em;
margin: 11px 20px 0px;
}
<div class="footer">
<hr/>
<footer>
<ul class="footer-links align-left">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul class="footer-links align-right">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</footer>
</div>
By putting the links into separate menus, it allows you to very quickly add and remove links in the future without messing around with CSS classes.
This fixes any margin errors you are having as well, as we're declaring that every anchor tag has a margin-top of 11px. You'll also notice instead of having 40px margin-left and margin-right, I've set each side to 20px which will give the same effect.
You can also use the .align-left and .align-right classes elsewhere in your HTML instead of declaring it in CSS for every class.
There's no need to give each link it's own class when they all have the same style. But if you wanted to highlight a particular link you'd naturally just add a .highlight class onto one of the anchor tags and specify the styling in CSS.
This method also gives full browser support. Flexbox is a little temperamental on IE as I write this.
Hope this helps!
You need to add float:left to your first three links, as you have applied float:right on the last three.
.advertising, .business, .about{
margin-left: 40px;
float:left;
}
I ran it through codepen,it worked when I applied the margin 11px to all elements using the footer as a selector
I also would recommend using flexbox, its alot easier to use, here is an example
`http://codepen.io/HTMLanto/pen/gmNedQ`
Cheers !
So, I'm working on quickly building a website theme (Wordpress) with the aid of Twitter bootstrap, and I'm running into a problem.
I've got a header thrown together, and I've got this weird gap going on inside the "pull-right" section, not sure why:
I'm not sure what the deal is, I want them sitting on the line right at the same height of the text on the left.
Anyway, I've got the following relevant sections of code:
(HTML for header section):
<!-- Header -->
<div class="row header-container">
<div class="col-md-8 col-md-offset-2">
<div class="pull-left">
<h3>CharlesBaker.net</h3>
</div>
<div class="pull-right">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
</div>
</div>
(CSS for the same section):
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
}
.header-container h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', serif;
}
.header-container ul {
margin: 0;
padding: 0;
}
.header-container ul li {
display: inline;
margin: 0;
padding: 0;
}
.header-container a {
padding: 3px;
color: black;
}
.header-container a:hover {
text-decoration: none;
background-color: #880000;
color: white;
}
Not sure what the issue is, unless it's related to the fact that I'm using a tag instead of just styling a <span> or something, but since I removed the padding/margin using CSS, I wouldn't think that would be the problem.
Any help would be great. The idea is that when I hover over the links on the right, that they're enclosed in a scarlet colored box that "extends" from the 5px bottom border.
Thanks in advance!
Are you looking for this?
You need to set your .header-container as display: inline-block to align all elements inside. Therefore, you need to float your pull div elements (float and left).
Just one last change, set the width size of your header: I set 100%, but you can set whatever you like :)
CSS:
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
width: 100%;
display: inline-block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
There is a particular line-height property for h3 tag with bootstrap.
h1, h2, h3 {
line-height: 40px;//line 760
}
So you will have to add style to negotiate this additional height.
Also another set for your ul as :
ul, ol {
margin: 0 0 10px 25px; //line 812
}
Solution :
Over-ride the ul margin as follows :
.pull-right ul{
margin: 0;
}
Over-ride the line-height for the h3 as follows :
.pull-left h3{
line-height:20px;
}
First one is pretty straight forward and gives you correct alignment straighaway. Second solution will need you to work some more with tweaking the negative-margins for .pull-right.
Debugging URL : http://jsbin.com/oToRixUp/1/edit?html,css,output
Hope this helps.
I have a couple un-ordered lists on my page. Both lists use list-style: disc inside;. Each list's list-items have a couple div's inside them. The problem is that the list-item's content takes up multiple lines and the disc is appearing vertically, at the bottom of the multi-line list-item.
Here is a screenshot kind of showing the problem I am experiencing. Note that I stole the image from a similar question, it is not my HTML or CSS.
Here is a striped down version of my HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="billing_form">
<div id="purchase_items">
<h2>Your purchase</h2>
<h4>Items:</h4>
<div class="items">
<ul>
<li>
<div class="item">First Product - one year license</div>
<div class="price">$99.00 USD</div>
</li>
<li>
<div class="item">Second product & 3 year Product Plan</div>
<div class="price">$125.00 USD</div>
</li>
</ul>
</div>
<div class="subtotal">SUBTOTAL: $224.00 USD</div>
<h4>Discounts:</h4>
<div class="discount">
<ul>
<li>
<div class="item">A really long discount item name - with extra info on three lines!</div>
<div class="price">- $20.00 USD</div>
</li>
</ul>
</div>
<div class="total">TOTAL: $204.00 USD</div>
</div>
</div>
</body>
</html>
And here is the CSS, as small as I thought was relevant:
html
{
font-family: sans-serif;
}
#billing_form
{
width: 350px;
margin: 0 auto;
font-size: 14px;
background-color: #EEEEEE;
}
#billing_form .items
{
position:relative;
}
#billing_form .discount
{
position:relative;
color:#3665B0;
}
#billing_form ul
{
margin: 0;
padding: 0;
list-style: disc inside;
}
#billing_form .items .item,
#billing_form .discount .item
{
display: inline-block;
width: 190px;
}
#billing_form .price
{
float: right;
padding-left: 20px;
}
#billing_form .items,
#billing_form .discount,
#billing_form .subtotal,
#billing_form .total
{
width: 100%;
}
#billing_form .subtotal,
#billing_form .total
{
text-align: right;
margin-top: 5px;
border-top: 1px solid;
font-weight: bold;
}
#billing_form #purchase_items
{
margin: 10px 10px 10px;
}
I found a similar SO question. Unfortunately, the accepted (and only) answer to it states to try position: relative; and vertical-align: top; but it didn't work for me. I tried it with both #billing_form ul and #billing_form ul li and neither worked. They also mention a IE7 hack fix, but I don't think that is relevant to me because I am experiencing the problem in Firefox 3 & 4 and Google Chrome.
Does anyone know how I can make the list-item bullets (discs) appear at the top of each line item?
It looks like vertical-align: text-top; will do what you want (see spec). I believe the reason is that you are creating tall inline blocks that are aligning to the top of the box which is being pushed up by the tall inline box so aligning to top doesn't do what you want. However, I believe that using text-top will align it with the top of where the text is (and the bullet point).
http://jsfiddle.net/Yayuj/ is a fiddle that does what you want (I believe) and has primarily this updated section from your CSS:
#billing_form .discount .item
{
display: inline-block;
width: 190px;
vertical-align: text-top;
}
Any other differences to what you have pasted above should be cosmetic.