How to make DIV element opaque - javascript

I have a div at the top of my site which is 100% wide and in a absolute and fixed position. The code for it is like:
div.header{
height: 60px;
width: 100%;
position: absolute;
position: fixed;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
Now everything in that works, but when users scroll down the site content appears behind this. Is there a way that I can prevent this from happening?

remove position: fixed;
it should be like
div.header{
height: 60px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
If you want to make it fixed than remove position:absolute. both will not work together.
you have position:absolute and fixed both together, but fixed will override the position because it is after absolute.
Now if you want to appear any element above of other and it has a position: absolute or fixed you can use z-index, heigher z-index element will cover up the lower z-index element.

A div element that needs to be displayed on front should have a higher z-index value than the element that needs to be behind.
eg.
div.header{
....
....
z-index:9999;
}
div.normal{
....
....
z-index:9998;
}
On my website I have a div footer that always appears at the bottom. I use the following code - It may come in handy in the future or for someone searching for a similar query.
#bottom
{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
z-index: 999;
background-color: rgb(30,122,212);
border-top:3px solid black;
border-bottom:1px solid black;
-moz-box-sadow: 0 0 10px white;
box-shadow: 0 0 10px white;
}
I hope this helps.

It is a silly question. Just remove the position: fixed; property from your class.

Related

fixed div and see the lower height data

I have one button, when I click in this button one div generates in the body which has this css:
div#transparentDiv {
width: 100%;
background-color: rgb(0, 0, 0);
opacity: 0.7;
height: 100%;
position: fixed;
top: 0 !important;
left: 0;
z-index: 95;
}
and one div that has none css display, remove none display and get this css
.popUp {
color: #fff;
margin: 0 auto;
position: fixed;
top: 37px;
z-index: 98;
width: 61%;
background-color: #d8d8d8;
left: 0;
right: 0;
}
now my problem is this section, my div that fixed and i can't see full content,
and when I scroll page this div fixed and don't scroll down to see the lower height
What should I do?
Without any HTML this is realy hard to answer. Try to add
overflow: scroll;
or
overflow: auto;
To your fixed div. Then you can scroll the content of your div seperatly.
If you could scroll down to see the contents of a fixed div, then it would not be fixed would it?
try this:
.popUp {
position: absolute;
}

Center absolute div indside/outside relative div

Is it possible with either CSS or jQuery to center an absolute div inside or outside a relative div, if you dont know the width of the relative div witch in this case is the parent element of the two.
normally i would do something like:
.child {
position: absolute;
top: 100%;
left: -50px;
width: 200px;
height: 300px;
}
but only if i knew that the parent is 100px wide, but what if i dont know?
FIDDLE
If you don't need to target IE8 and lower, you can use the CSS3 calc() function:
left: calc(50% - 100px);
Replace 100px with half of whatever width your absolute positioned child element is.
JSFiddle example: http://jsfiddle.net/Gmmqh/5/
Note the use of box-sizing: border-box to make the boxes even with each other, like on the third one.
To center anything use below code
margin:0px auto;
So your .child becomes
.child {
display: none;
position: absolute;
top: 100%;
margin:0px auto;
/*left: -50%;*/
width: 200px;
height: 300px;
background: #eee;
border: solid 3px #ddd;
}

Appending a <div> to the horizontal center of another <div>

I'm currently trying to create a little menu that changes position as the user scrolls. I've come up for this for a style - http://jsfiddle.net/piedoom/S8tyn/
As you can see, the dots are appended to each text <div> element, and it looks like this.
However, this looks very ugly. How can I center each dot beneath each text div? I've tried doing things like text-align: center to no avail.
Use the css style of margin: auto to center the child div.
http://jsfiddle.net/S8tyn/1/
Just change your style to next
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
height: 10px;
margin: 0 auto;
}
Demo
Here is the answer for your question:
added left and margin-left
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
left:50%;
margin-left:-5px;
height: 10px;
}
updated link

Centring a div horizontally inside another div with absolute position state

I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }

Pure JavaScript: Center an absolute position div in body

What's the easiest and shortest way to center an absolute position div in the body without using a library like jQuery. Thank you!
Edit:
Something like http://jsfiddle.net/apfwh/ but maybe with a bit cleaner?
I think no js needed. CSS will do it (see here):
body {
background: #888;
}
.box {
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
UPD
In case you don't have fixed width/height of element:
JS (when element is opened):
element.style.margitLeft = -element.offsetWidth / 2
element.style.margitTop = -element.offsetHeight / 2
CSS:
.box {
background: #ccc;
position: fixed;
left: 50%;
top: 50%;
}

Categories