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;
}
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 1 year ago.
Please see the HTML below:
#container
{
height: 60%;
width: 100%;
background-color:green;
}
#floatElement
{
top:0px;
height: 60%;
width: 50%;
background-color:red;
float:right;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="floatElement">
<h1 >this is a test inside the float element</h1>
</div>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
Here is the result.
Why is there extra space above the first line of text inside the float i.e. why is the word "text" and the words: "this is a test inside a float element" not in line?
I have looked here: https://developer.mozilla.org/en-US/docs/Web/CSS/float. The first image indicates that they should be in line. I have also Googled it and this is the closest I got: How to remove space at top of page when using float?. However, it does not answer my question.
This is because the browser default user agent stylesheet adds style for some elements, in that case I'd recommend using a reset css.
Now back to the question, the space appears because you're using float so it will contain the default margin of the h1. According to https://developer.mozilla.org/
The float CSS property places an element on the left or right side of
its container, allowing text and inline elements to wrap around it.
The element is removed from the normal flow of the page, though still
remaining a part of the flow.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Whereas background color of div elements doesn't respect to the margin of its child, you have to use padding for that. Because margin applies outside of the border of the element and padding happens inside the borders.
Here's an example:
#container { height: 60%; width: 100%; background-color:green; }
#container h1 {margin: 100px 0;}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
As you can see the margin is omitted by the background color of the parent, but still takes place.
Here's another scenario.
#container { height: 60%; width: 100%; background-color:green; }
#container h1 {margin: 0; padding: 100px 0;}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
You can see what happens when padding is added to the h1
Here's the answer for your question, to make them both fly on the same line remove the margin for the h1
#container
{
height: 60%;
width: 100%;
background-color:green;
}
#floatElement
{
top:0px;
height: 60%;
width: 50%;
background-color:red;
float:right;
}
#floatElement h1, #container h1{
margin-block-start: 0;
/*you can also use margin: 0 in short */
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="floatElement">
<h1 >this is a test inside the float element</h1>
</div>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
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 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
In HTML, how do you make it so that the site is ~60-80% of the screen wide, and if the window is bigger than that it centers, otherwise there's a scroll bar? I'm talking about the way it is for the content here at StackOverflow.
I tried this, but failed:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<center>
<div style="width: 60em; align: center;">kdsjlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkhlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkkjdghkdsfjgksdjfhg</div>
</center>
</body>
</html>
Here's the one I always follow:
<body>
<div class="wrapper">
your content
</div>
</body>
And then in CSS,
body{text-align:center;}
.wrapper{width:80%;margin:0 auto;text-align:left;}
You want auto margins...
<body>
<div id="content">
Your page content here...
</div>
</body>
Your CSS should have something like this...
#content { width: 60%; margin: 0 auto 0 auto; }
The ordering for margins (and padding is the same) is top right bottom left. Or you can shortcut with.
#content { width: 60%; margin: 0 auto; }
This means that top and bottom will have 0 margin; left and right will have auto margin.
Do Set left and right margins to auto.
Don't use the deprecated <center> element
Don't use the non-existent align property
Stick your content in a div and set the right and left margin to "auto", like so:
CSS:
#content {
width: 960px;
margin-left: auto;
margin-right: auto;
}
HTML:
<body>
<div id="content">
fjkgjkg etc.
</div>
</body>
I want to "centerize" the text and contents of my webpage. Now I don't want to align the text to center, I still want a left alignment but I want significant margins on the left and right so that everything looks relatively center-ish. Can you show me the HTML/CSS to achieve this? THanks.
<html>
<head>
<style type="text/css">
body {
text-align: center; /* Center in IE */
}
#content {
text-align: left; /* reset text-align for IE */
margin: 0 auto; /* Center in other browsers */
width: 800px;
}
html {
overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}
</head>
<body>
<div id="content">
content here
</div>
</body>
</html>
*UPDATE: I added some CSS that forces a vertical scrollbar in FF as per some comments below.
Create 3 columns on your page. All your text goes in the center column and can be left alligned.
Have a look here for examples http://matthewjamestaylor.com/blog/perfect-3-column.htm
#wrapper {
width: 800px;
margin: 0 auto;
}
<div id="wrapper">
<p>This will appear in a centered container</p>
</div>
I believe this might help you.
try
#div {
margin:0 auto
};
Have a container div within which you put all your content:
<html>
<head>
<title>a sample</title>
</head>
<body>
<div id="container">
<h1>this is it</h1>
<p>all content goes here</p>
</div>
</body>
Then add some css specifying the width and margins of your container div:
#container {
width: 750px;
margin: 0 auto;
}
CSS:
#container {
max-width: 800px;
margin: 0 auto;
}
And in the HTML, wrap everything in:
<div id='container'>
...
</div>
(Note that this answer differs from meep's in that I'm using max-width to give a fluid layout below 800 pixels, whereas he's using width to give a fixed layout.)