I'm busy with creating a website that preferably needs to have a background picture that covers the whole screen but when the visitor scrolls down other content appears.
So far I got this working with creating 2 div's (which I call #container_page1 and #container_page2). This is the css of the first div:
#container_page1 {
background-image:url(images/background.jpg);
background-size: cover;
position:absolute;
margin:0px;
width:100%;
height:100%;
}
This is the css of the second div:
#container_page2 {
background-color: #F00;
height: 2000px;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
The problem is that the content of the second div appears underneath the first div, obviously caused by the fact that the first div is absolute positioned.
Of course I could get the content of the second div to be placed lower with margin or padding but this won't work nicely because of different screen resolutions.
Here you can see what I did so far: http://kmnew.kadushimarketing.com/index.php. You'll also see the "learn more" button that links to an anchor in the second div.
Does anyone has a suggestion to get the second div starting where the first div ends?
Wrap the two divs into one parent div. Then give that parent div an absolute position and position the two inner divs next to each other inside that div.
If you need each section to have it's own special background and be exactly the size of the browser, why do absolute position at all?
Using a style like:
body, html{
width:100%;
height:100%;
margin:0;
padding:0;
}
section{
width:100%;
height:100%;
background-image:url(images/background.jpg);
background-size: cover;
}
Then positioning all your content divs relative, you should be able to maintain browser-sized background and let the sections stack in order.
If you want to control the position of the section contents you could use a structure like:
<section>
<div class="content">
Section content goes here
</div>
</section>
With corresponding CSS:
section .content{
width: 500px;
margin:0 auto;
}
Which would fix the content to a width of 500px and center it on the screen. Hope this helps!
Related
I'm really working hard on this thing but I can't figure out how to create this through CSS.
Basically on this website here I'm trying to add images to go outside of the main-content background as you can see on this image below. Where it says "Lattest Lessons" (sorry for the typo) or where it says Receive our newsletter.
Does anybody have a club? I'm lost!
Here is some code:
.main-content {
position:relative;
z-index:100;
padding:1em 0 8.5em 0;
background:#fff;
}
.main-content p {
color:#555;
}
.site-wrap {
position:relative;
min-height:100%;
}
What I would recommend doing is creating a div in the background that looks like this:
HTML:
<div id="backgrounddiv">
</div>
So the HTML is really easy. Don't put anything in those divs. Now for the CSS:
CSS:
#backgrounddiv {
length:100%; //spans length of page
width:100%; //spans width of page
z-index:1; //makes sure background is behind all the other objects
background-color: #000; //black background
position: absolute; //isn't affected or doesn't get affected by other elements
}
What you're likely looking for is positioning the element correctly. This can either be relative or absolute positioning based on your needs. In either case, ensure that the PARENT container is a positioned element (in your example it is: relative)
See this fiddle:
http://jsfiddle.net/callseng/UUxqG/
The paragraph with class 'move-left' is housed inside of the main-content element, it is relatively positioned and then pushed to the left by 25px.
position:relative;
left: -25px;
I working on a page with a footer. The footer's positioning is like it should, but I have an problem when i resize the browser from bottom to top. For details, you can see the image below :
Here it's my css footer code :
.footer_page {
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
Someone have an suggestions ?
Thanks.
The bottom 30px signifies bottom of the window. Calculate the distance from top you need your footer to have and give
top:500px
A better way is to give a large div id="page" around your entire page with required height, say 1000 px, and then footer with bottom 30px.
#page{position:absolute;height:1000px}
#page #footer{position:absolute;bottom:30px}
If this seems too much or height of page is variable, let footer be part of flow of the document.In such cases it is better not to use absolute positioning.
You can also do this with some javascript magic.
What I am saying is, suppose total height of your page is 1000px. Put a wrapper around entire page with id page, give absolute positioning and height 1000px, then put footer in the end.
If you mean that the footer doesn't stay fixed to the bottom, try
.footer_page, .push {
clear: both;
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
so adding .push and clear:both.
I have a content div that loads different pages. I can't set fixed position to it because I want to scroll through it's content.
This div is loaded inside a 100% height table(#main). Problem is, if the content div has small content height(so scrollbar doesn't appear) my div moves below, like more top margin is applied. I want every page though to load on same y position.
What am I doing wrong?
Note that: Below #content there is a footer div with relative position on which I also don't want to apply fixed position property. It seems that the more the #footer is dragged down the page it is taking #content with it as well, since they are on same table row.
#main{
width:1010px;
height:100%;
}
#content{
margin-top:303px;
padding: 35px;
}
#footer{
z-index:2;
position:relative;
}
The problem is that your td height is 100%, and you didn't set the vertical-align to top. So it default to middle. :
#main td {
vertical-align: top;
}
Live example of background issue: http://webid3.feckcorp.com/
As you can see the gray stripped background image flows over the bottom of the footer and leaves about 115 extra pixels below the footer. The div that contains the background image is <div id="home_page_back"> and is contained within the body element, both of which are set at a height of 100%.
I want the background image to hit the footer and then stop … not go any further past it. Can someone please advise?
Also - I do not want to place the image as a background of the body.
Cheers!
Copy of the CSS:
body {
margin: 0px;
padding: 0px;
height:100%;
background-color: #f3f3f3;
font-family: Arial;
font-size: 12px;
color: #333333;
}
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
display: block;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
I think it's the way you structured your markup, actually. Place the content below
<div id="home_page_back" style="display: block;"></div>
inside of it, remove the 100% height rule and replace it with overflow:hidden. The content will expand that div out to see the background image. As it stands now, you've made it a separate, absolutely positioned div and given it 100% height, which makes it at big as the background image you have inside it, and it expands beyond any of the content coming after it because that content now ignores it in the layout (because it's positioned absolutely.) At least that's the theory I'm going with :)
If you want the height 100% to work like that, give the body element 100% height, and the html element also 100% height.
Add overflow: hidden; to your body css.
And please, try validating your html before doing anything else and before looking for help.
#feck; may you have want an sticky footer check this answer .
Use:
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
padding-bottom: 30px;
}
Wrap "home_page_back" div around "content" div in the html instead.
Remove margin-top from #footer css.
Then, if you want it, you can add the space after the footer.
I'm really stuck here...
I have a site layout with a central layout (it's about 922px width, centered on the page)... I have a little logo that is to the top left of this, but it sticks about 10 pixels to the left of the central design. If you can imagine, it sort of sticks out to the left of the design...
Now, I was told that absolute positioning would make this happen. But I can't see how the logo would work with absolute positioning if the design itself it in the center of the page. I think this is to make sure it works in IE6... I have tried floating the logo in the central header, and then applying a negative margin of margin-left: -10px; which does work, but I've read this doesn't work in IE6.
Without a snippet of code its hard to tell, but it's probably an issue with where your element is getting it's 'absolute' positioning from. 'Absolute' is a misnomer. It really means "absolute...relative to the nearest positioned parent". So if in your design, you don't have a parent element with the css "position" style on it, it's going to take its position from the body element (which may have some margin/padding on it depending on your browser).
Adding a position: relative; to the element that you want to be the "outermost" container will allow you to specify position: absolute on an item within it, and specify your exact coordinates from there.
Set "position: relative" on a container div.
<style type="text/css">
div.page {
position: relative;
margin: 0 auto;
width: 922px;
}
div.page img.logo {
position: absolute;
left: -10px; top: 0;
}
</style>
<div class="page">
<img class="logo" ... />
</div>
Though.. I would rather make it work without absolute positioning.
When you position your logo absolutely it needs to be placed relative to something. That something is normally the viewport edge. If the logo is inside an element that is positioned relatively then it will instead be positioned relative to that element. So the answer is to make your centered page div display:relative; so the logo always aligns to the page not to the edge of the browser window. Here is an example:
The HTML:
<div id="centeredpage">
<img id="logo"... />
</div>
The CSS:
body {
text-align:center;
}
#centeredpage {
width:922px;
margin:0 auto;
text-align:left;
position:relative;
}
#logo {
position:absolute;
top:0;
left:-10px;
}
I hope that helps.