I have a button background class that I want to reuse multiple times. How can I keep all the common styles separate and only change the URL multiple times?
Here is my CSS:
.menuBtnColour{
position: relative; //common
top: 0;//common
left: 0;//common
right: 0;//common
bottom: 0;//common
background-repeat: no-repeat;//common
background-size: 50%;//common
background-image: url(1.png); //Is there a way to keep this separated for use with the above styles?
}
If you have three buttons styled with the class .menuBtnColour and want each to have a different background without using inline CSS, you can assign each button a more specific class like this:
<button class="menuBtnColour btn1"></button>
<button class="menuBtnColour btn2"></button>
<button class="menuBtnColour btn3"></button>
Then, you can style the .btn1, .btn2, and .btn3 classes in your CSS:
.menuBtnColour{
position: relative; //common
top: 0;//common
left: 0;//common
right: 0;//common
bottom: 0;//common
background-repeat: no-repeat;//common
background-size: 50%;//common
}
.btn1{
background-image: url(1.png);
}
.btn2{
background-image: url(2.png);
}
.btn3{
background-image: url(3.png);
}
Good evening everyone, I'm Eric, currently learning how to create web applications using Flask and Python. I've made some progress connecting to the database and performing searches without any problems. However, I am encountering two issues that ...
About a month ago, I posted a question seeking guidance on how to extract a single value from a webpage. The solution was successful, but then I realized there are numerous stocks out there. After some consideration, I decided to attempt creating a loop fo ...
My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...
As I navigate through a page filled with HTML codes, I stumble upon snippets like this: <ul class ='trainList'> <li> <div class="smallFont farelist no-discount "> <div class="train-no">ABC 701</div> ...
Is there a way to remove the cursor from a textbox when it is clicked on? I want the cursor to disappear after clicking on the textbox. jQuery(document).ready(function($) { $(function(){ $('#edit-field-date-value-value-datepicker-popup-0&ap ...
Using ngFor in a div to display an object containing HTML from an array collection. However, I want the object with the HTML node (HTMLElement) to be displayed without being wrapped in a div as specified by the ngFor Directive. Below is my HTML code snipp ...
Greetings! Currently, I am utilizing a JavaScript library from this source to resize images on the client-side. The image resizing process works successfully with the following code: document.getElementById('foto_select').onchange = function( ...
I am currently working on a basic modal feature where I pass a string to be displayed as the content of the modal window. Here is a snippet of the script I am using: $("[id^='mod_']").click( function() { var line1 = $(this).attr("d ...
How do I customize the label of a TextField and prevent a grey background color from appearing after selecting an item in Material UI? To view the solution, please visit this CodeSandbox link: CLICK HERE Label Customization Issue: https://i.sstatic.net/1 ...
When I use IE 6/7/8, I encounter a JavaScript error message. The problematic line of code reads as follows: document.getElementById('all').style.backgroundColor = color; The specific error reported in IE 6/7/8 is as follows: Invalid property ...
I seem to be having trouble identifying an issue or perhaps I am misunderstanding something (I am using daisyui + nx + tailwind css + angular). To simplify my problem, let's consider the following scenarios: In the first scenario, I have: <div cl ...
I have recently delved into using PhalconPHP 1.3.1 for an application related to my master's thesis. While it is still a work in progress, I am currently focusing on implementing CRUD functionality and refining the user interface. This endeavor marks ...
I am working on a massive project that takes 6 to 8 minutes to load when I run npm start. Is there a way to speed up the loading process by first displaying the sign-in page and then loading everything else? ...
Edit : I am aware that their is a question mark in the jQuery, CSS and HTML. Due to it being generated automatically by Framework I cannot remove it. I'm trying to apply dynamic styling to the input and label elements in my HTML using jQuery. However ...
<div style = "height:auto;width:auto; background-color:#5C81F4;display:flex; justify-content:center;"> <div style="display:flex;flex-direction:column; width:90vw;height:auto;overflow:hidden;border-radius:20px; background-color:# ...
Looking for a front-end solution to a common practice. In the past, I've stored reusable HTML elements (such as <nav>, <header>, <footer>, etc.) in a functions.php file and used PHP functions to include them on multiple pages. This ...
I'm currently using Material UI chip to show name and email next to each other. However, when the name is long, the email goes beyond the chip boundary. Here's my function that generates the chips: getGuestList() { let {guests} = this.sta ...
I am having trouble getting two lists to display side by side. The second list keeps appearing below the first list. I need them to be in separate divs because they will have different colors and content. Additionally, the lists will be dynamically populat ...
I'm having an issue with the Bootsrtap row overflowing past the desired width, causing a scrollable area on the browser. Does anyone know how to fix this? You can see the site here: www.testing.cpukeychains.comhttps://i.sstatic.net/cDcot.png ...
Currently experiencing an issue with Google Chrome where the first list item's bullet is floating right while all other list items' bullets are aligned correctly at left. Here is the code snippet causing the problem: <div class="window_sub_ ...