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;
}
Related
To have a responsive design, I made this <img> to have max-width:37%;. But when I open the jsFiddle window far enough to make it wide enough, the image extends over it's containers size and won't fit anymore.
This is a screenshot I made:
But I want the overlapping sides not to be shown, like this (photo edited):
If you want to see it in action, use my fiddle.
The image should not be seen further than the boundaries of its containers are. How can I prevent that the image is bigger than its container?
I assume that you want the entire image to stay visible. So, you need to set the max-height property to 100%.
.mbox img {
max-height: 100%;
max-width: 37%;
position: absolute;
right: 0;
z-index: -1;
}
Here is a jsfiddle.
Update: Since you want the image to keep the max-width:37% you need to hide the overflown part.
I added a div that wraps the div.mbox_content and the img. I gave to this div the class mbox_wrapper. You also need to add the z-index:2 property to the <h2>.
.mbox_wrapper {
overflow:hidden;
position:relative;
}
.mbox h2 {
z-index:2;
}
Here is an updated jsfiddle.
Just need to change the z-index property
you need to apply a max-height tag to the css..
Then the image won't be able to exceed the height of the containing div.
max-height: 100%;
On the following site: http://bit.ly/1gEehw2
I need to get the background for the header to continue into the body and .container div. I tried wrapping container in another div and padding margin/padding and making the background transparent, it did not work. I also tried to use z-index to solve this, and that also didnt work.
Can someone give me some insight on what I am doing wrong?
I just changed some of you code and worked. first give your header a bigger height:
.header{
height: 500px;
}
clear many many background:#fff css from you items like .jbcbackground and its children
and add this css to your main body element (give a negative margin-top):
.jbcbackground {
margin-top: -250px;
position: relative;
z-index: 100;
}
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.
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.
I just want the div to be in the center of the page, equal spacing from top to bottom and I need to use percents because the div content varies. I tried bottom:50% but this does not work.
Thanks for the answers! Mine's a little different and it is my mistake for not adding this, visit my blog to view the issue.
Hey everyone, thanks for using your time to answer such a stupid question, but I found that the easiest way is to just use padding:
padding-top:X%;
padding-bottom:X%;
Then just mess with it to see what your result is. If you have anything better PLEASE DO SHARE because this is obviously probablly not the most reliable.
Your answer of using percentages in padding doesn't work in all situations. This is because padding percentages are based on the width of the element you are adding padding to and not the height of it. Plus, it's not at all based on the container you want the element centered within. So if you were to decrease the width of your browser window, your DIV would move to a location that is no longer centered within the browser window because the width of the DIV has changed, causing the percentage value of your padding to change as well.
To truly center your DIV no matter the browser window dimensions, the code below should help tremendously:
.div {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#mydiv {
position:absolute;
top:20%; bottom:20%
}
See also Understanding Vertical Align.
vertical-align:center for vertically aligning
then text-align:center for horizontal
#div{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
height:100px;
width:100px;
}
this code aligns either bottom to top,or left to right but you have to set width and height.
Or use this:
#div{
display:flex;
align-items:center;
}