I have 4 sections and all of them have a background image. The problem is that each section has some text on it in the middle. They are supposed to be fixed i.e when we scroll, the section below the first section should overlap the section above it as well as the text on it.
I have used position fixed for ext but only the first section text is visible .
The HTML
<div class="site-body">
<section id="section1">
<div class="section-text1">
Section 1
</div>
</section>
<section id="section2">
<div class="section-text2">
Section 2
</div>
</section>
<section id="section3">
<div class="section-text3">
Section 3
</div>
</section>
<section id="section4">
<div class="section-text4">
Section 4
</div>
</section>
</div>
The CSS
.page-wrapper .site-body #section1 {
position: relative;
width: 1024px;
height: 100%;
background-color: red;
background: url(../images/section1.jpg) no-repeat fixed;
background-position: center center;
z-index: 2000;
}
.page-wrapper .site-body #section1 .section-text1 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section2 {
position: relative;
width: 1024px;
height: 100%;
background-color: green;
background: url(../images/section2.jpg) no-repeat fixed;
background-position: center center;
z-index: 3000;
}
.page-wrapper .site-body #section2 .section-text2 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section3 {
position: relative;
width: 1024px;
height: 100%;
background-color: #ffff00;
background: url(../images/section3.jpg) no-repeat fixed;
background-position: center center;
z-index: 4000;
}
.page-wrapper .site-body #section3 .section-text3 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section4 {
position: relative;
width: 1024px;
height: 100%;
background-color: darkblue;
background: url(../images/section4.jpg) no-repeat fixed;
background-position: center center;
z-index: 5000;
}
.page-wrapper .site-body #section4 .section-text4 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
The simple answer is that you can't do that.
When you make an element position:fixed, it's no longer going to be clipped by the overflow:hidden of it's parent.
However, you can fake it by not making the content fixed and by offsetting the content by the same amount of scrollTop.
It will simulate the effect of it being fixed.
Here's a DEMO - it does require jQuery
(There is no pure-CSS solution that I can think of.)
Related
Whenever the pink container touches the bottom of green container I want to make it unsticky. Is it possible? I tried but couldn't achieve it.
here's the code
also codepen link : Click Here
.container1 {
width: 500px;
height: 400px;
background-color: lightblue;
text-align: center;
margin: 0px auto;
position: sticky;
top: 0;
z-index: -1;
}
.container2 {
width: 300px;
height: 200px;
background-color: lightgreen;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.container3 {
width: 500px;
height: 400px;
background-color: pink;
text-align: center;
margin: 20px auto;
}
<div class="container1">
<div class="container2">
</div>
</div>
<div class="container3">
</div>
Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?
http://cichyone.linuxpl.eu/ranestwen/ex/
I've tried text-align, margin auto etc and nothing works.
When I set it in the middle using margin-left and margin-top it is working only for one resolution.
Just Use following css
.slider .polygon_container {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
color: white;
height: 500px;
text-align: center;
width: 500px;
z-index: 99999;
}
.slider .polygon {
color: white;
height: 500px;
margin: auto;
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width: 500px;
z-index: 99999;
}
You can easily use flexbox.
.owl-item > div {
display: flex;
justify-content: center;
align-items: center;
}
You can Center the polygon div using tansform:
I created the following HTML:
<div class="polygon_container">
<div class="polygon">
<h1>hello</h1>
</div>
</div>
And for that I´m using this css:
body
{
margin: 0;
padding: 0;
}
.polygon_container
{
width: 100%;
height: 100%;
background: red;
}
.polygon
{
width: 50%;
height: 50%;
background: white;
transform: translateX(50%) translateY(50%);
}
Hope this is a solution for you.
Yes it is possible. Try this.
.polygon_container {
position: absolute;
height: 500px;
width: 500px;
top: 50%;left: 50;
margin-left: -250px;
margin-top: -250px;
}
html, body {
height: 100%;width: 100%;
margin: 0;padding: 0;
}
.container {
height: 100%;width: 100%;
background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
background-size: cover;
}
.polygon_container {
position: absolute;
height: 100px;
width: 100px;
left: 50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.polygon_container .polygon {
background: #fff;
height: 100%;
width: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="polygon_container">
<div class="polygon"></div>
</div>
</div>
.slider .polygon_container {
width: 500px;
height: 500px;
position: absolute;
z-index: 99999;
text-align: center;
color: white;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Updated your class.
I'm fairly new to web development and I'm trying to create a simple chat page using SQL. This is what I currently have: Codepen
HTML:
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo">
</div>
</div>
<div id="chat_extended">
<div id="chat_area"></div>
<input id="chat_input" type="text" placeholder="Chat...">
<button id="send_button" onClick="send()">SEND</button>
</div>
</body>
CSS:
html,
body {
background-color: #333;
margin: 0;
padding: 0;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: #ccc;
background: -webkit-linear-gradient(right top, #8900AB, #282828);
background: -o-linear-gradient(top right, #8900AB, #282828);
background: -moz-linear-gradient(top right, #8900AB, #282828);
background: linear-gradient(to top right, #8900AB, #282828);
}
#header {
position: absolute;
background: #404040;
width: 100%;
height: 10%;
border-bottom: 10px solid #9800AB;
}
#logo {
position: absolute;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
#chat_extended {
position: absolute;
background: #404040;
margin-top: 3.15%;
width: 20%;
height: 100%;
float: right;
border-left: 10px solid #9800AB;
text-align: center;
padding-top: 5%;
}
#chat_area {
position: absolute;
background: #ccc;
width: 100%;
height: 100%;
text-align: left;
}
The chat window should be aligned to the left, with the chat area within the chat window, like this:
You don't need float:right when using position: absolute, just remove that and add right: 0 to #chat-extended
#chat_extended {
position: absolute;
background: #404040;
width: 20%;
height: 100%;
border-left: 10px solid #9800AB;
text-align: center;
right: 0;
Hope this helps!
The float property does not work on absolutely positioned elements.
On #chat_extended, Replace this:
float: right;
with this:
right: 0;
Absolute positioning like that isn't really a best practice for a layout like this, so once you get more comfortable, you might want to change it.
I have a webpage im trying to layout and it current looks like this.
http://imgur.com/zu4OXHu
I want the purple box to be inline w/ the pink box in the yellow box, which is in the green box. When i change the display field in css to inline-block for the two the whole green box moves down to bottom of grey box w/ height = to yellow box. Why is this happening?
CSS
div.localPlayer {
position: fixed;
bottom: 0;
width: 100%;
left:0;
height: 300px;
background: rgb(181, 181, 181);
text-align:center;
}
div.coinStatus {
position: relative;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 100px;
background-color:yellow;
}
div.coinInfo {
height: 100px;
width: 100px;
background: purple;
display: block;
}
div.coin {
width: 100px;
height: 100px;
background-size: cover;
background-color: pink;
display: block;
background-image: url('../images/6.png');
}
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
}
div.card.1 {
background-image: url('../images/1.png');
}
div.card.2 {
background-image: url('../images/2.png');
}
div.card.3 {
background-image: url('../images/3.png');
}
div.card.4 {
background-image: url('../images/4.png');
}
div.card.5 {
background-image: url('../images/5.png');
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/coup.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/file.js"></script>
</head>
<body>
<div> Image </div>
<div id="this" class="localPlayer">
<div id="card1" class="card 1"></div>
<div id="card2" class="card 2"></div>
<div id="status" class="status">
<div id="coinStatus" class="coinStatus">
<div class="coin"></div>
<div id="numberOfCoins" class="coinInfo"></div>
</div>
</div>
</div>
</body>
</html>
inline-block elements default alignment is vertical-align:bottom. So that it is going down to bottom. Apply vertical-align:top for your inline block elements. Hopefully it will fix the issue.
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
vertical-align:top;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
vertical-align:top;
}
Please check this " adding float: left might fix this
div.localPlayer {
position: fixed;
bottom: 0;
width: 100%;
left:0;
height: 300px;
background: rgb(181, 181, 181);
text-align:center;
}
div.coinStatus {
position: relative;
top: 0px;
left: 0px;
display: block;
width: 400px;
height: 100px;
background-color:yellow;
}
div.coinInfo {
height: 100px;
width: 100px;
background: purple;
display: block;
float:left;
}
div.coin {
width: 100px;
height: 100px;
background-size: cover;
background-color: pink;
display: block;
float:left;
}
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
vertical-align:top;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
vertical-align:top;
}
I'm trying to add a fading gradient over an image in a slideshow, so that, when viewing a certain picture (my slide shows 3 pics, one middle & then a small portion of the first & prev pic), the pictures on the sides will have this gradient over them, so the previous pic on the left will have it's left side fading out, and vice versa. If you get me? Similar to what was commented here: How do you apply a fading overlay to an image in CSS? I have 2 .png's, one that fades left, one that fades right. Where do I apply these in terms of HTML & .css? You'll see them at the very bottom of the .css, however they are not applied correctly and does not have corresponding divs in html (needed?). When you hover over the next & prev image, they should also lighten up a bit (lose some of their fade-effect). Example: http://www.deadmau5.com
HTML
<div class="hero">
<div class="hero-carousel">
<article>
<img src="images/deadmau5/slide1.jpg" />
</article>
<article>
<img src="images/deadmau5/slide2.jpg" />
</article>
<article>
<img src="images/deadmau5/slide3.jpg" />
</article>
<article>
<img src="images/deadmau5/slide4.jpg" />
</article>
</div>
</div>
javascript
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
CSS
.hero {
width: 1366px;
height: 340px; position:absolute;top:270px;
overflow: hidden;
margin-bottom: 48px;
margin: 0 auto;
border-top:9px solid rgba(51, 51, 51, .15);
border-bottom: 9px solid rgba(51, 51, 51, .15);
padding: 0 0 12px 0;
}
.hero-carousel article {
width: 970px;
margin: 0 auto;
height: 470px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
border-style:solid;border-width:6px;color:#000; position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: -50px;
right: auto;
bottom: 100px;
}
.hero-carousel-nav li.next {
right: -30px;
left: auto;
bottom: 100px;
}
.hero-carousel-nav li a {
background: none repeat scroll 0 0 #D21034;
color: #FFFFFF;
display: block;
float: left;
}
.hero-carousel-nav li.next a {
background: url('../images/deadmau5/large-arrow-right.png'),
-5px -7px no-repeat;
display: inline-block;
width: 105px; /*width of your img*/
height: 105px; /*height of your img*/
font-size: 0px;
right: -15px; /*this is better than 1px*/
bottom: 100px;
overflow:hidden;
outline:none;
}
.hero-carousel-nav li.prev a {
background: url('../images/deadmau5/large-arrow-left.png'),
-7px -7px no-repeat;
display: inline-block;
width: 105px; /*width of your img*/
height: 105px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
left: -50px;
bottom: 100px;
overflow:hidden;
outline:none;
}
There are several ways to handle this, but this is a simplistic example of how this site is laying everything out.
CSS
#container {
position: relative;
width: 504px;
margin: 0 auto;
}
#slide-container {
width: auto;
}
.article {
display: inline-block;
}
.article img {
width: 165px;
height: auto;
}
#overlay-left {
position: absolute;
width: 165px;
height: 60px;
top: 0;
left: 0;
background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png') no-repeat top left;
z-index: 2;
}
#overlay-right {
position: absolute;
width: 165px;
height: 60px;
top: 0;
right: 0;
background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png') no-repeat top right;
z-index: 2;
}
#overlay-left:hover, #overlay-right:hover {
opacity: 0.8;
}
HTML
<div id="container">
<div id="slide-container">
<div class="article">
<a href="">
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" />
</a>
</div>
<div class="article">
<a href="">
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" />
</a>
</div>
<div class="article">
<a href="">
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" />
</a>
</div>
</div>
<div id="overlay-left"></div>
<div id="overlay-right"></div>
</div>
Here is a JSFiddle of this if you want to play with it.