As I'm developing a website, I've encountered an interesting challenge...
I have an h3 tag that requires a repeating background on both sides. It's a bit difficult to describe, so I created this graphic to illustrate...
Essentially, it's a title with a repeating background on either side of it, but the background stops where the title starts and then resumes afterwards. Despite trying various CSS approaches, I haven't been successful... Any suggestions?
Illustration of using :before and :after pseudo-elements
http://jsfiddle.net/JTN2U/ - Customize as desired
One approach is to include a repeat-x background in the h3 element and then nest a span tag inside. Of course, there are numerous alternative methods for achieving this effect as well.
For a live demonstration, check out this demo.
It may be helpful to include an additional tag within your h3 element, like so:
<h3><span class="text">title goes here</span></h3>
CSS:
h3 {
background: url('img.jpg') repeat-x;
padding: 0 20px; /* adjust as needed */
}
h3 .text {
background: #fff; /* customize as desired */
}
Update: HTML:
<h3><span class="pre"></span><span class="text">title goes here</span><span class="post"></span></h3>
CSS:
h3 span.pre,
h3 span.post {
background: url('header-bg.jpg') repeat-x;
display: block;
width: 20px;
float: left;
}
h3 span.text {
float: left;
display: block;
}
Is this solution suitable? It's not just one single tag...
<style type="text/css>
div {background-image: url('navlolite.gif'); text-align: center;}
label {background-color: #FFFFFF; padding-left: 24px; padding-right: 24px;}
</style>
<div>
<label>Heading Text Here</label>
</div>
Can someone help me troubleshoot an issue with toggling React state after a button click? I want to be able to change "Work From Office" to "Work From Home" and vice versa, but it's only working once. Is there a way to achieve this using an if stateme ...
I have a dynamic JSON object that includes a button element. I am using createElement and Material UI to display the data from this object. I wanted to add custom CSS styling to the button component using className, but I've been struggling to achiev ...
Whenever I click on a modal, it changes my body to overflow:hidden. As a result, the scrollbar disappears and my page becomes unscrollable. Once I close the modal, my body reverts back to overflow:auto allowing the page to scroll again. These functionaliti ...
I am currently attempting to integrate jQuery with the electron framework using electron fiddle. However, it seems that jQuery is not functioning correctly and animations are not being executed. For reference, you can check out the example: https://www.w3s ...
There seems to be an issue with aligning text in Adobe Illustrator when exporting graphics to SVG. When the text is initially exported, it is aligned to the center, but if you change the text using JavaScript from "Default text" to "New text", the alignmen ...
I am currently working on a website project, and I am looking to display text content in two columns using flexbox with each column taking up 50% of the width. However, I am encountering an issue as illustrated in the image below: Instead of leaving the t ...
My drop down menu includes an onChange event that triggers a JavaScript method. However, when I select a new value and then click the reset button, the dropdown reverts back to its original value but the onChange event does not fire. <select onChange= ...
While attempting to scrape data from the AJIO website, I encountered an issue where the content retrieved by Python did not match what I saw when inspecting the exact webpage. It appears that there is some JavaScript code present on the page which dynamica ...
The query is functioning properly, returning a table with the associated data in rows. I am looking to have a button displayed with each row that triggers a function specific to that row when clicked. Currently, the function works manually by inputting the ...
I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...
i am having trouble organizing 6 div elements into 3 columns per row. Currently, I have them arranged in two rows, but the issue arises when a column's h2 element is long and it pushes down the column below, creating a large space in the second row. A ...
Despite many attempts, I haven't been able to make any of the provided answers work in my code. My setup involves using Bootstrap 3 panels and collapse functionality to display advertisements. In the default view, only the advertisement heading is vi ...
I am facing a challenge with my code. I am struggling to create the desired design where there are two columns and below them an input box that will be displayed when a button is pressed. The design I am aiming for can be viewed here: enter image descripti ...
I am trying to implement a simple html page with a single table that updates in the background every 5 seconds. The traditional solution of using <meta http-equiv="refresh" content="5"> is not suitable as it would disrupt the user experience by displ ...
Need help creating a full-width dropdown for a Bootstrap 4 navbar using the standard boot4 Navbar? Check out the navbar template I am currently working with. Here is an example of how I want it to look: Desired design image link <nav class="navbar fix ...
My table has a large number of dynamic rows, and when I try to print or preview it using the window.print() function, only the table header (thead) appears on the first page. How can I make sure that the table header appears on each printed page? <div ...
I have integrated a Setmore code on my website to facilitate appointment booking, which triggers a popup similar to what you would see on a hotel reservation site. <script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe ...
Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...
I am currently working on a web application using Flask and I need to specify which CSS and JS files should be included in the rendered HTML page based on a condition. There are times when I want to include mycss1.css and myjs1.js: <link href="/sta ...
Understanding CORS: Cross-origin resource sharing (CORS) is a method that enables limited resources on a webpage to be requested from a different domain than the one where the initial resource originated. Let's say I have a simple HTML page with a li ...