I'm having a Youtube video iframe cover the whole window (100% width and height) and i have the rest of the elements scroll over the video.
Everything works fine on Chrome and Firefox but IE doesn't seem to respond to z-index.
I've created a jsFiddle here http://jsfiddle.net/RickyStam/42tLS/ where you can see the problem.
HTML
<div class="page-container">
<div>
<div class="header">
<img src="Images/logo.png" />
<div class="menu-container">
<ul>
<li>solutions</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="video-container">
<iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&showinfo=0&controls=0" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
<div class="video-container-text">
<h1 class="regularfonts">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</h1>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
</div>
</div>
</div>
<div style="width: 100%; height: 685px; z-index: 12"></div>
<div class="aboutus-container">
<h1>ABOUT US</h1>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUMLOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
<p>
LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM<br />
LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
</p>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
</div>
</div>
CSS
.page-container {
width: 100%;
}
.header {
background: black;
height: 80px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 11;
}
.video-container {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
text-align: center;
}
.video-player {
width: 100%;
height: 100%;
}
.video-container-text {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-image: url('../Images/check_black.png');
padding-top: 200px;
box-sizing: border-box;
}
.video-container-text h1 {
font-size: 18px;
padding: 20px 30px;
background-image: url('../Images/check_black.png');
border-left: 2px solid #cf0103;
border-right: 2px solid #cf0103;
display: inline-block;
}
.aboutus-container {
height: 270px;
background: #292929;
text-align: center;
position: relative;
z-index: 10;
}
.aboutus-container h1 {
font-size: 25px;
display: inline-block;
margin-top: 45px;
margin-bottom: 20px;
}
Any help will be much appreciated!
I manage to find the answer i had to add to the src of iframe &wmode=opaque
Here is the complete iframe :
<iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&showinfo=0&controls=0&wmode=opaque" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
Related
I am trying to create a scrollable horizontal timeline with a fixed width. I have overflow-x: auto on the parent container and whenever I add white-space: nowrap to that same element, the child list elements start getting cut off. I assume this is something to do with the behavior of flex-box. I have tried adding min-width: 0 to the flex elements and flex-grow: 1 but no luck.
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
height: 200px;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.timeline {
display: flex;
justify-content: center;
min-width: 0;
}
.timeline ol {
list-style: none;
display: flex;
justify-content: center;
}
.timeline .horizontal-line {
position: relative;
background-color: #0d6a3d;
height: 3px;
border-radius: 4px;
margin: 5em 0;
}
.event {
margin: 0px 10px;
position: relative;
}
.date {
position: relative;
text-align: center;
top: -70px;
width: 100%;
}
.date::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
right: auto;
height: 20px;
width: 20px;
border-radius: 50%;
border: 3px solid #00a950;
background-color: #fff;
transition: 0.3s ease;
transform: translateX(-50%);
}
.content {
width: 100%;
text-align: center;
position: relative;
top: -45px;
}
<section class="container">
<div class="timeline">
<div class="horizontal-line">
<ol>
<li class="event">
<h3 class="date">07/02/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ol>
</div>
</div>
</section>
Add width: fit-content; to your timeline. That gets all elements to fit in the horizontal scroll. Then you are left with the default padding-inline-start on the ol. You can remove that gap by setting padding: 0; or padding-inline-start: 0;.
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
height: 200px;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.timeline {
display: flex;
justify-content: center;
min-width: 0;
width: fit-content;
}
.timeline ol {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
}
.timeline .horizontal-line {
position: relative;
background-color: #0d6a3d;
height: 3px;
border-radius: 4px;
margin: 5em 0;
}
.event {
margin: 0px 10px;
position: relative;
}
.date {
position: relative;
text-align: center;
top: -70px;
width: 100%;
}
.date::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
right: auto;
height: 20px;
width: 20px;
border-radius: 50%;
border: 3px solid #00a950;
background-color: #fff;
transition: 0.3s ease;
transform: translateX(-50%);
}
.content {
width: 100%;
text-align: center;
position: relative;
top: -45px;
}
<section class="container">
<div class="timeline">
<div class="horizontal-line">
<ol>
<li class="event">
<h3 class="date">07/02/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ol>
</div>
</div>
</section>
I have rounded border around div with a hidden part like in image below. It has to be display: flex and should not move around.
I tried adding only bot and left border, and creating top border with div, but the rounding is a bit off. Any suggestions would be welcomed here, thanks.
EDIT: i only need to hide border, inside of the div should be visible
You can use pseudo elements to achieve this. You may need to position them according to your layout and content
#border {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
word-wrap: break-word;
position: absolute;
border-left: solid 2px black;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 250px;
width: 400px;
}
#border::before {
content:"";
position: absolute;
top: 0px;
left: -1px;
height: 5px;
width: 150px;
border-top: solid 2px black;
border-top-left-radius: 5px;
}
#border::after {
content:"";
position: absolute;
top: 244px;
left: -2px;
width: 300px;
height: 5px;
border-bottom: solid 2px black;
border-bottom-left-radius: 5px;
}
<div id="border">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
I am trying to create a div that is two different colors, split horizontally, with an angled(triangle) divider/indicator that points from the left side to the right side. This is the mockup I got:
I found a guide for making something very similar here (the 'Talk Bubble' example):
https://css-tricks.com/examples/ShapesOfCSS/
and here I found an example for creating a bi-colored div:
CSS: Set a background color which is 50% of the width of the window
I have a CodePen here with what I've got, and I'm just struggling a little bit to put the pieces above together to meet the mockup. I'm trying to make sure that the angled indicator is a maximum of 100% of the height of this div, as it will be with other similar divs of other colors and I don't want overlapping edges.
https://codepen.io/chjaro/pen/MGmLxb?editors=1100
#cs-results>#csBullets {
text-align: justify;
margin: 0 auto;
width: 40em;
padding-left: 100px;
font-size: 24px;
}
#csBullets>ul>li {
list-style: none;
color: #fff;
}
#csBullets>ul>li::before {
content: "\2022";
color: #188ac5 !important;
position: relative;
top: 0em;
padding-right: 10px;
}
#csTitle {
color: white;
font-size: 48px;
margin: auto;
max-width: 75%;
padding: 20px 0 50px 0;
}
#cs-what-we-did {
height: 400px;
background: linear-gradient(90deg, #9fa0a2 40%, #58595B 40%);
z-index: -3;
margin: 0;
padding: 0 20%;
}
#csBullets {
/* background-color: #9fa0a2; */
height: 400px;
margin: -9% 0 -10% 0;
padding: 8% 0
}
#csBullets:after {
content: "";
position: absolute;
left: 66%;
top: 0;
width: 0;
height: 0;
border-top: 175px solid transparent;
border-left: 150px solid #9fa0a2;
border-bottom: 200px solid transparent;
z-index: -1
}
#media screen and (max-width: 990px) {
#csBullets:after {
display: none !important;
}
#cs-what-we-did {
height: 100%;
background: linear-gradient(90deg, #9fa0a2 50%, #58595B 50%);
z-index: -3;
}
#csBullets {
height: 100%;
}
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cs-what-we-did" class="col-lg-12 container-fluid cs-single">
<div class="sectionTitleBar">
<h2 class="sectionTitle" style="color: #fff;">Section Title</h2>
</div>
<div class="col-md-6" style="" id="csBullets">
<h3 class="sectionTitle" style="color:#fff;">Goals</h3>
<ul>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</div>
<div class="col-md-6" style="z-index: -1">
<h3 class="sectionTitle" style="color:#fff;">Results</h3>
<p style="text-align: left; color: #fff">Placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder.</p>
<p style="text-align: left; color: #fff">“Placeholder placeholder placeholder placeholder placeholder ,” Placeholder says. “Placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder
placeholder placeholder placeholder placeholder placeholder placeholder.”</p>
</div>
</div>
I would take a different approach to this and just use absolutely positioned pseudo elements to create the elements for the angle, then transform them to get the shape you want. After that you use some z-index magic to keep it behind the content in case of overlap. This way it'll always be relative to the container itself, so it'll work regardless of the container's height.
.container {
width: 100%;
display: flex;
overflow: hidden;
position: relative;
}
.title {
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: 0;
text-align: center;
z-index: 3;
}
.left,
.right {
flex: 1;
padding: 50px 60px 20px;
}
.left {
z-index: 2;
background: gold;
}
.right {
background: tomato;
position: relative;
z-index: 1;
}
.right::before,
.right::after {
z-index: -1;
content: "";
background-color: gold;
position: absolute;
width: 50%;
right: 100%;
}
.right::before {
top: 0;
bottom: 48%;
transform: rotate(-15deg);
transform-origin: top right;
}
.right::after {
bottom: 0;
top: 48%;
transform: rotate(15deg);
transform-origin: bottom right;
}
<div class="container">
<h1 class="title">Lorem ipsum dolor sit amet.</h1>
<div class="left">
<h1>Lorem ipsum.</h1>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, recusandae.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
</ul>
</div>
<div class="right">
<h1>Lorem ipsum.</h1>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, recusandae.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
</ul>
</div>
</div>
On my website, the Lorem Ipsum text overflows the container. How can I automatically add a line break when the text reaches its container's borders.
I have created this JSFiddle to demonstrate my issue.
HTML:
<body>
<div id="wrapper">
<div id="content">
<div class="flex">
<div class="flexchild">
<img src="img.jpg" width="200"></img>
</div>
<div class="flexchild">
<p>
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
</div>
</body>
CSS
body,html {
background: #fff;
width: 90%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#wrapper{
background: #ccc;
height: 100%;
}
.flex {
width: 100%;
height: 340px;
display: -webkit-box;
display: flex;
}
.flexchild {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
overflow: auto;
display: block;
}
You need to use 0 instead of auto:
.flexchild {
-webkit-flex: 1 0 0;
flex: 1 0 0;
overflow: auto;
display: block;
}
See this JSFiddle, or run the code snippet below.
body,
html {
background: #fff;
width: 90%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#wrapper {
background: #ccc;
height: 100%;
}
.flex {
width: 100%;
height: 340px;
display: -webkit-box;
display: flex;
}
.flexchild {
-webkit-flex: 1 0 0;
flex: 1 0 0;
overflow: auto;
display: block;
}
<body>
<div id="wrapper">
<div id="content">
<div class="flex">
<div class="flexchild">
<img src="http://www.engraversnetwork.com/files/placeholder.jpg" width="200"></img>
</div>
<div class="flexchild">
<p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</body>
Further Reading:
MDN Documentation for flex-basis, the third parameter of flex
I'm not familiar with the css flex bits but removing these 2 lines makes the text flow as you want.
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
i have been messing with CSS but cant get desired results.
I made simple list with url & thumbnails in html and styled it with CSS.
I cant get list into center of page. I want it to be even from both sides, but its more on the right side of page.
Can someone help me with this issue please.
CSS
body {
background-color: #151924;
}
ul#playlist
{
text-align: center;
}
ul#playlist li
{
display:block;
list-style: none;
background: #323B55;
border: 1px solid #b2b2b2;
max-width: 100%;
margin-top: 5px
}
ul#playlist li img
{
float: left;
margin: 15px 15px 15px 15px;
}
ul#playlist h3
{
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
ul#playlist li a
{
font-weight: bold;
line-height: 2.8em;
margin-left: 50px;
color: #b2b2b2
}
<title>Playlist test</title>
<body> <ul style="list-style-type:none" id="playlist">
<li><a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
<img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
<h3>Star TV</h3>
<p>Lorem ipsum dolor sit amet...</p></li>
<li> <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
<img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
<h3>Star TV</h3>
<p>Lorem ipsum dolor sit amet...</p></a></li>
<li> <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
<img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
<h3>Star TV</h3>
<p>Lorem ipsum dolor sit amet...</p></a></li>
<li> <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
<img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
<h3>Star TV</h3>
<p>Lorem ipsum dolor sit amet...</p></a></li>
<li> <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
<img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
<h3>Star TV</h3>
<p>Lorem ipsum dolor sit amet...</p></a></li>
<li> <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
<img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
<h3>Star TV</h3>
<p>Lorem ipsum dolor sit amet...</p></a></li>
<li> <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ">
<img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg">
<h3>Star TV</h3>
<p>Lorem ipsum dolor sit amet...</p></a></li>
</ul> </body>
http://jsfiddle.net/7yos5231/
#playlist ul inherit 50px left padding (available for the hidden li bullets).
You have to reset it #playlist { padding 0; } or add the padding value you need to equal center the content #playlist { padding 0 50px; }.
Updated fiddle: http://jsfiddle.net/7yos5231/5/
ul#playlist
{
text-align: center;
margin: 0 auto;
padding : 0 20px;/* change to the value you desire.*/
}