Menu
I have a design where categories are displayed on a square product.
There can be one category or up to 3 categories.
The design requires the categories to be listed from the bottom to the top. The categories are displayed as <div>category-1</div> text. Each category has a height of 80px and a custom width (max 200px).
Is it possible to do this with CSS only and for at least IE9?
I can use angular JS if a CSS-only solution is not possible.
At the moment it looks like this when there are 2 categories.
I need to make it look like this:
I could add a margin-top in that case, but as soon as there is only 1 category it looks like this:
It should always be the same space between FOOTER and the last category.
EDIT:
Not sure if it's important but there is a maximum of 3 categories and a minimum of 1 category.
Looks like I wasn't clear enough so I made an example on jsfiddle:
https://jsfiddle.net/k3ve49uj/
The last result is what I need. Even if there is only 1 category, it should stick to the bottom. I used a <br/> to simulate that.
Unfortunately I can't show the actual HTML & CSS because it's work for a client. But I'll be able to apply the changes later on.
Please don't work on the code I provided, it's just to demonstrate what I need. Basically there is a container & all elements inside it have to be positioned from THE BOTTOM to the TOP. Not the other way around.
.pr.product {
width: 380px;
height: 380px;
background-image: url("http://unsplash.it/380/380?random&blur");
margin: 30px;
position: relative;
color: #fff;
text-shadow: 1px 1px 0px rgba(0,0,0,.5);
}
.product .headline {
position: absolute;
left: 20px;
bottom: 60px;
width: 75%;
}
.product .category_wrapper {
position: absolute;
right: 20px;
width: 20%;
bottom: 140px;
background-color: rgba(0, 255, 0, .3);
height: 60px;
top: 255px;
}
.product footer {
text-align: right;
color: red;
font-size: 18px;
text-transform: uppercase;
position: absolute;
bottom: 20px;
right: 20px;
}<body>
<h3>
Looks good, but only if 3 categories are available.
</h3>
<div class="product">
<div class="headline">
<h1>Test headline</h1>
</div>
<div class="category_wrapper">
<div class="category">category-1</div>
<div class="category">category-2</div>
<div class="category">category-3</div>
</div>
<footer>
FOOTER
</footer>
</div>
<hr/>
<h3>
Only 2 categories (they stick to the top)
</h3>
<div class="product">
<div class="headline">
<h1>Test headline</h1>
</div>
<div class="category_wrapper">
<div class="category">category-1</div>
<div class="category">category-2</div>
</div>
<footer>
FOOTER
</footer>
</div>
<hr/>
<h3>
Desired output if only 2 tags
</h3>
<div class="product">
<div class="headline">
<h1>Test headline</h1>
</div>
<div class="category_wrapper">
<br/>
<div class="category">category-1</div>
<div class="category">category-2</div>
</div>
<footer>
FOOTER
</footer>
</div>
</body>
657
This will do exactly what you want. But I'm not sure it will go with the CSS you are using without watching it. Try this or provide your CSS for the list and footer if it does not work this way.
#footer {
margin-top: 20px;
width: 100%;
height: auto;
color: red;
}
ul{
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}<ul>
<li>Category 1</li>
<li>Category 2</li>
</ul>
<div id="footer">Footer</div>UPDATE
Check this fiddle using your updated code and let me know.
Just need to update your .product .category_wrapper as below
.product .category_wrapper {
position: absolute;
right: 20px;
width: 20%;
bottom: 60px;
background-color: rgba(0, 255, 0, 0.3);
height: auto;
}
If you change your CSS like this, it will do what you ask.
.product .category_wrapper {
position: absolute;
right: 20px;
width: 20%;
bottom: 70px;
height: auto;
}
.product .category_wrapper .category {
background-color: rgba(0, 255, 0, .3);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
