I'm trying to make the section to be centred to the screen. The header is fixed and header-container is fixed as well. Header-container contains the logo, nav and social links.
Saying the header and header-container are using top:0;, I can't seem to get my head around to getting it to work. I know by using margin: 0 auto; would centre it, but not in this case.
Edit: Whenever I seem to centre it, when I zoom out it shoots to the left side, The header seems to stay centred, which is the result that I'm looking for.
HTML:
<header>
<div id="header-container">
<nav></nav>
<div id="social"></div>
</div>
</header>
<section></section>
CSS:
body {
font-family: 'Open Sans', sans-serif;
text-align: center;
position: relative;
margin: 0 auto;
background: #ccc;
}
#wrapper {
width: 1048px;
min-height: 800px;
text-align: left;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 86px;
text-align: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top:0;
background-image: url("../images/header-banner.png");
border-bottom: 2px solid #5d5d5d;
}
div#header-container {
width: 1048px;
height: 86px;
position: relative;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
border: 1px solid green;
}
section {
width: 1048px;
min-height: 500px;
background:#fff;
margin:86px auto 0;
z-index: -1;
position: relative;
}
If your width is 100% of it's container, margin: 0 auto; will not work in most browsers. Change it to 98% and it will correctly auto center. This will also happen if the width is set by pixels or any other measurement type.
Related
I am beating my head against a wall on this one. I am trying to design a landing page, with a full screen picture background, that stops at the footer. So essentially I believe my trouble lies in creating a sticky footer..
I have been following the tutorial at this website.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<code omitted>
</head>
<body>
<div id="wrapper">
<div id="bkgcontainer"></div>
<div class="push"></div>
</div>
<footer>
<address>
<code omitted>
</address>
</footer>
</body>
</html>
My CSS:
* {
margin: 0;
}
html, body{
height: 100%;
background-color: black;
}
#wrapper {
width: 100%;
position: relative;
min-height: 100%;
margin: 0px auto -25px;
}
footer, .push {
height: 25px;
}
#bkgcontainer {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
footer{
text-align: center;
margin: 0px auto;
color: white;
position: relative;
}
As far as I can tell, I have everything set right. But when I launch the website, 'bkgcontainer' takes up the full screen and the bottom margin '-25' is below the view-port. I'm at a loss, any ideas? Fixes or better ways, I'm all ears.
You can make the picture background take up 90% of the screen height, make the footer 10%, and pin the footer to the bottom of the page:
//remove `footer`
.push {
height: 25px;
}
//set height to 90%;
#bkgcontainer {
width: 100%;
height: 90%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
//change height to 10%, change to fixed position, and set bottom to 0. Oh, set width, too.
footer{
height: 10%;
text-align: center;
margin: 0px auto;
background-color: white;
position: fixed;
bottom:0;
width:100%;
}
See this jsfiddle to see how it looks.
Here's a completely different solution. Note that it doesn't contain a modification of your code, however, it is an entirely different solution (out of several solutions) to get a header and a footer
HTML:
<header>
this is header
</header>
<div id="content">
hello
</div>
<footer>
this is footer
</footer>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 60px;
background: green;
position: fixed;
top: 0;
}
#content {
width: 100%;
height: 100%;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Beautiful-Wallpapers-7.jpg");
background-size: 100%;
}
footer {
width: 100%;
height: 60px;
background: blue;
position: fixed;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/harshulpandav/7S4Xx/214/
You can try a position:fixed for footer class
footer{
text-align: center;
margin: 0px auto;
color: white;
position: fixed;
bottom:0;
width:100%
}
You should change the min-height value on the #wrapper to either a smaller percentage value or a minimum pixel value to allow for the footer to display. What you have done is tell the browser that you want that div to extend no less than the full screen.
I have this vertically formed image that should reach to the bottom of the page. So basically its height should be 100% all the time. Then this same image should also be put at the center of the page, which is pretty simple to do, but what I'm struggling with is making a menu in the middle of the image (inside it).
What are the best ways to achieve that effect? I cannot provide any code try because I don't even know how to start. Help would be highly appreciated.
This is to demonstrate the problem:
Demo
html
<div class="menuOnImage">
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
css
.menuOnImage {
background: url('http://www.picturesnew.com/media/images/image-background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top:0;
bottom:0;
text-align: center;
width: 80%;
left:0;
right: 0;
margin: auto;
height: 100%;
}
ul {
display: inline-block;
position: absolute;
top:0;
bottom:0;
height: 110px;
left:0;
right: 0;
margin: auto;
width: 60%;
border: 5px solid #fff;
list-style: none;
padding:0;
border-radius: 5px;
padding: 5px;
background: rgba(0,0,0,0.4);
}
li {
border: 2px solid #aaa;
margin: 2px;
background: rgba(0,0,0,0.4);
color: #fff;
}
body, html {
height: 100%;
margin:0;
padding:0;
}
HTML:
<div id="largeImage">
<div id="menu">Menu Here</div>
</div>
CSS:
html, body { width: 100%; height: 100%; }
#largeImage {
background: url('path/to/image.jpg');
background-size: cover;
width: 100%;
height: 100%;
}
#menu {
width: 500px;
margin: 0 auto;
}
This should give you the basis of what to do :) Basically the code above is to create a div that is 100% width and height, and then position a menu that is 500px in the middle of that div
This is my html codes, i am having a hard time center the email on the bottom of the page. so how can i center the footer text in the bottom of the page regardless of screen size
<body>
<div class = 'container' >
<header> ****** Illustration</header>
</div>
<!-- Sign and date the page, it's only polite! -->
<footer> <a href="mailto:*******#cmail.carleton.ca">
*******#cmail.carleton.ca</a></footer>
</body>
this is my css code, I tried centering the footer to be on the center bottom of the page, but every time i use a different screen size the location of the text change, how can i avoid this issue??
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
.container {
width : 900px;
margin : 0 auto;
}
body {
background : url('images/black_background.jpg');
width: 100%;
height: 100%;
possition: absolute;
top: 0;
left: 0:
z-index: -5000;
overflow-x:hidden
}
header{
min-width: 900px;
height: 90px;
background: url('images/header.jpg') 0 0 no-repeat;
padding: 20px 0 0 0;
color: white;
position: relative;
right: -85x;
color: white;
font-size: 3em;
font-family: Lucida Handwriting;
}
nav{
width: 900px;
height: 40px;
margin: 0 auto;
color: white;
background: url();
position: relative;
right: 250px;
top: -40px;
height: 90px;
min-width: 900px;
}
/*#content{
width: 900px;
height: 650px;
position: relative;
left: -45px;
background:url('images/himba_tribes.jpg');
}
*/
footer{
position:absolute;
bottom:-40;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
border: 4px solid orange;
clear: both;
}
Try this:
Make the footer a div:
<div id="footer">your#email</div>
And the CSS should be:
#footer { clear: both; margin: 0 auto; text-align: center}
If you want to center the Link horizontally, use text-align: center; on the footer. If you want to make it stick to the bottom of the window, use a Sticky Footer!
I am making a page whose layout is divided into 3 sections : Header, main body, and footer. I want a background image in my main body. Now when i try to do that, i am experiencing a problem. The image is not covering the complete area. It leaves some area at the bottom. Check this fiddle for proper explanation.
Here is what i have done so far:
HTML
<html>
<head>
<title>Gehri Route: Login, Signup</title>
</head>
<body>
<div class='headercontainer'>
<div class='header'>
header
</div>
</div>
<div class='mainbodycontainer'>
</div>
<div class = 'footercontainer'>
<div class='footer'>
footer
</div>
</div>
</body>
</html>
CSS
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
Also please help me to make this responsive design.
You need to force a height to the body and html tag of 100%. If there is no content the background won't appear because the height of the element (.mainbodycontainer) is 0. In your case it was 80px because you applied padding.
check this fiddle. http://jsfiddle.net/olwez/ncLZN/
I added a height to the body and html tags of 100% and a minimum height of 100% to the .mainbodycontainer div. That way you don't have to manually set the heights or have content within the .mainbodycontainer for the image to behave as you wish.
I just threw in an overflow: hidden; on the body tag so that scrolling is gone.
Here is the full css.
html { height: 100% }
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
min-height: 100%;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
add this to your style:
width:600px;
height:450px;
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:600px;
height:450px;
}
http://jsfiddle.net/QcUfm/9/
A background image will only show as much is revealed either by the content or a height. If your div doesn't have enough content to force the parent element big enough, you won't see it all. Also, if you are using any type of positioning like fixed, absolute or even relative and moving it, that can affect it also. I didn't look at the fiddle but those are some common issues.
I'm fighting currently with a centered wrapper (centered with margin 0 auto). now i want to have a container beginning at the left until the centered wrapper begins. Is that possible at all with this given margin spec?
I would really appreciate some hints!
see also the fiddle:
http://jsfiddle.net/TQhEa/1/
What i have now:
What I want to have:
My code:
<body>
<div id="page-wrapper">
<p><---- how can i cover the left side only with red without javascript but keeping the "0 auto margin?"
</div>
</body>
my CSS:
body, html{
width:100%;
height:100%;
top:0;
margin:0;
background-image: url('http://www.art-wallpaper.net/Full-Size-HD-Wallpaper29/images/HD%20Widescreen%20Wallpaper%2059.jpg');
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page-wrapper{
background-color:red;
margin: 0 auto;
width: 400px;
top:0;
margin-top:0;
height:100%;
}
p {
padding:0;
margin:0;
font-size:30px;
}
}
The easiest way would be to set the background-color and position of background-image. Check out this piece of code:
html
<div id="page-wrapper">content</div>
css
body {
margin: 0;
background: #c11 url(http://placekitten.com/1000/1000) 100% 0 no-repeat;
}
#page-wrapper {
width: 400px;
height: 1000px;
background: #ccc;
margin: 0 auto;
}
Add 1 more DIV with the following CSS :
#left_div {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background-color: #F00;
display: table; /* note IE5-7 does not support this */
z-index: 1;
}
and modify the current centered DIV $('#page-wrapper') to have higher z-index value
Add an extra div with the property's position: absolute; width: 50%; height: 100%; and z-index: -1;
See: http://jsfiddle.net/skeurentjes/TQhEa/3/