Full width Headers and Images CSS - html

I am trying to understand how to get a full width header. The problem is it has a thin white border around the header and is not full width. I am not using any grid system if that matters.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" display="screen" >
<title>
test app
</title>
</head>
<body>
<div id="header"/>
</div>
</body>
</html>
CSS
#header {
float:left;
padding:15px 0;
min-width:100%;
background: #5FBEED;
}
Any help much appreciated thanks.

I suppose the problem to be getting the white border around it. A div automatically fills the entire window's width, so remove that min-width style: Example fiddle.
CSS:
#header {
padding: 15px 0;
border: 10px solid white;
background: #5FBEED;
}

Add this to your css
body{ margin: 0; padding: 0; }
Browsers add their own css to html elements and this varies from browser to browser. The margin and padding is also applied to UL and few other elements...
You can read more about this here... http://clagnut.com/blog/1287/

The white border is mostly likely added by the BODY tag's inherent margin. Try adding the following CSS:
body {
margin: 0;
}

html, body{
padding: 0;
margin 0;
}
#header {
padding: 15px 0;
border: 10px solid #5FBEED;
background: #5FBEED;
}
in this case your borders will be the same color as your header background color

Related

how to make the footer touch the edges? [duplicate]

This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
CSS position absolute and full width problem
(7 answers)
Closed 3 years ago.
Please see the code below. The footer is not touching the edges. if I poot footer width to 100% or 100vw i see a horizontal scrollbar in the browser. 99% falls short. Instead of finding a hardcoded value like 99.4% etc. is their way to touch the edges perfectly?
.main .footer {
border: 1px solid black;
background-color: #d4d4d4;
text-align: center;
position: absolute;
bottom: 0;
height: 40px;
width: 99%;
}
<div class="main">
<div class="footer"></div>
</div>
Every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3, etc. and a certain amount of padding to almost everything.
In your current example, the default body will have a margin set. To make the body of the document touch the edges, you will need to add a reset to the body margin, margin: 0;
Read more about it here. https://cssreset.com/what-is-a-css-reset/
You need to remove the margin on the body element. Then since you're using absolute positioning, remove the width declaration and use left/right:
body {
margin:0;
}
.main .footer {
border: 1px solid black;
background-color: #d4d4d4;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 40px;
}
body {
margin: 0;
}
<div class="main">
<div class="footer"></div>
</div>
Apply a CSS reset, by default, it have padding and margin setted, that why it not fit the edge:
*{
margin:0;
padding:0;
}
.main {
border: 1px solid black;
background-color: #d4d4d4;
height: 90vh;
}
.footer {
border: 1px solid black;
background-color: #d4d4d4;
height: 10vh;
}
<body>
<div class="main">
Your content
</div>
<div class="footer">
Your Footer
</div>
</body>
You should add the left attribute too, and you put a border, that border occupies a space, i used box-sizing: border-box; option to use the inside space of the element.
I attached some useful links for you:
box-sizing,
box-model
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.main .footer {
border: 1px solid black;
box-sizing:border-box;
background-color: #d4d4d4;
text-align: center;
position: absolute;
bottom: 0;
left:0;
height: 40px;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="footer"></div>
</div>
</body>
</html>
Firstly I would recommend to use the new tags <header>, <main>& <footer> instead div with class.
Secondly the problem is that the body have a initial margin so try:
body{ margin:0; }
After that you will still have a scrollbar because of the border.
So you have two options:
Set border-top instead of left and right.
Give all elements the style * {box-sizing: border-box;} which means padding and border is included of the elements total width and height.

How to fix the Background Color to heading?

I was trying to add color to the heading but the design was horrible.
I tryed to watch videos on youtube but they dont help me with the position and the horizontal line bugs.
https://imgur.com/a/c7eDeHi
I was expectating something like this
Paint model.
https://imgur.com/lGGPoZE
But I'm very bad at positions
https://imgur.com/a/c7eDeHi
<html>
<head>
<style>
h1 {
text-align: left;
color: #595959;
background: #80ff80;
width: 5000px;
height: 60px;
}
</style>
</head>
<body bgcolor="#ffb84d">
<h1>Test</h1>
</body>
</html>
Fixing the position,and horizontal line.
To remove paddings and margins around the page, you can use:
html, body{
padding: 0;
margin: 0;
}
To add a background color to body, you have to assign it in the styles ass well. You can select it with body:
body{
background: #ffb84d;
}
If you further want a buttom border for the headline, you can add the following rules to h1:
h1 {
text-align:left;
color:#595959;
background: #80ff80;
width:100%;
height:60px;
/* Specify a bottom border like this: */
border-bottom: 1px solid grey;
}
You need to set the margin of the body and of the heading to 0 to remove the border
body {
margin: 0px;
background-color: #ffb84d;
}
h1 {
margin: 0px;
text-align:left;
color:#595959;
background-color: #80ff80;
}
<html>
<body>
<h1>Test</h1>
</body>
</html>

How do I fit everything inside html and body

I have a project and I am having trouble fitting everything inside the body. Child elements always go outside of the body, when I looked at my code it looks like okay, so I made an experiment; I trace each HTML element by giving them a border, so that I can see them visually how they will behave. This is what I have so far.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<title>A nice example</title>
</head>
<body>
<div class="box">
<div class="childbox"></div>
</div>
</body>
</html>
CSS Example 1, setting 100% height for everything
html{height: 100%; border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/
Output : everything overflows outside html.
CSS Example 2, setting 100% height for the body and its child's, except html
html{border: 5px solid black; padding: 5px;} /*black*/
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/
.childbox{height: 100%; border: 5px solid pink} /*pink*/
Output : Everything fits inside html, but doesn't occupy the full height of the screen. I know I can do this by making the body min-height: 100vh.. but it will stop expanding when the 100vh is full..
My goal is,
to make the body and html 100% in height / not using vh.
and not overflow outside the body, or html
when adding child elements I want everything from html to body expands in height dynamically and not go outside and overflow, or overlaps each other..
the body should be inside html, and the div's should be inside the body.
Please help.
This is what is happening, the CSS is calculating 100% width and height and then it adds a 10px / 5px padding after which causes the elements to overflow by 10 / 5px.
You can change this by adding the following css at the beginning of your code:
* {
box-sizing: border-box;
//Edit:
margin: 0;
padding: 0;
}
This will make sure that the padding is accounted for in the 100% width and height.
Hope this works!
Edit:
Also, what you are looking for in the html and body style is height: auto; not 100%.
If its happening it means that you are not following CSS box model during styling your sheet. you can also use box-sizing property of CSS.
Consider an example
<div id="frame">This is the frame
</div>
Then use box-sizing property and set its value to border-box.
<style>
#frame{ width: xx% height:yy%; box-sizing:border-box; }
</style>

HTML How do I make sure the header of my page is covered completely?

My header does not fully covers my page making the background color overlaps them both together.
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: black;
background-size: 100% auto;
margin-left: 0;
margin-top: 0;
}
</style>
</head>
<body style="background-color: blue;">
<div id="header">
<p>hi</p>
</div>
</body>
</html>
This is because browsers have a default margin / padding.
//edit HTML default body margin
Add this to your css
html,body{
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
You need to set both html and body height, then #header height, like so
html, body, #header {
height: 100%;
margin: 0;
padding: 0;
}
#header {
background-color: blue;
}
p{
margin: 0;
padding: 0;
}
<div id="header">
<p>
Hi!
</p>
</div>
If you inspect the html and check the CSS applied to body tag, you will see that it has a default margin: 8px. You will have to make it 0.
Use margin: 0px to set the new margin to body tag.
Firefox (for example) indicates that there is a "border" of 8. Adding border: 0 to body's style made the thin blue borders to the left and right disappear. Is that what you wanted?

How to get a border around body tag without it cutting off?

I'm a beginner who wants to visualize the html and css changes that I make while learning and so I would like to put a border around all the elements that I add.
Problem: The blue border around the html/body element cuts off and isn't fully displayed on the bottom and right sides of the border when overflow is set to hidden.
Why is it that the border is overflowing the html page even when its width and height are set to 100%?
HTML
<!DOCTYPE html>
<html>
<head>
<title> Practice Webpage </title>
<link href="stylesrevised.css" rel="stylesheet" type="text/css" >
</head>
<body></body>
</html>
CSS
html,body{
width: 100%;
height: 100%;
margin: 0; /* Space from this element (entire page) and others*/
padding: 0; /*space from content and border*/
border: solid blue;
border-width: thin;
overflow:hidden;
display:block;
}
Here is the resulting webpage
Welcome to the coding journey!!! In your css, add the following: box-sizing: border-box;
This will make your elements fit within the prescribed width and height.
html,body{
width: 100%;
height: 100%;
margin: 0; /* Space from this element (entire page) and others*/
padding: 0; /*space from content and border*/
border: solid blue;
border-width: thin;
overflow:hidden;
display:block;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<title> Practice Webpage </title>
<link href="stylesrevised.css" rel="stylesheet" type="text/css" >
</head>
<body></body>
</html>
your overflow: hidden; is whats messing things up for you, the default setting for borders is content-box which adds pixels to the width and height of your elements, eg if you have a div 100px wide and add a 1px border to it is actual size will be 102px.
you can solve this by using box-sizing: border-box; which causes the border to be added to the inside of the element instead.
html,body{
width: 100%;
height: 100%;
margin: 0; /* Space from this element (entire page) and others*/
padding: 0; /*space from content and border*/
border: solid blue;
border-width: thin;
display:block;
box-sizing: border-box;
}
If you want to make this effect all borders used through out your site you can use this, saves having to set it each time you add a border.
*, *:before, *:after {
box-sizing: border-box;
}