I'm attempting to create two horizontal lines spanning a box. I tried using a plugin to generate the necessary code from a design, but the final output isn't optimized.
<h1 id="H1_1">
<span id="SPAN_2">Feedback</span>
</h1>
#H1_1 {
// CSS properties here
}
#H1_1:after {
// CSS properties for horizontal line
}
#SPAN_2 {
// CSS properties for text styling
}
Is there a simpler alternative method to achieve this effect using CSS?
<hr style=" width : 100%;">
<span id="SPAN_2">Feedback</span>
Here is the CSS code to apply:
hr{
display: inline-block;
margin: 25px 0;
position: absolute;
}
#SPAN_2 {
position: absolute;
z-index: 2;
display: inline-block;
border: 3px solid rgb(189, 195, 199);
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
margin: 0 0 0 50%;
}
Give this a shot:
<section>
sample text
</section>
along with:
section {
margin: 50px;
background-color: blue;
border-top: 3px double green;
border-bottom: 2px dotted green;
}
Check out http://jsfiddle.net/8jyr3ast/ for inspiration.
Or perhaps I misunderstood your inquiry, and are you looking to add a line behind your main container? If so, consider using a background-image of 1px width with repeat-x, potentially saving more space than all the CSS styling.
By using :before and :after as shown in the code snippet, a classname has been added instead of random ids.
<h1 class="feedback">
<span>Feedback</span>
</h1>
CSS styling:
.feedback {
/* Styling properties */
}
.feedback span {
/* More styling properties */
}
/* Additional CSS for pseudo-elements */
.feedback:before,
.feedback:after {
/* Styling for before and after elements */
}
.feedback:before {
/* Positioning and styles for before element */
}
.feedback:after {
/* Positioning and styles for after element */
}
In order to illustrate the most straightforward method for achieving this concept, I have created a basic fiddle.
<div id="box">
<hr class="line1">
<hr class="line2">
</div>
Below is the corresponding CSS:
#box {
width: 85%;
margin: 0 auto;
}
.line1 {
width: 100%;
}
.line2 {
width: 100%;
}
This approach utilizes the hr element to create two horizontal lines that span the entire width of their parent container.
For thinner lines, you can refer to something like this example.
.container {
width: 100%;
margin-top:3em;
text-align:center;
}
.feedback_box {
color: rgb(189, 195, 199);
line-height:45px;
text-align: center;
text-transform: uppercase;
background: rgb(255, 255, 255);
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
padding: 1em;
z-index:4;
position:relative;
}
.line1, .line2 {
border:0;
height:3px;
background:rgb(189, 195, 199);
}
.line1 {
margin-bottom:-20px;
}
.line2 {
margin-top:-20px;
}<div class="container">
<hr class="line1">
<span class="feedback_box">Feedback</span>
<hr class="line2">
</div>In my research, I came across the sitepoint page and also the quirksmode page discussing the new :empty pseudoclass. Sitepoint mentioned that the empty style persists even when dynamic content is added, with Firefox being the browser known for behaving th ...
In the case of three records, the goal is to compare the values of 'test1' and 'test2' and then update the database to either 'open' or 'close' if the 'test1' and 'test2' values of the three recor ...
I recently made the switch from using onclick on a div to touchstart in order to increase the speed of clicking on a touch screen. However, I have encountered an issue where the CSS property that changes the background color is no longer functioning. Below ...
Currently, I am attempting to use JavaScript to replace the URLs in the HTML. However, I seem to be encountering an issue where the new URLs do not apply when clicking on the images, even though testing with "alert" shows that the values are correct. Any a ...
In this JSON dataset, we have information about various anchoring products. These products include anchors, cleats, snubbers, shackles, and more. When it comes to displaying these products on an HTML page using Angular, make sure to properly reference the ...
On my website, I offer in-game features that can be purchased through a miniature store with PayPal buy now buttons. I'm looking for the best and most secure method to automatically deliver these in-game bonuses to users after they have completed thei ...
I've been tackling a loading issue. I have a visible div, #loading, and multiple hidden divs, #message. I also have a JavaScript function. function loading() { setTimeout(function() { document.getElementById("loading").style.display = " ...
I'm struggling to get these 2 elements to display side by side using inline-block, I've tried everything but nothing seems to work. Goal: https://i.sstatic.net/3JfGC.png First element https://i.sstatic.net/GVq91.png https://i.sstatic.net/BIG0D ...
Currently working on a website in ASP.Net MVC 5. I am trying to test it on my local IIS (version 8), but encountering an issue where the CSS styling is not being applied. In my _layout.cshtml file, I opted for direct link tags instead of using bundles. &l ...
Is my question strange? I've noticed a peculiar behavior when using fontawesome. Normally, it displays correctly, and I have already referred to the documentation, but none of the solutions I found here seem to solve my issue. Sources I have tried: ...
I need to ensure that users cannot submit a form without completing the captcha field. How can I achieve this using Parsley.js? Which field should be marked as required? In my ASP.NET Razor webpage, I have a JavaScript callback function that validates the ...
I am currently working on an HTML form that consists of multiple input boxes. I'm looking to focus on the next input box after pasting content into one of them. Below is the code snippet I have been using: $("input").bind('paste', function( ...
While using one version of Chrome, I encountered this issue when inspecting an image: <img src="http://esg.com/wp-content/uploads/2016/03/ESG-hudsonlg-01-600x548.jpg?x80200" data-lazy-type="image" data-src="http://esg.com/wp-content/uploads/2016/03/ESG ...
I have encountered an issue while reading and displaying an XML file on a webpage using a JavaScript script. The problem arises when the page loads, and the information inside the cells of the table shows as "UNDEFINED". The intended display should include ...
Currently, I am facing an issue with a JavaScript div that expands correctly over other content in most situations but goes under the content in one specific scenario. I am unsure about where to begin debugging this problem. To provide some context, the d ...
I'm currently working on a React application that I created using create-react-app. In my index.html file, I have linked it to my CSS file like this: <link rel="stylesheet" href="../src/site.css"></link> The content of the site.css file ...
I'm encountering a problem with React where the data is not rendering properly after sorting the table. Even though I am updating the state variable using setState, the new updated data does not appear on the screen. Here's the snippet of my code ...
My goal is to create a virtual reality experience similar to this: https://i.sstatic.net/8pZx0.png However, my background image is 4096x1024 and I want it to have a VR effect where the center appears further away from the screen and the edges are slightl ...
I'm a beginner with Angular so I may have a simple question. I am using an image from the Google API, which is not a URL. How can I set this image as the background-image in a CSS tag that only accepts URIs? Thank you! ...
On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...