Arranging images in a row with the help of :before and :after styling

Looking to use the pseudo selectors :before and :after to create a border around a div with images, but running into some issues. The :after image is not positioning correctly on the right side of the element and the text is dropping below the image. Check out this JsFiddle example for more details.

CSS

.panel {
    border:2px solid #634e32;
    border-radius:4px;
    margin-bottom: 30px;
    background-color: #ecd8b5;
}
.panel-header{
    margin: -5px -1px 10px 2px;
    padding-left: 15px;
    background:url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_t.png') repeat-x;
}
.panel-header:before,
.panel-header:after{
    content:"";
    width:9px;
    height:36px;
    overflow:hidden;
}
.panel-header:before {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tl.png');
    margin-left:-20px;
}
.panel-header:after {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tr.png');
}

HTML

<div class="panel">
    <div class="panel-header">Header Title Goes Here</div>
</div>
htmlcss

Answer №1

Click here to view the code on JSFiddle

.panel {
    border:2px solid #634e32;
  	border-radius:4px;
    margin-bottom: 30px;
    background-color: #ecd8b5;
    position: relative;
    padding-top:40px
}
.panel-header{
    position:absolute;
  	top:0;
    left:0;
    right:0;
    padding-left: 15px;
    background:url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_t.png') repeat-x;
    height : 29px;
    color: hotpink; /* :P */
    padding-top: 10px;
}
.panel-header:before,
.panel-header:after{
    content:"";
    width:9px;
    height:36px;
    overflow:hidden;
}
.panel-header:before {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tl.png');
    position:absolute;
    left:0;       
    top:0;
}
.panel-header:after {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tr.png');
    position:absolute;
    right:0;
    top:0;
}

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 is the best way to erase information displayed when hovering over an element using mouseout?

Whenever the user hovers over an image, an information box appears regarding that specific image. The information inside the box changes as I move over another image, but when not hovering over any images, the information box remains visible. Unfortunately ...

javascriptphpjquerycssweb

Using React to open a (.json) file through a dialog box and access the contents

I'm struggling to understand how to load a local .json file and access its contents in order to store it in a 'state' variable. Here's the code I have so far: import React, { Component } from 'react' import Files from ' ...

htmlreactjsecmascript-6

Using CSS, the ability to scroll to the top of a page is restricted when an inner div expands to the top while using flex

While following a tutorial on YouTube, I encountered an issue where my expanding content, when exceeding the size of the window in a small screen view, prevented me from scrolling to the top. Interestingly, I could scroll to the bottom and back up to that ...

htmlcssflexbox

Square Division, width set to match 100% of the height

I have been attempting to create a square shape that is responsive, with the width determined by the height of the element (100%). I personally think achieving this using CSS alone is not possible. The goal is for the square's width to match its heig ...

javascriptcssresponsive-design

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...

htmlcssangularjsdatatableresponsive-design

Enhance the appearance of Font Awesome stars by incorporating a hover effect

Is there a straightforward way to make them turn solid yellow when you hover over them? const styles = theme => ({ root: { flexGrow: 1, overflow: 'hidden', padding: theme.spacing(0, 3), }, paper: { maxWidth: 800, mar ...

cssmaterial-uifont-awesome

Encountering a NaN outcome when summing values from various select options

I'm working on a project that involves adding up the prices based on the surface chosen by the user. I'm struggling with calculating the partial cost when the user's choice changes. totalSum.ts num: Calculation totalAmount: number cate ...

javascripthtmlarraysangulartypescript

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss

You are unable to select the element in IE if there is an image in the background

Apologies for coming back with the same question, as I realize now that I was not clear in my explanation yesterday. You can find the codepen here (please note that it may not open in IE8). My issue is with dragging the 'move-obj' element in IE b ...

javascripthtmljquerycssinternet-explorer

Customizing skin CSS for DNN Portal and Page images

Currently, I have a unique custom skin that I personally created. It is implemented on multiple portals that I am responsible for managing. My goal is to incorporate the ability for the header image to change based on the specific page being viewed. The he ...

cssdotnetnukedotnetnuke-7

Switch the designation to Hover Class

I am working with nested divs and have assigned a CSS class to one of the inner divs. How can I trigger the hover effect of the class (class.hover) when the user hovers over the outer div, even if they are not directly over the inner div? I believe this m ...

javascripthtmlcss

The Material UI text field on mobile devices causes the screen to zoom in, cutting off the top content and displaying the bottom of the page

Whenever I click on the Material UI text Field during login, the screen gets pushed down and cuts off content at the top of the page. View image description here -I have examined my CSS to see if setting the container height to 100vh is causing this issue ...

cssmaterial-uifrontendtextfieldresponsiveness

Using AngularJS to send data from a controller to a factory

Looking to implement a basic pagination feature with data from the backend. Each page should display 10 activities. /feed/1 -> displays 0-10 /feed/2 -> displays 10-20 /feed/3 -> displays 20-30 The goal is to start at page 1 and increment the pag ...

javascripthtmlangularjs

Navigate through the list of options by scrolling and selecting each one until the desired element is

Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly. The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them. You can ...

javascripthtmlcssangularjs

As you scroll, the opacity gradually increases, creating a dynamic visual

Struggling to replicate a feature on a website where images gain opacity as you scroll down? Check out this site for reference: . While my current code somewhat achieves this effect, I'm having trouble figuring out how to apply a darker opacity gradua ...

javascriptjquerycssif-statementscroll

What iOS Printing and HTML formatter should you use and what level of sophistication is best?

Currently, I have successfully created an iOS 5 application that sends a job to the print queue. The functionality works fine and utilizes the UIMarkupTextPrintFormatter to generate the document in HTML format. At this point, I am using a simple HTML str ...

htmlobjective-ciosprintingxcode4

What is the best way to place a header in a specific location on a

As I continue working on my project, I am facing a challenge in positioning the headings in specific places. My ultimate goal is to achieve a look similar to Figure 1 for my headings. [Figure 1][1] However, as of now, my layout resembles Figure 2. I find ...

csshtmlheadernavbar

Sorting of tables does not function properly following an ajax request

I built a table that utilizes an AJAX response triggered by selecting a date from a drop-down menu. <!--datepicker--> <div class="col-md-4"> <input type="text" name="date_po_month_picker" id="date_po_month_picker" class ...

jqueryajaxhtml

Creating a new row does not result in the creation of a new span displaying the character count message

Every description field should have its own character counter, with different SpanIDs displayed in respective SpanIds for each new row. How can this be achieved? <div class="row"> <div class="col-s ...

javascripthtmljquerysharepoint-2013

Customize the bootstrap carousel to show multiple slides at the same time

I am looking to customize the bootstrap 3 carousel in order to show multiple slides at once. I understand that I could place several thumbnails in a single slide (div .item), but the issue is that the carousel will progress through them all at once, moving ...

jquerycsstwitter-bootstraptwitter-bootstrap-3carousel