I am trying to place an image in my body, using a div id with a background image. I don't understand why the image isn't showing up when i preview in google chrome?
I am using almost the same code on my index page and it's working fine there.
HTML:
<body>
<div id="body">
<div id="rainforestimage"></div>
</div>
</body>
CSS:
#body {
width:1024px;
height:auto;
background-image:url(../images/background2.png);
margin:0 auto;
background-repeat:no-repeat;
overflow:hidden;
}
#rainforestimage {
background-image:url(../images/exhibits/rainforest.png);
width:1024px;
margin:0 auto;
margin-top:74px;
height:364px;
position:absolute;
z-index:1;
box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
}
Your div#body needs to have a height set, try setting a height and you will see your background image.
Also your HTML page and the folder images should be siblings (same level) in the same directory.
EDIT:
If you still don't see background2.png, it's because rainforest.png is covering it(on top of it) because of the other styles you have set:
position:absolute;
z-index:1;
Div with position absolute ideally takes 0 height. you need to set height either 100%, or top:0 & bottom:0 .
Try using following CSS code.
#rainforestimage {
background-image:url(../images/exhibits/rainforest.png);
width:1024px;
margin:0 auto;
margin-top:74px;
height:364px;
position:absolute;
z-index:1;
box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
height:100%;
top:0;
bottom:0;
}
You were not able to see it because the height wasn't set.
Added in CSS
#body {
width:1024px;
height:200px;
}
https://jsfiddle.net/neerajsonar/72wr5n7u/
The image overlaps, you can set the margin according to your image.
You are keeping same width for #body and #rainforestimage,and for #body you are having height:auto,if you have only one div #rainforestimage under #body then ideally body width will be same as of #rainforestimage div,so no point you can see the background image.
so if you need increese the height of the div #body and reduce the width of your #rainforestimage,so that you can see the background image.
this will work for sure.
If you are facing any layering issues,Use z-index,make sure that the element is having position property.
Try adding min-height to div #body. actually #body won't have height because the element #rainforestimage you placed inside is positioned absolute.
#body {
min-height:364px;
}
Related
I'm using absolute positioning to have 100% height of the screen. I also want to limit the resizing of my page so I add min-width in my header and content divs. The problem I'm facing is that once resizing reaches the min-width boundary, right side margin disappears. Any suggestions how to make it work?
HTML:
<div id="header">Header</div>
<div id="content">Content</div>
CSS:
html, body{
background: blue;
padding:0px;
margin:0px;
}
#header{
height:30px;
background: yellow;
position: absolute;
top:20px;
right:20px;
left:20px;
min-width:500px;
}
#content{
background:green;
position: absolute;
top:50px;
right:20px;
left:20px;
bottom:20px;
min-width:500px;
}
jsfiddle
I found a solution my self. The problem is that if you apply min-width on the element which has padding or margin, that padding or margin collapses when you resize the window. So the solution was to wrap that element inside root element and set min-width on the root element.
P.S. I also tried box-sizing approach suggested by Sam but effect was almost the same: margin shrinks but doesn't disappear all. Applying min-width on outer element solves the issue as well.
Here is an example
updated fiddle
You can use the CSS box-sizing property to accomplish this in modern browsers (IE8+)
I'm trying to implement a div, that looks like a tall and narrow page, like a notebook paper.
I have my content in <div id='centerframe'/> and I thought that a good solution was to use an absolute positioned div for the "paper".
So I wrote the css rules as follows:
div#center_background
{
z-index:-1;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
background:rgba(255,255,255,0.9);
}
However, when I add a background image to body, it disappears under the background. I tried setting a positive z-index, than it renders on top of everything in the page, like centerframe, topbar etc. See the picture:
A solution could be setting z-index for all the elements, which I really don't want to do, since I want to use position:absolute;'s as little as possible.
So how can I define this kind of background div without changing other elements' positions and z-indices?
I made a fiddle, but it runs as expected. The strange thing in my real code is, when I load the page, the center_background div appears on top of background of body for a glance, then it disappears.
I don't change anything with JavaScript.
I came across this in my own code a few days back, and setting containing elements to position: relative solved the issue.
When i see your picture, i think that absolute positioning is unnecessary.
You could use fixed for the header, and let main content slides under it :
http://jsfiddle.net/jgYXr/
body {
background:url(http://lorempixel.com/100/100/abstract/10);
}
nav {
position:fixed;
top:0;
left:0;
right:0;
line-height:3em;
background:tomato;
box-shadow:0 0 1em 0.5em;
text-align:right;
}
a {
display:inline-block;
margin:0 0.5em;
padding:0 0.25em;
}
main {
width:80%;
background:rgba(255, 255, 255, 0.75);
box-shadow:0 0 1em 0.3em;
margin:2em auto;
min-height:800px;
}
<nav>
Nav link
Nav link
Nav link
</nav>
<main>
</main>
Search for position: fixed and how to size an element in absolute or fixed via coordinates. See as well to set height of 1 element that has only 1 line of text.
put the z-index value in high range
div#center_background
{
z-index:100;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
}
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
I am having issues horizontally centering my slideshow images so that they are central on all screen sizes / resolutions.
The HTML looks as such
<div id='banner'>
<div class='slides_container'>
<div>
<a href='#'><img src='images/banner.png'></a>
</div>
<div>
<a href='#'><img src='images/banner2.png'></a>
</div>
</div>
</div>
And the CSS to match this is:
#banner {
width:100%;
margin-bottom:50px;
}
.slides_container {
width:100%;
height:500px;
}
.slides_container div {
width:1100px;
height:500px;
text-align:center;
}
I am really struggling here to get the image to center on all screen sizes since padding and margins don't work I am in need of a different method!
Any replies are extremely appreciated.
You should make sure the .slides_container div is centered within its parent, i.e.
.slides_container div {
margin: 0px auto; // center
width:1100px;
height:500px;
text-align:center;
}
If that doesn't work, you need to make sure the parent container is width 100% of the page.
If the parent is not width 100% of the page, the parent needs to have this property also:
.slides_container {
margin: 0px auto;
}
If that doesn't work, then you need to make sure its parent is 100% width of the page.
Hope this helps.
Edit
I took a look at it in FireBug, and it was immediately apparent that the slide container is set to 3800px wide, and the div inside doesn't have a width set. If you set the div inside the slide container to 100% width, it will cause it to become 3800px wide, so that won't work.
By the nature of the script you are using, it is using an abolute-positioned div to work. So margin: 0px auto won't work here.
The solution is a bit of javascript to run onload, and on window resize, to set that div which holds the image to the width of your browser window, and text-align: center. So for example, since I have 1280px wide monitor, this centers the image for me:
.slides_control div {
width: 1280px;
text-align: center;
}
Add .slides_container img and margin:0 auto
#banner { width:100%; margin-bottom:50px; }
.slides_container {
width:100%;
height:500px;
}
.slides_container div, .slides_container img {
width:1100px;
height:500px;
text-align:center;
margin:0 auto; }
Normally they use margin:0 auto; to handle this. text-align won't do you good for div.
Im creating a website with paragraph content in it. What I have here is the which is my container div and the actual content that is 100% of the height of mainContent, but only 50% of the width. I want there to be 15px padding around the actual content inside of the aboutLeft. My problem is that when I use overflow:auto to for the scrollbars I am extending my content 30px outside of the #mainContent div and I have no clue why its doing this. Any suggestions to change this would be great.
Thanks, meepz
http://i.stack.imgur.com/JLICh.jpg
#outerDiv #mainContent{
position:relative;
height:560px;
margin:0;
padding:0;
background-color:#fff;
border-style: solid;
border-width:1px;
}
#mainContent #aboutLeft{
padding:15px;
position:absolute;
width:55%;
height:560px;
left:0;
top:0;
overflow:auto
}
You need to add a wrapper DIV that you set the width on, then put your div with overflow:auto inside it since block level elements will take up 100% the width of their containing element.
This will solve your issue.