My question is about the layout in this image:
White box in upper right corner = content box
The black line at the bottom = footer bar
The box to the right = the sidebar box
The sidebar is set with CSS to position: fixed, so it will follow the users scroll.
The problem is, on small screen sizes, the user can scroll too far, meaning that the sidebar box, will go futher down than the footer bar.
How can I make the sidebar stop 20 pixels before hitting the footer?
CSS Code:
div#sidebar
{
margin: 20px 0px 20px 20px;
width: 270px;
height: 295px;
border: 1px solid #CCC;
background-color:#FFF;
padding: 20px;
position:fixed;
left: 730px;
}
div#content
{
margin: 20px 0px 20px 0px;
width: 650px;
height: 600px;
border: 1px solid #CCC;
background-color:#FFF;
float: left;
padding: 20px;
}
div#footer
{
width: 100%;
min-width:1024px;
height: 30px;
border: 1px solid black;
background:#252525;
text-align:center;
padding-top:10px;
color:#555;
}
I would try to adjust #sidebar margin-bottom. What's your HTML?
If you want the content box to stop getting larger with zoom i think you would have to use javascript. If i understand your problem correctly, that content goes over the footer. Try use this:
div#footer
{
width: 100%;
min-width:1024px;
height: 30px;
border: 1px solid black;
background:#252525;
position: relative;
text-align:center;
padding-top:10px;
color:#555;
}
Try bottom: 20px; property in your div#sidebar.
Related
I can't seem to make an element move in CSS. It's a form with a background and it's centered. I can't see what I'm doing wrong.
#skyformbox {
width: 50%;
margin: 0 auto;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-
content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
<div align="left">
<div id="skyformbox">
[gravityform id="12" title="false" description="false"]
</div>
</div>
Why are you positioning 2000px left? As far as I know the "left" property will only work if the positioning is set to absolute...
Anyway try this:
#skyformbox {
width: 50%;
margin-left: 0px;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
Setting the margin-left to 0px did the trick for me (assuming that what you're trying to do here is to get the form to align to the left side of the page).
I set the nav as fixed so that when I scroll, it will stick to the top.
but when I scroll through the map, it overlaps into the navigation
here are the codes that I used:
CSS:
#container header{
background-color:white;
width: 890px;
padding: 0 0.8em;
height: 120px;
margin: auto;
position: fixed;
}
#map{
z-index:2px;
position: relative;
border-radius: 10px;
border: 5px solid #eee;
width: 26%;
float:left;
margin-top:50px;
}
This is what happened
Just make a change in your css:
Remove px from z-index. z-index creates planes and that are not in px.
#map{
z-index:2;
position: relative;
border-radius: 10px;
border: 5px solid #eee;
width: 26%;
float:left;
margin-top:50px;
}
If you want that the map does not come over navigation bar, set the z-index of map to be lower than that of navigation bar.
I am developing a website.
The site is in a very early state, and my problem is the header on the top of the page. I would like to have the Mainline "PersIntra" stand beside the little box with the "log out button" and not over it. I have tried to make this work with my css. I have tried nesting divs.
The header is getting too wide vertical. I want to make the headline text size bigger without the header itself needing to grow wider because of the text is not beside the logout box but over it.
Here is some links to tell you what I mean. (It is complicated to describe in text.)
Screenshot of header
The website is in Danish, but that shouldn't stop you from seeing my problem (screenshot..).
Here is the html:
<div id="header">
<h2> PersIntra </h2>
<div id="border">
Velkommen <?php echo $_SESSION['enummer']; ?> <br>
Du har 1 ny besked <br>
Log Ud <br>
</div>
</div>
</div>
Here is the css:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
#border {
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
Try edit your css.
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
#header h2 {
margin-top:50px;
float:right;
margin-right:300px;
}
#border {
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
There are lots of ways to do that kind of thing. One is to float the header to the left and display the header and login box inline, like so:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
h2 {
float: left;
display: inline;
width: 80%;
font-size: 2em;
}
#border {
display: inline;
width: 20%;
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
If you're trying to get something up and running quickly, you might consider using a css framework like bootstrap (http://getbootstrap.com/). If you're trying to learn css, I'd recommend pulling down the code for a framework like that and/or looking at the site for it with dev tools open, and explore what they're doing.
Hope that helps.
If you want to have text bigger or move around without affecting other content you could similar to this:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
position: relative;
}
#header h2 {
position: absolute;
top: 0;
left: 25px;
}
I would just add this to #border:
#border {
position: absolute;
bottom: 20px
left: 20px;
}
and add position: relative to the surrounding element:
#header {
position: relative;
}
Tha way #border will not take any space in the surrounding element and you can center-align you header without problems.
I am having some trouble with my sticky footer. First of all, my content does not reach the entire bottom of the screen (even underneath the footer .. check on larger monitor). Also, when the window is smaller than the content, the header moves and does not expand 100% in width when you move the horizontal scrollbar. What am i doing wrong?
Here is my testing site: My Site
If you use firebug or Google Chrome's built in Inspect Element, you can see where all the elements are.
Here is some of the css:
.content
{
width: 1100px;
margin: 0 auto;
border-left:1px solid #000;
border-right: 1px solid #000;
background:#222;
min-height: 100%;
height: 100%;
padding-bottom:50px; /* Padding for footer (width) */
}
.contentInner
{
padding:0px 10px 0px 10px;
min-height: 100%;
height: 100%;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000; /* So you can see it */
}
Here is what it looks like when the content is bigger than the window:
I would also like the Content to extent all the way down the page with the content!
Edit / add your css like this to get rid of smaller screen issues..
.mainContainer {
min-width: 1100px;
}
To get that content background to continue all way down, i suggest using centered background image in .mainContainer and remove content background OR just set .content min-height to some large value like 900px OR use javascript to set content height if smaller than screen height.
if you put your .mainContainer to the width of your .content, it will work.
.mainContainer {
width: 1100px;
}
Is it what you want ?
Replace your CSS to this one.
.content
{
width: 100%;
margin: 0 auto;
border-left:1px solid #000;
border-right: 1px solid #000;
background:#222;
min-height: auto;
height: auto;
padding-bottom:50px;
position:absolute;
}
.contentInner
{
padding:0px 10px 0px 10px;
min-height: auto;
height: auto;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000;
}
im using this css code:
/* status update page style */
#content_wrapper {
display: inline;
width: 80%;
padding: 0;
margin: 0 auto;
}
#content_update {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_maintainance {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_sidebar {
display: block;
float: right;
width: 230px;
padding: 20px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* FOOTER */
#footer {
width:100%;
height:580px;
position:absolute;
bottom:0;
left:0;
border-top:4px solid #ed1c24;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
but the divs are displaying behind the footer divs. i have created a fiddle here so you can see the html too - http://jsfiddle.net/wmrhC/
It's because you have set the footer div to be absolutely positioned at the bottom of the browser window with a height of 580px. This takes the div out of the regular document flow, which means other elements can start hiding behind it, and since it is 580px high, most other elements on the page will hide behind it. You could fix this by setting the z-index on the footer to -1, but that's probably not what you are after, as it would just mean that the div's will start floating over the top of the footer instead of behind the footer, and that still doesn't look pretty.
You should get rid of the absolute positioning which you have set currently, and maybe look at something like CSS sticky footer for an approach which will let you set a footer which sticks to the bottom of the page instead of to the bottom of the browser window.
When working with position: absolute or fixed you should always be aware that these elements can cover other parts of your site, and you have to manage their depth manually
You can do this using the z-index property.
Let's say that you would like that the footer part appears below all contents.
You could add the z-index property like this:
#footer {
/* other styles */
z-index: -1;
}
See it in action
Though note, that this only fixes the "content is displayed behind" problem. But looking at your page you have more positioning problems to solve.
As stated in other answers, it's because you've positioned your footer div to be fixed.
Something along this line (regarding HTML and CSS) should help for your page lay-out:
JSFiddle demo
This is the CSS (see the JS Fiddle for the full code):
...
.wrapper {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
background-color: #cccccc
}
.left1 {
position: relative;
float: left;
left: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.left2 {
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
background-color: #ccccff
}
.right {
position: relative;
float: right;
right: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.footer {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
margin: 10px 0px;
background-color: #cfcfcf
}
...
As you can see, none of these items are positioned absolute or fixed.
Be sure to check this link too, which explains how you can create a sticky footer:
CSS Sticky footer (As indicated by another answer).