i need to create a div in position fixed where i will put the image under a div with the rest of the content
i have put in my CSS header {
margin-bottom: 310px;
} to create a blank below space where there is gonna be my img in the div id="background" in position fixed below.
So then i have created the following id:
#background {
position:fixed;
width:100%;
height:100%;
top:130px;
left:0;
z-index: 1;
overflow:scroll;
}
and
#content {
width:100%;
height:100%;
top:60px;
left:0;
z-index:2;
overflow:scroll;
}
The id background is supposed to be the div where my image is gonna be placed right in the blank space l after the header, the id content is the div where i am gonna have my page content and it start from the top.
Here the page : http://fiddle.jshell.net/CGJmE/4/
The effect i want to achieve is exactly this : http://tommywebdesigner.com/Home%20Page.html
but using the div to gain more flexibility. My problem is that i cannot insert properly my div id background in the position fixed with the image.
I think it s something very simple at this stage, How would you do that?
Hope the explanation is clear
You need to do that with background-position: fixed
I've shown you in this jsfiddle: http://fiddle.jshell.net/CGJmE/7/
Good luck!
I do not understand why you put overflow: scroll on #background, it does nothing, really.
Same with the overflow:scroll on the #content. It is redundant.
In general I do not quite understand what your problem is: http://fiddle.jshell.net/CGJmE/6/
I added <div id="background"><img/></div> where you indicated.
This of course still lacks styling for the header and content. (I added background-color to .container so it doesn't look too ugly).
I assume you have that somewhere else?
If you need more help, please elaborate in more detail what your problem is.
Related
I want to know how to a continued below div.
What I mean is like they have in [w3schools.com][1]
If you go to one of their turorials you will see menu in the left side, now even there is no content inside the div it still continue down (his background I mean)
I upload image that explain what I mean: http://i.stack.imgur.com/iLiUD.png
I hope that you understand me, sorry on my english.
EDIT:
You ask for a code, but I dont try anything because I dont know what to do.
Any way, this is the page: link removed
Like you say to me I set the div height to 100%, dosent help.
It's looking like that whole container is one div. Inside that div are several others that have their own height element. For example if you have a container div (using fixed just for ease right now and since you posted no code)
.myContainer{
position: fixed;
top: 0;
left: 0;
width:250px;
height:100%;
background: #ccc;
}
Inside that div you'll place the inside elements like
.insideMyContainer{
float:left;
min-height:125px; //whatever height you want or just let it be auto based on content
}
You can give fixed height:1000px; via css, or padding-bottom:200px; to that div...
element {
padding-bottom: px; /*gives extra space*/
}
Don't know what you need..
Edit:
step 1 - give a class name to content div
<div style="width:79%;display: inline-block;padding-left: 10px;" class="bigboy">
step 2 - put this code insideyour tag
<script>
$( document ).ready(function() {
$(".apl").height($(".bigboy").outerHeight()+ "px");
}
</script>
and done :-)
I am currently building a website that uses two columns, inside a position fixed box to make the heights stay at 100%.
I need the content div to scroll down if the content is longer than the page (on 11/13" screens, page is responsive) - but by setting overflow scroll on the content, the background does not drop, and there is still content at the bottom of the page.
There are two links here, one is the page as it is, and the other is the page with extra content (to make it longer than your viewport)
Link 1 link 2
If you can help my solve this, i'll be thankful :)
Add Overflow:auto; It works fine. I checked it with that page.
The problem is the .bf_page is set to height: 100% - this is getting the full height of the body, however the div doesn't start at the top of the page so it continues under the bottom of the body tag for 100 or so pixels, meaning the last bit of content is getting chopped off (hope that makes sense?!).
The height of the logo (which is causing the page to extend) is 121px so you could do the following:
Change .bf_page's height to:
.bf_page {
height: calc(100% - 121px);
}
Set .bf_content_text to overflow: auto
I've tested that and it seems to work.
Taking out the "position: fixed;" on the '.bf_menu' class works for me, if you're having trouble getting the menu to stick to the top of the page, just hide the blockquote div with display:none.
Example:
<div id="wrapper">
<div id="content">
<div id="data">
</div>
</div>
</div>
#wrapper {
height:100vh;
width:100vw;
background-color:black;
position:absolute;
}
#content {
background-color:red;
height:80%;
width:80%;
position:relative;
overflow-y:auto;
}
#data {
background-color:yellow;
width:80%;
height:1000px;
}
http://jsfiddle.net/nGU8R/1/
I'm working on a mobile version of my website, and I'm having trouble vertically-centering two divs. Since it is a mobile site, my css needs to work on any type of screen resolution, so this is where I'm having the problem. Also, different images will be used depending on what page you are on, so the resolution of the image is not static either. I need a way to center both my image div and text div no matter their height or width.
I've made a fiddle here to start out with. As you can see, I chose the green area to be the "screen" for the phone, and I want both the picture to center vertically, and the text to be on top of the picture and center vertically as well. Any help?
What I have so far... (in my jsfiddle)
HTML:
<div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>
CSS:
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.overlay {
position:absolute;
top:0;
left:0;
}
#picture {
}
#picture img{
width:100%;
}
#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
For vertically centering you can set margin top/bottom to auto.
If I understand where you want the text, this should work.
Html
<div id = "screen">
<div class = "overlay" id = "text">This is where the text would appear</div>
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>
and css
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
#picture {
margin: 0 auto;
}
#picture img{
width:100%;
}
#text {
position: absolute;
top:50%;
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
So it doesn't seem like there is a pure css way to do it, so I ended up using jQuery instead. I made a fiddle in case you want to see how I did it, but the jist of it was this.
On document load, find any item with class "overlay" and apply a negative margin-top of half it's height to center it. Because it already has a position of absolute and top:50%, this will vertically center the item.
$(document).ready(function(){
$(".overlay").each(function(){
$(this).css("margin-top", $(this)[0].scrollHeight/2*-1);
});
});
It's pretty simple, and I wish there was a way to do it in pure css, but this way works as well. Thanks for all the help.
After the discussion in the comments I've determined this question is not nearly thought out well enough to attempt to answer and so this will stay simply in hopes that someone else that finds this page is helped by the answer
:::Initial answer:::
This question is easily much more difficult than you've made it seem. If it's a matter of fitting the image to the viewport of the device there is no single css solution and a javascript solution will be needed.
Let me explain, if the image is much taller than it is wide then to fit the image to the screen you'd want to set the height to something like 90% of the height (give some padding for the text etc). however since the image is variable size if the width is the greater value you'll want the width to something like 90%. Herein lay the problem, you wont want both the height and the width of the image to be 90% as that would distort the image. So there will need to be some javascript to flop around some classes here.
After that the css gets a bit hairy also, if you're looking for an overlay to display the same based on any position the user clicks on an image (assuming this is a sort of gallery) rather than an absolute positioned item at the top and left of the document you'll want a position: fixed; element which is positioned on the viewport.
All described before would need a bit of javascript again because there is no easy way to center something that is fixed without using negative margins of half its width/height.
An example of such a thing is here:
http://jsfiddle.net/5hHMa/2/
Here we have the css for the very fixed case which you have presented.
.overlay {
position:fixed;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
#picture img{
width: 300px;
}
#text {
background-color:#000;
opacity:0.5;
color:#fff;
}
Ideally what you would do is instead of using a fixed value for the margins and width as I have you would determine these values and set them using javascript.
It is hard to form a complete solution for your problem with the limited information given, however hopefully this gives you a push in the correct direction.
You can see my webpage here
http://209.140.27.232/~ashleyo/portfolio.html
I can't seem to figure out whats wrong with my CSS. It appears that an invisible container is overlapping my content so I can't click on the images with the exception of the bottom ones that seem to be outside the container
Remove #content id z-index -1 and
Now add z-index 0 on your #content id
As like this
#content{
z-index:0;
}
Hope this may help you :)
Actually heres neither a need of this "z-index" for CONTENTs DIV and neither "height" for CONTAINERs DIV as theres no need of z-index and height can be grow automatically.
Simply Remove these properties.
#content{
z-index:0;
}
#container{
height: 500px;
}
and if you want you can limit your div`s max hieght with this CSS Property
#container{
max-height: 500px;
}
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.