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

Using regular expressions in Python with PyQt4 to eliminate anchor tags from HTML links in text

When using my QTextBrowser, I am able to identify links such as "www.test.com" with the following regular expression: re.compile( r"(\b(?:(?:https?|ftp|file)://|www\.|ftp\.)[-A-Za-z0-9+&@#/%?=~_()|!:,.;]*[-A-Za-z0-9+&@#/%=~_()|])" ...

pythonhtmlregex

What is the best method for eliminating underscores from text that is hyperlinked in a locally hosted HTML file?

I recently encountered an issue with my HTML file where the text "Indian" became underlined after saving the file. Here is the code snippet: <a href="file:///G:\work files\project\indian.html" target="_blank"> <div class="button ...

htmlcss

Tips for horizontally aligning a modal with smooth transition effects using Material UI and ensuring it is responsive

Struggling to center a modal with transition using Material UI and facing challenges with responsiveness on small screens, particularly mobile devices. The modal looks good and is centered on smaller screens if no transition is used. However, when a trans ...

cssmaterial-uiresponsive

Include a hyperlink to a website that was created with the help of Photoshop

Is it feasible to incorporate a hyperlink into a website that was designed using Photoshop templates? In the past, creating templates in Photoshop and then adding links with tools like Dreamweaver was common practice. I believed that dynamically adding li ...

phphtmlweb-deployment

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

javascripthtmlcssstyled-components

Is it possible to add a jQuery-generated element to pure vanilla JavaScript?

I am facing a challenge in creating a new notification div when an event is triggered. Ideally, I would normally achieve this using jQuery by utilizing something like $("myDiv").append(newDiv). However, in this case, the item selector to which the new div ...

javascriptjqueryhtml

jQuery slider - display unlimited images

Currently, I am encountering issues with a Flickity carousel of images. When an image/slide is clicked, a modal window opens to display a zoomed-in version of the image. The problem arises when there are more or fewer than 3 images in the slider — my cod ...

javascriptjquerycsscarousel

The Input element's onChange event is not functioning as expected

I am experiencing some issues with my code. I am trying to dynamically change the background color based on user input, but I am struggling to make it work. It seems like a simple task, so I must be missing something. Below is my HTML markup and jQuery: ...

javascriptjqueryhtml

Tips for avoiding accidental unit conversion in jQuery

Imagine having the following code: var $element = $('<div/>'); $element.css("margin-left", "2cm"); console.log($element.css("margin-left")); When tested in Chrome, it doesn't return anything, but Firefox shows "75.5833px". Any sugges ...

javascriptjquerycsscross-browserunit-conversion

CSS: Creating a block that stretches the entire width of its parent block

I've been facing the same issue multiple times. Whenever I use the float property to display one block, the next block ends up overlapping with the first one. For example: Consider the following block of code: .row_item{ width: 30%; display: block; ...

htmlcsscss-float

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

htmlcssanchorsections

Delivering HTML, CSS, and JS through the power of Node.js and Express.js

const express = require('express'); const path = require('path'); const app = express (); app.use(express.json('public')) app.get('/PKorn/zealtech', function(req, res) { res.sendFile(path.join(__dirname, &a ...

htmlcssnode.js

Exploring Attachments in ASP.NET Core MVC Views

I have placed attachments in a Shared Folder on a server. I attempted to access them using the <a> tag <a href="file:///C:">Open Attachments</a> Unfortunately, this method did not work in ASP.NET Core MVC for unknown reasons. I ...

javascripthtmlasp.net-core

Solution for fixing the position of a div scrollbar under the browser scrollbar

When working on my web app, I faced an issue with a fixed div modal that takes up the entire screen. The problem is that the scrollbar for this modal is not visible, only the body scrollbar can be seen. It seems like the fixed div's scrollbar is posit ...

htmlcss

Increase the thickness of the scrollbar track over the scrollbar thumb

I've come across several discussions on making the track thinner than the scrollbar thumb, but I'm looking to do the opposite. Is it possible to have a scrollbar track that is thicker than the scrollbar thumb? ...

javascripthtmlcss

What steps should I take with my Android PWA manifest and service workers?

I created a web application that I want to prompt Android users to download when they visit. To build my service workers and manifest, I utilized PWA Builder which can be found at Now that I have the manifest file ready, should I simply upload it to the r ...

javascriptandroidhtmlprogressive-web-apps

Steps to eliminate validation following the clearing of input fields

This is the code I've written for live validation using AJAX in an input field. My issue is that I want the validation to be removed if all inputs are deleted. <script type="text/javascript"> $(document).ready(function(){ ...

htmljqueryajax

Spacing between hidden checkboxes and their labels

I've customized some checkboxes to resemble a select dropdown by hiding the input and using only the label as the visible element. However, I'm struggling to add margin between the elements, which seems to work only when the checkbox is visible. ...

htmlcsscheckboxinputmargin

Submit data from one form to another form located within an iframe

I am currently using a JX Browser that allows content to be displayed in an iframe. My goal is to automatically transfer the username and password of a user logging into my ticketing software to another form within an iframe. The page within the iframe is ...

javascriptphpjqueryhtmliframe

What steps should I take to modify my database while utilizing radio buttons in the edit mode?

I am experiencing an issue with the radio button functionality. When creating a new user.jsp, I am able to successfully add the value from the radio button to the database. However, when I attempt to edit the values in the jsp, the changes do not reflect i ...

javascriptjqueryhtmljsp