I'm trying to achieve a wavy/zigzag border on the <nav id="top"> section in opencart v2.3 instead of a flat border.
something similar to this example
Below is the CSS code I am currently using:
#top {
background-color: #EEEEEE;
border-bottom: 1px solid #e2e2e2;
padding: 4px 0px 3px 0;
margin: 0 0 20px 0;
min-height: 40px;
}
I stumbled upon this gem on CodePen
Hats off to the brilliant mind behind this masterpiece on Codepen.io
#d-wrapper {
background-color: #fff;
}
#d-wrapper * {
margin: 0;
padding: 0;
}
#d-wrapper div.sep {
min-height: 200px;
padding: 32px 0;
}
#d-wrapper .zig-zag-top:before {
background: linear-gradient(-45deg, #1ba1e2 16px, red 16px, blue 16px, transparent 0), linear-gradient(45deg, #1ba1e2 16px, transparent 0);
background-position: left top;
background-repeat: repeat-x;
background-size: 22px 32px;
content: " ";
display: block;
height: 32px;
width: 100%;
position: relative;
bottom: 64px;
left: 0;
}
#d-wrapper div > * {
margin: 0 40px;
}
#d-wrapper .zig-zag-bottom {
margin: 32px 0;
margin-top: 0;
background: #1ba1e2;
}
#d-wrapper .zig-zag-top {
margin: 32px 0;
margin-bottom: 0;
background: #1ba1e2;
}
#d-wrapper .zig-zag-bottom,
#d-wrapper .zig-zag-top {
padding: 32px 0;
}
#d-wrapper p,
#d-wrapper h1 {
font-size: 2em;
text-align: center;
color: #fff;
font-family: "PT Sans Narrow", "Fjalla One", sans-serif;
font-weight: 900;
text-shadow: 1px 1px 0 #1b90e2, 2px 2px 0 #1b90e2, 3px 3px 0 #1b90e2, 4px 4px 0 #1b90e2, 5px 5px 0 #1b90e2;
}
#d-wrapper div.sep p,
#d-wrapper div.sep h1 {
text-shadow: 1px 1px 0 #888, 2px 2px 0 #888, 3px 3px 0 #888, 4px 4px 0 #888, 5px 5px 0 #888;
color: #fff;
}
#d-wrapper h1 {
font-size: 4em;
}
#d-wrapper .zig-zag-bottom:after {
background: linear-gradient(-45deg, transparent 16px, #1ba1e2 0), linear-gradient(45deg, transparent 16px, #1ba1e2 0);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 22px 32px;
content: "";
display: block;
width: 100%;
height: 32px;
position: relative;
top: 64px;
left: 0px;
}
#d-wrapper p {
text-align: center;
}
#d-wrapper p:not(:last-child) {
margin-bottom: 20px;
}
p {
text-align: center;
}<div id="d-wrapper">
<div class="zig-zag-bottom">
<h1>Zig Zag</h1>
<p>Zig Zag Borders in CSS</p>
</div>
<div class="sep">
<h1>Zig Zag</h1>
<p>Zig Zag Borders in CSS</p>
</div>
<div class="zig-zag-bottom zig-zag-top">
<h1>Zig Zag</h1>
<p>Zig Zag Borders in CSS</p>
</div>
<div class="sep">
<h1>Zig Zag</h1>
<p>Zig Zag Borders in CSS</p>
</div>
<div class="zig-zag-top">
<h1>Zig Zag</h1>
<p>Zig Zag Borders in CSS</p>
</div>
</div>In order to style the parent element differently from the child element, you can use specific CSS rules for each. For example, you may want to underline the parent element while leaving the child elements unaffected. .parent { text-decoration: underli ...
My CSS skills are limited, so I am facing what may seem like a basic issue. On my website, I have a table of contents with links structured like this: <a href="#user-interface">User interface</a> Additionally, there is a bookmark in another ...
I implemented Font-Awesome, an iconic font designed for use with Twitter Bootstrap. Here is the markup: <i class="icon-remove reset-preference-button"></i> And here is the CSS: .reset-preference-button { cursor: pointer; } For JavaScript f ...
Whenever I hit the submit button on my form, PHP completes its task but instead of staying on the page (or simply reloading it), I am redirected to the same URL with '/config.php?username=technologies.%0D%0A++&submit = Send ". Is there a way ...
As a CSS beginner, I am attempting to create a div element with a border, similar to the design shown in the image below: https://i.sstatic.net/fGy2u.png Here's my HTML code: <div class="mystyle"> <h3>header message<h3> <p& ...
I am attempting to place the edit icon button on the right side of my card, similar to the image shown below. Please refer to this sandbox link for the current output: VIEW IMAGE HERE SEE SANDBOX LINK HERE <CardHeader classes={{ ...
Hello, I am using a PHP script from Steve Dawson's website. To display the output on my HTML page, I am utilizing this AJAX script: <script> $.ajax({ type:'GET', url:'http://www.solariserat.se/count.php', data: ...
I am brand new to osCommerce and recently took over this code. We are looking to improve the layout of the new_products page. Here is the current display code: div class="contentText"> <div class="NewProductsList"> <table border="0 ...
Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...
Good morning, I'm currently working on organizing my Bootstrap card elements into rows of 3 cards each. I want the cards to be uniform in height and width, with spacing between them. For instance, if I have 7 cards, I'd have 3 rows of three card ...
Currently, I am attempting to develop a HTML webpage that can detect emotions from images submitted by the user. By referring to Microsoft's documentation, I have produced the following HTML file: <!DOCTYPE html> <html> <head> & ...
My current method of fetching data from MySQL is as shown below: $catmapper = new Application_Model_Mapper_BusinessCategoryMapper(); $result = $catmapper->getBusinessCategory(); To display the results, I use a for loop to iterate through and wrap each ...
I am working on a flex row setup that includes three nested flex rows. Within the second row, I need to display a title that should not be shortened, and a text that should be truncated. Additionally, the first and last row must maintain a fixed width with ...
Is there a way to use PHP to extract an HTML table from a website? References: The table I want to parse can be found here: This is the code I attempted to use: <div class="row"> <div class="col-md-8"> <h1>Standings</h1 ...
How can I ensure that the drop shadow of the menu appears in front of a background image within a div? See below for my CSS code nav { width:900px; margin: 4px auto 0px 8%; font-size: 16pt; padding-bottom: 0px; -moz-box-shadow: 7px ...
It's incredible how simple Html5 dialogs are. It feels like they should have been here 15 years ago! I'm having trouble getting ng-show to work with dialogs. Any tips on how to make it happen? <!DOCTYPE html> <html ng-app="project"> ...
After trying various display settings like flex and block without success, I realized that the transform property was not working as expected. Despite centering elements successfully using other methods, the transform doesn't seem to have any effect o ...
Struggling to understand how a div can occupy the entire height of a container. In this particular scenario, I am aiming for the "photo" div to take up the full height, with the yellow and green content appearing on the right side of the photo. Below is th ...
https://i.sstatic.net/8dT9W.gif Is there a method to create a similar effect using CSS, JS, or GSAP? ...
I need help positioning the text input and button side by side, with a margin of about 10px between them. The code I have right now is producing the result shown in the attached photo. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/c ...