so I keep having this weird problem that I have never seen before ... as we all know, a div is inside a body and we can make body margin 0 and padding 0 to cover the entire page with height and width 100% ... The problem is, when I try to margin a div inside the body THE ENTIRE BODY moves :S .. and to my surprise if I use firebug and hover over the body, its not the entire page. its just slightly bigger than the dive ... here is the code (first part is HTML, second is CSS)
HTML:
<!DOCTYPE HTML>
<html>
<head>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/general-style.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-buttons.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-colors.css"/>
<!-- Scripts -->
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content"></div>
<div id="footer"> <!-- footer div starts here -->
</div> <!-- footer div starts here -->
</body>
</html>
CSS:
html{
}
body{
width: 100%;
height:100%;
padding: 0;
margin: 0;
}
#content{
background: red;
margin-left: auto;
margin-right: auto;
margin-top: 100px
height: 350px
width:350px
}
#footer{
margin-left:auto;
margin-right:auto;
}
#footer-text{
font-size:xx-small;
margin-top:30px;
text-align:center;
}
Thats the way it works, margins collapse. What are you trying to do? You could just set the background-color on the HTML tag, or use CSS's top/left properties to position the div.
See also: http://www.w3.org/TR/CSS21/box.html
As TJHeuvel already said, this is collapsing margin. There are two solutions to this: set padding on the parent element (body in this case) or border. You can read more about it here: http://complexspiral.com/publications/uncollapsing-margins/
HTMl CODE
<!DOCTYPE HTML>
<html>
<head>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/general-style.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-buttons.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-colors.css"/>
<!-- Scripts -->
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content"></div>
<div id="footer"> <!-- footer div starts here -->
</div> <!-- footer div starts here -->
</body>
</html>
CSS
html{
}
body{
padding: 0;
margin: 0;
}
#content{
background: red;
margin-left: auto;
margin-right: auto;
margin-top: 100px
height: 350px
width:350px
}
#footer{
margin-left:auto;
margin-right:auto;
}
#footer-text{
font-size:xx-small;
margin-top:30px;
text-align:center;
}
TRY THIS
Related
I am learning the basics of web development.
I would like to make the position of a div depend on the dimensions of the browser window. I would also like this div to scale.
The easiest way to demonstrate this would be with images (it's all about the 'radio panel'):
Intended appearance
Scaled down the browser window
The code I have written so far:
'panel' is the object I want to manipulate.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="panel">
</div>
</div>
</body>
</html>
CSS:
#main{
background-image: url('tlo.jpg');
background-size:cover;
background-position:center;
width:100%;
height:100%
}
#panel{
background-image: url('radio.png');
position:relative;
width: 49.7%;
height: 30vh;
/*border: 5px solid red; */
top:35.1%;
left:23.9%;
}
Panel with red border should fit in the green border
I've tried to find solutions on the Internet, but I don't even know quite how I'm supposed to describe it in a specialized way.
You could try this: (put it in head)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And if it will not work as you expected it to work, then you can read something about media queries.
Change the height of the #main div to 100vh.
#main{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/1200px-Zinnia_elegans_with_Bombus_01.JPG?20070924151254');
background-size:cover;
background-position:center;
width:100%;
height:100vh;
}
#panel{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Halictus_bee_on_flower-2.jpg/1200px-Halictus_bee_on_flower-2.jpg?20070515152433');
position:relative;
width: 49.7%;
height: 30vh;
/*border: 5px solid red; */
top:35.1%;
left:23.9%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="panel">
</div>
</div>
</body>
</html>
No matter what I try, there is still a visible margin between the div and the top/right/left of the screen.
<!DOCTYPE html>
<html>
<head>
<title>Test2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<div class="container-fluid" id="topBackground">
<h1>first</h1>
</div>
</body>
</html>
CSS:
#topBackground{
background-color:#310048;
height:500px;
float:auto;
margin:0 auto;
max-width:100%;
}
Header has default margin so you have to remove it and also set body margin: 0 auto;
body{
margin: 0 auto;
}
#topBackground{
padding:0;
background-color:#310048;
height:500px;
float:auto;
margin:0 auto;
max-width:100%;
}
h1{
margin:0;
}
https://jsfiddle.net/rghhwrm5/
I am making an HTML website's index page now, and I don't know why this CSS isn't working. My CSS code is as follows, and my HTML code after that:
body {
background-image:url("background.png");
font-family:sans-serif;
}
#content {
margin:0 auto;
overflow:auto;
background-color:white;
border-radius:10px;
width:60%;
}
.header {
margin:10px;
}
.body {
margin:10px;
}
.footer {
margin:10px;
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="content">
<div id="header">
<p>This is the header!</p>
</div>
<div id="body">
<p>This is the body!</p>
</div>
<div id="footer">
<p>This is the footer!</p>
</div>
</div>
</body>
</html>
So, what ends up happening is that overflow: auto is not setting the side margins, but it is successfully setting the top and bottom margins. Thanks in advance.
By the way, all of the images are also in the directory, and they are working fine.
You're using class selectors in your CSS and id attributes in your HTML.
Either change your CSS to #header, #body, and #footer.
Or, change your HTML to class="header", class="body", and class="footer".
I have my header and section inside my wrapper and inside the header and section is an image. I'm just trying do one simple thing - take the parent wrapper and it's child elements and center them on the page. No matter what I do, it stays flushed to the left corner of the screen. Below: Html and CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Katie Simone Music</title>
<link rel="stylesheet" a href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<img src="images/header1.png">
</header>
<section>
<img src="images/pic.png">
</section>
</div>
</body>
</html>
#wrapper{
max-width:940px;
margin:0 auto;
padding: 0 5%;
}
#wrapper{
max-width:940px;
margin:0 auto;
padding: 0 5%;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Katie Simone Music</title>
<link rel="stylesheet" a href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<img src="images/header1.png">
</header>
<section>
<img src="images/pic.png">
</section>
</div>
</body>
</html>
add text-align:center to the #wrapper style
#wrapper{
max-width:940px;
margin:0 auto;
text-align:center;
padding: 0 5%;
}
Try to add also this:
body {
text-align: center;
}
#wrapper{
max-width:940px;
margin:0 auto;
padding: 0 5%;
text-align:center;
}
Working DEMO
i have a logo called gif.gif, what i am trying to do is position it on the top left corner. At the moment there is a gap, i want no padding or margins.
This is my html and css
CSS
#header, .img
margin:0px;
padding:0px;
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
</head>
<body>
<div id="header">
<div class="logo">
<a href="https://www.google.co.uk"/><img src="gif.gif"/></a>
</div>
</div>
</body>
</html>
Try this:
body
{
margin:0px;
padding:0px;
}
Consider approaching it purely in CSS, like so;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
<style>
html, body {
margin: 0px;
padding: 0px;
}
#header {
margin: 0px auto;
width: 960px;
}
.logo {
display: block;
width: 200px;
height: 200px;
background-image: url('gif.gif');
}
.logo:hover {
/* Some hover styling here */
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
You would make your a tag a block (non-inline). I assumed the size to be 200x200 pixels. You can change that to your liking. The a tag will still maintain it's hyperlink properties, but display differently.
Try reset your css before your start do anything.
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
</style>
I make a simple test with css reset above and works fine. Just paste before all css in your html file.
Add to the body:
body{margin:0px; padding:0px;}
You can eliminate this kind of problems if you use reset.css or normalize.css