I have a navbar div in my website. Sometimes it stays at the top and sometimes it adds unnecessary margin-top. I'm not sure what's wrong. I checked my website, it's not collapsing with any margin for any of my div. I am very confused. I tried to use position but that did not work. Can anyone help? Here's my code snippet :
.container-navbar{
background-color: #ffffff;
height: 60px;
display: flex;
justify-content: space-between;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
transition:5s;
}
.button-collapse-sidebar{
padding-top: 10px;
padding-left: 10px;
}
.button-collapse-sidebar button{
height: 40px;
width: 60px;
font-size: 20px;
border:none;
background-color: blue;
color: #ffffff;
}
.button-collapse-sidebar button:hover{
transition: 1.5s;
cursor: pointer;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
.user{
display: flex;
}
.user-name{
padding: 18px;
}
.user-name i{
padding-left: 5px;
}
.user-name i,a{
text-decoration: none;
}
.user-picture{
margin-top:5px;
margin-right: 5px;
width: 60px;
position: relative;
overflow: hidden;
border-radius: 50%;
height: 50px;
}
.user-picture img{
width: 100%;
margin: auto;
position: absolute;
top: 20px;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container-navbar">
<div class="button-collapse-sidebar">
<button class="button-collapse"><i class="fa fa-bars" aria-hidden="true"></i></button>
</div>
<div class="user">
<div class="user-name">
Admin name<i class="fas fa-circle"></i>
</div>
<div class="user-picture">
<img src="" alt="user-picture">
</div>
</div>
</div>
</body>
</html>
so i update the code and add the body{ margin:0; } here i have 2 different file html but with same html tag and css but for some reason my main one not working but my test html it work and not adding the unnecessary margin-top.
When a browser renders an HTML page, it applies basic styles before you’ve even written a single style.
For Example, the <h1> to <h6> HTML tags in all browsers differ from the normal text:
in general, their font sizes are larger, their font-weight is bold(font-weight: bold), and they have margins on the top & the bottom.
While all browsers apply their basic styles, each browser has its specific styles different from other browsers, and that, of course, causes an inconsistency problem. That’s the problem that you are talking about in this question.
The attempt to solve the browser inconsistency problem has produced two approaches: the Normalize CSS approach and the CSS Reset approach.
If you are talking about this margin, you can simply add
body{
margin : 0px;
}
in your CSS. That should solve your issue. If you only want to remove margin on the top, use margin-top instead.
As for now, you can get used to adding this at the top of your css-file:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
This will remove all paddings and margins and box-sizing will simply make it easier for you. Mozilla box-sizing.
that's a simple reset you can do for your website:
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Related
This is my first question on stackoverflow, so please bear with me if I don't do everything correct. If I can format this better, please let me know.
I am working through the TOP 2nd CSS Margin/Padding exercises. I was able to get through the first one no problem, but I have a situation that I don't understand in the second task.
The goal was to manipulate the padding/margins to achieve a certain desired outcome. Below is the original HTML and the CSS original, followed by the solution. I've put a link to the .png of desired outcome at the bottom.
My question is specifically about the .card and .title elements.
Before the 8px padding was added to the .card element, the edge of the blue background inside the .title element when right up to the top edge of the box and were flush with the .card element. When I add 8px padding to the .card element, it seems to add it correctly to the left, right and bottom of everything, however the top of the .title element seems almost double in white space between the top of the blue box in the .title element and the top of the .card element.
This is fixed then by adding the margin-top: 0; in the .title element.
I'm having a very hard time conceptualizing why I need to add the margin-top of 0. I think I understand everything else. But why is everything flush without the padding, but when I add the 8px padding, it looks good on all sides except the top which appears double, necessitating the margin-top: 0; being inserted into the .title element
Does it have anything to do with an h1 margin having some extra margin to begin with? Again, this is my first run at CSS so I'm not sure if that is correct. If it does have something to do with the h1 margin, why am I only seeing it when I add the padding?
Perhaps I'm missing a super easy concept here, but it's doing my head in so any help would be appreciated.
<!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">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
CSS Original + Solution
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
The reason for the phenomenon you're observing is a CSS "feature" called collapsing margins, which has been giving developers headaches for literally decades.
Let me show you a very simplified example of how it works.
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
}
<div class="outer">
<div class="inner"></div>
</div>
So this does what we're expecting it to do: It shows the orange div.inner right inside the green div.outer, at the very top of div.outer.
So what if we want to move the div.inner like let's say 20px down inside div.outer?
Let's try what seems intuitive: .inner { margin-top: 20px; }
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
Now instead of moving down div.inner inside div.outer, the whole div.outer has moved, with the div.inner still at the very same position relative to div.outer.
Huh???
This is where collapsing margins kick in. In certain conditions, if a parent with a margin-top (0 by default for div) has a child that has a margin-top (like in your code the h1 has), both margins collapse, meaning whichever element has the greater margin is applied to the parent element, not the child.
This only applies as long as the parent element has no padding-top set. Simply setting that to 1px stops margins from collapsing:
.outer {
background-color: green;
height: 250px;
/* stops collapsing margins: */
padding-top: 1px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
What is going on is described at MDN for three different basic cases, this one applying here:
No content separating parent and descendants
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
You are correct, h1 has an inherent margin associated with it. I believe in chrome it is 0.67em. You can demonstrate this property by simply changing the h1 in <h1 class="title">I'm a card</h1> to a div and you can see how there's no margin anymore when you apply this.
Below in this example all I did was remove the margin-top: 0; from .title and switched h1 to divand you can see there no margin anymore
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<!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">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<div class="title">I'm a card</div>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
You're absolutely right about the margin on the h1 tag. Browsers add default styling to most HTML elements. It varies slightly between browsers, but in Chrome by default an h1 tag has about 0.67em of margin above and beneath it.
These default stylings are included to aid legibility of HTML documents that don't have any CSS applied – but they can all be overridden.
A really handy feature to take advantage of when you're writing CSS is your browser's 'Inspect element' feature: If you right click on your h1 tag in your browser and click 'Inspect element` in the menu that appears, you can see both the styling you've applied and the browser's default styling, referred to as the 'user agent stylesheet.'
If you hover over an element you can see how its padding and margin are affecting its layout.
You can see Chrome by default adds a margin-block-start and margin-block-end to the h1 tag by default. It's worth asking why it doesn't just use margin-top and margin-bottom, but the margin-block property covers off text that isn't oriented from left to right, or is rotated. Either way, setting your own margin-top and margin-bottom will override it, as you've done.
#connexo has described the collapsing margins phenomenon, which of course adds even more to ponder. This Medium article provides a little more context on why it occurs, using paragraphs as an example.
Now the code below is displaying perfectly on different mobile platforms and different mobile browsers. For some reason when I load it onto my desktop browser the image overlaps the links.
On mobile the image is perfectly centered above the links and desktop version image is overlapping the links. Any help?
The main issue is the placement of the image.
CSS:
html {
font-size: 20px;
box-sizing: border-box;
}
body {
background-color: #1abc9c;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.btn {
border: 5px solid #2c3e50;
color: #2c3e50;
display: block;
font-family: 'trebuchet ms';
font-size: 2rem;
letter-spacing: 0.1rem;
padding: 1rem;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.btn::before {
content: "";
background-color: #E26A6A;
box-shadow: 10px 10px 0 #F1C40F,
20px 20px 0 #3498DB;
position: absolute;
left: 0.25rem;
top: 0.5rem;
height: 102%;
width: 102%;
z-index: -1;
transition: all 0.4s ease;
}
.btn:hover::before {
box-shadow: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.tools
{
position:absolute;
top: 25px;
left: 0px;
z-index: 2;
}
html:
<body>
<img src="tools.png" class="tools">
<div class="wrapper">
< MICROSOFT_LOGGER >
<br>
<br>
< OFFICE_TOOL_LOGGER >
<br>
<br>
< WEB_MON_COMPUTER >
<br>
<br>
< WEB_MON_ANDROID >
</div>
</body>
https://codepen.io/brandon-humphrey/pen/wvMGJzN
Desktop view: https://ibb.co/6YVZC13
Mobile view: https://ibb.co/7QFcdn3
That is because you're using position: absolute to position your image. What this does to your element is that it removes it from the normal document flow, and no space is created for it in the page layout anymore.
I recommend you read more about positioning in CSS so that you could figure out what you need and do it!
Small hint: What you might want is using Flexbox mainly to position everything properly, you can have a better result just by setting the flex-direction in body to column (Although I recommend putting your flexbox as styles for divs not the whole body). Also, remove the CSS class you wrote for tools, and the height you specified for the body.
The fact that you get the effect you want on mobile is a fluke. The wrapper for buttons is vertically centered, so there's space enough for the image to sit on top and not cover your buttons. Once the vertical space is reduced because the screen is landscape your absolutely positioned image covers the buttons.
If you want the effect to be consistent, I suggest you remove all your styling for the tool class and add flex-direction:column; to your body styles. You may still have to fiddle with it for your full effect, but this will get you the basics.
I've only recently really gotten into trying to learn how to do web-development, and the reason I actually got into it, was because I was incredibly curious on how to make this: https://imgur.com/a/dvghHmD.
Not the chat, but in the bottom-left, you can see what I'm looking at. I'd really like to make something similar, with a drop-shadow. Currently, this is what I got:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
}
<style>
.rectangle {
height: 100px;
width: 400px;
background-color: #FFFFF;
border-radius: 15px;
position: fixed;
bottom: 0;
margin-bottom: 2.5%;
margin-left: 2.5%;
}
.rectangle {
-webkit-box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
}
.rectangle class = "full-height"
#rectangle {
}
</style>
<style>
.text {
color: #151515;
text-align: left;
width: 300px;
font-family: 'Roboto', sans-serif;
position: absolute;
bottom: 0;
margin-bottom: 2%;
margin-left: 6%;
</style>
</head>
<body>
<div class="rectangle"></div>
<div class="text"> </div>
<div class="text"><span class="text"> <h2 style="font-size:21px"> This is a test text! This text is quite fine. I have no idea what I'm doing. <h2> </span>
</div>
</body>
</html>
Okay, so, you can most likely tell I have no clue what I'm doing. I've really been enjoying working on this, but I still have no clue really how to do a lot of things. Here are a few of those things:
How do I make a box like this always appear responsively to the size of the screen?
How do I 'parent' the text to the box, so that the text scales according to the box, and not independently? I don't know how to better describe it.
Would there be a more effective way of going about this (or have there been made any github depositories that already made this, so I could take a look at that code)?
To any of you who see this, thank you so much for reading. I really appreciate any help!
You can use relative positioning for sizing the box according to the screen
OR
You can use 'Responsive Media Queries'(https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
For scaling text according to the popup, you may use the 'rem' unit is CSS. What it basically does is it scales your text according to the size of the parent.
Check this link: (https://css-tricks.com/almanac/properties/f/font-size/)
Hope this helps. :)
Before diving into CSS, first structure your HTML appropriately. You ask about parenting items and that's done with wrapping things with opening/closing tags:
HTML:
<div id="message_container">
<div id="message_content">message</div>
</div>
CSS:
With your HTML proper, then you work on styling:
#message_container {
/* to position it at bottom-left (dependent on the parent) */
position: absolute;
bottom: 2em;
left: 2em;
/* to position the contents within the box (ie the message text) */
display: flex;
justify-content: center;
align-items: center;
/* to style the message box in particular ways */
padding: 2em;
border-radius: 40px;
box-shadow: 4px 4px 20px rgba(0,0,0,0.3);
width: 100%;
max-width: 200px;
}
Responsive optimization:
Once your structure (HTML) and style (CSS) are solid, then you can think about responsiveness. To do this, you'd want to be exploring CSS #media rules to change the box style properties according to some conditions (e.g. screen width). Its all subjective, so you have to trial-and-error yourself to clean up the layout at different screen sizes.
For example:
/* for screens smaller than 320px width */
#media (max-width: 320px) {
/* make the message slimmer, and center it */
#message_container {
padding: 0.5em;
padding-top: 1em;
padding-bottom: 1em;
left: 50%;
transform: translate(-50%,0);
}
/* make the message text smaller */
#message_content {
font-size: 0.9em;
}
}
Controlling the box:
If you want this box to appear-and-disappear according to different events (like 2 seconds after the page fully loads, or when the user clicks something elsewhere), then you'll be looking at using Javascript. There's plenty of tutorials for that.
This is the general process.
Codepen
#message_container {
/* to position it at bottom-left (dependent on the parent) */
position: absolute;
bottom: 2em;
left: 2em;
/* to position the contents within the box (ie the message text) */
display: flex;
justify-content: center;
align-items: center;
/* to style the message box in particular ways */
padding: 2em;
border-radius: 40px;
box-shadow: 4px 4px 20px rgba(0,0,0,0.3);
width: 100%;
max-width: 200px;
}
#media (max-width: 320px) {
#message_container {
padding: 0.5em;
padding-top: 1em;
padding-bottom: 1em;
left: 50%;
transform: translate(-50%,0);
}
#message_content {
font-size: 0.9em;
}
}
<div id="message_container">
<div id="message_content">message</div>
</div>
#header {
margin: *<--This one*
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
margin:0 auto;
display: block;
}
I am building a website in which I encountered that the <h1> element goes behind the fixed navbar. I tried to find the optimal solution for this.
I figured out that many people made an extra <div1> container which had the same height as that of the navbar and then used another <div2> element to write whatever they have to show to the user.
I had a problem with this solution actually my navbar is a responsive one. So I have to make the <div1> element responsive too, using #media.
Then experimenting with margin I found that leaving the margin blank gives me the optimal one. It doesn't requires me to add the <div1> container.
I found this helpful. Since I am newbie in Programming, I don't know if these type of shortcuts are not good to be used.
P.S. I used "Brackets" editor and the live preview was shown in Google Chrome.
edit: the #header is the container for the navbar and is fixed. position:fixed.
It causes everything until the next ; to be treated as invalid and dropped.
It is not a shortcut, it is a longer way to achieve the same effect as not typing margin: position: fixed; at all.
CSS was designed to be very forgiving of errors. There are multiple reasons for this.
Imagine you're using a background-gradient which older browsers might not understand. Your whole CSS code would break.
That's why CSS just continues with the next statement that it can find. For example:
.foo {
color: white;
background: black;
background: linear-gradient(red, yellow);
}
CSS reads the file top to bottom, so first the black background shall be applied and after that the gradient background will be applied. Which will lead to a red/yellowish background in modern browsers.
Without CSS error handling our whole CSS would die in old browsers.
In your case however, CSS reads the following statement:
#header {
margin: position: fixed;
}
Which is an syntax error and neither of those will be applied. CSS will just continue with your width: 100% statement.
When you use a fixed header, you should give margin-top to the next element that is equal to the height of the fixed header, so that it starts after the fixed element. But this will work only if your header is of fixed height. In case your header is not of a fixed height and changes with viewport then add a resize function on body that calculates the height of header on each resize and gives the same value as marginTop to the next element after the fixed element.
body{
margin: 0;
}
#header {
top : 0;
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
height: 65px;
}
#nav-bar a{
display: block;
padding: 9px 16px;
text-align: center;
float: left;
color:azure;
text-decoration:none;
}
#nav-bar a:hover{
background-color: rgba(49, 248, 23, 0.94);
}
.nav-right{
float:right;
font-size: 17px;
text-align: center;
}
#media(max-width:600px){
#nav-bar{
position: relative;
display: flex;
flex-direction: column;
}
.nav-right{
display: flex;
flex-direction: column;
}
}
.logo {
font-family: 'Great Vibes', cursive;
font-size: 30px;
}
#header-img {
height:35px;
width:30px;
}
h2 {
text-align: center;
background: linear-gradient(0deg,red,yellow);
padding: 14px;
}
#form {
display:flex;
justify-content: center;
margin-bottom: 21px;
}
#email {
height: 21px;
width: 250px;
border-radius: 3px;
border-color: #938e8e;
}
section {
position: relative;
top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Bookworms Site</title>
<link href="style-sheet.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Limelight" rel="stylesheet">
</head>
<body onresize="myFunction()">
<main>
<header id="header">
<div id="nav-bar">
<img src="book.jpg" id="header-img"> The Bookworms Site
<div class="nav-right">
About
Features
Pricing
</div>
</div>
</header>
<div id="abc" style="margin-top: 65px;">
<h2> Hurry!! Offers until Next 20 Hours!!</h2>
<form id="form">
<section>Email:</section>
<input id="email" type="email" placeholder="Enter Your Email">
<button type="submit" url="">Submit</button>
</form>
</div>
</main>
<script>
function myFunction() {
document.getElementById( "abc").style.marginTop = document.getElementById( "header").clientHeight + "px"
}
</script>
</body>
</html>
I'm trying to learn some basics of HTML by using jfiddle. This is what I've done.
https://jsfiddle.net/Lqn0jch3/
HTML
<body>
<div class="container">
<div class="sidebar">
<div class="logo"></div>
<div class="menu-options">
<p>yeeeeeep</p>
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
overflow-y: hidden;
}
.container {
background-color : #458748;
height: 100%;
}
.sidebar {
height: 100%;
width: 30%;
background-color : #000000;
}
.logo {
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/31/Britannia_Industries_Logo.svg/1280px-Britannia_Industries_Logo.svg.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 30%;
width: 100%;
text-align: center;
background-color: aqua;
}
.menu-options {
background-color: #FFFFFF;
}
p {
color: #000000;
}
But I can't understand why my 'menu-options' class is not being positioned just below the logo and there's some separation between them.
Thanks in advance.
is this what you want?
https://jsfiddle.net/Lqn0jch3/1/
i changed the css of p
p {
display: inline-block;
color: #000000;
}
the element <p> becomes margins by default, so changing its display or setting margin: 0px; would do the job for you
I've changed your class, modify the positioning to your needs:
.menu-options {
background-color: #FFFFFF;
position:relative;
top:-20px;
}
By default the browser adds margin to the top and bottom of the paragraph element, so to fix this you just have to change the margin to 0.
p {
margin: 0;
}
And you normally wouldn't use a paragraph element in a menu. An Unordered list works well. <ul> <li>
Separation between them is because of default margin style on element p
You can get diffrent default margin values on diffrent browsers, try using CSS Reset scripts.