Revisiting CSS

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s