I'm looking on Cnet's homepage and they have a cool over-lapping setup right now. Click to see their homepage.
How exactly is this done?
I tried to figure it out, but I can't quite think of how to do it. Within my example the green would be the ad part on the Cnet homepage (with Zebras).
#blue, #green, #red {
height: 500px;
width: 100%;
}
#blue {
background: blue;
z-index: 1;
}
#green {
background: green;
position: fixed;
margin-top: 200px;
}
#red {
background: red;
z-index: 1;
}
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>
Heres a codepen
<div class="root">
<div class="content">
<div id="green">
<label>ADD GOES HERE</label>
</div>
<div class="scroll">
<div id="blue"></div>
<div id="red"></div>
<div id="yellow"></div>
</div>
</div>
</div
css:
.content {
position: relative;
.scroll {
height: 500px;
overflow-y: scroll;
}
#blue,
#green,
#red,
#yellow {
height: 500px;
width: 100%;
}
#blue {
background: blue;
}
#green {
position: absolute;
top: 0;
z-index: -1;
background: green;
}
#red {
background: red;
margin-top: 500px;
}
#yellow {
background: yellow;
margin-top: 500px;
}
}
theres room to improve but the gist is that the advertisement (green div) is positioned absolutely on the same level as a div that wraps your scrollable items.
Related
I have 2 div both are 50% width and float left what I want if the right div doesn't have content then left div width should be 100%.
if ($('.wrap .box2').is(':empty')) {
$('.box2').hide();
$('.wrap .box1').css({
"width": "100%"
});
}
.wrap {
width: 100%;
}
.wrap .box1 {
width: 50%;
float: left;
background: red;
}
.wrap .box2 {
width: 50%;
float: left;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="box1">
<h1>Hello 1</h1>
</div>
<div class="box2">
<h1>Hello 2</h1>
</div>
</div>
So what I want if .box2 dont have text inside h1 then left div width should be 100%
if ($('.wrap .box2 h1').is(':empty')) {
$('.box2').hide();
$('.wrap .box1').css({
"width": "100%"
});
}
.wrap {
width: 100%;
}
.wrap .box1 {
width: 50%;
float: left;
background: red;
}
.wrap .box2 {
width: 50%;
float: left;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="box1">
<h1>Hello 1</h1>
</div>
<div class="box2">
<h1></h1>
</div>
</div>
I just ran this code and the left div took the whole space
Try this:
.wrap {
width: 100%;
display: flex;
}
.wrap .box1 {
width: 50%;
background: red;
flex-grow:1;
}
.wrap .box2 {
width: 50%;
background: green;
}
.wrap .box2:empty {
width: 0;
}
it works without using javascript/jquery and uses flex-boxes and the :empty selector.
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second {
position: absolute;
bottom: 0%;
height: 30px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second">
<p>other content</p>
</div>
</div>
Please check this fiddle
https://jsfiddle.net/6d1t5jr8/
I need help to make .second div to .slideToggle from bottom border of .first div.
The problem:
Because of the bottom:0 in that way, the the height of the .second div start from the bottom.
The solution:
Try to wrap the .second with wrapper. So the slide animation will start from the top.
Like this:
jQuery(document).ready(function () {
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second-wrapper {
position: absolute;
bottom: 0%;
height: 30px;
}
.second {
display:none;
background-color: green;
}
.second p {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second-wrapper">
<div class="second">
<p>other content</p>
</div>
</div>
</div>
I have tried to create a overlaying footer by adding position:absolute to #container & a Top: XXpx to .panel2 as well as adding a z-index however this does not work any help is greatly appreciated.
https://jsfiddle.net/z3q2wtLf/29/embedded/result/
below is an example of what I'm trying to accomplish
div {
position: absolute;
width: 200px;
height: 200px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
<div id="div1"></div>
<div id="div2"></div>
<div2> would be the footer? In this case, only <div2> has to get the position: absolute setting. Also, as #Yaakov already wrote, the surrounding container has to have position: relative.
A very basic setup would be:
<div class="wrap_all">
<div class="content">
(content text text text)
</div>
<div class="footer">
(footer text)
</div>
</div>
with the following CSS:
.wrap_all {
position: relative;
}
.content {
background: red;
margin-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0px;
height: 50px;
background: yellow;
}
(The margin-bottom: 50px; on .content is there so that no text or images in .content can be hidden by the footer)
Your #div1 and #div2 should be wrapped within an element with relative position in order to work.
For example:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
And the css:
#container {
position:relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
I am trying to center 3 div into a parent div with no result.
Could you help me please ?
HTML :
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
CSS :
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
float: left;
background: red;
height: 90px;
}
RESULT :
Change the float:left; to display:inline-block;, like this:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
you can try this one:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
DEMO HERE
Try display flex. You'll need to add vendor prefixes!
#container {
text-align: center;
display: flex;
justify-content: space-between;
width: 100%;
}
#left, #middle, #right {
width: 200px;
background: red;
height: 90px;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
margin:0px auto;
height: 90px;
}
#left
{
background: red;
}
#middle
{
background:blue;
}
#right
{
background: green;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
Add Bootstrap CSS and have a look at this example.
Here:
COL=Column
MD=Medium Sized Device
4 represents the partition of the screen as the Maximum column possible in a single row is 12
So 4/12=3 Panels in result.
<div class="row">
<div class="col-md-4">left</div>
<div class="col-md-4">middle</div>
<div class="col-md-4">right</div>
</div>
Try Bootstrap it will make your life easy.
Here's link for the Grip System you want Bootstrap Grid System.
remove float & add display inline-block
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
Add margin-left: auto, margin-right:auto, width: 600px to your container.
Thanks
Let's say I have four images inside a div. they all have a width of 5.5%
[_o__o__o__o_]
I want to use javascript to change the target that is moused over (hovered on), and have it look like this:
[_o__O__o__o_]
so I made the width of the target increase
however it also pushes the other elements to the side instead of staying where they are so it's more like:
[_o___O___o__o_]
I don't know how to make the other elements stay exactly where they are instead of being pushed.
The issue is that YES I am successfully able to alter the width.
BUT changing the width of one element pushes the surrounding elements to the respective right and left.
jsbin: https://jsbin.com/zujutamazo/edit?html,css,js,output
You can use flexbox for this one:
.wrapper {
display: flex;
display: -webkit-flex;
display: -moz-flex;
width: 400px;
background-color: red;
}
.item {
position: relative;
width: 25%;
height: 200px;
}
.circle {
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
transition: all .3s;
}
.item1 { background-color: blue; }
.item2 { background-color: red; }
.item3 { background-color: orange; }
.item4 { background-color: yellow; }
.item:hover .circle{
background-color: black;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="item item1">
<div class="circle"></div>
</div>
<div class="item item2">
<div class="circle"></div>
</div>
<div class="item item3">
<div class="circle"></div>
</div>
<div class="item item4">
<div class="circle"></div>
</div>
</div>
As I was explaining, you need to set a higher z-index to "be above" the non-hovered boxes. And set negative left-right margins, equivalent to the additional width from hovering to prevent everything from moving around.
Below is a working example, with percentages.
body {
width: 300px;
height: 100px;
}
.myClass {
width: 20%;
height: 50%;
position: relative;
z-index: 1;
float: left;
}
.myClass:hover {
width: 30%;
height: 70%;
z-index: 10;
margin: 0 -5%;
}
body .myClass:nth-child(1) {
background-color: red;
}
body .myClass:nth-child(2) {
background-color: green;
}
body .myClass:nth-child(3) {
background-color: blue;
}
body .myClass:nth-child(4) {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
</body>
</html>