I have been struggling to find a solution for my problem, so I decided to post this topic in the hopes that someone can help me out.
I am facing an issue with the image overlay border line in the "Service provided" section. Despite trying, I have not been able to achieve it. Below is the code I have used:
http://codepen.io/thehung1724/pen/iykFu
I would greatly appreciate it if anyone could provide assistance. Thank you in advance.
From what I understand, it seems like using two lines would be a good solution.
&:before,&:after{
border-top: 1px solid #999;
content: '';
position: absolute;
top: 42%;
width: 30%;
}
&:before{
left: 50%;
margin-left: 20px;
}
&:after{
right: 50%;
margin-right: 20px;
}
To achieve the desired effect, consider adjusting your CSS by placing the PNG image currently located below the line. Here's an example:
.medium-separator {
background:url('transparent.png') repeat-x #c00;
height:25px;
display:block;
}
Move the line after the image to ensure it appears on top:
&:after{
margin: 0 auto;
border-top: 1px solid #fff;
content: '';
position: absolute;
top: 42%;
width: 80%;
left: 0;
right: 0;
}
This approach will create the desired gap in the line as you intended. Alternatively, you could combine the border and small icon into a single image instead of generating a border separately. Consider making the entire element a PNG for simplicity.
I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...
I have customized a dropdown menu. <select name="country"> <option value="Andorra">Andorra</option> <option value="Albania">Albania</option> <option value="Armenia">Armenia</option> <opt ...
Is there a way to extract the $_POST data from all the selects on the page when the user can use Javascript to add an undefined number of sorts, given that $_POST expects ids instead of classes? html file - include_sorts.php <div class="sorts"> ...
When testing the simplified version in the Browser at https://codesandbox.io/s/competent-bassi-yjtoj, everything worked as expected. However, in my project where I'm utilizing Electron, React, MUI, and plain CSS, I encountered an issue that I'm ...
Welcome to my first post! As a newbie in web development, I have just started my first project. While I feel comfortable with HTML and CSS, jQuery is proving to be a bit challenging for me. In the head section of my intranet page, I have the following cod ...
I need to dynamically add multiple form fields when a button is pressed, and I want all the fields to be displayed in a table format (each field should have its own space in a <td>field</td> structure). Currently, I am facing an issue where if ...
I want to design a horizontal menu with an animated effect that activates when hovering over first-level items. Here is the code snippet: .nav { float: right; } .nav ul { list-style: none; padding: 0; margin: 0; } .nav ul li { position: relat ...
I am facing a requirement to customize the colors of ribbon styles instead of using the default ones. After researching pattern matching in CSS, I attempted the following code, but it did not work: This is my original CSS: .ms-cui-cg-**tl** .ms-cui-ct-f ...
I'm encountering an issue with a webpage element that has a hide/show animation. Despite the initial state being hidden, when the page loads, it still displays the hide animation. I attempted to set ng-show="false", but the hide animation persists upo ...
I have been attempting to use the addClass function in JavaScript to add a class, but I am struggling to make it work. Is there a specific way to define a class that will be added to an element when clicked on? Here is what I have attempted: var input = ...
As a new developer diving into the world of WordPress, I am aiming to create a sleek and minimalistic grid/card layout for my website. Struggling to achieve this, I seek guidance on how to replicate the design seen in the following link: desired result H ...
We are currently working on a unique image carousel feature for our website. This carousel will display clickable thumbnails that, when clicked, will show the full-size image. In order to make this work, we need to include both URLs in the HTML code. Howev ...
Is it possible to use CSS to ensure that an image is 100% the width of a fluid div without distorting the square shape? The goal is to match the height to the width for a cohesive look. Currently, I am using the following code for fluid width: .img{ max ...
Hello there, I have a question regarding submitting a form and loading a relevant PHP file into a target div using the same submit button. I have attempted to do this but need some help. <form id='myForm' method="POST" action="processForm.php ...
Here is the issue I am facing: The sub-menu words on my website are too long and it is affecting the overall design. I need help to make the navigation look better. This is the CSS code I have been using: /*navigation styles */ nav { background: url( ...
Hi there, I have a quick and simple question. I am attempting to include a div with a background-image in my *.ejs page file. <style> .signPage{ background-image: url("//back.jpg"); width: 98%; height: 98vh; top: ...
I have a nearly complete accordion that just needs some adjustments. HTML CODE: <footer> <div> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> ...
I've come across several solutions to my issue, but none of them seem to work in my current situation. I have a banner at the top of my site with two floated columns, and suspect that the navigation menu in the right column may be causing the problem. ...
Disclaimer: While I am aware of SQL Injection, my main focus is on getting the function completed. I'm having an issue with my delete button not removing the row from my SQL table. products-one-time.php https://i.sstatic.net/gxPOu.png This is the o ...
I need help loading multiple JSON objects into individual divs in an HTML file. Each object should be displayed in a separate div, with the first object going to the first div, the second object to the second div, and so on. I believe I need to use a for l ...