HTML Question
listing elements from bottom to top (but not in reverse order)
Situation
I have a design where
categoriesproductThere can be one
categorycategoriesProblem
The design requires the categories to be listed from the bottom to the top. The categories are displayed as
<div>category-1</div>80pxIs 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
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.
Info
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.
Snippet
.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>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download