I have a paranormal site where each investigation write up has a rating. In this situation my client wants to use skulls (not that it really matters). The site address is:
http://theripfiles.tv/j3upgrade/index.php/case-files/season-1
I need to display the phrase "PAL Rating:" with 1 to 5 skull icons to the right of it.
I attached the image I'm using to the site page above.
Image dimensions:
width:102px
height 135px
5 rows of icons 27px in height
Top row has 5 icons. bottom row has 1 icon.
Here is what I have so far:
.pal-rating-static
{
background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: block;
}
.pal-rating-5 { background-position: 0 0; }
.pal-rating-4 { background-position: -27px 0; }
.pal-rating-3 { background-position: -54px 0; }
.pal-rating-2 { background-position: -81px 0; }
.pal-rating-1 { background-position: -108px 0; }
I tried using similar CSS from this simple example but it doesn't seem to work. What am I missing?
http://www.itsalif.info/content/displaying-star-rating-using-css-sprites
On your site you have
.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: block;
float: right;
}
Change that to
.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: inline-block;
}
i dont think you need to mess with background position for this one
.pal-rating-static {
background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: block;
}
if this is your bar with 5 'skulls' visible . then all that you need to do is make the container smaller when you want to display less 'skulls'
you can do this by adding an extra CSS class for numer of 'skulls'
so you will end up with something like this
.pal-rating-static.cat1 {
width: 20px;
}
.pal-rating-static.cat2 {
width: 40px;
}
.pal-rating-static.cat3 {
width: 60px;
}
.pal-rating-static.cat4 {
width: 80px;
}
hopefully this will solve your problem .. a fiddle would be very useful
Related
I am trying to get a section up and running on my website. I want to add a background image instead of a color. I have tried reading here and other websites and nothing I try seems to work. I am using this section code:
https://codepen.io/ckor/pen/lBnxh
!* {
box-sizing: border-box;
}
ebody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esection {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('https://s15.8cb2jiu3/banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
&:nth-of-type(2n) {
background-color: #D55B79;
}
}
.eintro {
height: 90vh;
}
.econtent {
display: table-cell;
vertical-align: middle;
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}
e&:active {
top: 1px;
}
}
efooter {
padding: 1% 5%;
text-align:center;
background-color: #373B44;
color: white;
ea {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
}
I have added this to the code:
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('https://s15.banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
The goal is to add images that are left or right justified and then add some text to the section. I am aiming for a left image then the next box is a right image and so on. I have seen the effect on other websites and it looks good if done correctly.
In order to add background image to any html element you will need the following line added to your css:
background-image: url("pathtoimage");
In your css code there is :
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
this code here will fetch for all section html tags and apply to them the styles.
in here you can even notice the first background-color:#373B44; that is applied to all sections and the second background-color: #FE4B74; that is only applied to sections with that are 2n
for example:
(1st section html element in your page) Section 1 will be color #373B44
(2nd section html element in your page) Section 2 will be color #FE4B74
(3rd section html element in your page) Section 3 will be color #373B44
(4th section html element in your page) Section 4 will be color #FE4B74
and so on
Now in order to add a background-image , all we have to do is add the code I provided above to your section in that way
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
/*added here*/
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
/*added here*/ }
section:nth-of-type(2n) {
background-color: #FE4B74;
}
However, now you have two problems :
1- same background image in all sections (no alternating)
2- the image might be too small , not fit or might be repeated in a bad looking way
so in order to solve problem 1 all you have to do is just the same thing as what happens with background-color . So we just add another background-image under the 2n like so :
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");}
section:nth-of-type(2n) {
background-color: #FE4B74;
/*this will overwrite the other background image for your 2n sections*/
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
In order to solve the 2nd issue , you might want to use the following:
background-repeat:no-repeat; /*removes repetition*/
background-size:cover; /*allows picture to take up whole section space*/
and the final code will look like this
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
To better understand the background properties in CSS , I would really suggest going into the following link :
https://www.w3schools.com/css/css_background.asp
And this link will help you understand the section:nth-of-type(2n)
https://www.w3schools.com/cssref/sel_nth-of-type.asp
The codepen link
https://codepen.io/sara-kat/pen/gKrVpg
Have a good day
There is a really simple solution to this, actually. The link to the image isn't working. You don't have to change anything about the rest.
I gave your second section the class bg and put your code to style that section in your CSS. It works if you use a working link:
Codepen
section.bg {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('//unsplash.it/1200/800');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
I have a website I am working and the form isn't sitting in the right place it keeps shifting and moving I spoke to tech support they gave me some code it worked for a bit now it's off again can someone please help.
This was the code:
button.et_bloom_submit_subscription {
float: right;
position: fixed;
top: 7px;
right: 310px;
}
.et_bloom .et_bloom_form_content .et_bloom_popup_input {
width: 25%;
}
button.et_bloom_submit_subscription {
width: 21% !important;
}
.et_bloom .et_bloom_inline_form {
left padding: 60px;
}
.et_bloom .et_bloom_inline_form {
margin: 0;
}
.et_bloom .et_bloom_header_outer {
display: none;
}
#media only screen and (max-width:1100px) {
.page-id-453 .et_bloom_form_content {
width: 100% !important;
margin: 0 auto !important;
}
.page-id-453 .et_bloom_form_content .et_bloom_popup_input {
width: 25% !important;
margin-right:2%;
}
.page-id-453 .et_bloom_form_container button {
width: 45% !important;
padding:13px;
top:auto !important;
left: auto !important;
margin: auto !important;
float: right !important;
}
}
And this is the website www.askleewellard.com (form is right below the graphic).
Learning to use sprite menu right now by following a tutorial. But for some reason, Chrome is giving me a 'invalid property value' on some of the background-position lines. The first one, with position 0 0 works fine, but the other two with -33 0 and 0 -33 won't work, which means my site is only showing 1 button right now and the hover isn't applied. The picture I am using right now is 197x65
#sidebar .content .follow a {
display: block; float: left; height: 32px;
background-image: url('http://s23.postimg.org/8ltupgj0r/follow.png'); text-indent: -9999px;
margin-right: 5px;
}
#sidebar .content .follow a.fb {
width: 32px; background-position: 0 0; }
#sidebar .content .follow a.twit {
width: 32px; background-position: -33 0; }
#sidebar .content .follow a.fb:hover {
background-position: 0 -33; }
On the background-position properties you need to set what value type you are wanting, px, em, etc. CSS understands the 0 but you need to be more specific for the other values.
#sidebar .content .follow a.twit {
width: 32px; background-position: -33px 0; }
#sidebar .content .follow a.fb:hover {
background-position: 0 -33px; }
I am trying to figure out how to implement background crop like this in Compass sprite:
http://nicolasgallagher.com/css-background-image-hacks/
http://jsfiddle.net/blineberry/BhbrL/
This is what I have in .sass file:
#import "buttons/*.png"
#include all-buttons-sprites
.buttons-arrow
background-image: none
width: 30px
height: 45px
.buttons-arrow:before
+buttons-sprites(arrow)
display: block
content: ""
width: 15px
height: 27px
As you see, I tried to make .buttons-arrow without the background image first and then I added back the background-image. However, it gave me this .css file:
.buttons-sprite, .buttons-arrow, .buttons-arrow:before .buttons-arrow {
background: url('../images/buttons-s5ae2b3a1e9.png') no-repeat;
}
.buttons-arrow {
background-position: 0 0;
}
.buttons-arrow:hover, .buttons-arrow.arrow_hover, .buttons-arrow.arrow-hover {
background-position: 0 -27px;
}
.buttons-arrow {
background-image: none;
width: 30px;
height: 45px;
margin-left: 150px;
}
.buttons-arrow:before {
display: block;
content: "";
width: 15px;
height: 27px;
}
.buttons-arrow:before .buttons-arrow {
background-position: 0 0;
}
.buttons-arrow:before .buttons-arrow:hover, .buttons-arrow:before .buttons-arrow.arrow_hover, .buttons-arrow:before .buttons-arrow.arrow-hover {
background-position: 0 -27px;
}
.buttons-arrow:hover {
background-color: #ea4800;
}
Obviously it was wrong because it combined into this .buttons-arrow:before .buttons-arrow
I just want a simple result like this
.buttons-arrow {
width: 30px;
height: 45px;
margin-left: 150px;
}
.buttons-arrow:before {
background-image: url('../images/buttons-s5ae2b3a1e9.png');
display: block;
content: "";
height: 27px;
width: 15px;
How do I code this in Compass using sprite?
Since this place is pretty much dead, I do will a favor for people searching this from Google. The answer is:
Put this on top:
$buttons: sprite-map("buttons/*.png")
I have arrow.png and arrow_hover.png in there. The idea is to use sprite-map functions instead of #import all. Then make sure to include background image for the :before pseudo element but not original content:
.buttons-arrow
width: 50px
height: 50px
&::before
content: ""
background: sprite($buttons, arrow) no-repeat
display: block
position: relative
width: 20px
height: 20px
&:hover
background-color: gray
&::before
content: ""
background: sprite($buttons, arrow_hover) no-repeat
position: relative
width: 20px
height: 20px
Based on #HP answer, I could figure out how to make it work. Instead of
#include buttons-sprites(arrow)
just use
background: sprite($buttons-sprites, arrow);
This is very similar to the workaround #HP proposed, but instead of calling sprite-map I make use of the implicitly generated variable $buttons-sprites.
I have a webdesign with a module (form). the design of the module in particular is image rounded corners (4 divs to wrap the form, the design is fluid).
My problem is that the module's width displays as expected in Chrome, Firefox, IN and Opera. But for some reason, this module displays much thinner in safari. All other elements are displayed with the same ratios, this module is the only discrepancy
In this image, I super imposed the safari browser on top and below the chrome module and you can see the variation, the lower browser is safari:
The CSS for this module is:
div#slideshow {
width: 100%;
margin: 0 auto;
float: left;
position: relative;
display: block;
}
/*slideshow newsletter module*/
div#slideshow div.moduletable_newsletter {
width: 25%;
min-width: 211px;
float: right;
margin: 5% 0; }
div#slideshow form#formAcymailing1 {
margin: 0 auto;
width: 92%; }
div.acymailing_module_form-ul {
width: 100%;
float: left;
background: url('../images/sprite.png') -10px -210px; }
div.acymailing_module_form-ur {
float: left;
background: url('../images/module-nwsltr-ur.png') no-repeat top right;
padding: 10px 0 0 0;
margin: 0 0 0 10px; }
div.acymailing_module_form-ll {
position: relative;
float: left;
background: url('../images/module-nwsltr-ll.png') no-repeat bottom left; padding: 0 0 0 10px;
margin: 0 0 0 -10px; }
div#slideshow div.acymailing_module_form {
float: left;
background: #f7f8ff url('../images/module-nwsltr-lr.png') no-repeat bottom right;
margin: 0;
padding: 0px 10px 0 0; }
div#slideshow div.acymailing_module_form table.acymailing_form {
width: 100%;
margin-top: 110px; }
What can I do to make the module display wider in safari?
Thank you,
(to view live: http://redesign.com.s136249.gridserver.com/ )