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.*/
}
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>
Today I've faced with specific design: there is row of cards and text inside card is aligned with another text from other cards. So title is aligned with title from other cards, text is aligned with other texts. It is very difficult for me to explain it clearly so I make a screenshot of the thing I'm trying to reach
By now I'm ready to completely ignore this issue due to impossibility of realization by pure css, but who knows, may be there is some solution?
UPDATE: I'm sorry for lack of explanation. Here is the code. My aim is to make the same alignment as in screeenshot above without using <br>s and fixed heights.
.list {
display: flex;
}
.item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
text-align: center;
background-color: rebeccapurple;
color: #fff;
}
.item>* {
flex: 0 0 auto;
}
.item>*+* {
margin-top: 10px;
}
.item+.item {
margin-left: 20px;
}
.icon {
background-color: red;
border-radius: 100%;
width: 20px;
height: 20px;
}
.title {
text-transform: uppercase;
font-weight: bold;
}
.text {
float: left;
clear: left;
}
<div class="list">
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
</div>
Thanks in advance.
What you are trying to do can be easily achieved using CSS grids and a bit of HTML restructuring.
The other way to do this would be to give fixed heights to your text elements.
If you are not familiar with CSS grids and don't like the idea of giving fixed heights to your elements, you can achieve similar result by using a little bit of JavaScript. Check the attached snippet.
I have written a small function equalizeClass() to equalize heights of all the elements belonging to a particular class. What it does is basically scans through all the elements belonging to a particular class and finds the element with maximum height. It then sets the heights of all the elements equal to the calculated maximum height.
Don't forget to call equalize() every time you update your related DOM elements.
I have not changed anything in your HTML structure.
In CSS, I have just added justify-content to your item class.
justify-content: space-between;
function equalizeClass(className) {
var images = document.getElementsByClassName(className);
var max_height = 0;
for (var i = 0; i < images.length; i++) {
if (images[i].clientHeight > max_height) {
max_height = images[i].clientHeight;
}
}
for (var i = 0; i < images.length; i++) {
images[i].style.height = max_height + 'px';
}
}
function equalize() {
equalizeClass("title");
equalizeClass("text");
}
window.addEventListener("orientationchange", equalize());
window.addEventListener('resize', equalize());
.list {
display: flex;
}
.item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 120px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
text-align: center;
background-color: rebeccapurple;
color: #fff;
}
.item>* {
flex: 0 0 auto;
}
.item>*+* {
margin-top: 10px;
}
.item+.item {
margin-left: 20px;
}
.icon {
background-color: red;
border-radius: 100%;
width: 20px;
height: 20px;
}
.title {
text-transform: uppercase;
font-weight: bold;
}
.text {
float: left;
clear: left;
}
<div class="list">
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor.</8>
</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
</div>
You need to make your title div a fixed height, ideally a height that is taller than the title text itself. See the code below for your title div:
.title {
text-transform: uppercase;
font-weight: bold;
height: 100px;
max-width: 100%;
}
Then give your text div this style:
.text{
display: flex;
justify-content: center;
align-items: top;
}
See this pen.
I am using a slightly modified version of this: https://codepen.io/ferry/pen/ZYVwxz (Thank you Michael Ferry).
HTML:
<div class="accordion">
<ul>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>
CSS:
<style>
.accordion {
width: 100%;
max-width: 1140px;
height: 560px;
overflow: hidden;
margin: 20px auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
list-style-type: none;
display: table-cell;
top:0px;
vertical-align: top;
position: relative;
width: 16.666%;
height: 520px;
background-repeat: no-repeat;
background-position: top center;
transition: all 500ms ease;
}
.accordion ul li div {
display: block;
overflow: hidden;
width: 100%;
}
.accordion ul li div a {
display: block;
height: 520px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 0px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.accordion ul li div a h2 {
text-overflow: clip;
font-size: 24px;
/*text-transform: uppercase;*/
margin-bottom: 0px;
top: 435px;
color:#000;
}
.accordion ul li div a p {
top: 440px;
font-size: 13.5px;
color:#000;
}
.accordion ul li:nth-child(1) {
background-image: url("1b.jpg");max-height:400px;
}
.accordion ul li:nth-child(2) {
background-image: url("2b.jpg");max-height:400px;
}
.accordion ul li:nth-child(3) {
background-image: url("3b.jpg");max-height:400px;
}
.accordion ul li:nth-child(4) {
background-image: url("4b.jpg");max-height:400px;
}
.accordion ul li:nth-child(5) {
background-image: url("5b.jpg");max-height:400px;
}
.accordion ul li:nth-child(6) {
background-image: url("6b.jpg");max-height:400px;
}
.accordion ul:hover li {
width: 16%;
}
.accordion ul:hover li:hover {
width: 100%;
}
.accordion ul:hover li:hover a {
}
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
#media screen and (max-width: 600px) {
body {
margin: 0;
}
.accordion {
height: auto;
}
.accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
</style>
I can't get it to display the "slide" when using the keyboard.
I have tried adding .active, :focus, role="button", aria-expanded="true" and tab-index to no avail.
Before I go bald, does anyone have a solution? (without using javascript)
Thanks so much!
If you use tabindex="1" on your li like <li tabindex="1">, you should be able to target them with :focus as
li {
&:focus {
// your stuff here
}
}
Right now what happened is when you press tab it selects the a element but the transformation is applied on the li.
If I take the code from Michael Ferry's code pen you will have the following lines.
HTML:
<h1>Responsive Accordion</h1>
<div class="accordion">
<ul>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>
<p class="about">
By Michael Ferry
</p>
<h1>Responsive Accordion</h1>
<div class="accordion">
<ul>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>
<p class="about">
By Michael Ferry
</p>
SCSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Montserrat:700);
// Accordion Height
$a-height: 250px;
// Position text along bottom
$text-offset: $a-height - 90;
// Page Title
h1 {
text-align: center;
font-family: Montserrat, sans-serif;
color: #333;
}
.accordion {
width: 100%;
max-width: 1080px;
height: $a-height;
overflow: hidden;
margin: 50px auto;
ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%; // 6 into 100
height: $a-height;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
div {
display: block;
overflow: hidden;
width: 100%;
a {
display: block;
height: $a-height;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
font-family: Open Sans, sans-serif;
transition: all 200ms ease;
* {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
h2 {
font-family: Montserrat, sans-serif;
text-overflow: clip;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 2px;
top: $text-offset;
}
p {
top: $text-offset;
font-size: 13.5px;
}
}
}
}
// Background images
li:nth-child(1) {
background-image: url("http://michael-ferry.com/assets/accordion1.jpg");
}
li:nth-child(2) {
background-image: url("http://michael-ferry.com/assets/accordion2.jpg");
}
li:nth-child(3) {
background-image: url("http://michael-ferry.com/assets/accordion3.jpg");
}
li:nth-child(4) {
background-image: url("http://michael-ferry.com/assets/accordion4.jpg");
}
li:nth-child(5) {
background-image: url("http://michael-ferry.com/assets/accordion5.jpg");
}
li:nth-child(6) {
background-image: url("http://michael-ferry.com/assets/accordion6.jpg");
}
&:hover li,
li:focus ~ li{
width: 8%;
}
&:hover li:hover,
li:focus {
width: 60%;
a {
background: rgba(0, 0, 0, 0.4);
* {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
}
}
}
// Stack items
#media screen and (max-width: 600px) {
// IE gets fussy if this isn't here
body {
margin: 0;
}
.accordion {
height: auto;
ul,
ul:hover {
li,
li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
}
}
.about {
text-align: center;
font-family: "Open Sans", sans-serif;
font-size: 12px;
color: #666;
a {
color: blue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
In the SCSS code I have added li:focus ~ li to target li's siblings and li:focus to the existing code to reproduce the animation.
I also recommend you to disable a element tabbing with tabindex=0 in order to avoid the user to scroll top again after tabbing through the slider.
Focus within fix this issue, and works fine
:hover, :focus-within {
your css
}
you can check MDN to learn more about focus-within
I'm trying to learn flexbox, but I'm struggling to understand the concept. I want to create a list of e-mails where every item is a flexbox container (see underneath).
Rules:
The tag is optional but if it is shown, it's shown directly next to the name.
The date is always there, the width varries
The Name of the person fills the remaining space. If it becomes to big it is truncated.
The space between the name and the tag is always 5px
The mail subject is shown on a new line and is also truncated
My attempt so far: https://jsbin.com/sepobipiwa/edit?html,css,output
.container {
width: 350px;
background-color: #FFF;
}
html {
font-family: 'Nunito Sans', sans-serif;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: flex;
flex-direction: row;
align-items: baseline;
padding: 20px;
border-bottom: 1px solid #ccc;
}
.name {
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
}
.tag {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
background-color: #EFEFEF;
padding: 3px 5px;
border-radius: 3px;
text-transform: uppercase;
}
.subject {
font-size: 15px;
font-weight: 300;
color: #888;
text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="name">John Doe</div>
<div class="date">14:50</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="name">Marrie Antoinette</div>
<div class="tag">Concept</div>
<div class="date">16:01</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="name">Someone with a long name</div>
<div class="tag">tag</div>
<div class="date">18:50</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="name">Someone with a long name</div>
<div class="tag">concept</div>
<div class="date">yesterday</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>
</div>
</body>
</html>
So I did this to your code:
Made your flexbox to wrap by adding flex-wrap: wrap to the li
Forced the subject to the next line by telling it to take the full available width in the row by giving it flex-basis: 100%
Add margin-left: auto to place the date to the right-most end.
To finish it up, you can add these styles to name and subject to get the ellispsis woking:
white-space: nowrap;
overflow: hidden;
Also added max-width: 50% to name to adjust the first line.
See demo below:
.container {
width: 350px;
background-color: #FFF;
}
html {
font-family: 'Nunito Sans', sans-serif;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: baseline;
padding: 20px;
border-bottom: 1px solid #ccc;
}
.name {
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 50%;
}
.tag {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
background-color: #EFEFEF;
padding: 3px 5px;
border-radius: 3px;
text-transform: uppercase;
}
.subject {
font-size: 15px;
font-weight: 300;
color: #888;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-basis: 100%;
}
.date {
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="name">John Doe</div>
<div class="date">14:50</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="name">Marrie Antoinette</div>
<div class="tag">Concept</div>
<div class="date">16:01</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="name">Someone with a long name</div>
<div class="tag">tag</div>
<div class="date">18:50</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="name">Someone with a long name</div>
<div class="tag">concept</div>
<div class="date">yesterday</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>
</div>
</body>
</html>
Suggestion:
You should edit you markup and create a wrapper for the first row that contains the name,tag and date which is a better design (you can remove the untidy max-width: 50% used above) - see demo below:
.container {
width: 350px;
background-color: #FFF;
}
html {
font-family: 'Nunito Sans', sans-serif;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: baseline;
padding: 20px;
border-bottom: 1px solid #ccc;
}
.name {
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.tag {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
background-color: #EFEFEF;
padding: 3px 5px;
border-radius: 3px;
text-transform: uppercase;
}
.subject {
font-size: 15px;
font-weight: 300;
color: #888;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-basis: 100%;
}
.date {
margin-left: auto;
}
.header {
display: flex;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="header">
<div class="name">John Doe</div>
<div class="date">14:50</div>
</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="header">
<div class="name">Marrie Antoinette</div>
<div class="tag">Concept</div>
<div class="date">16:01</div>
</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="header">
<div class="name">Someone with a long name</div>
<div class="tag">tag</div>
<div class="date">18:50</div>
</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="header">
<div class="name">Someone with a long name</div>
<div class="tag">concept</div>
<div class="date">yesterday</div>
</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>
</div>
</body>
</html>
Just an extension on kukkuz excelent answer.
Here , we are acheiving the same results, but without needing to change the markup. (Some how trickier, but sometimes you just can change your markup).
What you really need is to get rid of flex-wrap and set all the first 3 elements in a single row. One alternative is to set the subject element outside of the flex container, positioning it absolute. The remains of the modifications are only to recover the broken layout.
.container {
width: 350px;
background-color: #FFF;
}
html {
font-family: 'Nunito Sans', sans-serif;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: flex;
flex-direction: row;
align-items: baseline;
padding: 20px 0px 40px 0px;
margin: 0px 20px;
border-bottom: 1px solid #ccc;
position: relative;
}
.name {
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.tag {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
background-color: #EFEFEF;
padding: 3px 5px;
border-radius: 3px;
text-transform: uppercase;
}
.subject {
font-size: 15px;
font-weight: 300;
color: #888;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-basis: 100%;
position: absolute;
bottom: 20px;
max-width: 100%;
}
.date {
margin-left: auto;
}
.header {
display: flex;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="name">John Doe</div>
<div class="date">14:50</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="name">Marrie Antoinette</div>
<div class="tag">Concept</div>
<div class="date">16:01</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="name">Someone with a long name</div>
<div class="tag">tag</div>
<div class="date">18:50</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="name">Someone with a long name</div>
<div class="tag">concept</div>
<div class="date">yesterday</div>
<div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>
</div>
</body>
</html>
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>