Develop Reference

Scrollable part of page

I want to have a similar effect like on this page: https://melaniedaveid.com/ (half of the page is scrollable).
I can make a sticky box, but there are certain things that I don't know how to make, such as the text. The text must be bigger than the box, but if overflow: hidden, then it is not scrollable. If it's overflow: scroll, it scrolls only if the mouse is hovering over the section, but I want the mouse to be able to scroll anywhere on the page.
body {
display: flex;
}
.example {
width: 50%;
}
.block {
background: #888888;
height: 300px;
/* margin: 1em; */
border: 1px solid black;
}
.block.one {
height: 100px;
}
.box {
width: 100%;
height: 100px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.sticky {
position: sticky;
top: 10px;
}
.orange{
background: orange;
}
<div class="example">
<div class="block one"></div>
<div class="block">
<p class="box sticky"> </p>
</div>
<div class="block"></div>
</div>
<div class="example">
<div class="block one"></div>
<div class="block orange"></div>
<div class="block"></div>
</div>

Is this how you want it?
To create the sticky effect use position: sticky.
Code:
#wrapper {
display:flex;
flex-direction:row;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 50%;
height: 300px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#para{
width:50%;
margin:10px;
}
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id="para">
This is a para
</div>
</div>

HTML/CSS - Display the link while hovering over a photo

I want to have my link displayed when I hover over the image. The way I wrote the code displays the link only if I hover over the link itself(which is contained in the image div). Any ideas how I should go on?
.image-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
font-size: 1.5em;
}
.image-text-wrapper .xx {
transition: 1s;
font-weight: 600;
margin: 20px;
}
.image-text-wrapper .xx a {
color: transparent !important;
}
.image-text-wrapper a:hover {
color: lightseagreen !important;
text-decoration: none;
}
<div class="portfolio-img-background" style="background-image:url()">
<div class="xx">
<a href="#">
Text
</a>
</div>
</div>

This is a solution using just CSS
#image{
width:200px;
height:200px;
background:black;
display:flex;
align-items:center;
justify-content: center;
}
#link{
display:none;
}
#image:hover > #link {
display:block;
}
<div id="image" class="portfolio-img-background" style="background-image:url()">
<div class="xx" id="link">
<a href="#">
Hi!, im a link
</a>
</div>
</div>

This CSS class at the bottom of your code can be slightly modified to make this work.
.image-text-wrapper:hover a {
color: lightseagreen !important;
text-decoration: none;
}

How to make 3 column two side by side one middle my divs takes everything to left

I am trying to make simple css layout. I want 3 box
{Left} {center} {right}
So I write this code
#myleft {
position: relative;
float: left;
width: 20%;
background-color: #CC6600;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
* html #mycenter {
height: 1%
}
#myright {
position: relative;
float: right;
width: 20%;
background-color: #FF6633;
}
<div id='left'> Left </div>
<div id='mycenter'> Center </div>
<div id='right'> right </div>
but instead of
{left} {center} {right}
{left}
{center}
{right}
I don't know why but it goes like this even the float is left and right

You didn't name your div id's correctly. they should be myleft and myright
body {
width: 100%;
}
#myleft {
position:relative;
float:left;
width:20%;
background-color:#CC6600;
}
#mycenter {
width:60%;
float: left;
background-color:#f2f4f4;
}
#mycenter {
height:1%
}
#myright {
float:left;
width:20%;
background-color:#FF6633;
}
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>

Wrap your divs into a main div and try to use Flexbox
Stack Snippet
.d-flex {
display: flex;
flex-wrap: wrap;
}
#myleft {
position: relative;
width: 20%;
background-color: cyan;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
#myright {
position: relative;
width: 20%;
background-color: cyan;
}
<div class="d-flex">
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>
</div>

And, of course, there is grid. First wrap the "gridded" elements
<div id='wrapper'>
<div id='left'> Left </div>
<div id='center'> Center </div>
<div id='right'> right </div>
</div>
#wrapper {
display: grid;
grid-template-columns: 2fr 6fr 2fr;
}
Then, optionally, if you want the content of each sub-div to be centered:
#left, #right, #center {
margin-left:auto;
margin-right:auto;
}

.container {
display: flex;
}
.box1 {
flex: 1 ;
text-align: center;
background-color: gray;
}
.box2 {
flex: 2;
text-align: center
}
.box3 {
flex: 1;
text-align: center;
background-color: gray;
}
<div class="container">
<div class="box1">
<p> text</p>
</div>
<div class="box2">
<p> text</p>
</div>
<div class="box3">
<p> text</p>
</div>
</div>

How do I slide a Div in <li> using javascript or Jquery?

I am required to me make a Textual slider which is going to slide after every 3 seconds but I am not able to find out how to to do this.
the slider must slide the div inside it from right to left. It is not just like any image slider.
Kindly help me out how to achieve this, i have tried all the help from stackoverflow and jsFiddle but i am not getting anything thats why I have left my Script blank so that you can tell me how to do step by step.
here is my code:
<div class="dslider">
<div class="d30">
<div class="bottom_mini_slide_container">
<ul class="bottom_ul">
<li>
<div class="bottom_single_div">
<div class="bottom_single_div_padded">
<span class="make_big"><img src="images/background/client says.png" /></span>
<p>
Make1 an outline by
assembling scattered
elements together...”
</p>
</div>
</div>
</li>
<li>
<div class="bottom_single_div">
<div class="bottom_single_div_padded">
<span class="make_big"><img src="images/background/client says.png" /></span>
<p>
Make2 an outline by
assembling scattered
elements together...”
</p>
</div>
</div>
</li>
<li>
<div class="bottom_single_div">
<div class="bottom_single_div_padded">
<span class="make_big"><img src="images/background/client says.png" /></span>
<p>
Make3 an outline by
assembling scattered
elements together...”
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="d70">
<div class="top_mini_slide_container">
</div>
</div>
</div>
CSS:
.dslider{
height: 696px;
width: 100%;
background-color: rgb(255,255,255);
float: left;
background:url(../images/background/Slider%20Background.png) no-repeat;
background-size:100% 100%;
}
.d30{
width:37.5%;
float:left;
height:100%;
}
.d70{
width:62.5%;
float:left;
height:100%;
}
.bottom_mini_slide_container{
width:100%;
height:471px;
position:relative;
top:224px;
border-top:1px solid #000;
border-right:1px solid #000;
}
.top_mini_slide_container{
width:100%;
height:570px;
position:relative;
top:0;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
.bottom_ul{
display:block;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:hidden;
}
.bottom_ul li{
display:block;
width:100%;
height:100%;
overflow:hidden;
float:left;
}
.bottom_single_div{
width:100%;
height:100%;
float:left;
}
.bottom_single_div_padded{
padding-top: 150px;
width: 81%;
height: 289px;
float: left;
padding-right: 19%;
}
.bottom_single_div_padded p{
font-size: 28px;
text-align: left;
padding-left: 65px;
padding-right: 65px;
margin: 0;
margin-top: -39px;
color:#1294de;
padding-top: 83px;
}
.make_big{
font-size: 64px;
position: relative;
left: 39px;
top: 64px;
font-family:mifont;
}
and here is the blank script:
<script>
$('document').ready(function(e) {
setInterval(function(){
}, 3000);
});
</script>

Make a div to fill the rest of the available screen height

I have this structure:
I would like to make content2's min-height = height of screen - height of other divs.
With the HTML/CSS below, the outcome is greater than the screen height. So How can I do what I wanted? The copyright part (footer) is inside the content2, so I want to make the content2's height to be exact in the screen.
body {
margin:0;
border:0;
background-color:#24373B;
color: #fff;
}
#headerBG {
min-width:980px;
background-color:#000;
}
#header {
width:980px;
}
#content1 {
width:980px;
}
#content2 {
width:960px;
padding:10px;
margin-top:30px;
background-color:#355258;
min-height:100hv;
}
<body>
<div id="headerBG">
<div id="header">header</div>
</div>
<div id="content1">content1</div>
<div id="content2">content2</div>
</body>

You are using 100hv instead of 100vh as min height. Fixed:
#content2{
width:960px;
padding:10px;
margin-top:30px;
background-color:#355258;
min-height: calc(100vh - 50px);
}
But before you use vw or vh, you should define:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}

You don't have to use viewport units (vw, vh). You could simply do it with CSS table layout as follows. The height of the pink area will expand and fill out all the free space automatically.
http://jsfiddle.net/qtu89zhm/
html, body {
height: 100%;
margin: 0;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.box {
width: 500px;
margin: 0 auto;
}
.content-2 .cell, .content-2 .box {
height: 100%;
}
.header .cell {
background: gray;
}
.header .box {
background: teal;
}
.content-1 .box {
background: gold;
}
.content-2 .box {
background: pink;
}
<div class="table">
<div class="row header">
<div class="cell">
<div class="box">header</div>
</div>
</div>
<div class="row content-1">
<div class="cell">
<div class="box">content1</div>
</div>
</div>
<div class="row content-2">
<div class="cell">
<div class="box">content2</div>
</div>
</div>
</div>

If I understand your question correctly...
body{
margin:0;
border:0;
background-color:#555555;
height:100vh;
width:100vw;
}
#headerBG{
min-width:980px;
background-color:#AAAAAA;
height:10%;
}
#header{
width:980px;
height:100%;
width:10%;
background-color:#FFF;
}
#content1{
width:980px;
height:40%;
background-color:#000000;
margin-left:5%;
width:90%;
}
#content2{
margin-top:30px;
background-color:#FFFFFF;
margin-left:5%;
width:90%;
height:50%;
}
<body>
<div id="headerBG">
<div id="header">
</div>
</div>
<div id="content1">
</div>
<div id="content2">
</div>
</body>