I have the following CSS defining the style for a <div> element in my HTML:
#nav {
float: left;
clear: both;
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background: #3E6ECE;
}
However, for some reason, the page is rendering with a white border as is shown in the image below:
Can anyone explain to me what I'm doing wrong? How can I get the blue bar to go the full width of the window?
For reference, my HTML structure is included below:
<!DOCTYPE html>
<html>
<head>
<!-- Header stuff -->
</head>
<body>
<div id='nav'></div>
<!-- Other body stuff -->
</body>
</html>
try removing padding+margin on the body element
Related
Hey guys i have been trying to make this header or nav bar full screen without padding, but not able to. Tried making padding 0 but couldnt. Please help me guys as i have been trying this since a long time. Cheers
Here is my code:-
<!DOCTYPE html>
<html>
<head>
<title>Shopifter</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header>
<nav>
<div> Home </div>
<div align="center"> <h2>Welcome to Shopifter</h2></div>
<div align="right">
<button> Sign in</button>
<button> Sign up</button>
</div>
</nav>
</header>
</body>
</html>
body {
background-color: grey;
}
header {
margin: 0 auto;
width: 100%;
height: 100px;
background-color: #fff;
padding: 0;
}
header nav {
margin: 0px;
width: 100%;
height: 100px;
background-color: #fff;
}
Set to your body margin to 0: body {margin: 0;}.
If you would like to keep this margin for the body, add the negative margin to the header nav {margin: -8px;}, but also remove from there width: 100%;.
add margin: 0; to the body
enter image description here
i would like to print footer on every page that I have.
Text content in div above the footer is dynamic, so I don't know what size it will have. My footer has fixed position, so it will repeat on every page. My problem is that content is overflowing the footer.
#media print {
#page {
size: A4;
margin: 2cm;
}
body {
position: relative;
}
html,
body {
margin: 0cm !important;
width: 210mm;
height: 100%;
}
footer {
display: inline-block;
position: fixed;
vertical-align: bottom;
width: 100%;
bottom: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Sample text</title>
</head>
<body>
<div>... very very long text over 10 pages or so ...</div>
<!-- footer which must be on every page -->
<footer class="big-footer">
<img src="/images/country/cs/logo-pdf.png" class="footer-logo">
<div class="footer-text__block">
<span>Osobní výživový plán dle metabolické diagnostiky KNT</span>
<br>
<span>pro klienta: <strong>Michal Lokšík</strong></span>
<br><br>
<span class="site">http://www.svet-zdravi.cz</span>
</div>
</footer>
</body>
</html>
screenshot here
Elements with CSS property position set to fixed will “stick” to the edges of the page by setting top or bottom to 0. They will also repeat on each printed page.
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
I want to add outer shadow to my page body, for example:
<html>
<head>
<title>Shadow</title>
<style>
html{height:100%;}
body{height:100%;}
#shadow{width:1200px;background:url('http://i.stack.imgur.com/w3fOE.png');height:100%;margin: 0 auto;}
#theMainContainer{width:900px;margin:0 auto;background-color:red;height:100%;text-align:center; color:white;}
</style>
</head>
<body>
<div id="shadow">
<div id="theMainContainer">
i have <font color="black">shadow</font> in the left side and the right side of the page ,<br>But i have space in the top and in the bottom of the page(what is the best way to fix it?).
</div>
</div>
</body>
</html>
I have space in the top and in the bottom of the page. How can I remove the space and make the shadow to a 100% height?
Add margin: 0 to body:
body {
height: 100%;
margin: 0;
}
You need to add the following css rule to reset the browser's default styling.
body, html {
margin: 0;
padding: 0;
}