I can never seem to leave things well enough alone…? In that vein, I have changed the site’s theme again.? I moved the links and menus over to the right so that the content takes center stage (since the site is in English, and English reads left-to-right, it makes sense to have the most important items on the left, which in my case is my content…)
I have also finally gotten around to solving a pesky little CSS problem that was causing me no end of trouble.? I am by no means an expert in CSS (I have all of about a week of experience in it), but I am slowly learning all the little quirks.? Originally, I had a problem with getting my menu and content to float together.? One or the other would always show up on top, with lots of empty space where I had expected it to sit.? My original workaround used the old standby of tables to force the elements to float in a horizontal line, but I never really liked the solution
Fortunately, when I was working on moving the search box into the right hand corner, I ran across the solution – it involved setting the appropriate margin to cover the fixed width item, and then using a wrapper element with a negative value for the same margin.? When all was said and done I could float a fixed width element in line with a variable width element that would expand or contract to fit the screen.? Very nice.
Unfortunately, when I tried to apply the same trick to my content block, the content would not expand to fill the screen.? It would expand as large as needed, but no larger.? In my desire to fix this, I tried a number of things, but eventually stumbled across removing the float for the inner element.? Since the wrapper element was already float’ed correctly, the inner element could remove the float and fill the entire space available.
The final issue that I encountered was that in my original design I could not click any of the links in my menu.? So quick investigation showed that the problem was that my wrapper element was occluding the menu element.? Since the occluded portion was transparent, you could correctly see the menu, but Firefox would not allow you to click on any of the links, since you were technically clicking on the content element.? This was fixed by ensuring that the menu element was displayed *after* the content element.? A simple re-arrangement of the HTML and the menu element becomes the top-most element, and all the links become active again.
So that’s it.? The new theme in a nutshell.? I’m hoping to learn and understand even more CSS as I work on the new main Code in Review site, so stay tuned.