This question already has answers here:
margin on h1 element inside a div
(3 answers)
Closed 6 years ago.
I have a problem where my h1 tags gets seperated from the top of my page - like this: enter image description here
I'm still very new to HTML & CSS, so I'm asking for your help. Also, I DID look around to see other posts about this and I've tried ALOT, but i can't seem to get it to work.
Here is my CSS & HTML:
html {
height: 100%;
width: 100%;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.header{
background: url("../images/artboard1.jpg") no-repeat top center fixed;
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
#logo {
color: #ffffff;
font-weight: 700;
font-size: 1rem;
float: left;
padding-left: 40px;
padding-top: 35px;
margin: 0;
}
nav {
float: right;
padding-top: 40px;
padding-right: 40px;
margin: 0;
}
a {
color: #ffffff;
font-weight: 400;
font-size: 80%;
text-decoration: none;
margin: 0 auto;
padding-left: 3rem;
}
.content_top {
margin: 0;
margin-top: 260px;
padding: 4rem 0 8rem 0; }
.sub_title, .under_title {
color: #ffffff;
text-align: center;
}
.sub_title {
font-weight: 400;
font-size: 0.85rem;
padding: 0 0 5px 0;
margin: 0;
}
.logo_middle {
display: block;
margin: 0 auto;
}
.under_title {
font-weight: 400;
font-size: 0.85rem;
padding: 5px 0 5px 0;
margin: 0;
}
.content {
background: url(../images/Untitled-2.png);
background-size: cover;
background-repeat: no-repeat;
background-color: #0D0E12;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.projekter {
background-color: #0D0E12;
margin: 0 auto;
padding 0 auto;
}
<html>
<head>
<title>Jakob Hoeg</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
</head>
<body>
<div class="header">
<header>
<a href="index.html"><img id="logo" src="images/logo_top.png" draggable="false"/>
<nav>
HJEM
PORTFOLIO
KONTAKT
</nav>
<div class="content_top">
<h4 class="sub_title">HEY, MIT NAVN ER</h4>
<img class="logo_middle" src="images/logo_big.png" draggable="false"/>
<h4 class="under_title">MULTIMEDIEDESIGN STUDERENDE</h4>
</div>
</header>
</div>
<section class="content">
<div id="content_cont">
<h1>Hello</h1>
</div>
</section>
<section class="projekter">
<div id="projekter">
<h1>Hello</h1>
</div>
</section>
</body>
</html>
Heh, it's a very interesting effect - "margin collapsing".
h1 has default margin-top.
Parent and first/last child
If there is no border, padding, inline content, or clearance to
separate the margin-top of a block from the margin-top of its first
child block, or no border, padding, inline content, height,
min-height, or max-height to separate the margin-bottom of a block
from the margin-bottom of its last child, then those margins collapse.
The collapsed margin ends up outside the parent.
To solve this problem add padding-top to container or replace header margin-top with padding-top. Also can set h1 margin-top to 0.
You can read more about it here.
could you add this style. It'll works.
#content_cont h1 { margin-top:0; }
Try not to set width and height for every objects. As other answers say you can move objects using margin in css. But my concern is adding unnecesary styles like width and height 100% for html, body, content and ... bringing some conflict to your design.
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
So I'm trying to build a basic layout for my site and I've run into a problem. The problem is some margins that I can't figure out where they're coming from.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
style.css:
/* set defaults */
html, body, div {
background-color: white; /* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
}
p {
margin: 0;
padding: 0;
}
So when I render the page as shown I get:
But when I set the width on the sidebar to 19% I get:
As you can see I'm getting some margins to the right of both elements. I have no idea where this is coming from and the inspector is telling me I have no margins! Margin, padding, border and outline are all set to zero so I have no idea where this is coming from. Is there something I'm missing?
Edit: I should have said I'm trying to get the elements to display next to each other without wrapping.
Reason for this beacuse inline elements respect the word spacing between divs in the html. The space between first and second create an actual gap that you can see on the page.
You can easily remove this by removing the space between inline divs in the html.
div {
display: inline-block;
width: 50%;
}
<div style="background: green">Width: 50%</div><div style="background: red">Width: 50%</div>
But I hope this is not you are expecting, do not worry there are some otherways as well :)
font-size: 0;
gap between the two divs is due to word spacing therefore adding font-size: 0 to the parent container will remove the gap between the two divs.
.wrapper {
width: 100%;
font-size: 0
}
div {
display: inline-block;
width: 50%;
}
<div class='wrapper'>
<div style="background: green; font-size: 14px" class="sidebar">Width 50%</div>
<div style="background: red; font-size: 14px" class="main">Width 50% </div>
</div>
display: flex this method only suppport IE > 10 versions, you can apply display: flex to the parent container and apply relavent widths accordingly to child divs.
.wrapper {
display: flex;
}
.main {
width: 80%
}
.sidebar {
width: 20%
}
<div class='wrapper'>
<div style="background: green" class="sidebar">Width 20%</div>
<div style="background: red" class="main">Width 80% </div>
</div>
Actually here you are not getting the margin issue when you have two elements that has width:19% and width:80%, the remaining width:1% gets the gap that you mentioned as margin.
Simply set float:left; to both sidebar and main classes that avoid the margin issue. No need to change the width.
html,
body,
div {
background-color: white;
/* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
float: left;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
float: left;
}
p {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
You have forgot to add the float. Please add the following css to your css so that it wont take margin
.sidebar, .main{ float:left; }
if you usnig float:left instead of display: inline-block; your margin will remove
I'm making a webpage, but I can't seem to get my header div at the very top of the page. There is always a little gap above it. I've tried looking around, but all the solutions of tried don't work.
The webpage in progress
#body {
margin: 0 !important; <!--I thought these "importants" would fix it -->
padding: 0 !important;
}
#header {
margin: 0;
padding: 0;
height: 80px;
width: auto;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
<link href='https://fonts.googleapis.com/css?family=Cabin:400,600' rel='stylesheet' type='text/css'>
<body>
<div id="header"><p id="header_text">The_Grits</p></div> <!-- This is the div I want at the top of the page. -->
</body>
Thanks in advance!
EDIT: The problem has been answered now, thanks for looking anyway.
You need to remove the id selector from body and remove the margin applied to the paragraph element.
Remove the user agent default margin applied to the <p> element and the <body> adding this code:
body, p {
margin: 0;
}
#header {
margin: 0;
padding: 0;
height: 80px;
width: auto;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
Your paragraph p has default margin, because you have missed to add _text in your css rule #header.
Try this snippet:
#body {
margin: 0;
padding: 0;
}
#header_text {
margin: 0;
padding: 0;
height: 80px;
width: auto;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
<div id="header">
<p id="header_text">The_Grits</p>
</div>
because you have to add: p {margin:0px;} or add the #header_text { margin:0px }
When you create a new style sheet, try to reset all element's padding and margin to 0px. This would help you.
http://jsfiddle.net/bpmck3wt/
#header {
display:block;
position:absoulute;
top:0;
right:0;
left:0;
margin: 0;
padding: 0;
height: 80px;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
why don't you specify the position and the dispaly ?
First of all, #body matches the element with id set to body, you don't have such elements so it's completely redundant (it should be just body).
Secondly, "The_Grits" is within p, which adds its own margin. Add
#header_text { margin: 0 }
to your CSS.
See the demo:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Cabin:400,600' rel='stylesheet' type='text/css'>
<!--Above imports the font I'm using-->
<title>The_Grits Programming</title>
<style>
body {
margin: 0;
padding: 0;
}
#header_text { margin: 0 }
#header {
margin: 0;
padding: 0;
height: 80px;
width: auto;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
</style>
</head>
<body>
<div id="header"><p id="header_text">The_Grits</p></div> <!-- This is the div I want at the top of the page. -->
</body>
</html>
This question already has answers here:
White space at top of page
(12 answers)
Closed 2 years ago.
How do I get rid of the white space at the top of my page?
I have tried css resets, removing <p> tags, changing <body>, <html>, and <div> margins and nothing seems to work.
<html>
<head>
<title>Title</title><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
margin: 0;
padding: 0;
}
#container {
background-color: black;
color: white;
width: 800px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
#inner-container {
margin: 10px 10px 10px 10px;
}
p {
margin-top: 0px;
}
</style>
</head>
<body><div id="container"><div id="inner-container">
<p>Body Text</p>
</div></div></body></html>
Your whitespace is coming from the top margin of 10px on #inner-container. See this JSFiddle with the top margin changed to 0px: https://jsfiddle.net/rcz6ksft/.
#inner-container {
margin: 0px 10px 10px 10px;
}
You will need to remove margins for child elements as they will create the white gaps if they are close to the edge of the website. I have updated the margins to be padding instead., this will create the same effect however the element will span right to the edge of the page.
html, body {
margin: 0;
padding: 0;
}
#container {
background-color: black;
color: white;
width: 800px;
margin-top: 0px;
margin-bottom: 0px;
}
#inner-container {
padding: 10px 10px 10px 10px;
}
p {
margin-top: 0px;
}
<div id="container">
<div id="inner-container">
<p>Body Text</p>
</div>
</div>
In my attempts to learn some web development, I've been trying to mimic certain websites I come across on the web. Right now I'm trying to emulate something along the lines of this website: http://www.cassidoo.co/
My question is how are you able to force the background image and navigation bar to fit the screen no matter the screen size?
My HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>Text holder</h1>
<p>Another text holder</p>
</div>
</div>
</div>
<nav>
<div class="container">
<div class="about">
TEXT1
</div>
<div class="resume">
TEX21
</div>
<div class="projects">
TEXT3
</div>
</div>
</nav>
</body>
My CSS:
body {
margin: 0;
}
h1 {
font-weight: 300;
text-align: center;
font-size: 3em;
}
h2 {
font-weight: 300;
text-align: center;
font-size: 2em;
padding-top: 15px;
}
.container p {
font-weight: 200;
text-align: center;
font-size: 1.5em;
}
.jumbotron {
background-image:url('http://goo.gl/o9un96');
height: 800px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
nav {
width: 100%;
background-color: #efeff1;
height: 50px;
text-align: center;
}
nav .container {
width: 100%;
max-width: 768px;
}
nav div {
display: inline-block;
text-align: center;
width: 18%;
padding: 5px;
}
nav div a {
text-decoration: none;
color: #333333;
font-weight: 800;
font-size: 1.5em;
}
nav div a:hover {
color: red;
}
.main p {
font-weight: 200;
text-align: center;
font-size: 1.5em;
}
Feel free to give pointers or any other information that would be useful.
You're almost there. In your CSS set the body and html's margin to 0 as well as their height as 100%.
html, body {
margin: 0;
height: 100%;
}
Also change your jumbotron class's height to 100%.
Edit Again
Add margin-top: 0; to your h1. Here's all your CSS that I edited.
body, html {
margin: 0;
height: 100%;
}
h1 {
margin-top: 0;
font-weight: 300;
text-align: center;
font-size: 3em;
}
.jumbotron {
background-image:url('http://goo.gl/o9un96');
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
nav {
position: absolute;
bottom: 0;
width: 100%;
background-color: #efeff1;
height: 50px;
text-align: center;
}
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>Text holder</h1>
<p>Another text holder</p>
</div>
</div>
<nav>
<div class="container">
<div class="about">
TEXT1
</div>
<div class="resume">
TEX21
</div>
<div class="projects">
TEXT3
</div>
</div>
</nav>
</div>
From my understanding of your question you'd like to have the navigation "stick" to the bottom of the page, and then be able to scroll past it... Is that right?
You'll need to change you html markup and enclose everything in the first "page" within a container. This container's height needs to be 100% of the viewport.
.jumbotron {
height: 100vh;
}
Then your navigation will need to be positioned at the bottom of this container.
nav {
position: absolute;
bottom: 0;
}
Checkout this fiddle for an example:
http://jsfiddle.net/NateW/3rr59bgg/
The particular site you are pointing to achieves this effect using javascript. The navigation bar is set to be 50px tall in CSS all the time, and then javascript sets the height of the header (your .jumbotron) to full window height minus 50px (the height of the nav). Javascript recalculates this number everytime the browser window is resized.
Imagine this HTML
<body>
<div id="headerBackground">
<h1>Content in header</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</body>
This CSS
body {
padding: 0;
margin: 0;
}
#headerBackground {
min-height: 150px;
background: green
}
nav {
width: 100%;
background-color: #efeff1;
text-align: center;
height: 40px;
}
nav ul {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: top;
}
nav ul li {
float: left;
list-style-type: none;
padding: 10px 25px;
}
h1 {
margin: 0 0 0 0;
}
And this JavaScript (jQuery)
// The first three lines sets the height of the header when the page first load
siteHeight = $(window).height();
navHeight = $('nav').height();
$('#headerBackground').height(siteHeight-navHeight+'px');
// The rest of the code sets new height for the header every time the browser window is resized
$ (window).resize(function() {
siteHeight = $(window).height();
$('#headerBackground').height(siteHeight-navHeight+'px');
});
So, there is no height: 100%; involved here, just constant math. I have set it up for you in a codepen so you can see how it is done :)
http://codepen.io/andersedvardsen/pen/yyzjyq
For some reason, my text just wont get centrally aligned. It is a little to the left. Even when I do text-align: right, it does not go to the place where it should. Here's my HTML file:
<html>
<head>
<title>foo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/x-icon" href="images/favicon.png" />
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="icon" type="image/gif" href="images/favicon.png" />
</head>
<body>
<div id="strapwrap">
<div id="strap">
<div id="menu"><span id="sub">Home</span> <span id="sub">Plans</span><span id="sub">FAQ</span></div>
<div id="logo">
<img src="images/logo.png" />
</div>
</div>
</div><div id="container">
<div id="login_thingy">
//all the login form, and some content goes here, unfortunately, it does not get centrally aligned.
</div>
</div>
Here's my style.css
body{
margin: 0;
background-image: url('http://athile.net/library/blog/wp-content/uploads/2011/11/grass02-300x300.png');
}
#strapwrap{
background-color: #000000;
color: white;
width: 100%;
height: 75px;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
a{
color: inherit;
text-decoration: inherit;
}
#strap{
width: 80%;
margin: auto;
margin-top: 0;
margin-bottom: 0;
}
#menu{
font-size: 25px;
height: 75px;
float: right;
margin: 0;
padding-top: 25px;
padding-bottom: 25px;
word-spacing: 25px;
}
#sub:hover{
border-bottom: 1px dotted #ffffff;
}
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center
}
Wrap your div text inside <p>
<div id="login_thingy">
<p>all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</p>
</div>
Side Note: It's a good practice to not to place direct text content inside the div
Fiddle
Demo Fiddle
Change your CSS to add/alter:
#container{
text-align:center; /* new addition */
}
#login_thingy {
width: 80%;
display:inline-block; /* replace margin auto */
margin-top: 15px;
font-size: 35px;
padding: 15px;
}
All you need is to set text-align:center on the parent element (#container) then display:inline-block; on the child (#login_thingy). You can then remove any use of margin:auto
use
#container{
text-align:center
}
DEMO
Apply fixed width to the contents of login_thingy div and add margin-left:auto;margin-right:auto; to the contents of login_thingy div.
Like
<div id="login_thingy">
<div style="width:50%;margin-left:auto;margin-right:auto;">all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</div>
</div>
First of all HTML comments are like this: <!-- TEXT HERE -->
Second of all you code is wrong. In the CSS part you have type this:
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center
}
Without a semicolon (;) at the end of text-align: center; which may be the reason you are getting this error. So the correct code is:
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center;
}
If that doesn't work, just use a normal header and put it inside a div if you wish. Like so:
<h2 id="login_thingy"> TEXT HERE </h2>
Hope this helped.