CSS from the ground up
I'm fixing the CSS on the portal because the existing one just doesn't validate.
I've trimmed down the
Also, I've managed to solve the problem with
Short and sweet. Now, my only problem is that IE and Mozilla renders this differntly. IE aligns the form element (in this case, a
The previous code in the prototype had me specifying the vertical nav bar elements in the wrong order. The culprit was the
I'm of two minds whether the right-sided vertical nav bar is intuitive enough for first-time users, or it's just plain confusing. My take on this is that these vertical tabs resemble paper folder tabs, and they happen to represent the four major sections that divide the portal. I think I'll just have to provide enough hints to make it work, maybe even add another color scheme or icon theme for each section.
The design is faring well. By next week, I'll have real CSS- and XHTML-valid markup that can be used in templating the site. I'd still have to convert it to Smarty syntax, though, in preparation for the CMS. Lots of work ahead.
And oh, here's a current screenshot of the template, barebones sans the color scheme:
I've trimmed down the
DOCTYPE to XHTML 1.0 Transitional because one thing keeps nagging me: the
div creates a gaping space between two div containers. Mozilla doesn't allow for empty divs, so that's out of the question. Well, Transitional is still XHTML, anyway.Also, I've managed to solve the problem with
form. Before, I had to add the inline unordered list inside the form tag for them to align, but a simple CSS attribute did the trick:#topnav form { display: inline; }Short and sweet. Now, my only problem is that IE and Mozilla renders this differntly. IE aligns the form element (in this case, a
select drop-down box) with the baseline; while Mozilla does it in the middle. Guess which is better looking.The previous code in the prototype had me specifying the vertical nav bar elements in the wrong order. The culprit was the
float element. I had to use float instead of display: inline for the unordered list of tabs because backgrounds behave differently across browsers using the display attribute. Of course, float is also a bit of a headache to implement, but with a few tweaks (and great help from ALA), it can be tamed to do my bidding.I'm of two minds whether the right-sided vertical nav bar is intuitive enough for first-time users, or it's just plain confusing. My take on this is that these vertical tabs resemble paper folder tabs, and they happen to represent the four major sections that divide the portal. I think I'll just have to provide enough hints to make it work, maybe even add another color scheme or icon theme for each section.
The design is faring well. By next week, I'll have real CSS- and XHTML-valid markup that can be used in templating the site. I'd still have to convert it to Smarty syntax, though, in preparation for the CMS. Lots of work ahead.
And oh, here's a current screenshot of the template, barebones sans the color scheme:
Comments
Post a Comment