creating a ribbon design with CSS

Currently, I am in the process of creating a ribbon using CSS. You can find the page that it is located on HERE

Although I realize that there are other areas of my page that need improvement, my main focus right now is on perfecting this ribbon.

I am looking to have it displayed as auto 90% and centered regardless of the screen size. It seems to be slightly cut off on the left side and not perfectly centered at the moment.

Here is my current CSS code:

.ribbon {
   width: 90%;
   position: absolute;
   text-align: center;
   font-size: 15px!important;
   background: #2cdb1c;
   background: -webkit-gradient(linear, left top, left bottom, from(#2cdb1c), to(#618028));
   background: -webkit-linear-gradient(top, #2cdb1c, #618028);
   background: -moz-linear-gradient(top, #2cdb1c, #618028);
   background: -ms-linear-gradient(top, #2cdb1c, #618028);
   background: -o-linear-gradient(top, #2cdb1c, #618028);
   background-image: -ms-linear-gradient(top, #2cdb1c 0%, #618028 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
.ribbon h1 {
   font-size: 23px!important;
   color: #000000;
   text-shadow: #b9c9b5 0 1px 0;
   margin:0px;
   padding: 15px 10px;
   }
.ribbon:before, .ribbon:after {
   content: '';
   position: absolute;
   display: block;
   bottom: -1em;
   border: 1.5em solid #379c27;
   z-index: -1;
   }
.ribbon:before {
   left: -2em;
   border-right-width: 1.5em;
   border-left-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   }
.ribbon:after {
   right: -2em;
   border-left-width: 1.5em;
   border-right-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   }
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
   border-color: #000000 transparent transparent transparent;
   position: absolute;
   display: block;
   border-style: solid;
   bottom: -1em;
   content: '';
   }
.ribbon .ribbon-content:before {
   left: 0;
   border-width: 1em 0 0 1em;
   }
.ribbon .ribbon-content:after {
   right: 0;
   border-width: 1em 1em 0 0;
   }
.ribbon-stitches-top {
   margin-top:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
   }
.ribbon-stitches-bottom {
   margin-bottom:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
   }

If anyone could provide assistance with this issue, I would greatly appreciate it. Thank you!

htmlcssribbon

Answer №1

Don't use absolute positioning for this element. Delete that declaration. Ensure the parent element has a width of 100% and then apply margin: 0 auto;

Answer №2

One option is to enclose your entire ribbon within a container. Rather than centering the ribbon, simply set its width to 100%.

ribbon_container {
     margin: 0 auto;
     width: 90%;
}

Answer №3

To ensure the ribbon element is properly styled, wrap it in a ribbon-wrapper and set its width to 100%.

.ribbon-wrapper {
   position: relative;
   width: 90%;
   margin: 0 auto;
}
.ribbon {
    width: 100%;
}

Make sure to include the following HTML code for the ribbon wrapper:

<div class="ribbon-wrapper">
    <!-- Your ribbon html code -->
</div>

Answer №4

To create a beautiful ribbon effect, all you need to do is enclose your ribbon within a div.

<div style="width:90%;margin:0 auto;">
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>Xclo.mobi</h1></strong><div class="ribbon-stitches-bottom"></div></div>
</div>

Answer №5

To perfectly align it, you may center it using percentage and absolute positioning:

.ribbon {
    position: absolute;
    width: 90%;
    left: 50%;
    margin-left: -45%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with your WordPress child theme's formatting?

Despite researching similar issues on stackoverflow and WP Codex, I have been unable to resolve my problem. This is the second child theme I have created, with the first one functioning perfectly. However, this new theme does not inherit the formatting fro ...

phpcsswordpressparent-child

Error encountered while trying to load the fonts

Upon attempting to load fonts into the Spectacle boilerplate, I encountered the following error message: Failed to decode downloaded font: http://localhost:3000/assets/fonts/Overpass-Bold.ttf OTS parsing error: invalid version tag I've includ ...

htmlcsswebpackfonts

What's the best way to ensure my website's footer spans the entire width of the webpage?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Elena Brown | Graphic Designer</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href=' ...

htmlcss

Is there a way to set a custom background image for a specific Vaadin view?

I am developing a view in Vaadin that looks something like this... public class PosAppPickerView extends VerticalLayout implements View { Everything is functioning smoothly, but I am interested in incorporating an image as the background for the body/mai ...

cssvaadinvaadin7

The CSS file is not loading correctly

So it appears that, based on this discussion, CSS files loaded from the link tag reference files relative to the folder where the CSS file is located... Here is my directory structure: httpdocs/ css/ thecss.css bg.png In the thecs ...

htmlcssurlincludedirectory

JavaScript's GET request fails to include form data in the URL

Express Router Module for Book Details Form Page <form class="container col-md-5 signupform bg-white my-4 py-3 formShadow" method="GET" action="/admin/addBook/add" , onsubmit="return validate()"& ...

javascripthtmlnode.jsexpress

Tips on triggering an AJAX call to load additional content when a user reaches the bottom of the page for the first time

My goal is to dynamically append an HTML file to a div element when the user reaches the bottom of the page. However, I have encountered an issue where the script appends the content multiple times after refreshing the page. It seems like the Boolean varia ...

javascriptjqueryhtmlajax

Selenium with Python: A class focused on link text

Currently, I am encountering a challenge while using Python and Selenium to scrape content from a specific webpage. The issue lies in the presence of multiple div-classes with identical names but distinct content. My requirement is to extract information f ...

pythoncssselenium

Why is Selenium failing to retrieve the contents of a class?

PATH = "D:\CDriver\chromedriver.exe" driver = webdriver.Chrome(PATH) driver.get('https://www.se.com/ww/en/about-us/careers/job-details/inside-sales-associate/006ZMV') TITLE = driver.find_element_by_class_name('sdl-applica ...

htmlpython-3.xselenium

The flexslider isn't updating slides when clicking on thumbnails

Recently, I incorporated a CSS code to display an overlay when hovering over the thumbnails in my flexslider slideshow. However, after adding this code, I noticed that clicking on the thumbnail does not produce any action. .flex-control-nav li{ positi ...

javascriptjquerycssflexslider

What is the purpose of the tabindex in the MUI Modal component?

Struggling with integrating a modal into my project - it's refusing to close and taking up the entire screen height. On inspection, I found this troublesome code: [tabindex]: outline: none; height: 100% How can I remove height: 100% from the ...

cssreactjstypescriptmaterial-uifrontend

Expanded MUI collapsible table squeezed into a single cell

I'm experimenting with using the MUI table along with Collapse to expand and collapse rows. However, I've noticed that when utilizing collapse, the expanded rows get squished into one cell. How can I adjust the alignment of the cells within the p ...

javascriptcssreactjsmaterial-ui

Excessive padding observed on the right side of the screen when viewed on mobile devices

I am having an issue with my portfolio site where there is a white space on the right side in the mobile view, but only in Chrome. The desktop and Mozilla mobile views are fine. I have attached a screenshot highlighting the problem. Here is the link: Chrom ...

htmlcssbootstrap-4responsive-design

Is there a need to minify if the data will be compressed through gzip during

During the early days (yes, I'm really showing my age here), it was possible to reference scripts from a renamed zip file using this format: <script archive="path/to.jar" src="some.js"></script> This method was supported in IE4, NS4, and ...

javascripthtml

How to create centered striped backgrounds in CSS

Attempting to achieve a background similar to the one shown Can this be accomplished using CSS? ...

css

Enhance Your Website with WordPress and Facebook Integration (requires understanding of PHP)

I was able to retrieve the number of Facebook comments using this function: <?php function fb_comment_count() { global $post; $url = get_permalink($post->ID); $filecontent = file_get_contents('https://graph.facebook.com/?ids=' . $url) ...

phphtmlfacebookwordpress

Bring back object categories when pressing the previous button on Firefox

When working with a form, I start off with an input element that has the "unfilled" class. As the user fills out the form, I use dynamic code to remove this class. After the form is submitted, there is a redirect to another page. If I click the "back" ...

javascriptjquerycss

When anchor is set programmatically, the focus outline is not displayed

I am currently facing an issue with my application where I am programmatically setting focus on elements in certain scenarios. While it generally works well, I have noticed that when I set the focus on an anchor element using $("#link1").focus(), the focus ...

javascriptjqueryhtmlfirefox

What is the best way to limit the range slider before it reaches its maximum point?

I am currently utilizing angularjs to stop a range slider at 75%, however, the method I am using is not very efficient and is not working as desired. Is there anyone who can provide guidance on how to achieve this? Please note: I want to display a total ...

javascriptjqueryangularjshtmlhtml-input

Unable to append Jquery attribute to a div component

My code snippet is creating a div with specific classes and elements: '<div class="ctrl-info-panel col-md-12 col-centered">'+ '<h2>You do not have any projects created at the moment.</h2>'+ '<div id="t ...

javascriptjqueryhtmlcss