I have an issue about HTML and CSS Layout. All i want on my website is a fixed left bar for navigation and a fixed top bar for messages.
I would like both the items to follow when the user scrolls down the page (fixed) but i have an issue telling the CSS i want the top bar to fill up the whole rest of the page width.
Using this HTML :
<body>
<div id="leftbar">
<img border="0" src="images/somelogo.png">
<p>leftbartest</p>
<p></p>
</div>
<div id="topbar">
<p>topbartest</p>
</div>
</div>
</body>
Consider both these CSS examples :
Bar is fixed and stay on page when scroll, but will not fill width and resize when browser window is resized (will fit text size):
body {
background-color: #A69E40;
}
html {
height: 99%;
width: 99,8%;
}
#leftbar {
position: fixed;
float: left;
margin-left: -8px;
margin-top: -8px;
background-color: #FFFFFF;
width: 272px;
height: 100%;
z-index: 2;
border: outset 2px #000000;
}
#topbar {
position: fixed;
float: left;
margin-left: 268px;
margin-top: -8px;
background-color: #FFFFFF;
height: 35px;
z-index: 5;
border: solid 1px #000000;
}
Bar is not fixed and will not stay on the page when scroll, but will fill width and resize when browser window is resized :
body {
background-color: #A69E40;
}
html {
height: 99%;
width: 99,8%;
}
#leftbar {
position: fixed;
float: left;
margin-left: -8px;
margin-top: -8px;
background-color: #FFFFFF;
width: 272px;
height: 100%;
z-index: 2;
border: outset 2px #000000;
}
#topbar {
margin-left: 268px;
margin-top: -8px;
background-color: #FFFFFF;
height: 35px;
z-index: 5;
border: solid 1px #000000;
}
It's meant to create some kind of portal where a table will be embed to the right of the leftbar and under the topbar. All in all the left bar should fit the whole height of the first 272 width pixels, the top bar should fit the whole width of 35 pixels height and the whole rest will be used to drop some tables.
Please detail, i am new to this wonderfull world that is HTML and CSS, and i would like to become solid in this field of modern technology.
Thanks again for reading this and thanks in advances for your brainstorm on my silly beginner problem.
Here's a CodePen demo.
Top bar on the top and left bar below it
HTML
<nav id="left-bar">
Left bar
</nav>
<header id="top-bar">
Top Bar
</header>
<article>
All your content goes here.
</article>
CSS
html, body {
margin: 0px;
padding: 0px;
background: #E4E4C5;
width: 100%;
height: 100%;
}
header {
position: fixed;
background: #8D2036;
width: 100%;
height: 35px;
}
nav {
padding-top: 35px;
position: fixed;
background: #B9D48B;
width: 272px;
height: 100%;
box-sizing: border-box;
}
article {
padding: 55px 20px 20px 292px;
width: 100%;
box-sizing: border-box;
}
Left bar stretching the entire height and top bar next to it
HTML
<header id="top-bar">
Top Bar
</header>
<nav id="left-bar">
Left bar
</nav>
<article>
All the content goes here...
</article>
CSS
html, body {
margin: 0px;
padding: 0px;
background: #E4E4C5;
width: 100%;
height: 100%;
}
header {
padding-left: 272px;
position: fixed;
background: #8D2036;
width: 100%;
height: 35px;
}
nav {
position: fixed;
background: #B9D48B;
width: 272px;
height: 100%;
box-sizing: border-box;
}
article {
padding: 55px 20px 20px 292px;
width: 100%;
box-sizing: border-box;
}
Related
My problem is demonstrated in the following jsfiddle. It works fine in Chrome but not in Firefox:
https://jsfiddle.net/m0u175o8/1/
There should be no pink showing up on the right side, the area above the footer should be black (canvas).
I've got a footer at the bottom of the page. The height of the footer needs to be determined dynamically based on its contents. Above it sits a canvas that should take up the remaining portion of the screen. There are a couple of other panes like a header and a side bar. I included them in the jsfiddle but I'm not sure they have effect on the problem.
In actuality, the contents of my panes are laid out using bootstrap 3 so the jsfiddle imports bootstrap.
For reference, here is the HTML:
<div class="header">header<div>
<div class="left-pane">scrollable</div>
<div class="right-pane">
<div class="canvas-wrapper">
<canvas></canvas>
</div>
<div class="bottom-pane">dynamic <br> height <br> footer</div>
</div>
Here is my CSS:
body, html {
height: 100%;
color: white;
text-align: center;
}
.header {
position: fixed;
width: 100%;
height: 20px;
background: green;
}
.left-pane {
position: relative;
float: left;
width: 25%;
margin-right: -75%;
height: 200vw;
background: blue;
z-index: 101;
}
.right-pane {
position: fixed;
top: 20px;
padding-bottom: 20px;
bottom: 0px;
width: 100%;
height: 100%;
padding-left: 25%;
float: left;
z-index: 100;
display: table;
background-color: pink;
}
.canvas-wrapper {
height: auto;
width: 100%;
display: table-row;
}
.bottom-pane {
height: 1px;
width: 100%;
background: red;
display: table-row;
}
canvas {
background: black;
width: 100%;
height: 100%;
}
I am currently creating a scrolling (long) page. I have encountered a problem with the footer though. Since the wrapper has an absolute position, the footer goes behind the wrapper, instead of sticking at the bottom of the page. How can I make it so that my footer will stick at the bottom of the page on all resolutions?
http://jsfiddle.net/Kzh7z/
You can see the little blue part of it sticking behind the wrapper.
HTML:
<div id="wrapper">
</div> <!-- end wrapper -->
<footer>
<div id="footer">
<div class="copyright">
<p>footer copyright blah etc</p>
</div>
</div>
</footer>
CSS:
#wrapper {
background: #CCC;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
width: 1000px;
height: 1200px;
position: absolute;
}
#footer {
background: #0A59C2;
border-top: 5px solid #06489E;
width: 100%;
height: 85px;
}
Thank you!
EDIT: Updated to reflect what was discussed in the comments.
This will keep #footer at the bottom and keep #wrapper above it. position: absolute is not necessary for #wrapper.
#wrapper {
background: #CCC;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
width: 1000px;
height: 1200px;
position: relative;
overflow: auto;
z-index: 1;
}
#photoContent {
border: 10px solid #F5F5F5;
box-shadow: 0 0 7px;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
width: 781px;
height: 231px;
background: #FFF;
margin-top: 12px;
}
#footer {
background: #0A59C2;
border-top: 5px solid #06489E;
width: 100%;
height: 85px;
z-index: 2;
}
I want to design a site, where the corners of the page are rounded (black circle on all the corners of the window).
To do so I've setted the body color to black, and I've added a rouded corner to the content div, a part form its background.
<body style="backgound: black">
<div class="content" style="background: blue; border-radius: 8px;">
....
</div>
</body>
After that I've tried:
Not working solution 1
position: absolute;
height: 100%;
Not working when content height is larger than window, because the content background hiddes when scrolled.
Not working solution 2
position: fixed;
height: 100%;
Not working when content height is larger than window; no scroll bar displayed.
Not working solution 3
Nothing at all.
Not working when content height smaller than window; the bottom part is left black.
Ugly working solution 1
Add 4 images with the border, with fixed position
Any one know a clean solution to the problem? css3 is accepted.
THanks
I think this should help:
.content
{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background blue;
border-radius: 8px;
}
EDIT this solution will work:
.content
{
float:left;
min-height: 100%;
height: auto;
width: 100%;
background: blue;
border-radius: 8px;
}
working jsfiddle
another example using css3 calc() here
You can try height:100%
body, html{height:100%}
.content{height:100%}
DEMO
Use two nested fixed divs for header, and the same for footer.
This will work with every kind of content, on every browser:
Running Example: http://jsfiddle.net/5kgN3/
HTML
<div id="headerOuter"><div id="headerInner"></div></div>
<div class="content">
<br />test
<br />test
<!-- More tests here -->
<br />test
<br />test
</div>
<div id="footerOuter"><div id="footerInner"></div></div>
CSS
body, html {
height: 100%;
width: 100%;
}
.content {
min-height: 100%;
height: auto;
width: 100%;
background: blue;
padding-top: 20px;
padding-bottom: 20px;
}
#headerOuter{
background-color: black;
height: 20px;
width: 100%;
position: fixed;
top: 0;
}
#headerInner{
border-radius: 20px 20px 0px 0px;
background-color: blue;
height: 20px;
width: 100%;
position: fixed;
top: 0;
}
#footerOuter{
background-color: black;
height: 20px;
width: 100%;
position: fixed;
bottom: 0;
}
#footerInner{
border-radius: 0px 0px 20px 20px;
background-color: blue;
width: 100%;
height: 20px;
position: fixed;
bottom: 0;
}
I used 20px of border-radius, when adjusting that to your 8px, remember to adjust paddings and heights.
I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}
I'm using a sticky footer that will not stay down if i resize the window smaller and then scroll up. Also the image for my main wrapper is not scaling down proplery if i resize the window.
working url: http://www.nvcc.edu/home/ssuh/footer/index2.html
screenshot of problem - http://www.nvcc.edu/home/ssuh/footer/help.html
is there way to keep the footer on the bototm of the page until it hits my content?
html:
<body class="yui-skin-sam splash_asp">
<div id="parature_wrapper"> # this has a background image which does not
scale right
<div id="parature_content"></div> #this has a backgorund image which works.
</div>
<div id="footer"></div>
</body>
css:
*, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% Verdana, Geneva, sans-serif;
background: url(background.jpg) no-repeat center top fixed;
height: 100%;
}
html {
height: 100%;
}
#parature_wrapper { /* wrap all of the content */
width: 960px;
margin: 0 auto;
position: relative;
background: url(topheader.png) no-repeat top left ;
height: auto;
min-height: 100%;
margin-bottom: -30px}
#parature_content { /* Main Page Content goes here. Left KB nav is included. */
position: absolute;
top: 166px;
right: 20px;
width: 630px;
background:url(content-bg.png) repeat;
font-size: 1.1em;
/*height: 5000px; */
padding-top: 20px;
padding: 20px;
}
#footer {
clear:both;
margin: 0 auto;
background: url(footer-bg.png) no-repeat ;
width: 918px;
bottom: 0;
position: relative;
height:28px;
border-top: solid 1px #a49a8b;
border-left: solid 1px #a49a8b;
border-right: solid 1px #a49a8b;
}
You could see/use Ryan Fait's sticky footer:
http://ryanfait.com/sticky-footer/
#footer's height: 30px
#parature_content's top: 165px
Maybe you should set #parachute_content > .push's height to (30+165)px to adapt to the relative positioning of the content area.
You need to use position:fixed for your footer.
Here's a good resource for you: https://developer.mozilla.org/en/CSS/position