I have 5 div and I want the last 2 or the last one centered. Because when I resize the window I can have 4div at the top and 1 at the bottom or 3 at the top and 2 at the bottom.
Here is a fiddle for better explanation
.button-video{
width:220px;
height:50px;
background-color: #234CA5;
position:relative;
float:left;
margin:5px 10px;
}
.button-video a{
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
}
.button-video span{
font-size:14px;
color:white;
padding-left:25%;
line-height: 50px;
}
.play{
position:absolute;
background-color:white;
border-radius:10px;
top:10px;
left:5px;
width:40px;
height:30px;
}
.triangle{
margin-top:5px;
margin-left:15px;
width: 0;
height: 0;
border-left: 16px solid #234CA5;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.triangle:hover{
cursor:pointer;
}
.button-video:hover .triangle{
border-left: 16px solid #D3222A;
}
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Présentation TRIXELL 05</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P4600 - P4700 - P4800</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P3543pR - P4343RF</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation PIXIUM 4600</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation 4700 - 4800</span>
</div>
</div>
wrap buttons within container with text-align center, remove floating and display inline block button-video
<div class="container">
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Présentation TRIXELL 05</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P4600 - P4700 - P4800</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P3543pR - P4343RF</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation PIXIUM 4600</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation 4700 - 4800</span>
</div>
</div>
<style>
.container{
text-align: center;
}
.button-video{
width:220px;
height:50px;
background-color: #234CA5;
position:relative;
display: inline-block;
margin:5px 10px;
}
.button-video a{
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
}
.button-video span{
font-size:14px;
color:white;
padding-left:25%;
line-height: 50px;
}
.play{
position:absolute;
background-color:white;
border-radius:10px;
top:10px;
left:5px;
width:40px;
height:30px;
}
.triangle{
margin-top:5px;
margin-left:15px;
width: 0;
height: 0;
border-left: 16px solid #234CA5;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.triangle:hover{
cursor:pointer;
}
.button-video:hover .triangle{
border-left: 16px solid #D3222A;
}
</style>
http://jsfiddle.net/nk398pcp/1/
You can use the flexible box method for easily achieving that layout on resize.
Wrap all the elements inside a container. display: flex and justify-content: center will center the last single or two items.
Updated JSfiddle
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.button-video {
width: 220px;
height: 50px;
background-color: #234CA5;
position: relative;
float: left;
margin: 5px 10px;
}
.button-video a {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.button-video span {
font-size: 14px;
color: white;
padding-left: 25%;
line-height: 50px;
}
.play {
position: absolute;
background-color: white;
border-radius: 10px;
top: 10px;
left: 5px;
width: 40px;
height: 30px;
}
.triangle {
margin-top: 5px;
margin-left: 15px;
width: 0;
height: 0;
border-left: 16px solid #234CA5;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.triangle:hover {
cursor: pointer;
}
.button-video:hover .triangle {
border-left: 16px solid #D3222A;
}
<div class="container">
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Présentation TRIXELL 05</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P4600 - P4700 - P4800</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>P3543pR - P4343RF</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation PIXIUM 4600</span>
</div>
<div class="button-video">
<div class="play">
<div class="triangle"></div>
</div>
<span>Animation 4700 - 4800</span>
</div>
</div>
Related
how can i achieve the attached layout
using html, bootstrap, CSS
where the circles will contains an images
and a detail box will be beside them
question has been updated with code snippet
what i have done is not accurate the sizes not responsive
and if i make the circle bigger than the rectangle it does not align vertically in middle
also the code inside the rectangle is not middle
could any one please provide me a demo
custom layout
.rectangle1{
display:block;
height:40px;
width:150px;
background:red;
position:relative;
margin-top:100px;
}
.circle1{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.rectangle1{
display: inline-block;
height: 100px;
width: 100%;
background: #6f0a18;
position: relative;
}
.circle1{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.circle2{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
right:0%;
margin-right:-25px;
top: 0px;
background:red;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="rectangle1">
<img class="circle1" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-left: 100px;">Title</h3>
<p style="padding-left: 100px;"> Sub Title</p>
</div>
</div>
<div class="col-md-6">
<div class="rectangle1">
<img class="circle2" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-right: 100px; text-align: right;">Title</h3>
<p style="padding-right: 100px; text-align: right;"> Sub Title</p>
</div>
</div>
</div>
</div>
.outer-wrapp {
padding:30px;
}
ul {
list-style:none;
padding:0;
}
ul li {
margin: 55px 0px;
}
.wrapp{
padding:0px 15px;
}
.left .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-left: 5%;
padding-left: 20%;
}
.left .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
left: -37.5px;
}
.right .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-right: 5%;
padding-right: 20%;
}
.right .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
right: -37.5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-wrapp">
<div class="row">
<div class="col-xs-6 col-sm-6">
<ul class="left">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
<span>Text</span>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-6">
<ul class="right">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Try this. it works for you.
Try something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
height: 40px;
width: 40px;
background-color: #000;
border-radius: 50%;
}
#id1 {
border: 1px solid black;
padding: 11px;
margin: 30px;
width: 100px;
}
</style>
</head>
<body>
<h2>Circle CSS</h2>
<div class="circle"><div id='id1'> text here</div></div>
</body>
</html>
try this
.container{
width:100%;
background:red;
margin:10px 0;
}
#image{
width:20%;
float:left;
}
#image img{
border-radius: 50px;
}
#text{
width:80%;
float:left;
}
#text h3{
padding:10px;
}
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
I want to have 2 elements in a div but only one should be visible, and I want to have a vertical scrollbar.
Unfortunately, the second element is visible and there is no scrollbar.
#visu {
top:10px;
height:180px;
width:50%;
overflow:auto;
background-color:yellow;
}
#element1 {
position:absolute;
top:15px;
left:80px;
}
#element2 {
position:absolute;
top:200px;
left:80px;
}
.element {
margin-right:-50px;
}
.namecontainer {
display:flex;
border:4px solid #000033; border-radius:10px;
padding:10px; box-sizing:border-box;
background-color:white;
width:280px;
height:150px;
margin-left:0px;
align-items: center;
justify-content:center:
color:#1a1a1a;
}
.namecontainer p {
font-size:35px;
font-family: 'Arial';
font-weight:bold;
color:#1a1a1a;
text-align:center;
width:380px;
}
<div id="visu">
<div id="element1" class="element">
<div class="namecontainer">
<p class= "name" id="name1" >element 1</p>
</div>
</div>
<div id="element2" class="element">
<div class="namecontainer">
<p class= "name" id="name3" >element 2</p>
</div>
</div>
</div>
You need to play with margin and drop absolute positionnong cause it takes element off the flow and is not necessary here https://jsfiddle.net/vpdc5L4m/13/
#visu {
top: 10px;
height: 180px;
width: 50%;
overflow: auto;
background-color: yellow;
}
#element1 {}
#element2 {}
.element {
margin: 15px auto ;
}
.namecontainer {
display: flex;
border: 4px solid #000033;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
background-color: white;
width: 280px;
height: 150px;
margin:auto;
align-items: center;
justify-content: center: color: #1a1a1a;
}
.namecontainer p {
font-size: 35px;
font-family: 'Arial';
font-weight: bold;
color: #1a1a1a;
text-align: center;
width: 380px;
}
<div id="visu">
<div id="element1" class="element">
<div class="namecontainer">
<p class="name" id="name1">element 1</p>
</div>
</div>
<div id="element2" class="element">
<div class="namecontainer">
<p class="name" id="name2">element 2</p>
</div>
</div>
<div id="element3" class="element">
<div class="namecontainer">
<p class="name" id="name3">a third one ?</p>
</div>
</div>
</div>
To hide a CSS element, you can use
display: none;
I'm building the following (see image). Basically, I need 5 buttons with overlapping buttons (each with numbers) on the top. However, I'm unsure how to go about this?
One solution:
https://jsfiddle.net/ryd5e51n/
<div class="button">
<div class="button-top"><span class="text">1</span></div>
<div class="button-bottom"></div>
</div>
.button
{
display: table;
}
.button-top
{
background-color: black;
width: 36px;
height: 36px;
border-radius: 18px;
margin: auto;
position: relative;
z-index: 2;
box-shadow: 0px 0px 2px 2px #bbbbbb;
color: white;
text-align: center;
}
.text
{
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.button-bottom
{
background-color: #efefef;
width: 100px;
height: 90px;
margin-top: -15px;
position: relative;
z-index: 1;
border: 2px solid #bbbbbb;
border-radius: 20px;
}
You can do this with a single element:
HTML:
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
CSS:
div.button {
display:block;
float:left;
margin:18px 5px 0;
position:relative;
overflow:visible;
background:none #efefef;
width:100px;
height:100px;
border:2px solid #ccc;
border-radius:10px;
counter-increment: button;
}
div.button:before {
content:counter(button);
display:block;
padding:8px 14px;
background:none #000;
border:2px solid #ccc;
border-radius:100px;
color:#fff;
position:absolute;
left:50%;
top:-18px;
transform: translateX(-50%);
}
See fiddle: https://jsfiddle.net/jj2nk5f1/2/
Here it is.
.button {
float: left;
margin-left: 10px;
}
.number {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: black;
margin-left: 15px;
}
.block {
width: 50px;
height: 50px;
border: 1px solid black;
margin-top: -10px;
}
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
HTML
<div class="right-details">
<div class="right-details-row">
<b>Left title</b>
</div>
<div class="right-details-row">
<div class="right-details-row-l">K</div>
<div class="right-details-row-r">Laass</div>
</div>
</div>
<div class="details-divider"></div>
<div class="left-details">
<div class="left-details-row">
<b>Right Title</b>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 1</div>
<div class="left-details-row-r">Chosen 1</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
</div>
CSS
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
}
.details-divider{
width:20px;
display:table-cell;
}
.right-details{
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
}
.left-details-row{
width: 232px;
float:left;
margin: 0 0 5px 4px;
}
.left-details-row-l{
width:110px;
float:left;
overflow:hidden;
}
.left-details-row-r{
width:122px;
float:left;
overflow:hidden;
}
.right-details-row{
width: 345px;
float:left;
margin: 0 0 5px 4px;
}
.right-details-row-l{
width: 35px;
float:left;
margin: 0 0 2px 4px;
}
.right-details-row-r{
width: 296px;
float:left;
overflow:hidden;
}
As you see in jsfiddle , in the left Div text is in the bottom, How to shift it to the top?
Add vertical-align:top to your .right-details rule:
.right-details {
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
vertical-align:top;
}
jFiddle example
add
vertical-align: top;
to .right-details
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
vertical-align: top;
}
note the last property
http://jsfiddle.net/V5JtR/1/
I'm trying to align small boxes in a row. These boxes have something like 2 elements in each. In some cases, the first element is so "much" text, that it splits into 2 lines. If this happens, all other blocks in this special line are shown below.
Long story short, here is the example:
http://jsfiddle.net/PMRQ5/
If you resize the HTML field, you can see what I mean. Can somebody help?
.songlist .even {
background: #c2e4fa;
background: -moz-linear-gradient(top, #d9eefc, #c2e4fa);
margin-right: 5px;
}
.songlist .odd {
background: #faf4c2;
background: -moz-linear-gradient(top, #fcf8d9, #faf4c2);
margin-right: 5px;
}
.songlist .itemBox {
font-size: 11px;
width: 220px;
min-height: 100px;
clear: both;
padding: 5px;
margin: 5px 10px 5px 10px;
display: inline-block;
position: relative;
border-radius: 4px;
}
.songlist .itemBox .title {
font-weight: bold;
font-size: 16px;
}
.songlist .itemBox .artist {
clear: left;
font-size: 11px;
}
.songlist .itemBox .titlerating {
bottom: 10px;
left: 10px;
position: absolute;
}
.songlist .itemBox .dance {
bottom: 5px;
right: 10px;
position: absolute;
}
<div class='songlist'>
<div class='itemBox even'>
<div class='cover'></div>
<div class='title'>You and you</div>
<div class='artist'>101 Strings Orchestra</div>
<div class='clear'></div>
</div>
<div class='itemBox odd'>
<div class='title'>The Queen's lace hankerchief waltz</div>
<div class='artist'>101 Strings Orchestra</div>
<div class='clear'></div>
</div>
<div class='itemBox even'>
<div class='cover'></div>
<div class='title'>Voices of spring</div>
<div class='artist'>101 Strings Orchestra</div>
<div class='clear'></div>
</div>
<div class='itemBox odd'>
<div class='cover'></div>
<div class='title'>Roses from the south</div>
<div class='artist'>101 Strings Orchestra</div>
<div class='clear'></div>
</div>
</div>
http://jsfiddle.net/PMRQ5/1/
Add vertical-align: top or vertical-align: bottom to the box, depends on what you want.
.songlist .even {
background:#c2e4fa;
background:-moz-linear-gradient(top,#d9eefc,#c2e4fa);
margin-right:5px;
}
.songlist .odd {
background:#faf4c2;
background:-moz-linear-gradient(top,#fcf8d9,#faf4c2);
margin-right:5px;
}
.songlist .itemBox {
font-size:11px;
width:220px;
min-height:100px;
clear:both;
padding:5px;
margin:5px 10px 5px 10px;
display:inline-block;
position:relative;
border-radius:4px;
vertical-align: bottom;
}
.songlist .itemBox .title {
font-weight:bold;
font-size:16px;
}
.songlist .itemBox .artist {
clear:left;
font-size:11px;
}
.songlist .itemBox .titlerating {
bottom:10px;
left:10px;
position:absolute;
}
.songlist .itemBox .dance {
bottom:5px;
right:10px;
position:absolute;
}
<div class='songlist'>
<div class='itemBox even'>
<div class='cover'></div>
<div class='title'>You and you</div>
<div class='artist'>101 Strings Orchestra</div>
<div class='clear'></div>
</div>
<div class='itemBox odd'>
<div class='title'>The Queen's lace hankerchief waltz</div>
<div class='artist'>101 Strings Orchestra</div>
<div class='clear'></div>
</div>
<div class='itemBox even'>
<div class='cover'></div>
<div class='title'>Voices of spring</div>
<div class='artist'>101 Strings Orchestra</div>
<div class='clear'></div>
</div>
<div class='itemBox odd'>
<div class='cover'></div>
<div class='title'>Roses from the south</div>
<div class='artist'>101 Strings Orchestra</div>
<div class='clear'></div>
</div>
</div>