Hey everyone here's a picture of the problem:
I want it to fill the the whitespace on the left right and top of the green box.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<title>Test page</title>
</head>
<body>
<div id="container" name="header">
<h1>Blegh</h1>
<style>
#container {font-family: 'Montserrat', sans-serif;}
</style>
</div>
</body>
</html>
CSS:
#container{
background-color: #58FA58;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 100px;
width: 100%;
}
These two rules should do it:
html, body {
margin:0;
padding:0;
}
h1 {
margin:0;
}
jsFiddle example
that's because of browsers. default of browsers has margin and padding and you should set padding and margin to zero in all of your projects
body{
margin: 0px;
padding: 0px;
}
you set div heigt to 100 px :)
to make div like boddy wraper you shlud have this CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
.footer, .push {
height: 20px;
}
You have to remove the body margins. Add this to your css:
body {
margin: 0px;
padding: 0px;
}
Add this to your style.css:
html, body {
margin: 0;
padding: 0;
}
Applying a margin and padding of 0 will allow all of your elements to reach the borders of the page. But if you want the color to fill the entire page, which seems to be the actual question, apply your background-color to the body tag.
body {
margin: 0px;
padding: 0px;
background-color: #58FA58;
}
Related
The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).
I don't want this scroll bar being here. I don't want it hidden but I want it disabled. No scrolling at all.
A screenshot: https://gyazo.com/22224e178263f80c25ecabb65c8ff77f.png
index.html and stylesheet.css:
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Home</title>
</head>
<body>
<div id="white">
</div>
</body>
</html>
CSS:
html {
height: 100%;
background-color: #272C34;
margin: 0%;
padding: 0%;
}
body{
height: 100%;
margin: 0%;
padding: 0%;
}
#white {
width: 100%;
height: 76%;
background-color: #E8E8E7;
margin-top: 10%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
z-index: 1;
}
It is Problem of browser set default padding/margin. Apply any of CSS Reset to the website .
If Don't Add any one of them find here http://www.cssreset.com/
or Use this Universal CSS reset
* {
margin: 0;
padding: 0;
}
body usually has a margin set it, remove it and your div should be 100% of the screen:
body{
margin: 0;
}
Also be aware that more tags have margins/paddings applied by default, you could use a reset.css or normalize.css to remove margins/paddings/etc to make your page render the same on all browsers:
if You mean Space in right and left in your Tmp. Add this to your Style
Body{
margin:0;
padding:0;
}
HTML:
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
<li>
<ul>
Hello
</ul>
</li>
</div>
</body>
</html>
CSS:
body{
margin: 0;
}
#nav{
width: 100%;
height: 80px;
background-color: #000000;
}
#nav ul{
list-style-type: none;
color:#ffffff;
font-weight: bold;
}
Screenshot:
See it Live.
Use: width: 100vw; overflow-X: hidden;
This should work. When there is a scrollbar, use overflow-X:hidden for width or overflow-y:hidden for height;
I need to make my logo and a text box in one line. The logo must be on the left and text box in the middle.
My CSS is:
#charset "utf-8";
body {
background: url("../paveikslai/fonas.jpg") no-repeat top center;
margin: 0;
}
.linija {
background:url("../paveikslai/v_linija.png") repeat-x;
height: 150px;
padding: 10px;
margin: 0;
}
.logotipas {
float: left;
display: inline;
margin: 0 15px;
}
.deze_tekstui {
margin: 0 50%;
}
And HTML is:
<!doctype html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='/stilius/stilius.css'>
<meta charset='utf-8'>
<link rel="icon" type="image/png" href="../paveikslai/favicon.ico">
<title>Minduvos Statyba</title>
</head>
<body>
<div class="linija">
<div class="deze_tekstui">
<img src="../paveikslai/deze_tekstui.png">
</div>
<div class="logotipas">
<img src='../paveikslai/minduva.png' height='120px' width='234px' alt="Minduvos Statyba">
</div>
</div>
</body>
</html>
If you want the logo to appear in a fixed position (top-left), you can't set it to inline.
.logotipas {
margin: 15px;
position: absolute;
top: 0;
}
I recommend Firefox with Firebug, which makes on-the-fly experimentation very easy.
You can use absolute position for the logo and margin auto for the text box, but you will have to define the width for it to work.
body {
background: url("../paveikslai/fonas.jpg") no-repeat top center;
margin: 0;
position: relative;
}
.linija {
background:url("../paveikslai/v_linija.png") repeat-x;
height: 150px;
padding: 10px;
margin: 0;
}
.logotipas {
display:block;
margin: 0 15px;
position: absolute;
top: 10px;
left: 10px;
}
.deze_tekstui {
margin: 0 auto;
width: 500px;
}
I know that it's a newbie question, but if you could give me a hand and tell me what I'm doing wrong I'd really appreciate that:
While I was experimenting with HTML and CSS I decided to create a page with a fixed size that should be centered on the screen. To do so I decided to place the [body] tag by making its position relative and move it by writing:
position: absolute;
padding: 1em;
width: 960px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
Hovever it didn't worked quite as expected, and this is the result I'm getting:
I was expecting to see the yellow box perfectly centered both horizontally and vertically, but instead I see that it's slightly off-center.
I tried to load the page on Safari, Firefox and Chrome and I'm getting the same results so as I already suspected I know that it's my fault :-)
Could you help me by explaining what I did wrong ?
Thank you very much
This is the complete HTML+CSS code of the page I have written:
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
<style>
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
}
</style>
</head>
<body>
This is my website
</body>
</html>
That's because of the padding.
If you set the padding of the body to 0, it works (tested).
If you need a padding, add an internal 100% width div inside your body and give this internal div a padding.
Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
</head>
<body>
This is my website
</body>
</html>
CSS:
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
margin:auto;
margin-top: -300px;
}
JsFiddle: http://jsfiddle.net/qecwx/
The margin-left and margin-top should have -ve half values for width and height respectively:
margin-left: /* minus half of width */
margin-top: /* minus half of height */
You need to put in appropriate values.
In the container, you can also center using:
margin:0 auto;
provided you have already specified width too
Just messing around with it for a few minutes and this is what I came up with that seems to fit your needs:
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: relative;
margin: 0 auto;
margin-top: 10%;
}
All I did was remove the margin-left: and did a margin: 0 auto; to align the left and right sides. I then set the margin-top: 10%; to get the top and bottom centered. Also I set the positioning to relative. Hope that this helps.
Basically, you want to have the margins on your body tag set to auto like this
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
to center the body vertically takes a lot more work.
I'm creating a webpage with two stacked divs. The first div is a banner and the second div is the content. The problem I'm facing is I want the second div to stretch to the bottom of the page without creating a scrollbar. I could wrap the whole thing in another div and set overflow to hidden, but the second div will be filled with content and there's a possibility that the content could stretch beyond the screen. Here is what I've written so far:
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
#banner {
background-color: red;
width: 100%;
height: 180px;
}
#content {
background-color: #0F0F10;
width: 100%;
height: 100%;
color: #FFF;
}
</style>
</head>
<body>
<div id="banner"></div>
<div id="content"></div>
</body>
</html>
You can do it pretty easily by wrapping your #banner inside your #content container:
<div id="content">
<div id="banner"></div>
<p>Your content</p>
</div>
Then in your CSS, you have to explicitly set the padding and margins on the body and html to 0 (the wildcard doesn't work cross-browser):
*, html, body {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
#banner {
background-color: red;
height: 180px;
}
#content {
background-color: #0F0F10;
min-height: 100%;
color: #FFF;
}
The 2 other changes that I made were to remove the width: 100% rules (since the div's are block elements and will default to that) and change your height: 100% to min-height: 100% since this will allow your #content to grow with its content.
If you need to support IE6, you'll have to serve it height: 100% with conditional comments, on account of IE6 not understanding min-height, but treating height as min-height.
You can see it in action here. Just delete the filler text and you'll see the scrollbar disappears when it's not needed anymore.
I recommend using a <table>. Set the height of the table to be 100%. Then set the height of the first cell to 180px.
You will need to ignore the distant howls of the Semantic Web when you do this, however.
Here is some sample code:
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
table {
width:100%;
height:100%;
border-collapse:collapse;
}
td#banner {
background-color: red;
height: 180px;
}
td#content {
background-color: #0F0F10;
color: #FFF;
}
</style>
</head>
<body>
<table>
<tr><td id="banner"></td></tr>
<tr><td id="content"></td></tr>
</table>
</body>
</html>
You can achieve the same without restructuring the HTML. If you don't want to wrap the banner in the content (e.g. for semantic reasons), you should use absolute positioning on the content. Instead of setting the height to 100% you set top:181px and bottom:0 in CSS.
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
#banner {
background-color: red;
width: 100%;
height: 180px;
}
#content {
background-color: #0F0F10;
width: 100%;
position: absolute;
top: 181px;
bottom: 0px;
color: #FFF;
}
</style>
</head>
<body>
<div id="banner"></div>
<div id="content"></div>
</body>
</html>