For a user profile I'm trying to create a circular image plus a horizontal bar with the same height as the image. Also, it should be responsive. It should look as in the image below. In the black bar there will be text.
Could someone please help me with the correct CSS?
So far I have the code below but this already goes wrong in that the black bar is below the circle and not next to it. But also I don't know how to make the black bar start exactly in the middle of the image, to have the image on top, and to have text in the black bar start sufficiently to the right (while being responsive to screen size).
<div class="col-md-12 profile-topbar">
<div class="round">
<img src=<%= image_path('profile.gif') %>>
</div>
<div class="text-bar">
...
</div>
</div>
In my CSS file:
.round {
margin: 2em;
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.round img {
display: block;
width: 100%;
height: 100%;
}
.text-bar {
display: inline-block;
background: #FFF;
left: 222px; //Problem: not responsive. This block should start exactly halfway from the image.
width: 100%;
}
.text-bar p {
left: 250 px;
}
you could use
figure
andfigcaption
to structure your html.Inline-block
,vertical-align
andmargin
to set image aside text