newcoder1010 Posted June 29, 2016 Share Posted June 29, 2016 Hi, I have text as "888-000-0000". How can i apply padding/margin to the text so it looks like the image? Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 29, 2016 Share Posted June 29, 2016 <!DOCTYPE html> <html> <head> <style> .skew_element { padding: 4px 8px; margin:0.5em; color: #fff; position: relative; display: inline-block; } .skew_element:after { content: ""; position: absolute; top:0; bottom:0; left:0; right:0; background-color: red; -ms-transform: skewX(-20deg); /* IE 9 */ -webkit-transform: skewX(-20deg); /* Safari */ transform: skewX(-20deg); /* Standard syntax */ z-index:-1; } </style> </head> <body> <p>The skewX() method skews an element along the X-axis by the given angle.</p> <div> This a normal div element. </div> <div id="myDiv"> This div element is skewed 20 degrees along the X-axis. </div> <span class="skew_element">888-000-0000</span> </body> </html> Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 4, 2016 Author Share Posted July 4, 2016 I have tested your code it works. I ran it locally as a separate page. Thanks. After that I tried to take your code and place it in my site and I am having issue. It is not working. If you could please help. HTML: <div class="view view-our-services view-id-our_services view-display-id-block view-dom-id-fb1b09adb6247ec59ebad0e50c335c81"> <div class="view-header"> <p>Let us t</p> </div> <div class="view-content"> <table class="views-view-grid cols-1"> <tbody> <tr class="row-1 row-first"> <td class="col-1 col-first"> <div class="views-field views-field-field-image1"> <div class="field-content"><img typeof="foaf:Image" class="img-responsive" src="remodel.jpg" width="259" height="194" alt=""> </div> </div> <div class="views-field views-field-title"> <span class="field-content">Home Remodel</span> </div> CSS: .view-our-services .views-field-title .field-content{ padding: 4px 8px; margin:0.5em; color: black; position: relative;display: inline-block; } .view-our-services .views-field-title .field-content:after { content: ""; position: absolute; top:0; bottom:0; left:0; right:0; background-color: red; -ms-transform: skewX(-20deg); /* IE 9 */ -webkit-transform: skewX(-20deg); /* Safari */ transform: skewX(-20deg); /* Standard syntax */ z-index:-1; } Link to comment Share on other sites More sharing options...
dsonesuk Posted July 4, 2016 Share Posted July 4, 2016 From what i can make out it should work. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 4, 2016 Author Share Posted July 4, 2016 This is my site. If you could look. It's not working. I am only getting the font color correct. Others not working. Please scroll to block after about us page. Thanks much. http://davisdevelopmentgroup.net/test/ Link to comment Share on other sites More sharing options...
dsonesuk Posted July 4, 2016 Share Posted July 4, 2016 You have a lot of floated section child elements (example 'Shalom Home Solutions Services' showing in contact form, note you can't select this header text) , div footer elements seeping into each other causing layers and affecting z-index layer of span, adding z-index:10; to span fixes the skewed title span problem, but you need to fix the seeping floated element problems. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 4, 2016 Author Share Posted July 4, 2016 (edited) You are too advanced for me. I guess I am not able to follow your instruction. I disabled the blocks after the above block so it does not interfere. Then I changed the z-index to 10. After that, I see the red background image but font color and text not visible. If I keep z-index -1, i see the title. If I keep z-index 10, I see red image but no title. If you please take a look? Edited July 4, 2016 by newcoder1010 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 4, 2016 Share Posted July 4, 2016 I said ADD z-index: 10; to span, NOT replace current z-index: -1; on span content: styling with z-index: 10;. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 4, 2016 Author Share Posted July 4, 2016 (edited) Thanks. It worked now. Edited July 4, 2016 by newcoder1010 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now