I'm trying to add a div block so that it's at the center of the screen. All i have is a fixed background image and it's doing some odd stuff.
CSS:
body {
margin:0;
padding:0;
}
#middle { <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
html:
<div id='middle'>
</div>
<img src="images/backgroundmain.jpg" id="bigbg">
Looks like this:
i want the white div block to be centered in the middle. Is there a better way of applying a background image? I was able to achieve what i wanted by adding the background-image:url property to the html, but i wasn't able to add all the properties i wanted such as fixed margins/width etc..
Change margin:0 auto 0 auto; to margin:0px auto; in the middle class
Upadate your css a below
body {
margin:0;
padding:0;
width=100%;
}
#middle { <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:15px auto 0 auto;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
to the 'middle' div add margin-left: auto; margin-right: auto;
or you could do something like this:
body {
width: 100%; <---make sure you use percentages
height: 100% <---
margin:0;
padding:0;
}
#middle {
background-color:#FFF;
display:block;
width:25%; <--change the width and height to % also
height:25%; <---
left: 37.5%; <--since your div is 25% wide you want to move
<--- it 37% to the right to center it. (100% - 25% = 75% / 2 = 37.5%)
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
However, if you're keeping your code the same, i'd suggest just switching margin:0 auto 0 auto; to margin-left: auto; margin-right: auto;
Related
Please take a look at this fiddle https://jsfiddle.net/t2w4yd8j/1/
I have a couple of questions about this:
1) There seems to be a padding between the .top div(red) and the browser if I use the relative position. However if I change the position of .top div(red) to absolute the padding goes off. Why is that?
2) The .next div(pink) should stack after the .main div(grey). But the main div seems to be taking a bit more extra space even though the height is set to auto and there is no children in the extra space. Why is that?
Thanks
CSS
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
position:relative;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position:relative;
top:-25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
width:200px;
height:50px;
display: inline-block;
background-color:#0F0;
}
.bottom{
position:relative;
top:-50px;
left:0px;
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
HTML
<div class="main">
<div class="top"></div>
<div class="middle">
<div class="midfill"></div>
</div>
<div class="bottom"></div>
</div>
<div class="next"></div>
1) By placing it relative, it relates to it's parent, the body tag. Remove the padding and margin from the body and HTML tag, and it fits. When you place the div absolute, it's taking out of the document flow, making it relate to the viewport. That explains the difference.
html, body { margin: 0; padding: 0; }
2) you position the div's relative, and then move them around. But the place stays reserved in the parent div. I moved the divs a bit around.
html, body {
margin: 0;
padding: 0;
}
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position: absolute;
margin-top: -25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
display: inline-block;
width:200px;
height:50px;
background-color:#0F0;
}
.bottom{
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
Updated Fiddle
Solution for your both problem is following. By Default it takes extra margin by removing it from body solved your issue:
body{
padding:0;
margin:0;
}
Check Fiddle Here.
I'm a newbie at this and I'm trying to figure out what I'm doing wrong. I want to centre everything within a div, but it won't budge no matter what I do.
Could you guys advise?
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro {
bottom:0px;
width:50%;
margin:0 auto;
position:absolute;
text-align:center;
}
Add text-align:center; to your <h1> for it to center. Also, remove position:absolute; from #intro for its text to center.
Working Code Snippet:
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
}
#main1 h1{
text-align:center;
}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro{
bottom:0px;
width:50%;
margin:0 auto;
/*position:absolute;*/
text-align:center;
}
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
</div><!--main1-->
You can make the parent DIV (#main1) get the center alignment first. So that elements under it are moved to the center. Als have made change for intro div(#intro) too so that it is centered and below your header.
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
text-align:center;
}
#intro {
margin: auto;
width:50%;
text-align:center;
}
Centering essentially means recognizing that text-align:centershould be reserved for centering text, so it's appropriate for an H1 tag or a P tag. When it comes to DIVs, if you work with margin and width styling you can usually compel a DIV to center. If you're having an issue see if you have applied position:absolute to the DIV and either remove it or change it to position:relative or if fitting position:static. Here's some code that I suggest which centers the text vertically and horizontally, as follows:
#main1 {
margin: auto;
width:100%;
height:600px;
background-color:#eee;
}
#main1 h1 {
padding-top:33%;
text-align:center;
}
#intro {
bottom:0px;
width:33%;
min-width:90px;
margin:auto;
background:#fff;
padding:32px;
}
#intro p {
text-align:justify;
}
Note: I changed the height so you could better see the results in the live demo; see below link.
I essentially worked with the HTML provided and used text of similar word count. The CSS centers the DIV containing the paragraph. The CSS for the P tag gives the illusion of centered text without actually applying text-align: center, to prevent each line of text being centered which can be visually annoying when reading sentences.
<div id="main1">
<h1>Centered</h1>
<div id="intro">
<p>Centering can be a lot of fun or it can lead to much frustration. It all depends. Sometimes it's a challenge and sometimes it's just what it is.</p>
</div><!--intro-->
Live demo here
Thank you for all your suggestions! This is what I've ended up doing:
#main1 {
width:100%;
height:700px;
margin:0;
background-color:#CCC;
position:relative;
}
#title {
display: block;
margin-left: auto;
margin-right: auto;
position:absolute;
top:300px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#intro {
width:50%;
text-align:center;
position:absolute;
bottom:0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
How would i fix this logo to allways be in the center top of the page and doesn't move as browser changes size, so when the browser changes size the logo stays in its old position and will not recenter its self.
Here is my current CSS
CSS
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
Thankyou for your help
CSS
body
{
height: 1000px;
}
#logo {
position:absolute;
background-image:url('http://i.stack.imgur.com/DUYP4.jpg?s=128&g=1');
background-size:150px;
width:150px;
height:150px;
position: fixed;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
HTML
<div id="logo">
</div>
Fiddle
Remove your margin, left and right properties and add this one:
margin-left:100px;
This way, your image will always be 100px to the right.
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
z-index:1;
top:0px;
margin-left:100px;
}
i am using this css:
body,html {
font-family:Arial;
margin:0;
padding:0;
width:100%;
height:100%;
background:#0C3;
}
.header {
min-height:80px;
width:100%;
margin:0 auto 0 auto;
border:1px solid black;
}
.container {
width:960px;
}
.logo {
float:left;
display:inline;
}
.menu {
width:300px;
float:right;
display:inline;
}
to display a header the width ofmy container div (960px) with a logo to the left of the header and menu to the right
here is a fiddle: http://jsfiddle.net/YxeTf/
but the header div is not displaying centre
Just add margin:auto; to .container to center a block element within its parent <div>.
Demo
.container {
width:960px;
margin:auto;
}
Give your header specific width - less than 960px
DEMO jsfiddle
try this code for header ---
.header {
min-height:80px;
width:700px;
margin:0px auto;
border:1px solid black;
}
I've made a footer wrap outside the content wrap (which everything else is in). I would like to make the footer wrap extend to fill the width of the page and I would like it to be fixed on the bottom. Here's the code:
footerWrap {
background-color:#000;
width: auto;
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
border:#000 inset medium;
}
The website is item9andthemadhatters.com please let me know if you need any other code or info. Thanks!!
update:
html {
padding:0;
height:100%;
width: 100%;
}
body{
margin: -1px 0 0 0;
background-color:#FFF;
font-family: calibri;
background-image:url(images/item9HeaderSideFiller.gif);
background-repeat: repeat-x;
padding:0;
height:100%;
width: 100%;
}
wrap {
width: 965px;
margin:auto auto;
min-height:462px;
max-height:4000
px;
footerWrap {
background-color:#000;
position:absolute;
bottom:0;
width:100%
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
}
}
To fill the page
width:100%
To stay at the bottom of the page a solution could be
position:absolute;
bottom:0;
notice that in both body and html you have to set
padding:0
height:100%;
Try width:100% in footerWrap. Also, what do you mean by fixed on the bottom? Do you mean the footer should always be at the bottom of the screen, even when scrolling? Or do you mean it should always be at the bottom of the page?