I write this for my own sanity.
I’m building the visual side of the website for my Nepali friends. I know how I want it to look, but getting it to look that way is the problem. Layouts in CSS2 were a nightmare, and although CSS3 has done much to remedy these problems, the new styles are only patchwork to fix a broken monster. But I’m making my way through.
I have a left-hand navigation. I want it to layer vertically. I have a right-hand content space. When both are <div>s, they layer vertically, when I want them to be side-by-side, left-by-right. What’s was going on? <div> elements have a default display of block, so they push everything else in their container below. The solution? Make each display: inline and float both left so they are side-by-side.
I use <ul> tags with <li>, <a>, and <span> tags inside. I use the spans for Bootstrap glyphicons. But the hover was not working on my <a> tags. What’s was going on? <a> elements display inline by default, meaning they make room for everything around them. Hence why the a:hover background-color was only affecting the text. The solution? Make the <a> elements display: block. I had to adjust some margins and paddings, but it worked out.
Oh my gosh! It’s brutal. I know flex-box can do some of this, but it is not recommended for the layout portion of web pages. But it’s starting to look pretty good! I’m pretty happy with my layout plans. I’ll get back to learning ADO as soon as I have something decent to show them. It’s been four months now, it’s always a good idea to give the “client” something tangible to demonstrate progress. It also means I’m learning more about CSS, and that’s is always good.