Help Designing a Site

mr. k

mr. k

Registered
So I have been working on this site now for about a week - and I hammered out most everything and have it working fairly well - perfectly in safari...
I still have a few problems - mostly in the navigation bar. Here is a quick breakdown of how the nav bar actually works: it is an unordered list, coupled with a few nested unordered lists. The css changes the top level list items into the top level of the navbar. When you hover over one of the top level list items, it reveals the unordered list nested within the list item.
I got the navbar to work perfectly in mozilla and safari 1.0 (a panther check would be great), but there is just one problem with IE 6 XP. It chokes on the css display: table; and display: table-cell;, which happens to be essential to the menu. When I set display to inline for the list items instead of table-cell, the menu works fine in IE 6 XP, but it wrecks the whole sub menu thing. Any help in this aspect would be great.
The other problem that's staring me in the face is that the skip link anchor at the very top under the header works just fine until I apply the css to it. All I do to my knowledge is float it to the left, give it text-decoration: none, and give it a :visited and :hover states. But in both safari and mozilla the link becomes just plain text, and I can't click it. It works in IE 6 XP.
Also if you could check out just the general layout and give me some general design tips, that would be great. I'm trying to get a little better at the whole visual design aspect of things, because all I can really visualize is fairly bland (or minimalist, if you prefer, but not in a good way.)
http://kao.sytes.net/kao/ is hosted on my iMac, so might be intermittently available, but I don't shut the box off too much so it should be around most of the time.
 
An easy way to display stuff inline, mdnky. The display:inline style doesn't even work half as well as the display:table styles do.

IE has some problems with it, though.
 
display: table-cell just worked better. And can't anyone help with at least the problem with the skip link? I really can't figure out the two above problems, and was hoping for a little help. Anything you can give me would help a lot.
And yeah darkshadow I have read that - look either of the examples in safari -- it works horribly. At least safari 85.5...
 
'd love to help, but every time I try your link, I get no connection. I guess you switch your machine off or it sleeps.
 
Ok, thank's for telling me uoba. I think that *might* be because I have the hard drive set to spin down...
 
I've had a look, looks nice, I like it.

You're right, needs a bit more visual interest. Also, maybe more of difference between the separate text areas.

Anyway, as for the skip nav link, I feel it's probably just the way the CSS has been applied. I would personally ID the div the skip link is within, thus:
Code: 
[SIZE=3]
<div id="skipnav">
<a href="#prime" title="skip nav, go to content." tabindex="100" accesskey="s">skip</a>
</div>
[/SIZE]

Then use the following CSS:
Code: 
[SIZE=3]
div#skipnav {
    border: 1px solid transparent;
    border-right: 1px solid black;
    padding: 0.25em 0;
    float: left;
    width: 5%;
    text-align: center;
}		
div#skipnav a {
    text-decoration: none;
    color: black;
}
div#skipnav a:hover {
    color: red;
}
div#skipnav:hover { 
    border: 1px solid black;
}
[/SIZE]

Here's a link to what I've done: http://martin.c-o2.net/dev/public/mrk.html

As for the navigation display problem, I haven't got time to look at it just now, but, I would tend to stay away from anything 'display'-wise except for inline and block, since MS haven't implemented most of its offerings in IE6 CSS properties yet (hence, won't work correctly).
 
Agh, now I see where you're trying to go with this. Helps being able to see the site...<G>...I thought you meant normal dropdowns.

Works alright in Mozilla 1.5 Win, but crashes IE6 Win (imagine that!)

As far as the display: table thing goes, I'll stick with block and inline.

The one Uoba did doesn't work at all in either one.
 
The skip nav works in Mozilla and Safari for me (it's not meant to be a dropdown)... but you're right, just checked IE6 on XP and the only thing not working is the transparent border part. The reason why I've done this is because otherwise, there is a visible movement with the rollover because of the 'box model' system (i.e. adding a border effectively adds 1px to the width of the div, thus moves it).

It should be simple to remedy this for IE6 (but I'm stuck in some Flash work so won't be able to think about it right now, sorry!)
 
The invisible border is a good idea - I never thought of that and had been using negative margins to combat the problem. I'll have to give those ideas a try tonight when I get back home. And I think I solved the problem with my webserver by not putting my computer to sleep or spinning down the hard drive, I just have the display sleep. Thanks guys!
 
Ok, and the uoba's method for my skip nav wont work. I don't think it's the way the css is applied, because when I move the skipnav at all it works just fine, but floated to the left of the first level of the navigation, there seems to be something that prevents it from garnering focus in the window. just applying margin-top: 2em; will move the menu down a little so you can hover over it and focus on it, but when you move it up at all it won't work again. There are some ugly display issues in IE 6 XP that I didn't really notice either, I'm gonna see if I can get them out and then come back to the skipnav... Now that I got the layout to work in IE 6, the skipnav refuses to show up, and is just a white block the size of the 5em wide block.
Now when I move the skipnav link to the end of the <ul>, it displays in the same place, but it's hover and focus states work, hmmm.

And anyone have some good ideas about visual design? Any idea's about what I could do to make the site a little more interesting? I probably need to find another color of two that go with the red - once I get the layout nailed I'm gonna move on and try to find a pleasing color scheme, maybe even throw in some images.
Oh, and could someone check if the kao in the header is in sans-serif text or serif text? It's supposed to be serif, but then safari looks like it messes up my font declarations and makes it sans-serif. Mozilla and IE show it as serif...
 
I see sans-serif.

Add textures! Nothing gives your site a little more visual appeal like nicely textured backgrounds. Be subtle, of course, don't put the old teddy bear background from System 7 or whatever in, but put in some textures!
 
mr. k said:
And anyone have some good ideas about visual design? Any idea's about what I could do to make the site a little more interesting? I probably need to find another color of two that go with the red - once I get the layout nailed I'm gonna move on and try to find a pleasing color scheme, maybe even throw in some images.
Click to expand...

Here's a link to the CSS vault. Sometimes helps to see what othes have done, to get some inspiration on you own sites.

http://www.9rules.com/cssvault/

One thing I've noice is how strong the lines are in the page. Maybe making the borders for the blockquotes a 1px dotted or dashed may help, or using an off color grey like #666 or possibly #333. Something to make them flow better with the eye.
 
Works fine in Panther for me. You must have fixed it. Im assuming you're going to make the menu dynamic? Good luck with the site. The nav works and looks fine to me. The rest,... well maybe I should wait to comment ;-)
 
You must log in or register to reply here.
Back
Top