CSS Issues
Posted November 12th, 2003 @ 08:16pm by Erik J. Barzeski
I've got a mockup of the new FSS site online (here). It looks pretty slick in Safari, Camino, Mozilla, and Firebird. It looks "ok" in Internet Explorer. Of course, it looks pretty bad in iCab. I'm certain it wouldn't look too good in IE for Windows, due to the transparency used in the menu area.
As I look forward to the next step in creating this site, I consider what may be some weak points in CSS. The menus need to follow a certain set of rules. First, they've got to stay aligned in the middle (both horizontally and vertically) in the middle of their respective "container" (the green and grey boxes). Next, I'd like to find a CSS way (no tables) to properly and automatically space the items horizontally (adding margins for each item would be a pain). What's worse, these things have to "hold" while someone changes the font size of their browser (I'd say +/- 2 sizes).
If I'm unable to get this to work via CSS (and I really hope that I'm able to), then I'm going to have to use images for the menu items. That feels like a hack, and I think any goofball could do that. I had hoped to avoid using images. If anyone's got any suggestions, feel free to grab the source from the site and email me some work. If someone comes up with a working solution, I'll send them a brand new set of JBL speakers.
Donate Life
Posted 12 Nov 2003 at 9:05pm #
Speakers? I could use some speakers.
[self beginCSSMojo];
Posted 12 Nov 2003 at 10:44pm #
I think what you're looking for is the CSS sliding doors method at http://www.alistapart.com/articles/slidingdoors2/
Posted 13 Nov 2003 at 12:33am #
James is correct the techniques used in sliding doors will work for what you want.
Basically you want to have an unordered list for your nav bar. You float each list item so they line up beside each other and set the width of each li to 20% for five items 25% for four.
some quick code below, only tested it in Safari and IE/Mac but should work in all.
Hope that what you are looking for.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css" media="screen"><!--
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
width: 100% }
li {
list-style-type: none;
display: block;
margin: 0;
padding: 0;
width: 20%;
float: left }
--></style>
</head>
<body>
<ul>
<li>Home</li>
<li>Products</li>
<li>Support</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
Posted 13 Nov 2003 at 1:00am #
Mm. The sliding door technique is where I would have gone with this too. There's some jiggery-pokery necessary to deal with the rounded ends, but the biggest problem I see is with the fixed width of the nav bar(s). The nature of the sliding doors in the example given is that the tabs get wider as the text gets larger, so the total width of the nav area gets wider too. FSS has a fixed width to the nav area as set by the company name, so it must increase in height only. And it's not unrealistic to expect that increasing the font size to "OMG Huge" will break the layout quite nicely, but anything short of that should be handleable -- you've got plenty of space between the nav phrases right now. Centering vertically shouldn't be too hard: the sliding doors article gives some hints on how to acheive that. In the "end" it comes down to the rounded ends: if you want them to remain rounded irrespective of the font size, you've got your work cut out, not least because the thicker the bar gets, the larger the half-circles become, and the further they squeeze (mmm, mmm fresh!) the nav words together. If you're willing to flatten the tip and allow the rounded ends to turn into vertical tabs, your life will be much easier.
Posted 13 Nov 2003 at 1:10am #
I think you should give props to the person who gave you the idea for the sunken nav boxes. Whoever that may be. 🙂
- Scott
Posted 13 Nov 2003 at 1:16am #
Oh, and just today a friend of mine sent me some amusing filler text to spice up future site mocks.
Posted 13 Nov 2003 at 10:23am #
The "rounded edges" are part of a background image. They're not part of the navigation per se - just a backdrop on top of which the navigation sits. The bars don't move, the bars don't grow. The text just sits on top of the bars.
I think what I'd like to do may well be unachievable. Unachievable without image, anyway. The speakers are still on offer for anyone that comes up with the solution. S&H included! 🙂
Posted 13 Nov 2003 at 12:11pm #
It doesn't work too well with Safari's zoom widget. The horizontal scroll bar never goes away.
Posted 13 Nov 2003 at 1:32pm #
Yes, as a matter of fact, it dies horribly in IE on Windows. The Freshly Squeezed logo at the top flashes briefly when the page is loaded, but then it's replaced with a grey-blue box behind the navigation bar. IE also butchers the two-column layout and adds mysterious gaps to the nice sidebars.
I'm constantly amazed and dismayed by Windows IE's primitive support for modern markup. The biggest Web design pain in the ass for me a couple years ago was getting anything to look good in Netscape, and now I've come full circle and I can't get anything to look good in IE.
Posted 13 Nov 2003 at 10:54pm #
Lonnie, I'm not sure how much we care about IE/Win, and that's a nice position in which to be! After all, they're
Posted 14 Nov 2003 at 1:38am #
What you could do is split up the navigation bars into the appropriate number of equally-sized graphics. Once that is done, the following HTML would be used:
Item One
Item Two
Item N
and the following CSS rules should tidy things up:
ul.topnav {
list-style-type: none;
float: left;
width: 100%;
}
ul.topnav li {
float: left;
}
ul.topnav li a:link {
display: block;
background: #fff url(path/to/an/image) no-repeat;
color: #000;
width: x;
min-width: x;
max-width: x;
height: y;
min-height: y;
max-height: y;
text-align: center;
vertical-align: middle;
}
ul.topnav li a.first {
background: #fff url(path/to/first/slice) no-repeat;
}
ul.topnav li a.last {
background: #fff url(path/to/last/slice) no-repeat;
}
where x is the width of the sliced images, and y is the height of said slices.
I haven't run this through a browser yet, but it's late and I've got to be up in a few hours. You'll probably have to fiddle with the CSS/HTML a little. If you have any questions, send them over.
Posted 14 Nov 2003 at 3:13pm #
Erik: Yeah, I wouldn't care at all about IE/Win, except that there are so many people using it. It's a dinosaur; Microsoft hasn't made any changes to IE other than security fixes for quite some time now. I can't ignore it, though, when most of the browsing public is still using it.
I've been doing my part by pushing my favorite browser (Firebird) on everyone who will listen, but it's hard to compete with a browser that comes installed as part of the OS. Most people just don't know what they're missing.
I'm happy for you that you don't have to care about IE/Win for the site, given that your software is for the Mac. It must be nice. 🙂
Posted 14 Nov 2003 at 9:59pm #
I've basically started saying 'screw it' for my (non-client) sites when it comes to WinIE deficiencies. When I put up this page, I contemplated not using a PNG image with alpha channel mask. But then I said 'screw it, this is a site for Mac users and I want it to look good'.
Every other browser in wide use can display a PNG image properly. I just decided it was more fun to do it in a way that would look right then do it in a way that appeals to WinIE's shortcomings. This site still works on WinIE, it just doesn't looks as nice. I've developed similar feelings about WinIE 4/5's broken CSS box sizing methods.
- Scott