I have this div here...
<div class="gallery"></div>
and here is the CSS:
.gallery {
background-color: #000;
height: 125px;
text-align: center;
position: fixed;
width: 100%;
z-index: 99999999;
top: 10%;
}
Now my site is broken up into <section> and I am trying to have that element at the top of the section at all times, not that top of the page. How would I accomplish this ?
Add css position: relative to your <section>. Then for .gallery, change fixed to position: absolute; top: 0; left; 0;
Remove that top; 10% stuff too...
You would have to modify the position to be absolute and and top: 0;
Related
I want to style every element of my page except for a particular div. I believe this is done with :not, but I'm not sure. I'm doing this to make the opacity of all elements 0.7, except for a popup.
Here is my alternative sugestion: a layer with opacity in front of the web, but behind the overlay.
Here is an example: https://jsfiddle.net/j1jodsej/
HTML
<div id="overlaybg"></div>
<div id="overlay">
I'm the overlay
</div>
CSS
#content {
text-align: justify;
}
#overlaybg {
position: fixed;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,0.5);
}
#overlay {
position: fixed;
z-index: 2;
top: 30px;
background: #FFF;
text-align: center;
left: 50%;
width: 200px;
margin-left: -100px;
padding: 30px;
}
You can give it a id/class like no-opacity and then in css opacity: 1 !important;
Here's an example: http://jsfiddle.net/Lez6kkgw/1/
I am trying to over lap a div on another div by using css, while background should become blur, like modal pop up show.
But the background of modal pop is still getting displayed through the modal pop up.
As u can see background is visible through the modal pop up!!
I have setted z-index of pop up more than the background
CSS:
.MoreDetails
{
background-color: #000;
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 2.0;
}
My design:
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
Child element cannot be stacked below parent element, even by using z-index.
Use z-index for maintaining stack level of absolute positioned elements that are siblings.
http://jsfiddle.net/TWLgc/
HTML
<div class="wrapper">
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
<div id="tableDetails2" class="tblView2">
</div>
</div>
CSS
.MoreDetails
{
/*background-color: #000;*/
background-color: rgba(0,0,0,0.8);
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
/*opacity: 0.7;*/
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
.tblView2
{
position: fixed;
margin:auto;top:0;bottom:0;left:0;right:0;
z-index: 101;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
The biggest issue is that you're nesting the tableDetails inside the MoreDetails div. Any opacity or z-index you apply to tableDetails will affect MoreDetails. Another approach might be to use the ::before pseudo class on tableDetails and position the two with CSS.
Some other tips:
Don't share id and class names. Using MoreDetails as both an id and
a class may end up breaking things as you progress.
opacity can
only have a value from 0 - 1.
Hope this helps! Good luck!
I'm trying to figure out how to code my HTML & CSS to have the 3 screenshots images align up like in the screenshot below.
The idea is when the user resizes the window smaller the images on the left and right should move in towards the center, or tighter behind the main image and the main image always stays centered.
My Dev Link:
http://leongaban.com/portfolio/athenasweb/
My CodePen
http://codepen.io/leongaban/pen/AwJFt
And tips or direction would be super appreciated! :D
HTML
<div class="pattern">
<div class="athena_thumbs">
<div class="first">
<img src="../../images/athena1.jpg"/>
</div>
<div class="second">
<img src="../../images/athena2.jpg"/>
</div>
<div class="third">
<img src="../../images/athena3.jpg"/>
</div>
</div>
</div>
CSS
div.inner .pattern {
position: absolute;
width: 100%;
height: 100%;
background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png');
background-repeat: repeat;
z-index:2;
}
.athena_thumbs {
position: absolute;
max-width: 1000px;
margin: 250px auto 0;
}
.athena_thumbs .first {
position: relative;
margin: 0 auto;
float: left;
left: 25%;
right: 25%;
z-index: 3;
}
.athena_thumbs .second {
position: relative;
float: left;
left: 10%;
right: 5%;
z-index: 2;
}
.athena_thumbs .third {
position: relative;
float: left;
right: 10%;
left: 5%;
z-index: 1;
}
Running late for a meeting.
But, if you take a look at
Code Pen: http://codepen.io/anon/pen/bazEr
.athena_thumbs {
position: absolute;
width: 90%;
margin-left: 5%;
text-align: center;
overflow: hidden;
}
.athena_thumbs .first {
position: relative;
margin: 0 auto;
z-index: 3;
}
.athena_thumbs .second {
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
.athena_thumbs .third {
position: absolute;
right: 0px;
top: 0px;
z-index: 1;
}
I think this will get you going in the correct direction.
There is nothing in the way of cross-browser checking.
Just the basic according effect more or less in place.
Hope this helps.
I hope this helps you out. I've put together a small demonstration of how I'd go about getting the effect you're after, which you can find here.
I would set the outside thumbnails to position: absolute;, sticking them to either side of the parent container, and ensuring you give them a top position to keep them in line. Set the centered thumbnail to position: relative, and center it with automatic margins as you normally would. z-indexing keeps the outside thumbs behind the centered one.
I have 3 divs, all positioned: absolute, but the div I want to fill the width of the window will only adapt to the length of the text within it. I want the yellow div #help to fill the remainder of the window.
I know this sounds noob but I cannot find the solution anywhere.
<div id="tab1">tab1</div>
<div id="tab2">tab2</div>
<div id="help">help</div>
#tab1 {position: absolute;
bottom; 0px;
right: 0px;
width: 50px;
height: 20px;
background-color: green;
}
#tab2 {position: absolute;
bottom; 0px;
right: 50px;
width: 50px;
height: 20px;
background-color: yellow;
}
#help {position: absolute;
bottom; 0px;
right: 100px;
height: 20px;
background-color: red;
}
JS Fiddle: http://jsfiddle.net/FBWzX/
If you want #help to stretch, you can set the left and right values at the same time. This trick also works with top and bottom. Absolute positioned elements are quite flexible.
#help {
position: absolute;
left: 0;
right: 100px;
}
jsFiddle Demo
I'm working on a prototype of a website here:
http://www.paulgrantdesign.com/valcomp/index.php
I have a div in the middle that is set to stick in the middle. It's got a given height, so in the css I did
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
top: 50%;
margin-top: -112px;
z-index: 100;
}
It sits in the middle, as required. But when the window gets too small, I don't want it to cover what's above it. Can I set it so that there's always a minimum amount of distance between the top of the window and the top of this div?
May be you can use media query for this like this:
#media only screen
and (min-width : 1000px) {
#middle {
color:red;
}
}
You can read these articles
http://css-tricks.com/6731-css-media-queries/ ,
http://css-tricks.com/6206-resolution-specific-stylesheets/
put position:relative on the body.that s a first step. I m trying..hold on..
and bottom--position:absolute. It works! yeah!
I fixed your problem by changing your html like this:
<div id="container">
<div id="top">
<div id="topcontent">
<p id="mobile">Mobile data collection</p>
<p id="slogan">Collect. Send. That's it.</p>
</div>
</div>
<div id="middle"></div>
</div>
Then changing your css like this:
#container{
width: 100%;
position: absolute;
min-height: 350px;
bottom: 20%;
top: 0;
}
#top {
width: 825px;
min-height: 250px;
display: block;
position: absolute;
left: 50%;
height: 50%;
margin-left: -412px;
overflow: auto;
bottom: 250px;
}
#topcontent {
width: 100%;
position: absolute;
bottom: 0;
}
...
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
bottom: 0;
margin-top: -112px;
z-index: 100;
}
It might need some tweaking to get it exactly how you want it; especially with the #bottom div
You need to add the attribute z-index to the elements #top and #bottom, and let them less than the z-index of #middle.