Here's my style sheet.
I'm trying to get the margin around my body to have a different color from the body itself. Here's my beginning code. Is a reset section really necessary? Can someone tell me what I'm doing wrong...
#charset "utf-8";
html {
color: #d9a552;
}
body {
display: table;
margin: auto;
background: white ;
width: 960px;
margin-top: 20px;
max-width: 1050px;
height: 100%;
font-weight: 300;
}
What you're looking for is a border. If you want to make the margin around your body red, simply use this:
body {
margin: 0;
border: 10px solid red;
/*and this is to make it stretch all the way*/
height: 100%;
box-sizing: border-box;
}
html {height:100%;}
as can be seen in this demo.
You may want to try adding padding-top: 20px; to the html instead of margin-top: 20px; with the body:
<html>
<head>
<style>
html {
padding-top: 20px;
background: #d9a552;
}
body {
display: table;
margin: auto;
background: white;
width: 960px;
max-width: 1050px;
height: 100%;
font-weight: 300;
}
</style>
</head>
<body>
</body>
</html>
I believe you also want to change color: #d9a552; to
background: #d9a552;
or
background-color: #d9a552;
Here's my solution: I added section tag immediately following the body tag. I gave it a class id of 'mainBody'. Then I adjusted the code as follows:
I know I can't give myself credit, but I thought I would share my solution for someone else to use. I will give both you guys credit for steering me in the right direction.
Thank you...
Related
I'm making a fixed width (120px) website for old feature phones that don't respond to media queries. The width of the body won't change even when I've defined it as 120px. When I open the website on the phone, it shows a huge horizontal scroll bar showing me a lot of blank space on the right which I'm assuming is the body. In the screen shot attached, I've set background color of body to red so you can see the problem (I also had to blackout the content for client privacy).
I'm using the following code:
html {
width:120x;
margin-left:0px;
}
body{
width:120px;
font-family: arial;
font: arial;
margin-left: 0px;
max-width:120px;
}
I think you've a typo here:
html {
width:120x;
margin-left:0px;
}
The width should be 120px
Remove the typo:
html {
width: 120px;
margin-left: 0px;
}
I think you have to use un child to wrap your content with a max-width.
and tags don't allow to do what you want.
HTML
<div class="wrapper">
Your content goes here
</div>
CSS
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding: 20px;
width: 120px;
height: 100%;
font-size: 14px;
background-color: #d63b24;
color: #fff;
}
http://jsfiddle.net/vinzcelavi/1rx7yn57/
Try this
body {
min-width: 1024px;
}
Here's your fiddle: http://jsfiddle.net/enxRw/1/
I am trying to make a footer, but the left and right sides show some white space. How to remove the white space?
Here is my code:
<html>
<head>
<style>
footer {
background: none repeat scroll 0% 0% #DFDFDE;
padding: 120px 0px;
text-align: center;
position: relative;
}
.divider {
background: url('http://evablackdesign.com/wp-content/themes/ebd/images/footer-border.png')
repeat-x scroll center center transparent;
height: 7px;
width: 100%;
position: absolute;
top: -6px;
}
.container {
width: 930px;
margin: 0px auto;
}
</style>
</head>
<body>
<footer>
<div class="divider"></div>
<div class="container">
<h1>hiiiiiiiii</h1>
<br>
<h2>buyyyyyyyyyyyy</h2>
</div>
</footer>
</body>
</html>
image of footer
The tag defines a footer for a document or section.
A element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
The body has a default margin. Remove it via:
html,body {
margin:0;
padding:0;
}
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
html, body {
margin: 0px;
padding: 0px;
}
*{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Try out this code:
html, body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Your body has a default margin and padding and you need to override it.
At the beginning of your style type.
body{
padding: 0;
margin: 0;
box-sizing: border-box
}
Add this to your style tag...
body {
margin: 0;
}
Just make sure to add this class to your CSS style.
.container-fluid {
width: 100%;
margin: 0px;
padding: 0px;
}
Try this; it is the simplest one, add it to your body selector.
body {
margin: 0px;
padding: 0px;
width: 100%;
}
For me, It's working
html, body {
overflow-x: hidden;
margin:0px;
padding:0px;
}
if ur having unwanted white space in right side of ur screen its because of overflow so to remove it go to ur css then in body write
in css:
(body{
width:100%;
overflow-x: hidden;
})
this is before
this is after
this is my first help i am new to stackoverflow hope this helps
Even when I'm using this simple code, the browser shows a little offset on left and top. How to fix this. Code is below:
<html>
<head>
<style="text/css">
#container{
width: 100px;
height: 100px;
background-color:orange;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
It's because most browsers use a standard CSS stylesheet (see http://www.w3.org/TR/CSS21/sample.html).
One of the rules sets the margin of the body to 8 pixels:
body {
margin: 8px;
}
You can disable it by setting the margin to 0 pixels:
body {
margin: 0;
}
See this JSFiddle for more details.
Try to add this css:
* {
margin: 0;
padding: 0;
}
even better:
*{
margin: 0 auto;
padding: 0;
}
This worked for me all the time:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Make the margin-top and margin-left of html and body 0.
html, body{
margin-top: 0;
margin-left:0;
}
I need a div-header like the blue facebook header which has no free space on top and on the left/right side.
My actually code looks like this:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#header {
height: 100px;
background-color: #3B5998;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
I add extra no marigin and no padding, but i still have some free space on all 4 sides of my header...
html, body { margin: 0; padding: 0; }
Try this
html, body {
padding: 0;
margin: 0;
}
#header {
float: none;
width: 100%;
height: 100px;
background-color: #3B5998;
}
By default every browsers puts some amount of margin/padding around the body of the document.
To remove it you can add a css style in your html
html, body {
margin: 0;
padding: 0;
}
Also, it is worth noticing that browsers attach insert various kinds of styles to elements, and these styles can be very different in different browsers. There are some style sheet files out there that can fix it, one of them could be found here
http://www.cssreset.com/
I am trying to center an image that is located within a div, which is then located inside of another div. Not to worry, I will post some code so you can all see what the heck I'm talking about here.
HTML:
<div id="container">
<div id="featureimage" style="width: 845px">
<img src="Stylesheets/images/globkey.jpg" alt="" />
</div>
</div>
CSS:
body {
background-color: #383838;
margin: 0; padding: 0;
font-size: small;
color: #383838;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
* html body {
font-size: x-small; /* for IE5/Win */
font-size: small; /* for other IE versions */
}
img {
border-style: none;
}
/* Conatiner */
#container {
background-color: #fff;
width: 845px;
margin: 0 auto;
overflow: hidden;
}
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px 0;
/* I have also tried without padding and no margin!*/
}
#featureimage img{
margin-left:50%;
margin-right:50%;
width:360px;
height:360px;
}
I am fresh out of ideas here! Been at this for ever!
Thank you for any help,
Evan
Images are inline elements, to center them, you can use text-align: center; or set them to display: block and set margin: 0 auto;
just for sure add text-align: center to your #container, and then add margin: 20px auto; to your featureImage. If you want img to be centered within featureImage should work (featureImage will inherit text-align: center).
According your provided markup structure it is enough to following way:
img {
display: block;
margin: 0 auto;
}
But above approach will work if container contain single image. Bu if container contain multiple image then above technique will not work anymore then following way would be ideal:
#featureimage {
text-align: center;
}
img {
display: inline-block;
vertical-align:top; // It is recommended when you use css property vertical-align
}
Use:
margin: auto !important;
display: block;
Also try going to Play Store download the app HTML code it will come in handy for you.
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px 0;
text-align:center;
}
I would try this css:
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px auto 0px auto;
text-align: center;
}
I may be totally off on this one, as I haven't tested it out.
i would use this for sure,, the absolute; will keep it in that spot if you want it to move with the page put fixed; but other than that boom
#featureimage {
width: "change this code to whatever expample..." 555px;
height: "change this code to whatever example..." 96px;
position: absolute;
top: "change this to where ever it centers , you just have to mess with it.. example..." 960px;
right: "same with this i had to put - to get it right as far as i could just play with it..." -945px;
}
It can also be solved by simple put a <center> tag:
<center>
<img src="abc.gif">
</center>
But the best way and html5-like is as mentioned next:
define in the header:
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
To make use of this class in the body:
<img src="abc.gif" alt="abc" style="width: 90%; max-width: 300px;>
That's all. The last method is that recomended by w3c.