Tips for making a circle and a bar overlap using CSS

Trying to create a circular image and a horizontal bar of equal height next to it in a user profile. It needs to be responsive and look like the image below, with text in the black bar.

Looking for help with CSS to achieve this:
I currently have the code below, but the black bar is displaying below the circle instead of beside it. I also need assistance making sure the black bar starts in the middle of the image, positions the text correctly inside the bar, and maintains responsiveness.

<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; //Issue: not responsive. The block should start exactly halfway from the image.
  width: 100%;
}
.text-bar p {
  left: 250 px;
}

Answer №1

Enhance your HTML by utilizing the figure and figcaption elements for better structure.

Utilize Inline-block, vertical-align, and margin to position images alongside text effectively.

figure {
  margin-left:50px;/* offset image width */
  background:black;
  box-shadow:0 0 1px;
  border-radius:3px;
}
img {
  border-radius:100%;
  position:relative;/* brings it at front, can trigger z-index too */
  box-shadow:-1px 0 1px, 1px 0 1px white ;/* customize as needed */
  vertical-align:middle;
  right:50px;/* visually adjust from real position */
  margin-right:-40px;/* shift text accordingly */
}
figcaption {
  display:inline-block;
  vertical-align:middle;
  color:white;
}
p {
  margin:0;
}
<figure>
  <img src="http://lorempixel.com/100/100/people/9" />
  <figcaption>
    <p>some text here 10px away from image</p>
    <p>and more</p>
  </figcaption>
</figure>

Answer №2

One approach is to (1) apply a margin of 50px to the container and a margin of -50px to the avatar inside. (2) Format the bio as a table so that vertical alignment can be used to center the text.

CHECK OUT THE JSFIDDLE DEMO

body {
    background: teal;
}
.user {
    height: 120px;
    background: #333;
    margin-left: 55px;
}
.avatar {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    margin-left: -50px;
}
.bio {
    display: table;
    height: 120px;
    color: #fff;
}
.bio p {
    display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
    margin: 0;
}
<div class="user">
    <img class="avatar" src="http://i.imgur.com/9pnkFjf.jpg" />
    <div class="bio"><p>Jane Smith is a mysterious individual.</p></div>
</div>

Answer №3

Don't forget to make sure the title bar is absolutely positioned.

Check out this link for reference!

I've used SCSS in my code, but here's the compiled CSS:

.round {
  margin: 2em;
  overflow: hidden;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.round img {
  display: block;
  width: 100%;
  height: 100%;
}

.text-bar {
  display: block;
  margin: 2em;
  position: absolute;
  background-color: #000;
  left: 75px;
  top: 0;
  width: 100%;
  height: 150px;
  z-index: -1;
}

.text-bar p {
  position: relative;
  left: 75px;
  color: white;
}

Answer №4

<div class="circle">
</div>


html,body{
  width:100%;
  height:100%;
 }
.circle{
 border-radius:50%;
 width:3em;
 height:3em;
 background-color: red;
 }
.circle:before{
margin-left: 1.5em;
content: " ";
display: block;
position: relative;
background: black;
height: 3em;
width: 500%;
z-index:-1;
}

Link to view this code on CodePen

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason for the discrepancy between my get_token() function and the value obtained from request.META.get("CSRF_COOKIE")?

Can anyone shed light on why I'm facing this particular issue? I am currently exploring the integration of Angular 17 as a Frontend with Django as a Backend. While validating a form, I encountered an issue where the token obtained from Django does no ...

changing font size on a mobile-friendly site using javascript

Currently, I am designing a responsive webpage utilizing Bootstrap framework. Situated in the center of the screen is a text that reads: <p id="entershop" ><a class=no-deco href="shop.html">enter shop</a></p> Within the Bootstra ...

Create a minimalist Vue table design that enforces a maximum of 2 or 3 columns within

Is there a way to make my v-simple table with v-chips and v-badges align correctly in two or three column peer cell format? Here is the table for reference: Currently, I only have scoped styling applied: <style scoped> .time-slot-x-small { border- ...

Step-by-step guide on creating a clickable button that triggers the appearance of a block showcasing a dimmed photo upon activation

Is there a way to create a button that triggers a pop-up block featuring a darkened photo when clicked? ...

Developing a quiz using jQuery to load and save quiz options

code: http://jsfiddle.net/HB8h9/7/ <div id="tab-2" class="tab-content"> <label for="tfq" title="Enter a true or false question"> Add a Multiple Choice Question </label> <br /> <textarea name ...

JavaScript PIP video feature

Currently, I am utilizing the requestPictureInPicture function to display the HTML video element in a popup window. However, I have encountered an issue where the size is restricted to approximately 920 x 540 when in Picture-in-Picture mode. I am wonderin ...

Tips for creating a clickable popover within a window that remains open but can be closed with an outside click

Is there a way to ensure that my popover window remains clickable inside its own area without closing, but automatically closes when clicked outside of the window? This is the code I am currently using, which is triggered by a button click: if (response. ...

Transferring css to an external file within an angular 4 component by utilizing webpack

I encountered this specific error message: Error: Anticipated 'styles' to be a collection of strings. Despite the fact that I have clearly defined the styles as an array of strings: styleUrls: ['./app.component.css'] Can anyone pinp ...

Create a webpage that utilizes PHP, MySQL, and HTML to load additional content in a way similar to Facebook or the

Seeking guidance on how to incorporate pagination functionality akin to Twitter and Facebook, where a list of items loads initially and then a "load more" button appears below. When clicked, this button appends the list with additional items. Can anyone ...

Customizing the navbar to be inverse on each webpage using CSS, PHP, and Bootstrap

Dealing with a Bootstrap navbar across multiple pages on my website is becoming a hassle. Every time I need to make a change, I find myself jumping from one page to another just to update it. My objective is to have the ability to edit the navbar in one ce ...

Is there a way to customize this JQuery and HTML code to be specific to each row?

In CB UserList, each row in the form appears multiple times representing different records. The below code is intended to display a submit button and modules for show/hide functionality separately for each record on the list. However, when a user makes a s ...

The adhesive navigation bar isn't adhering

I'm having issues with making my navbar inside a header sticky over the whole page. Despite trying various solutions like removing overflow, adjusting the flexbox, and setting a specific height on the parent element, I still can't get it to work. ...

Tap, swipe the inner contents of a <div> element without being inside it

(Make sure to check out the image below) I'm facing an issue with a <div> on my website. It's not taking up the full width of the page, and the scrolling functionality within the <body> is not working as expected. I just want the cont ...

Leveraging the Scroll feature in Bootstrap for smooth scrolling

Seeking assistance with implementing scroll in Bootstrap 5 on my child component (ProductList.vue). Can anyone guide me on how to integrate the code? I have been searching for a solution without success. Below is the Bootstrap 5 code on the child component ...

A webpage specified with 'charset=iso-8859-1' accompanied by <!DOCTYPE HTML> is triggering a cautionary alert

After running the W3C validator on an HTML document, I discovered that using the following meta tag: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> in conjunction with: <!DOCTYPE HTML> results in ...

Why isn't Google Map showing up in my HTML <div> section?

I am currently working on a web page that consists of two containers. The mainmapdiv container covers the entire page, while the mainhomediv container is positioned on top of the mainmapdiv. My goal is to hide the mainhomediv container and show a Google Ma ...

Achieving perfect alignment of an iframe on a webpage

Having an issue with aligning the iframe on my website. I have two buttons set up as onclick events that connect to internal pages displaying PHP data in tables within the iframe. Despite trying various CSS styles and positioning methods, I can't seem ...

What steps can I take to guarantee that a select change event occurs following the setting of ngmodel in Angular2?

I am facing an issue with a select element wherein a basic (change) handler is attached along with an ngmodel. Whenever an <option> with a ng value is set, the change handler triggers before the [(ngModel)] reflects the new values. <div> ...

I am encountering issues with my JavaScript code not functioning properly

I am currently working on a website project in HTML where I need to retrieve JSON-formatted data using JavaScript and then display it on the site. However, I am facing an issue as I cannot seem to identify any errors in my code. I followed this sample code ...

Tips for implementing a default font on a website

I've incorporated a unique font into a specific section of my website design, but I'm aware that this particular font may not be available on most of my users' computers. Is there a method to apply this font to selected text without resortin ...