How can I create this bar with a circle? - html

Question

I am trying to create a style using CSS and HTML.
My style is like this:
I tried it and this is my HTML :
<div class="download-content">
<div class="download-item">
<div class="download-file">
<div class="front-number">1</div>
<p>Financial Ratio Analysis</p>
<small><span>2013-01-12</span><span>Format | Power Point</span></small>
</div>
</div>
</div>
This is my CSS :
.download-content > .download-item > .download-file {
background: #027bc6;
float: right;
width: 100%;
}
.download-content > .download-item > .download-file > .front-number {
background: none repeat scroll 0 0 #000;
border: 5px solid #fff;
border-radius: 50%;
color: #fff;
float: left;
font-size: 40px;
font-weight: bold;
height: 70px;
text-align: center;
width: 70px;
}
It was so close to my expected result. But not 100%.
JS FIDDLE

Answer 1

My two cents:
http://jsfiddle.net/coma/jBx76
HTML
<div class="files">
<a href="#">
<div>
<div class="name">Financial Ratio Analysis</div>
<div class="meta">
<div class="date">2014-08-25</div>
<div class="format">Word</div>
</div>
</div>
</a>
<a href="#">
<div>
<div class="name">Financial Ratio AnalysisFinancial Ratio Analysis (this name is so so so long long long long long long)</div>
<div class="meta">
<div class="date">2014-08-25</div>
<div class="format">PDF</div>
</div>
</div>
</a>
</div>
CSS
html {
font-family: Arial, Helvetica, sans-serif;
}
div.files {
position: relative;
display: block;
padding: 4px 4px 4px 0;
text-decoration: none;
counter-reset: file;
}
div.files a {
position: relative;
display: block;
padding: 4px 4px 4px 62px;
text-decoration: none;
counter-increment: file;
}
div.files a:before {
content: counter(file);
display: block;
position: absolute;
top: 2px;
left: 2px;
width: 68px;
height: 68px;
border: 5px solid #fff;
background-color: #000;
border-radius: 50%;
text-align: center;
line-height: 72px;
color: #fff;
font-size: 40px;
font-weight: bold;
}
div.files div {
line-height: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.files a > div {
padding: 14px 14px 14px 28px;
background-color: #017BC6;
}
div.files .name {
margin: 0 0 14px 0;
font-size: 18px;
color: #fff;
}
div.files .meta {
font-size: 14px;
color: #bebfba;
font-weight: bold;
}
div.files .meta:after {
content: "";
display: block;
clear: both;
}
div.files .date {
float: left;
}
div.files .format {
float: right;
}
div.files .format:before {
content: "Format | ";
}
Hover
http://jsfiddle.net/coma/jBx76/4/
div.files a > div,
div.files a:before {
transition: background-color 350ms;
}
div.files a:hover > div {
background-color: #000;
}
div.files a:hover::before {
background-color: #017BC6;
}
Better browser support
http://jsfiddle.net/coma/jBx76/5/

Answer 2

Here's my shot at a solution. You need to move .front-number outside .download-file for it to work, though.
<div class="download-content">
<div class="download-item">
<div class="front-number">1</div>
<div class="download-file">
<p>Financial Ratio Analysis</p>
<small><span>2013-01-12</span><span>Format | Power Point</span></small>
</div>
</div>
</div>
.download-content > .download-item {
position: relative;
height: 80px
}
.download-content > .download-item > * {
position: absolute;
}
.download-content > .download-item > .front-number {
background: none repeat scroll 0 0 #000;
border: 5px solid #fff;
border-radius: 50%;
color: #fff;
float: left;
font-size: 40px;
font-weight: bold;
height: 70px;
text-align: center;
width: 70px;
z-index: 2;
}
.download-content > .download-item > .download-file {
background: #027bc6;
width: calc(100% - 110px);
height: 78px;
top: 1px;
left: 45px;
padding-left: 50px;
padding-right: 15px;
}
.download-content > .download-item > .download-file p,
.download-content > .download-item > .download-file a {
color: #fff;
text-decoration: none;
}
.download-content > .download-item > .download-file p {
font-size: 22px;
margin: 10px 0px;
}
.download-content > .download-item > .download-file small {
height: 1em;
line-height: 1em;
display: block;
}
.download-content > .download-item > .download-file small span:first-child {
float:left;
}
.download-content > .download-item > .download-file small span:last-child {
float:right;
}
JSBin

Answer 3

You can achieve the bar with circle effect by using a radial-gradient also (like in below snippet).
Radial gradients work on almost all latest browsers. You can see the full browser support chart here.
.download-content > .download-item > .download-file {
float: right;
width: 100%;
background: #027bc6;
background: radial-gradient(circle at 0% 50%, transparent 60px, #027bc6 60px);
}
.download-content > .download-item > .download-file > .front-number {
float: left;
height: 70px;
width: 70px;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 70px;
color: #fff;
background: none repeat scroll 0 0 #000;
border: 5px solid #fff;
border-radius: 50%;
}
.download-file p a {
padding-left: 10px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
span {
color: #AAAAAA;
font-weight: bold;
}
span.left {
float: left;
margin-left: 10px;
}
span.right {
float: right;
margin-right: 10px;
}
<!-- prefix free library to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="download-content">
<div class="download-item">
<div class="download-file">
<div class="front-number">1</div>
<p>Financial Ratio Analysis</p>
<small><span class='left'>2013-01-12</span><span class='right'>Format | Power Point</span></small>
</div>
</div>
</div>
In the snippet, I have also done the following changes to make the output match the image in question:
Added line-height: 70px; (equal to the circle height) to vertically center the number
Made the following HTML and CSS changes to position and style your p and small contents.
HTML:
<span class='left'>2013-01-12</span><span class='right'>Format | Power Point</span>
CSS:
.download-file p a{
padding-left: 10px;
color: #fff;
text-decoration: none;
font-size: 20px;
}
span{
color: #AAAAAA;
font-weight: bold;
}
span.left{
float: left;
margin-left: 10px;
}
span.right{
float: right;
margin-right: 10px;
}

Answer 4

With CSS and HTML not exact like as image given is seems to be achievable, but here i given one solution hope it will helps you.
.download-content > .download-item > .download-file {
background: #027bc6;
float: right;
width: 100%;
border-radius:48px 0px 0px 48px;
}
.download-content > .download-item > .download-file > .front-number {
background: none repeat scroll 0 0 #000;
border: 10px solid #fff;
border-radius: 50%;
color: #fff;
float: left;
font-size: 40px;
font-weight: bold;
height: 70px;
text-align: center;
width: 70px;
line-height:68px;
margin: -2px;
}
JsFiddle

Answer 5

There's a lot of answers, but here's what I came up with.
jsbin
CSS:
.download-content > .download-item > .download-file {
background: #027bc6;
float: right;
width: 60%;
position: relative;
padding: 0 0 0 60px;
}
.download-content > .download-item > .download-file > .front-number {
background: none repeat scroll 0 0 #000;
border: 5px solid #fff;
border-radius: 50%;
color: #fff;
float: left;
font-size: 40px;
font-weight: bold;
line-height: 70px;
height: 70px;
text-align: center;
width: 70px;
position: absolute; left: -25px; top: -4px;
}
.download-file {
height: 70px;
}
.download-file p {
margin: 5px 0 10px 0;
}
.download-file > p > a {
color: #fff;
font-size: 22px;
font-weight: bold;
text-decoration: none;
}
.details {
display: inline-block;
color: #c0c0c0;
margin: 0 20px 0 0;
}
.left {
font-weight: bold;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="download-content">
<div class="download-item">
<div class="download-file">
<div class="front-number">1</div>
<p class="title">Financial Ratio Analysis</p>
<div class="details left">2013-01-12</div>
<div class="details">Format | Power Point</div>
</div>
</div>
</div>
</body>
</html>

Answer 6

Using a gradient and pseudo element it is possible
JSFiddle Demo
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.download-file {
margin: 25px;
display: inline-block;
}
.download-file > .front-number {
background: none repeat scroll 0 0 #000;
border-radius: 50%;
color: #fff;
display: inline-block;
font-size: 40px;
font-weight: bold;
height: 70px;
line-height: 70px;
text-align: center;
width: 70px;
vertical-align: top;
}
.box {
display: inline-block;
vertical-align: top;
height:70px;
color:white;
background: blue;
margin-left: 35px;
position: relative;
}
.box:before {
content:"";
position: absolute;
left:0;
top:0;
width:70px;
height:70px;
-webkit-transform:translateX(-100%);
transform:translateX(-100%);
background-image: -webkit-radial-gradient(left center, circle, transparent 0%, transparent 50%, blue 50%, blue);
background-image: -moz-radial-gradient(left center, circle, transparent 0%, transparent 50%, blue 50%, blue);
background-image: radial-gradient(left center, circle, transparent 0%, transparent 50%, blue 50%, blue);
}

Answer 7

I can offer you a "classical" approach with float and static position, divs, CSS, margins etc. In order to get the blue shape precisely, you could also use SVG or a combination of divs with CSS radiuses etc.
http://jsbin.com/cuvitixa/3/edit
What have I done:
1) I separated the background into an additional div and the content you've had before. The div is blue and is behind the text. As it has a margin-left, its edge is shifted below the circle and so it gets its shape.
HTML:
<div class="download-item">
<div class="download-item-bg"> </div>
...
CSS:
.download-item-bg {
float: left;
width: 280px;
height: 80px;
margin-left: 56px;
background: #027bc6;
padding-right: 10px;
}
2) As the new background box shifts down the content, I've pulled the content up.
.download-file {
float: left;
margin-top: -80px; /* pull the content over the blue background */
}
3) Set line-height in order to have the big number vertically in the middle.
.download-content > .download-item > .download-file > .front-number {
...
height: 70px;
line-height: 70px; /* set the number in the middle */
...
4) Different details just as an inspiration: Text color etc. Added classes to the spans, link text decoration etc etc:
HTML:
<span class="subtext bold">2013-01-12</span>
<span class="subtext pull-right">Format | Power
CSS:
.subtext {
color: #dddddd;
font-family: verdana;
font-size: 0.7em;
float: left;
}
.bold {
font-weight: bold;
}
.pull-right {
float: right;
}
...
.download-content > .download-item > .download-file a {
font-family: verdana; /* Similar :-) */
text-decoration: none;
color: white;
}
It's also commented online.
EDIT:
Removed a box that was not necessary and added more CSS font decoration in order to imitate as much as possible the original. Added code along with the JS Bin link.

Answer 8

Demo
html
<div class="circ">1</div>
<div class="rect">
<p class="title">Financial Ratio Analysis</p>
<p class="left">2013-01-12</p>
<p class="right">Format | Power Point</p>
</div>
css
body {
font-family: calibri;
}
.circ {
text-align: center;
font-size: 36px;
line-height: 72px;
color: white;
width: 74px;
height: 74px;
border-radius: 100%;
background: #000;
display: inline-block;
z-index: 11;
position: relative;
vertical-align: middle;
}
.rect {
color: white;
margin-left: -40px;
width: 300px;
height: 80px;
background: #00f;
position: relative;
display: inline-block;
z-index: 1;
vertical-align: middle;
}
.rect:before {
content:"";
width: 40px;
height: 80px;
background: #fff;
border-radius: 0 40px 40px 0;
position: absolute;
top:0;
left:0;
}
p {
margin:10px 5px 2px 50px;
}
.title {
font-size: 24px;
line-height: 24px;
font-weight: bold;
}
.left {
float: left;
font-size: 14px;
font-weight: bold;
color: #aaa;
}
.right {
float: right;
font-size: 14px;
font-weight: bold;
color: #aaa;
}

Answer 9

<small><span>2013-01-12</span><span style="float:right;padding-right:10px;"> Format | Power Point</span></small>