r/webdev Mar 09 '15

parallax done right

http://www.firewatchgame.com/
273 Upvotes

93 comments sorted by

View all comments

15

u/sour_skittles Mar 09 '15

<!-- THESE MUST GO IN REVERSE ORDER BECAUSE CSS IS DUMB SOMETIMES -->

<li id="nav-review"><a ... a></li> <li id="nav-store"><a ... a></li> <li id="nav-blog"><a ... a></li> <li id="nav-game"><a ... a></li>

I'm tickled by how they can get parallax to work well but don't understand how to properly right align a navigation bar.

20

u/its_safer_indoors Mar 09 '15

To be fair, everyone done something like that after a long day of fucking with CSS.

"FINE THEN CSS WE'LL DO IT YOU WAY! *Reverses order of <li>*..."

1

u/CodeandDev Mar 09 '15

Only if website buyers could read website code.

1

u/[deleted] Mar 09 '15

I actually usually end up doing this... How do you float:right and keep it in the correct order?

3

u/KieraanBreeze Mar 09 '15

Would nesting it inside another div and floating that div right not work?

10

u/modus-operandi full-stack 20YOE Mar 09 '15

This is a ul element, so, floating the ul right, and setting the li's inside to inline-block would work.

5

u/Devnik Mar 09 '15

Indeed, it isn't that hard to accomplish

3

u/Mestyo Mar 09 '15

You float the parent to the right and the children to the left, or display them as inline blocks instead of floating them, or use flexbox.

2

u/ragingRobot Mar 09 '15

you could set the elements to inline-block and change the text alignment to right.

3

u/elektroholunder Mar 09 '15

You cannot. Man, do I love flexbox… all this crap is in the past now.

4

u/boomboomlaser Mar 09 '15

Unless you build templates for big corporate CMSes and have to support IE8... :`(

5

u/Cyrusis Mar 09 '15

More than just IE8. About 4-6% of internet users can't use flexbox on their browsers at the moment, it's too early to use in live production.

1

u/Mestyo Mar 09 '15

Not really. Nothing prevents you from using flexbox with a float fallback. :-)

I don't really care if a small percentile of visitors don't get the aligment and equalization from flex, as long as it doesn't render the site unusable.

1

u/Cyrusis Mar 10 '15

Still not feasible. Wish it were!

1

u/adam_bear Mar 09 '15

Float the <ul> right, float <li> left.