How can I create a line-image-line in CSS that is less than 100% wide and remains responsive?

How can I create a similar design using HTML/CSS?

https://i.sstatic.net/o5xzn.png

Solution requirements:

  1. An icon or small image in the center.
  2. Responsive design that works with current breakpoints.
  3. The line should not span 100% width of the screen.

I've explored examples on stack overflow, but none quite match what I need.

Although this sample is exactly what I want, it's an image and I can't view the source.

Below is my code, but it has two issues.

<div style="height: 1px; background-color: grey; text-align: center;">

<span style="position: relative; top: -2.25em; padding: 5px;"> 
<img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png' alt="text" style="width:80px;height:80px;"></span>

</div>

https://i.sstatic.net/eiitk.png (Also see this Fiddle)

1) Image transparency causes the line to appear over it. Is there a way to rectify this?

2) The line spans 100% width when it shouldn't.

Thank you!

Edit: Resolved the width issue with (width 80%, margin: 0 auto)

htmlcssfrontend

Answer №1

Feeling a bit rushed at the moment, but give this code a try. I'll make sure to fix the centering when I'm back home.

CSS

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }


.container{
  width:70%;
  margin:0 auto;
}

.left{
  margin:3% auto;
  width:30%;
  float:left;
  border-bottom:1px solid black;
}

img{
  margin:0;
  width:20%;
  float:left;


}

.right{
  margin:3% 0;
  width:30%;
  float:left;
  border-bottom:1px solid black;
}

HTML

<div class="container clearfix">
  <div class="left"></div>
  <div class="img"></div>
    <img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png'>
  <div class="right"></div>
</div>

Answer №2

Here is a suggestion: Apply the same background-color to your icon .fa fa-heart-o as the parent div. This will merge the colors of your background-color with your icon background-color.

body{
  background:#111;
}
#line{
  width:100%;
  height:2px;
  background:#fff;
}
#line > .fa{
  position:absolute;
  top:0;
  left:45%;
  color:#f22;
  background:#111;
  width:50px;
  padding-left:40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<div id="line">
<i class="fa fa-heart-o"></i>
</div>

If you want to place that icon above an image, you can use pseudo selectors ::before and ::after on the parent div to create borders on the left and right, and set background:transparent on your icon. You may need to adjust the alignment of elements, but these are two ways to center the icon and make its background transparent.

body{
  background:url('https://source.unsplash.com/random');
}
#line{
  width:100%;
  height:2px;
}
#line::before{
  content:'';
  width:45%;
  height:2px;
  background:#f22;
  position:absolute;
  left:0;
}
#line::after{
  content:'';
  width:45%;
  height:2px;
  background:#f22;
  position:absolute;
  right:0;
}
#line > .fa{
  position:absolute;
  top:0;
  left:42%;
  color:#f22;
  background:transparent;
  width:50px;
  padding-left:40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<div id="line">
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart-o"></i>
</div>

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

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

cssangulartreeangular-material

Tips for creating Viewport dimensions in Tailwind CSS

As I delve into the depths of the official Tailwind CSS documentation, I come across a valuable nugget of information: Embrace w-screen to effortlessly extend an element to occupy the full expanse of the viewport. Initially, w-screen proves handy as I b ...

csstailwind-css

What is the solution for incorporating multiple elements in knockout's applyBindingsToNode function?

I am currently using knockout applyBindingsToNode to dynamically add and remove elements in order to update my html. I need to cut the binding, which is why I am utilizing applyBindingsToNode. In an example I have provided, if you click on the button "Reb ...

javascriptjqueryhtmlknockout.js

Are CSS designers setting boundaries for their designs by restricting themselves to layouts that can be handled by CSS from the start?

After seeking guidance on reaching CSS zen in this forum, I have come to realize that my struggles largely stem from positioning. Some sources suggest that CSS may not always be the most efficient layout system. As CSS designers, do we limit ourselves fro ...

css

Using CSS Clip Path to conceal elements

My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues. I initially positioned the top so that they touch perfectly and nothing interferes with the angled ...

css

`Implementing AJAX data binding in a Flask Python Application`

I am currently laying the groundwork for my first Python Flask web application. While I have the server-side details sorted out, I have some queries regarding the client-side implementation. The application I am working on will be a single-page applicatio ...

jquerypythonhtmlajaxflask

Implementing jQuery slideDown effect on a nested table element

I am facing an issue where the nested table does not slide down from the top as intended when a user clicks the "Show" button. Despite setting the animation duration to 500ms with jQuery's slideDown() function, the table instantly appears. I am using ...

javascripthtmljquery

Creating text with stripes using CSS

Is there a way to create text with a striped color using CSS? I'm thinking about something similar to applying background-image or background-color to text. Or do I need to use a specific font that has colored stripes? ...

css

Discovering a way to capture the space bar event in a number input field with JavaScript

Is there a way to capture space bar input with an onchange event in JavaScript? <html> <head> <script type = "text/javascript"> function lala(aa){ console.log(aa + " dasda"); } </script> </head> <body> <input ty ...

javascripthtml

The text entered in the textbox vanishes after I press the submit button

When a user selects a value in a textbox and clicks the submit button, the selected value disappears. <div class="panel-body" ng-repeat="patient in $ctrl.patient | filter:$ctrl.mrd"> <form> <div class="form-group"> ...

javascriptjqueryhtml

Is it possible to apply a single jQuery statement to multiple selectors within the same webpage?

It may seem like a minor issue, but I've encountered a small dilemma. I have SVG icons on my webpage that are supposed to reveal a hidden div when hovered over. While the first icon functions as expected, subsequent icons do not show the hidden div. A ...

jquerycsssvg

Use regular expressions and JavaScript to enclose a series of English letters within a wrapper

I am looking to enclose a series or cluster of consecutive English characters within a <span> tag. In simpler terms, I aim to alter the appearance of English language in my writing. Therefore, I need to identify English characters and surround them ...

javascriptjqueryhtmlregex

What is the process for altering the color of an HTML output depending on its values?

I created a simple HTML code to showcase some outcomes. The possible results are SUCCESS, Failure, and Still Failing. I want these results to be displayed with corresponding colors, such as green for SUCCESS, and red for both Failure and Still Failing. I ...

javascriptjqueryhtmlcss

The list in the navbar is misaligned and not centered vertically within the flex container

I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code. <nav className="nav navbar"> <h3> Logo </h3> <ul className= &q ...

htmlcssreactjs

Tips for adding page numbers to a PDF created from HTML using wkhtmltopdf

Our response: We currently utilize wkhtmltopdf for generating PDFs from a specified html template. A brief overview: We incorporate Sulu CMF in constructing our backend, which is built on Symfony2. The KnpSnappy Bundle acts as a Symfony wrapper for wkht ...

javascripthtmlsymfonypdfpdf-generation

Utilize PHP to read a text file and merge identical entries to declutter the

I am testing a code snippet that redirects users to a different page if their IP address does not match the predefined one. If it doesn't match, I also want to save their IP in a text file. $file = fopen("ips.txt", "w"); if ($ip == "iphere") { e ...

phphtmlarraysfopenfwrite

Acquiring the value of an input box in VBA through HTML

Can someone provide guidance on how to retrieve the value from an input box on an Internet Explorer page using VBA? I have tried various solutions but none seem to work. Below is the HTML code I am working with. I specifically need the value of the bolded ...

htmlvbainputbox

Difference among rows

I am currently working on a table design with 2 rows that have different colors. There seems to be some space between the two rows and I am looking for a way to eliminate that gap. Can anyone provide me with a solution? https://i.stack.imgur.com/8N8Rw.png ...

htmlhtml-table

Guidelines for choosing input using jQuery

I am looking to retrieve the value of an input using jQuery. Specifically, I need to extract the value of a hidden input with name="picture" when the user clicks on the حذف این بخش button by triggering the function deleteDefaultSection( ...

javascripthtmljqueryjquery-selectors

I require a modification in the style of every anchor element found within a div containing the designated class

In a div with the class fview, there is a nested element called iNside which contains a span. Additionally, there are anchor elements within another span, ul li, and another div, among others. I want all anchor elements to have the same style. I tried app ...

css