XF 1.5 Help with simple CSS

[Andy.N]

Can any CSS expert help with how to create these simple CSS ranking boxes that I can use on XF pages? Many Thanks

 

[Andy.N]

The stacked boxes are from this page https://www.usnews.com/best-graduate-schools/top-business-schools/mba-rankings?int=9dc208

 

[Brad Padgett]

give your class the gray/silver background color and add some padding to fit your needs.

Really padding and background-color is all that did that unless your trying to replicate the image with CSS. You mean put the silver/gray background behind the image? You would simply need a background and padding.

 

[Andy.N]

give your class the gray/silver background color and add some padding to fit your needs.

Really padding and background-color is all that did that unless your trying to replicate the image with CSS. You mean put the silver/gray background behind the image? You would simply need a background and padding.

I tried to play with it a bit but couldn't get something similar to work

.rank-tied span{
padding:1px 0px 0px 0px;
line-height:15px;
width:35px
}
.rank-tied span span{
display:block;color:white;
background:#9c803a;
font-weight:normal;
font-size:10px;
text-shadow:none;
line-height:12px}
}

 

[Brad Padgett]

Well you would need to make sure you have a width and a height and background on the parent element and also more padding.

For the 2 boxes in the center you would need to make 2 sibling child tags instead of one. I actually recommend a div for the parent and 2 spans for the siblings. Then give the 2 spans a pixel height value along with a width and change the background-color of that to fit the ranks. It would also need maybe a few pixels of padding too.

 

[Andy.N]

Well you would need to make sure you have a width and a height and background on the parent element and also more padding.

For the 2 boxes in the center you would need to make 2 sibling child tags instead of one. I actually recommend a div for the parent and 2 spans for the siblings. Then give the 2 spans a pixel height value along with a width and change the background-color of that to fit the ranks. It would also need maybe a few pixels of padding too.

Can you provide an example of one for me to test? Been trying and couldn't get it working.
Many thanks

 

[Brad Padgett]

div.class {
height: 80px;
width: 60px;
padding: 15px;
background-color: silver;
}

span.class1 {
height: 50px;
width: 60px;
padding: 3px;
background-color: value;
}

span.class2 {
height: 30px;
width: 60px;
padding: 3px;
background-color: value;
}

.class, .class1, .class2 {
box-sizing: border-box;
}

Something like that. Notice the 2 spans are siblings and the div the parent.

like this

<div class="class">
<span class="class1"></span>
<span class="class2"></span>
</div>

I added the box-sizing border box in just in case the padding messes with the width and height. All that does is keep it from adding to the width and height. It makes it so that the width and height are included with the padding. Let me know if that works.

 

[Andy.N]

Here is what it looks like. Removing box-sizing makes no difference.

 

[Brad Padgett]

Here is what it looks like. Removing box-sizing makes no difference.
View attachment 164740

I wasn't sure if the box sizing was needed but now all you have to do is use the right color you want for background and text color and increase the width and height on the elements and you should be good to go. I'm only trying to help you with the building blocks. The styling part should be what you do.