Hi from 6 degrees wet and soggy 6 degrees C york UK…
I’m planning a footer user sitemap that will have this layout:
It will be static as in now sub menu drop down behaviour but would like a underscore bar (see home example) when a user hovers over a hyperlink.
Any way my question is please… "If i want to get an even 5 column layout am i best just to use an unordered list stacked out horizontally or is it better to use Css3 multi columns.
In my quest for understanding CSS better ive got a question for anyone with the time / patience.
Question 1: The last time I made li items stack out horizonatally I used to use : display: inline;
now i see a different technique. Am i right in saying its the use of flex box thats causing the li items to display inline? Here is the code illustrated which I think cause the li items to appear like a horizontal nav:
Question 2: The sub nav was invisible when I hovered over it, and by a bit of brutal copy and paste from another site I fixed it. But why did it work? I get z index in terms of stacking order but what was hiding it in the first place?
If any one has a bit of CSS theory they could throw my way I’d be eternally grateful
Yes display:flex will make all immediate children flex items which mean that they will stack horizontally (unless you change their axis). Flexbox is very complicated so I won’t try to explain all the nuances so have a play around here.
It’s supported in most modern browsers now but older versions of IE don’t support it.
It was probably underneath another elements background and thus invisible. Because dropdowns overlay other elements then you need to sure that they are on top and not going under following or previous content.
As your nav bar is in the footer then it might be better to make our nav go upwards rather than downwards where you are making the user scroll to see it all.
Wow that worked! Thank you, tried to understand why:
top: auto;
bottom: 100%;
created this great effect! read this: http://vanseodesign.com/css/auto-positioning/ but nope bit ahead of me but thank you so much!
The top auto is not needed if you have not previously set a position for top. I added it to ensure that you had not left in place the top:100% which would mean the menu would be at top:100% and bottom:100% which would over-constrain the positioning and result in bottom being ignored.
I this case auto just means no position for that property.
With absolute positioning you can use top, left, right and bottom at the same time to describe the size of an element but if at any time the dimension is oner-constrained then the browser will ignore one of the values. (e.g if you said top:200px and bottom:200px but the element is only 200px tall then bottom would be ignored. However if the element was 600px tall you would get a 200px tall box in the middle.)