I'm attempting to achieve the design below (with a 1 pixel gap on each end):
I'm attempting to achieve the design below (with a 1 pixel gap on each end):
Experiment with the following code snippet:
<hr class="fancy">
Utilize the accompanying CSS for styling:
hr.fancy {
border: 1px solid black;
border-width: 1px 0px;
color: black;
height: 5px;
position: relative;
}
hr.fancy:after {
content: '\A';
position: absolute;
bottom: -1px;
right: 0px;
display: block;
width: 1px;
height: 7px;
border-left: 1px solid white;
}
hr.fancy:before {
content: '\A';
position: absolute;
bottom: -1px;
left: 0px;
display: block;
width: 1px;
height: 7px;
border-right: 1px solid white;
}
View it in action here: http://jsfiddle.net/audetwebdesign/P7umD/
You can adjust the pixel values to achieve a more prominent appearance.
Cross-Browser Compatibility
Testing has shown consistent rendering in Firefox and Chrome.
However, please note that this technique may not be effective in IE9 where only double lines are displayed without the decorative ends.
Perhaps utilizing the border-image property could be the solution for your design needs.
Explore more about CSS border images at W3Schools.
For a different approach, consider using a div-based solution like this:
<div class="border">
Content
<div class="left"></div>
<div class="right"></div>
</div>
.border {
border-width:0px;
border-style: double;
border-color: grey;
border-bottom-width: 3px;
position: relative;
}
.left,
.right{
position: absolute;
width: 1px;
height: 3px;
bottom: -3px;
background-color: white;
}
.left {
left: 1px;
}
.right {
right: 1px;
}
Check out this helpful demo on JSFiddle: http://jsfiddle.net/zCEKp/
If you're looking for a pure CSS solution, this might be what you need:
Here is the HTML markup:
<div class="customdivider">
<div class="left"> </div>
<div class="middle"> </div>
<div class="right"> </div>
</div>
And here is the corresponding CSS:
.customdivider {
clear: both;
}
.customdivider .left {
border-bottom: double black;
width: 1px;
float: left;
}
.customdivider .middle {
border-bottom: double black;
width: 50px;
float: left;
margin: 0 1px 0 1px;
}
.customdivider .right {
border-bottom: double black;
width: 1px;
float: left;
}
This is how it will look once implemented:
http://jsfiddle.net/Lucidus/ZjGpS/1/ [edit: corrected the CSS in the previous link]
Is this the design you're looking for?
Check out the HTML code snippet below:
<div class="box">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
And here's the CSS styling:
.box{
position:relative;
border:3px double;
width:100px;
height:50px;
}
.top-left, .top-right, .bottom-left, .bottom-right {
position:absolute;
width:4px;
height:4px;
border-left:1px #fff solid;
border-right:1px #fff solid;
}
.top-left, .top-right{
top:-4px;
}
.top-left, .bottom-left{
left:-4px;
}
.top-right, .bottom-right{
right:-4px;
}
.bottom-left, .bottom-right {
bottom:-4px;
}
For a live demo, you can visit this jsFiddle link.
When utilizing .html() to fetch HTML that includes an object with param tags, IE8 will remove the latter and return an empty object element. Check out this jsfiddle showcasing the problem: http://jsfiddle.net/L9rra/1/. Update: Looking for a solution to re ...
It's puzzling to me why document.getelementbyid().value isn't working as expected. Upon inspecting the console, no input seems to be sent or printed out in the console. function callApi() { var keyword = document.getElementById('user_ ...
Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler) Below is the code snippet: HTML: <div id="header"> <h1>Logo</h1> ...
Visit this link for more details I've been attempting to create an overlap effect with 3 photos using CSS Grid. My desired outcome looks like this: Click here to see the desired result I followed tutorials that demonstrate the same method, but unfo ...
Despite my efforts to search online, I could not find the answer or understand what I needed to. My issue: I need the "inputVal" variable from the "InputField.js" component to be accessible in the "App.js" component (specifically in the fetch request where ...
I am working on creating a dynamic table with rows and columns based on JSON data. JSON: $scope.dataToShow=[ tableHeder=["First Name","Age"], { name:"rahim", age:23 }, ...
Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...
<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)" aria-selected="undefined"> IPD</a> If I want the button to navigate to the next page when dragged, what code should I write? ...
I've developed a PHP script that converts all inline CSS in HTML tags to classes. Visit the following link for more information: https://gist.github.com/iBars/aa52c6119e53908c91ac553aeba229e0 However, it currently only processes tags that are the onl ...
Is there a way to retrieve the position of the selected option in a similar manner to the index of a table? Example for a table: <tr *ngFor="let car of cars; let i = index" (click)="showTabs(i)"> <td>{{i+1}}</td> </tr> I am lo ...
After implementing the CSS Transform technique to center a div both horizontally and vertically, the desired effect was achieved. However, an unexpected issue arose on pages that contained a Google Maps iframe causing the entire page to go blurry. To view ...
I'm having trouble creating a border around only the top row of my table. Right now, the border is only displayed around the outside of the entire table. I also want to add a border specifically to the first row that contains 'Team, Correct Picks ...
Currently engrossed in a web scraping endeavor for a car website utilizing Selenium. One potential roadblock I've encountered is that the code seems to only iterate over the initial car element on the page, instead of going through the entirety of ava ...
I currently have an Autoresponder email form featured on my webpage. Here is a snippet of the code for the section where customers enter their email: <div id = "af-form-45" class = "af-form" > <div id = "af-body-45" class = "af-body af-standa ...
I recently updated my Bootstrap from v5.2.2 to v5.2.3 and now the dropdown menus in my navbar are not working properly. They do not drop down as they should, instead, they remain stationary. Can someone please help me figure out what I am doing wrong? & ...
Currently, I'm utilizing the jQuery DataTables plugin along with the responsive addon to dynamically display and hide columns based on the size of the browser window. One of the columns is labeled as Actions, which permits users to edit a record by c ...
My goal is fairly simple. I want to make the entire section clickable, except for the span and anything beneath it, so that the link redirects elsewhere. <section id="id" class="message"> <div class="message_body"> <font color="color"> ...
I have a table with 3 columns and 10 rows. I would like to flip each row one by one, where each row contains data on both the front and back sides. The flipping animation should be similar to the example provided in this link, but the flipping should sta ...
Is there a way to create a custom print preview dialog similar to the browser's print preview using Java Script? I am working on a book reader application that requires customization of the print preview dialog for page counting, automatic pagination, ...
Hey everyone, I'm struggling with centering a div that contains two Tumblr posts columns, as shown in the screenshot linked below. I really want it to be centered on the page where there is no sidebar present. Additionally, I'm hoping to get the ...