What are the steps to create a CSS 'shell' design?

How can I create an image displayed as a circle with border-radius:50%, along with some text on the same line that has a set width and background color? I want to achieve this without hard coding values. What is the best approach to do this?

Check out the picturehttps://i.stack.imgur.com/EfA26.png

View the code in action on JSFiddle

<div class="header">
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
    <p class="headingText">Hello</p>
</div>

.i {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.headingText {
    color: white;
    background: black;
    display: inline-block;
    width: 350px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
htmlcsscss-shapes

Answer №1

Consider implementing the following CSS styles:

.navbar
{
  margin-top:30px;
  margin-left:50px;
  position:relative;
}
.icon
{
  position:absolute;
  width:90px;
  height:90px;
  border-radius:50%;
  top:10px;
  left:20px;
}

.title
{
  color:white;
  background:black;
  display:inline-block;
  width:380px;
  padding-top:15px;
  padding-bottom:15px;
  text-align:center;
}

Answer №2

Achieving the desired effect is possible by using pseudo-classes and absolute positioning.

This answer works with your existing HTML markup, eliminating the need for any changes in that area and focusing solely on CSS modifications.

If necessary, additional padding can be added to space out the text further, allowing the background to adjust accordingly.

.header {
  position: relative;
  display: inline-block;
  margin: 30px;
  overflow: visible;
}
.header img.i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  bottom: 16px;
  left: -40px;
  z-index: 1;
  overflow: hidden;
  border: 3px solid black;
}
.header p.headingText {
  padding: 16px 32px 16px 80px;
  color: black;
  border: 3px solid black;
}
<div class="header">
  <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
  <p class="headingText">Hello</p>
</div>

Answer №3

Simply include position: absolute in the i class and adjust the margin of the headingtext:

HTML:

<div class="header">
  <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
  <p class="headingText">Hello</p>
</div>

CSS:

.i
{
  width:80px;
  height:80px;
  border-radius:50%;
  position: absolute;
}

.headingText
{
  color:white;
  background:black;
  display:inline-block;
  width:350px;
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
  margin: 40px 0 0 37px;
}

FIDDLE

Answer №4

To achieve the desired effect, consider using a block element with a negative margin applied to the top (half of the circle size minus half of the padding) and a margin added to the left (half of the circle size). Modify the following CSS:

.headingText {
    /*display: inline-block;*/
    display: block;
    margin-top: -45px;
    margin-left: 40px;
}

Check out this example fiddle for reference: https://jsfiddle.net/c67dchhv/

Answer №5

To keep it simple, just add the .header class position:relative; if you need to set a specific height and width, use .i class position:absolute; and apply margin to the .headingtext class. Check out this link for more information: https://jsfiddle.net/hamzanisar/aphzeyyt/, it may be helpful to you.

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

Divide text to reduce its width within the confines of a specific height on a div element

I've spent the past week scouring various forums, including stackoverflow, but I haven't been able to find a solution. In my responsive website, I'm using CSS flexbox to display dynamic menu items. Sometimes the text can be quite long, and ...

javascriptjqueryhtmlcss

Tips for improving the readability of HTML within a JavaScript file

This is the HTML I have been given <div data-role="collapsible"> <div class="prd-items-detials"> <ul> <li class="head"> <form> <label class="testtt" for="checkbo ...

html

Utilizing a drop-down selection menu and a designated container to store chosen preferences

My form includes a select dropdown that displays available options (populated from a PHP database). Users can choose options from the list, which are then added to a box below to show all selected items. However, I am facing a challenge with the multiple s ...

javascriptjqueryhtmlcss

Place the sorting image on the left side of the DataTable header

I am currently using DataTable in my code. The sorting images in the header of the table are on the right side while the labels are on the left, as shown below: https://i.sstatic.net/Bz6EO.jpg However, I would like to switch this arrangement and have the ...

jqueryhtmlcssdatatables

What is causing the #wrapper element to not fully contain all of its content within?

I am struggling to figure out why the wrapper on this page is not properly wrapping the content. It's only 332px tall for some reason when it should be the height of the content, which is causing the footer to pull up to the top of the page. Could I b ...

htmlcsswrapper

I'm curious about the meaning behind this code snippet: `$Odd = ($Odd == "even") ? "odd" : "even";`. Any ideas?

<?php $Odd = "even"; $query = $MySQLi->query("SELECT id, look, username, motto FROM users WHERE rank = '7'"); if($query->num_rows > 0): while($UserRow = $query->fetch_assoc()) { $Odd = ($Odd == "even") ? "odd" : "even"; ?&g ...

phphtmlcssstringcontent-management-system

Working with the collapse event in Bootstrap

After purchasing a template from ThemeForest, I found it to be absolutely amazing. However, I am struggling with using Bootstrap as it seems quite complex. The left menu is structured with collapsible ul and multiple li elements. I am seeking assistance o ...

javascriptjqueryhtmlcss

What causes the size of text to change when I zoom in my browser?

As I work on my website, I am facing a challenge with maintaining consistent text size as the page scales. For example: p { width: 10%; height: 10%; background-color: rgb(0,0,0); top: 50%; left: 50%; position: fixed; color: rgb(255,255,25 ...

htmlcsscss-position

Tips on incorporating FORM elements with tables and ensuring that data submitted through $_POST method is successfully posted

Recently, I have been encountering an issue with a simple FORM on my website. Whenever I press the SUBMIT button, nothing happens - the form seems to activate but no $_POST variables are being received. echo "<hr>1aa<br />\n"; ...

phphtmlformshttp-post

Steps for displaying a bootstrap modal in alignment with the triggering button's position

Recently diving into the world of bootstrap and AngularJs has been quite the learning experience for me. One challenge I encountered was trying to implement a bootstrap modal dialog box to show additional details within a table column. My goal was to hav ...

javascripthtmlcssangularjstwitter-bootstrap

The design problem arises from using jQuery to dynamically prepare the table body at runtime

The table row and data are not appearing in the correct format. Here is a link to the problem on Fiddle: http://jsfiddle.net/otc056L9/ Below is the HTML code: <table border="1" style="width: 100%" class="eventtable"> <thead style="color: b ...

javascriptjqueryhtml

Arranging content within columns according to their column position

As I design a grid with three columns, each grid box contains a div with a maximum width of 280px. Sometimes the grid columns exceed this width. To achieve my desired layout, I aim to align the content in the grid boxes so that the left column aligns to th ...

htmlcssflexboxcss-grid

How to send PHP email using HTML form

After attempting to find an answer to my inquiry here, I am now starting a new thread. Just a brief explanation: I have a Contact Form with 180 input fields and calculations for each field. I wish to send all the fields along with the calculated values v ...

phphtmlemail

Struggling to get custom button hover styles to work in React?

In the React project I'm working on, there is a button that has been configured in the following manner. <label style={styles.label}> <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} /& ...

cssreactjsbuttonhover

Unable to configure AngularJS inputs to have a blank default value

I am facing a peculiar issue where I am unable to initialize my input fields as blank/empty. Even after clearing the cache and performing a hard reload, Google Chrome seems to be auto-populating them with older cached values. Here is the current view: Th ...

javascripthtmlangularjs

Is it possible to integrate a Neo4j Graph Visualization running on a virtual machine into my flask user interface?

My current setup involves running Neo4j on an Azure Virtual Machine and accessing the graph visualization through a web browser. In addition, I have developed a UI using Python with Flask that is currently running locally. I am interested in embedding th ...

pythonhtmlflaskneo4jazure-virtual-machine

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

javascripthtmlcssangularjs

Positioning Backgrounds with Padding in DIV Elements

I am trying to figure out how to add a check mark next to text in a button with specific styling. I have managed to get the check mark aligned properly using Background:left center, but I also want to add padding and adjust spacing. Is there a way to achie ...

javascripthtmlcssbackgroundjsfiddle

Customize the text color of select list options in Angular 5

Is there a way to style the foreground colors of select list options differently in this dropdown code? <select id="tier" class="form-control" [(ngModel)]="tierId"> <option *ngFor="let m of tierList" value="{{m.tier}}" > {{m.option ...

htmlcssangularangular5

What is the best way to combine PHP with HTML in your code?

I am looking to display data from a database in a table format. Additionally, I want to include images sourced from the same database. Using AJAX, I have a function called getPosts that fetches data from getPosts.php and populates a table with it. Althou ...

phpjqueryhtmlmysqlajax