I have a menu bar that I want to place at the bottom of my screen. I've set the positioning to absolute and the distance from bottom to '0', but for some reason, it won't move from the middle of the screen, regardless of how I try to position it. Can anyone catch what I am doing wrong?
<div class=bmenu>
<img src="bottommenu.gif" width=100% height="39" alt="" />
</div>
<style>
.bmenu
{
position:absolute;
z-index: 2;
bottom:0;
left:0;
width:100%;
}
</style>
Edit:
Several commenters have said that this code places it at the bottom for them. Does this mean that the problem is coming from the way this code fragment is interacting with the rest of the code? Does anyone know what could cause that?
If you use any of the browser's web inspectors, you'll see that the height of your <html> and <body> elements aren't 100%, but auto, which means they'll only be as tall as the content within them expands them to.
What you need to do is set the height of these elements, like so:
html, body {
height: 100%;
}
This will force them to fill the full height of the viewport. The only caveat is that this requires you to define margin-top, margin-bottom, padding-top and padding-bottom on other elements, since margins and paddings will be added on top of the height, which is not what you normally want when defining height (or width, for that matter) in %.
try to use this code:
.bmenu
{
position:fixed;
z-index: 2;
bottom:0;
left:0;
width:100%;
}
Related
I am trying to fit an image to its full width of the browser. Please let me know CSS code for that. I am using px for container. So let me know according to that. I don't want scroll bars to full screen of the browser. I am trying width:100%, width in px. But nothing works I see scroll bar.
Images have their own display type in CSS, so when you say something like width:100%, it fills to 100% of the original image's dimensions rather than acting like a block and expanding to fill 100% of the parent element.
You can fix that by changing the display type, though only for that one image:
<style type="text/css">
img.big-img {
display:block;
width:100%;
}
</style>
…
<img src="my_image.jpg" class="big-img">
If you want it to depend on browser's viewport add this to your element's css and it will stretch automatically
background-size: 100% 100%;
img{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
why my footer css wont take the full Edge with 100% ?? there is a white space on left. how do i fix this ?? before when i use 100% width , the footer take full 100% but now it have white space every time i use footer. can any one tell me why?
the footer also wont stick to below. i always need to use position to fix it.
<html>
<head>
<style>
footer{
width:100%;
height:50px;
background-color:blue;
}
</style>
</head>
<body>
</body>
<footer>
i am footer.
</footer>
</html>
The body has a default 8px margin so you need to remove that.
body {
margin: 0;
}
That should remove that space. You'll probably want to add some padding to your footer as well or your footer content will run right to the edge of the screen.
For the positioning of the footer...you'll need to put some content above it so it pushes down, or apply absolute positioning to fix it to the bottom, or add a 'min-height' declaration on the content area so it has height regardless of whether there is content or not.
body and other elements have margin by default
use
body{margin:0;}
how will footer go down if you dont have any content above it?
use absolute position that will work in your case
footer{
width:100%;
height:50px;
background-color:red;
position:absolute;
bottom:0;
}
Another simple JS/HTML problem. How do I make a HTML element stretch to the bottom of the page always?
I tried doing height: 100%; but it stretches off of the bottom of the page (since it's not located at the top, I think.)
What's the preferred method of doing this? If you resize the window, it should make its bottom reach the window bottom.
position:absolute;
bottom:0;
top:0;
if your element not is body, use
position:relative
on parent, and specific width, and height.
Try this: http://jsfiddle.net/bBhUX/
Add
position: fixed;
overflow: hidden;
into the parent container
Use
position:absolute; //or fixed if you want it to remain at constant position even when scrolled
bottom: 0;
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 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;
}