The h1 and p should be inside of the white wrapper div, I don't understand why they are outside, can someone explain? Unfortunately I am not allowed to post pictures, but the h1 and p push themselves above the wrapper with white background... when I don't use tags, the text is suddenly inside of the wrapper
Html:
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<p id='before-header'>This is the before header area</p>
<div id='wrapper'>
<h1>Why is this outside of the white box?</h1>
<p>and this as well?</p>
but when I dont use tags... suddenly its insider, what magical stupid mistake am I doing?
</div>
</body>
This is the css:
*{
margin: 0 auto;
background-image: url('background.png');
}
#wrapper{
margin: auto;
width: 960px;
height: 2000px;
background: white;
}
#before-header{
text-align: center;
}
It's because you are setting your background-image on everything so it makes it look as if the h1 is outside the white box where as in effect it is on top of the white box but with the background image so it appears as if it is outside the white box.
The star (*) selector in css is a blanket for everything so target what you want to have the background image specifically:
body {
margin: 0 auto;
background-image: url('background.png');
}
Example of background targeting everything
Example of background targeting body only
http://jsfiddle.net/zj9v81t7/20/
Please try this css:
*{
margin: 0 auto;
background-image: url('background.png');
}
#wrapper h1 {
float: left;
margin: 5px auto;
width: 100%;
}#wrapper > p {
float: left;
}
#wrapper{
margin: auto;
width: 960px;
height: auto;
background: red; overflow: hidden;
}
#before-header{
text-align: center;
}
Related
This is a fairly basic HTML/CSS question, and I'm sorry I'm having to ask this here (I searched my best!). I've written the following HTML and CSS code, and while the header section is separated by a neat 20 pixels from the article and aside sections, the footer is being separated by only 10 px. In fact, irrespective of the margin I set for the footer, the separation remains 10px. What am I doing wrong?
It would be amazing if you could test this code out in a browser to see what I mean. I'm also inserting a link to a picture below of the skewed margins between the article / aside section and the footer section.
http://cl.ly/image/3M2u1L0x2C0x
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Grey Boxes</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<footer></footer>
</div>
</body>
</html>
CSS Code
#wrapper {
margin: auto;
width: 940px;
}
body {
background-color: #fafafa;
}
header {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px;
position: relative;
background-color: #c6c6c6;
}
article {
height: 740px;
width: 600px;
margin: 10px 10px;
float: left;
position: relative;
background-color: #c6c6c6;
}
/* Keep scrolling! */
aside {
height: 740px;
width: 300px;
margin: 10px 10px;
float: right;
position: relative;
background-color: #c6c6c6;
}
footer {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px; /* Why is this being ignored? */
background-color: #c6c6c6;
position: relative;
clear: both;
}
Any help will be greatly appreciated! I'm sorry if I'm not following all the community guidelines here - this is my first time posting on StackOverflow, and I'll pick things up soon! Thanks ahead! :)
You need to clear the floats before you get to the footer. Changing your HTML to this will work:
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<div style="clear:both;"></div>
<footer></footer>
</div>
I know that we normally use margin:auto however I am using the code below.
HTML :
<article>
<header></header>
</article>
CSS:
article{
max-width: 500px;
margin: auto; /* goes in the middle - great */
}
header{
width: 130%;
margin-left: -30%;
}
Demo
At this point I am placing the article in the center. However, as the browser/window size gets smaller, I would like to center the article as if its width was as wide as the header. Basically, at some point (as you shrink the browser window) the header will be at the edge on the left, whilst not taking advantage of the blank space on the right.
I don't want to have an extra div, but if I did, I would wrap the article in a div and give it an auto margin.
screenshot http://i3.minus.com/i2yPFqNDgeBbS.png
Maybe I'm misunderstanding something, but don't you just want:
margin-left: 15%;
on the header?
This code does what is described, but if you want to keep the two edges aligned you would need to get into some javascript, I recommend jquery for this kind of thing.
<html>
<head>
<title></title>
<style>
html, body {
width: 100%;
text-align: center;
}
.header {
width: 960px;
margin-left: auto;
margin-right: auto;
position: relative;
left: -100px;
background-color: blue;
}
.article {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="article">TODO write content</div>
</body>
</html>
I am designing a text field which I want to be appear vertically-middle of a div. I want the black color div to be show vertically center of the blue (id=srch) div.
HTML & CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
vertical-align:baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border:0 none;
outline:0;
padding:0;
margin:0;
}
html {
height:100%;
}
#outerwrapper {
width: 90%;
height: 100%;
min-height: 100%;
height: auto !important;
border: solid thin #333;
}
body {
height: 100%;
width: 100%;
}
#header {
height: 80px;
width: 100%;
background-color:#999;
}
input {
border:solid thin #ab1;
}
#srch{
height:50px;
background-color:#00f;
}
#srch div{
margin: auto 0 auto 0;
width: 200px;
background-color: #000;
}
#contentWrapper {
width: 100%;
overflow: auto;
background-color:#0F0
}
</style>
</head>
<body>
<div id="outerwrapper">
<div id="header">Header
<div id="srch">
<div>
<input type="tel" name="aa"/>
</div>
</div>
</div>
<div id="contentWrapper">
Content Wrapper
</div>
</div>
</body>
</html>
My approach: I give the black div top and bottom margin auto but it is not working (also for the horizontal center [left and right margin:auto] it is working). Does margin:auto only work for left and right?
I want to know why this is happening, and I don't want any other solution like:
Display text inline with a vertical-align div.
Display with proper padding or margin.
margin: auto does not work for top and bottom. If margin-top: auto or margin-bottom: auto is specified, their used value is 0. Here's an article about how you can achieve vertical centering.
You need to use some jQuery here to calculate the height of parent container.
Demo - http://jsfiddle.net/tQBVy/
I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly).
Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body, div, p, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)
Thanks!
Change the top property to margin-top
Demo
position: relative;
top: -200px;
changed to
margin-top: -200px;
For future references, what I've finally done is to merge the images on the wrapper1 and wrapper 2 in the same image (they were background patterns), so I only have one wrapper now, and I don't need to relative position the content above the second one, it just goes following the page flow.
In the end I've understood that you can't delete the unwanted height without using some sort of Javascript.
I am trying to work on a new project using Twitter's Bootstrap framework, but I am having an issue. I want a full body background, yet the background seems to be limited to the height of the container div. here is the HTML/CSS code:
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<title>Bootstrap Issue</title>
<style>
body { background: black; }
.container { background: white; }
</style>
</head>
<body>
<div class="container">
<h1> Hello, World!</h1>
</div>
</body>
</html>
How can I get the body to take up the entire screen?
You need to either add this:
html { background: transparent }
Or, set the "page background" (background: black) on html instead, which is fine to do.
Why? Inside Bootstrap, there's this:
html,body{background-color:#ffffff;}
(bear in mind the default background value is transparent)
For more information on why this matters, see: What is the difference between applying css rules to html compared to body?
Note that this is no longer an issue with Bootstrap 3+.
Set the height of html and body to be 100% in the CSS.
html, body { height: 100%; }
Then it should work. The problem is that the height of body is automatically calculated to be the height of the contents, rather than the height of the whole screen.
/* here is a pure CSS solution */
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
a:link, a:visited, a:hover {
color: #333;
font-style: italic;
}
a.to-top:link,
a.to-top:visited,
a.to-top:hover {
margin-top: 1000px;
display: block;
font-weight: bold;
padding-bottom: 30px;
font-size: 30px;
}
</style>
<body>
<img src="/background.jpg" id="full-screen-background-image" />
<div id="wrapper">
<p>Content goes here...</p>
</div>
</body>
<style>
body { background: url(background.png); }
.container { background: ; }
</style>
this works for a background image if you want it
best solution would be
.content{
background-color:red;
height: 100%;
min-height: 100vh;
}
its automatically take veiwport height(vh) in bootstrap.