I'm trying to make a navbar that has a fixed position and has elements inside of it that are also fixed:
.navbar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
}
.content-area {
overflow: scroll;
}
.top-area {
height: 100px;
position: fixed;
top: 0;
}
I have two areas that should be fixed to the top and the bottom and a content area in the middle that's overflow scrolls under the bottom area. When I add position: fixed; to .top-area or .bottom-area they disappear to the top. Why can't I fix an element onto the navbar?
The html looks like this:
<div class="navbar">
<div class="top-area">
</div>
<div class="content-area">
<p> Content here </p>
</div>
<div class="bottom-area">
</div>
</div>
Fixed Elements are taken out of the normal flow of html page. Try to set the z-index value to these classes. Give higher e.g. z-index: 100 to those which you want to be on the top.
If you could show your html, I could fix it more precisely for you :).
Related
I have an underlay and a registration div inside it. The inner div content is dynamic based on registration step.If the content expands in height it becomes scrollable. The problem is that the scroll only works if the mouse is focused/hovered on inner-div. I want it to be able to scroll even if I have my mouse outside inner div (hovered on underlay). Is that possible? and how?
.underlay {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: #eaeaea;
}
.inner-div{
position: relative;
z-index: 3;
}
Problem was in the html code:
<div class="registration">
... content
</div>
<div class="underlay"></div>
Solution was an simple embedment:
<div class="underlay">
<div class="registration">
... content
</div>
</div>
In the code below, I want to center logo.jpg across the entire page, and right align shopping_cart.jpg in the same line. The problem with the current set up is that the image on the right causes the the image in the center to shift slightly to the left.
I'm using Skeleton CSS Boilerplate, and I don't want to put these 2 images in different divs because then in order to be responsive in mobile view, the center-aligned image will appear on top, and the right-aligned image will appear below it (I want them to continue to appear in one line in mobile view).
<div class="container" style="text-align:center">
<div class="row">
<div class="column">
<img width="50%" src="images/logo.jpg">
<img width="5%" src="images/shopping_cart.jpg" style="float:right">
</div>
</div>
</div>
So, is there some way to center logo.jpg across the entire page, and right align shopping_cart.jpg in the same line, such that logo.jpg doesn't shift slightly to the left because of the presence of shopping_cart.jpg?
instead of float right, try
position: absolute; and right: 0;
and on .column :
position: relative;
i think this will do the trick. Copy and paste :)
CSS:
.column {
position: relative;
overflow: hidden;
}
.column img:nth-of-type(1) {
position: absolute;
top:0;
left: 50%;
}
.column img:nth-of-type(2) {
position: absolute;
top:0;
right: 0;
}
I would like to know how can i set my footer width to 100%? I tried to set .footer-container and .footer width to 100% as well as absolute position.
Here's the website:
http://buysmartcardsonline.com/
If you moved your div.footer-container outside the div.page container, it should automatically cover the width of the page.
Before:
<div class="page">
...
<div class="footer-container">...</div>
</div>
After:
<div class="page">
...
</div>
<div class="footer-container">...</div>
As #Hubro mentioned in his answer moving the div.footer-container outside the div.page container would be ideal. But if you don't want to move the divs you could try using absolute positioning for the footer like below
.wrapper{
position: relative;
}
.footer-container{
width: 100%;
position: absolute;
left: 0;
bottom: -27px; (height of the footer container)
}
Remove class="footer-container" from class="page" and make it direct child of class="wrapper"
from
to
Try following code - I hope this is what you are looking for
.footer-container {
left: 0px;
width: 100%;
position: fixed;
bottom: 0px;
}
You should place the .footer-container outside the .page and then inside the add a div within the .footer-container with the class of .page to get content within the footer the same width.
<div class="page">Your page content</div>
<div class="footer-container">
<div class="page">
Footer Content
</div>
</div>
I have this code:
HTML:
<body>
<div id="menu">
menu elements...
</div>
<div id="main">
Main website content...
</div>
</body>
CSS:
body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!
Yes, you can add to your CSS:
html, body {
height: 100%;
}
and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:
div#main {
position: absolute;
overflow: auto;
bottom: 5px;
top: 50px;
left: 5px;
right: 5px;
}
check margins and paddings.
If you can use javascript, that's may be interesting to use
height: auto;
max-height: 300px; /*calculated value on resize and load*/
I want to use three <div> areas on my web page: Header, Content and Footer.
The Footer <div> is supposed to stick to the bottom of the web page.
The Header <div> is supposed to stick to the top of the page.
The Content <div> is supposed to fill the whole area in the middle of the page.
So this is the basic layout:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
For the Footer to stay down the page I added
#footer
{
position: fixed;
bottom: 0;
}
For the Content <div> I'm using a background image, scaling exactly to the div element's dimensions:
#content
{
background: url("Bilder/Bild.png") center contain no-repeat black;
}
Now I want the Content <div> to be exactly the remaining height of the ViewPort between Header and Footer without adding any JavaScript, no matter what content is later added to the Content <div>.
How can I do that in CSS3?
If the size of footer and header is known, you can use calc(). So assuming both take 100px together, this should work:
html, body { height: 100%; }
#content {
height: calc( 100% - 100px );
}
Be aware, though, that old browsers do not support this. Also have a look at the compatibility table for the prefixes that might be needed.
Example Fiddle
you could use something like this. it will allow you to keep your positions in a range of resolutions.
#header {
position: fixed;
height: 10%;
}
#content {
position: fixed;
height: 80%;
top: 10%;
}
#footer {
position: fixed;
bottom: 0px;
height: 10%;
}
check it out here