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.
Related
I have a webpage with a menu bar, banner (div) and a main section (container div). The menu bar extends past the visible region of the window when the window is resized (made smaller), which triggers the horizontal scrollbar. But if I then scroll to the right in the resized window, the banner and container stay where they are and the background of the website is exposed.
Also I have a min-width enabled right now for the menu bar because I don't want the menu bar pieces collapsing down to the next available line in a messy fashion on resize.
Is there a way to get the bar to collapse in an organized manner on resize, for example: first row with 4 blocks, second row with 3 blocks. Or any other suggestions for how to deal with the menu bar during resize?
I've also had difficulty properly centering the menu bar.
Here is the jsfiddle for the page with the relevant sections of html and css. http://jsfiddle.net/dj99aq6e/
<div id="dtitle">
<h2 id="title">Title</h2>
</div>
piece of code for the menu bar:
<!--menu bar STARTS -->
<ul id="sddm">
<li><a href=""
onmouseover="mopen('m1')"
onmouseout="mclosetime()">test</a>
</li>
CSS:
body{
font-family: sans-serif;
background-color: #b2b2b2;
background-color: rgba(0, 0, 0, .2);
margin:0;
padding:0;
height:100%;
width:100%;
overflow-x: auto;
}
html{
margin:0;
padding:0;
height: 100%;
width: 100%;
overflow:hidden;
}
#dtitle{
background-color:black;
padding:0;
height:8%;
width:100%;
overflow:hidden;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
}
#sddm{
display:table;
margin:10px auto;
margin-bottom: 2px;
padding-left: 0;
min-width: 1050px;
z-index:30;
}
#sddm li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font:14px sans-serif
}
#sddm li a{
display: block;
margin: 0 1px 0 0;
padding: 8px 10px;
width: 128px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none
}
#sddm li a:hover{
background: #49A3FF}
#sddm div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2
}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 12px sans-serif
}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
Is this what you are going for? http://jsfiddle.net/dj99aq6e/1/
I took out the overflow: hidden from #dtitle and adjust the text with padding
#dtitle{
background-color:black;
padding:0;
padding-top: 5px;
margin-top: -15px;
height:8%;
width:100%;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
}
OK, I figured it out.
I gave #about (the main content container) a min-width of 1000px, and #dtitle a min-width of 1050px. The 1050px min-width matches the min-width on the menu bar which was the key. Now upon resize and then horizontal scroll the previous gap on the right disappears!
I also put a div around the contact information div and gave it a min-width of 1050px so it stays positioned properly.
Here is the updated code: http://jsfiddle.net/dj99aq6e/2/
#dtitle{
background-color:black;
padding:0;
height:8%;
min-width:1050px;
overflow:hidden;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
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).
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.
I have a content area in the middle of the page, which I am centering with margin: 0 auto;
Now I want to have a background effect on the page with several small cubes, that, when hovered change with some effects.
The hover effects work fine under or over the content area, but the problem is that the margin, which centers the content seems to disturb the recognition of the hovering, because when hovered over the cubes behind the margin of the content area, the hover selector doesn't work.
Thanks for any help!
EDIT: Here a code example: http://cssdeck.com/labs/dl3ojm0g
Some small changes in the CSS and it works well.
#content {
margin: 0 auto;
position:relative;
margin-top: 50px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray;
z-index:2;
}
#cubeHolder {
position: absolute;
top: 0;
left: 0;
z-index:1;
}
Just needed to position #content to relative and gave it a higher z-index comparing to #cubeHolder
Example : http://jsfiddle.net/nwrFa/6/
Position your content-container absolute. Then left: 50% and margin-left: -700px/2
#content {
position: absolute;
top: 50px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray; }