I have a Html page with a menu bar created in the footer . Presently , the whole page is scrollable. How do restrict the scrolling for the footer. SO, i am looking for scrolling only on content of page .
code for the footer menu bar is as follows:
#menu-bar {
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
margin: 0px;
padding: 0px;
line-height: 10px;
background: #F07C1F;
z-index: 1000;
}
positioned elements, is what you are looking for...
http://jsfiddle.net/7fuQm/1/
#menu-bar {
height: 50px;
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
margin: 0px;
padding: 0px;
line-height: 10px;
background: #F07C1F;
z-index: 1000;
}
#body {
position: absolute;
top:0px;
bottom:50px;
left: 0px;
overflow:auto;
}
p
{
margin: 10px;
}
Related
When you try to apply top margin on the second page the header does not behave correctly.
Page 1:
Page 2:
CSS
body {
font-family: Arial, Helvetica Neue, Helvetica,sans-serif;
font-size: 14px;
}
#page {
margin: 100px 25px;
}
header {
position: fixed;
top: -70px;
left: 0px;
right: 0px;
height: 50px;
}
main {
margin-top: 60px;
}
footer {
position: fixed;
bottom: -100px;
left: -60px;
right: -60px;
background-color: #3f8d99;
height: 60px;
border-top: 1px solid #333;
font-size: 12px;
width: 100%;
padding-top: 6px;
padding-left: 60px;
padding-right: 60px;
color: white;
}
footer .pagenum:before {
content: counter(page);
}
footer .pagenum-container {
margin-top: 16px;
float: right;
}
I tried to follow some ideas, especially from this Post, but I did not succeed.
Thanks for the help.
I found a solution to my problem. I changed some lines of the CSS file.
#page {
margin: 140px 25px 100px 25px;
}
header {
position: fixed;
top: -136px;
left: -60px;
right: -60px;
width: 100%;
}
And removed main class.
/*main {
margin-top: 30px;
}*/
See the result. Page 2:
Please look at the following fiddle:
https://jsfiddle.net/a9ravkf5/3/
#navbar{
position: fixed;
top: 0;
left: 0;
height:40px;
background-color: grey;
width: 100%;
}
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 0;
height:100%;
width: 200px;
background-color: black;
}
#dropdown{
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 300px;
background-color: green;
}
<div id="navbar">
</div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content">
</div>
I want to make the blue element larger (wider) than the fixed position parent element. It is going to be a dropdown for selecting option inside the sidebar, and i want it to expand the the content inside and not wrap to multiple lines (larger height).
What is the best solution for doing this?
Your child div is larger than the containing fixed div.
The reason you can't see all of it is because your #content div is shown in front of your fixed #sidebar div.
Try adding a z-index to the #sidebar and #content divs like so:
#sidebar {
position: fixed;
top: 40px;
left: 0;
z-index: 0;
height: 100%;
width: 200px;
background-color: black;
z-index: 2; // Here we give the sidebar a larger z-index resulting in it being showed on top of the content.
}
#content {
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 300px;
background-color: green;
z-index: 1; // Here we give the content a lower z-index resulting in it being showed beneath the sidebar.
}
#navbar {
position: fixed;
top: 0;
left: 0;
height: 40px;
background-color: grey;
width: 100%;
}
#dropdown {
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
<div id="navbar"></div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content"></div>
Is this what you need?
You need to set appropriate z-index on your content div and sidebar.
#navbar{
position: fixed;
top: 0;
left: 0;
height:40px;
background-color: grey;
width: 100%;
}
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 10;
height:100%;
width: 200px;
background-color: black;
}
#dropdown{
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
z-index: 0;
min-height: 300px;
background-color: green;
}
<div id="navbar">
</div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content">
</div>
you need to set two things
one is your 'z-index', in #sidebar .
and another one is 'min-height' in #content.
like
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 10;
height:100%;
width: 200px;
background-color: black;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 400px;
background-color: green;
}
and if you want to fix it then also add z-index:-1; in #content
I know this is a common issue but I just can't work this out. No matter how many combinations of settings I try, the footer won't stay on the bottom of the page. It will just sit under whatever else is above it.
body {
margin: 0;
background-color: #ACFAB7;
}
# container {
margin: 0 auto;
padding: 40px;
}
#header {
z-index: 0;
height: 78px;
background-color: #2ecc71;
}
#footer {
z-index: 2;
height: 40px;
width: 100%;
padding: 0px;
position: relative;
background-color: #2ecc71;
/*display required to center text*/
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#image {
z-index: 1;
margin: 20px auto;
padding: 50px;
}
/*Centers text within the header*/
span {
display: table-cell;
vertical-align: middle;
}
You have a lot of problems. This solution is for:
Fixing your footer at the end of the page.
Centering the contents (both vertically and horizontally).
Fixes
Get rid of display: table.
Get rid of width: 100%.
Change relative to fixed.
#footer {
z-index: 2;
line-height: 40px;
padding: 0px;
position: fixed;
background-color: #2ecc71;
text-align: center;
left: 0; right: 0;
bottom: 0;
}
<div id="footer">Copyrights.</div>
position: fixed; and bottom: 0; should do the trick. Add width and height as neccessary.
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
background-color: aquamarine;
}
<div style="background-color: lightgrey;height: 800px">
Page content
</div>
<div class="footer">
this is the footer
</div>
You can use position: fixed; bottom: 0;
#footer {
z-index: 2;
height: 40px;
width: 100%;
padding: 0px;
background-color: #2ecc71;
text-align: center;
margin-left: auto;
margin-right: auto;
position:fixed;
bottom:0;
left: 0;
}
<div>
<footer id="footer">Footer</footer>
</div>
I am currently building a chat window and now I am focusing on the styling part. I have set its attributes to fit any window size. But I am having some issue with the div id="bottomPanel". Inside that div I have a textarea that is overlapping and not fitting in properly. I tried changing the position to relative but it is not resolving the issue: How can I the bottomPanel div to fit properly and get the button to be to the right side? JSFIDDLE
Something like this :
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid #333;
}
#upperPanel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100px;
}
#chat {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 200px;
background: #666;
overflow: auto;
}
#friends {
position: absolute;
top: 0;
bottom: 0;
width: 200px;
right: 0;
background: #999;
overflow: auto;
}
#friends ul {
text-align: right;
}
#bottomPanel {
height: 100px;
background: #EEE;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
#bottomPanel textarea {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 120px;
resize: none;
}
#bottomPanel input[type=submit] {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
width: 100px;
}
textarea {
width: 100%;
height: 100%;
position: relative;
}
Here is the Updated Fiddle
The textarea does not seem to work with absolute position + right + bottom sizing technique. The solution is to use a 100% wide and tall textarea wrapped inside desired size div.
In my example, I recycled #bottomPanel instead of adding a new div. I adjusted padding so that its inner dimensions matches the desired size of textarea. The important rules are:
#bottomPanel {
background: #EEE;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
/* CHANGED */
height: 80px;
padding: 10px 120px 10px 10px;
}
#bottomPanel textarea {
resize: none;
/* CHANGED */
box-sizing: border-box;
margin: 0;
width: 100%;
height: 100%;
}
#bottomPanel input[type=submit] {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
width: 100px;
}
Put 2 inline divs in the bottom panel. Left and Right the Left is for the textarea, the right is for the button.
Change the #bottomPanel textarea to relative and remove the absolute positions.
Edit:
Another option could be to just put the textarea in the same div as the chat area, and the button in the same div as the user list.
I think what you want to achieve is this Demo.you just did a mistake in arranging textarea
I am trying to create a header for my website, with a logo contained. I wish for the logo to have a 5 pixel margin from the top of the header div that it is contained inside, however when I add "margin-top: 5px" to the div containing the logo, the header div is push 5 pixels down instead.
<div id="background">
<div id="HeaderGrey">
<div id="HeaderLogo">
<img src="CHBadgeLogo.png" />
</div>
</div>
<div id="HeaderShaderTop"></div>
<div id="HeaderShaderBottom"></div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
#background {
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 600px;
overflow: hidden;
z-index:0;
background-color: #303030;
}
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
}
I'm assuming this would have a pretty easy fix, I'm just new to html/css, sorry.
The positioning works only when you put the parent (containing) element as non-static, like relative. Then you can position the element with relative or absolute (taking it out of the flow).
Like so:
body {
margin: 0;
padding: 0;
position:relative;
}
#background {
left: 0px;
top: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 600px;
overflow: hidden;
z-index:0;
background-color: #303030;
position:relative;
}
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
position: relative;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
position: absolute;
}
Very nice Question,
I see that you know how to use padding which is good. If just simply add a padding-top: 5px; to the image div it should just move the image down 5px from the top of the navbar!