14 replies [Last post]
kilbad
Offline
Regular
Last seen: 11 years 9 weeks ago
Timezone: GMT-7
Joined: 2007-01-27
Posts: 14
Points: 0

I recently added arrows that appear upon mouseover as a form of navigation in my gallery script (see: http://www.kilbad.com/photos/heartwalk/1/1). However, I have two question::

(1) I want these arrows positioned symmetrically on both sides of the image. I think it is pretty close in FF, but sometimes they look a bit off. Also, in IE, they are not even close. QUESTION: Does anyone have any suggestions on how I can get these arrow images be properly positioned in FF and IE without using css hacks?

(2) In general, how do you feel about the navigation system in general? I am a novice at php and, therefore, any feedback about it, or the site in general, would be greatly appreciated.

Thank you all so much in advance!

Brendan

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

(1) Rather than using an

(1) Rather than using an image map, set position relative on the image container. Set two links in the container and use :hover to place the arrow images as backgrounds of those links. Position the links absolutely and give them sufficient size to cover half of the image each.

(2) I don't like it. The arrows aren't particularly clear. I don't see any reason why you can't show your arrows in the space below the image. If you do want to have clickable areas over the image, make sure the image that comes up is contrasting. Even so, I'd still bring up the arrows in the area adjacent to your image. Also, if the user doesn't have the mouse over the image there is no clear indication of what to click on to see other images in the gallery. So ...

(a) add a navigation system that is always visible.
(b) if you do want the user to be able to click when over the image to alter the image, reveal an arrow off to the side of the image or highlight the corresponding link in your always visible navigation system.

Site appearance is fine - much better than fine Smile. You should endeavour to use semantic html - that is use appropriate elements for content. For example, menus shouldn't be tables; paragraphs of text should be <p> rather than <h2>; lists of favourites should be lists not divs with <br /> <meta content ... > should come first after <html>, that way the browser knows how to interpret the characters in your <title> (although this site doesn't get that right Wink - but take a look at its <html> element, your's should be similar). Also look up CSS short cuts, it'll make your CSS more succinct.

kilbad
Offline
Regular
Last seen: 11 years 9 weeks ago
Timezone: GMT-7
Joined: 2007-01-27
Posts: 14
Points: 0

re:

Chris,

Thank you for the very helpful feedback. Honestly, I was never that happy with how the navigation I had turned out; so, since your post, I have redone the navigation to something more traditional, and I like it much better. I hope you will too (see, for example: http://www.kilbad.com/photos/NDvsPurdue/1/0).

Also, thank you for the kind words about the appearance of the site. I am not a professional coder, but a novice, so that means a lot coming for an expert.

As far as semantic HTML, I will be the first to admit I struggle with that (maybe because it is somewhat subjective?). Generally, if my site CSS and xHTML validates at w3c, and the content looks "decent" in the w3c semantic data extractor (http://www.w3.org/2003/12/semantic-extractor.html), I'm satisfied. However, I know I need to pay more attention to that, and to my use of lists.

As far as my site's main navigation menu being a table, I have been down this road before, and there is just no way to make that menu as it is with DIV's such that I can conveniently add and remove new menu items without editing the cumbersome CSS required (because doing that menu with DIV's, you have to divide the width by number of cells for the width of each cell, and then hope it's not some weird fraction). So that is why it is a table.. I am not sure if you have any ideas about that.

I also agree that my CSS could be more succinct, and I will work on that in the next few days.

As far as where within the header meta tags belong, do you have a link where I could do some more reading about that? I tried to search it out on google but didn't find anything specific regarding your comment.

Thanks again for your feedback! If you have anymore, please let me know.

Brendan

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

kilbad wrote:As far as where

kilbad wrote:
As far as where within the header meta tags belong, do you have a link where I could do some more reading about that? I tried to search it out on google but didn't find anything specific regarding your comment.

I think Chris means that your meta tags should come before your links to stylesheets etc., not the other way around.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

In particular Chris was

In particular Chris was probably referring to the meta character declaration which must come as high up as possible before you actually start to parse pcdata (text)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I would think arrows are

I would think arrows are neater than the words, previous & next. That is obviously a subjective decision and the visual side isn't where my expertise lies Smile

On the table for menus. Fair enough. You've thought about the issue, weighed up the pros and cons and made your decision.

Semantic HTML isn't that difficult. Divorce your content from its appearance. Effectively this means create a document (online or on-paper) which shows just the content itself. Then think about what each part of it is. There are four basic choices in HTML
- headings
- paragraphs
- lists
- tabular data
All of those are pretty self explanatory. Beyond that there are a host of other elements with more specialised uses. Keep an eye on them and as your experience and confidence grows you'll realise that such-and-such is more than a paragraph or blah requires emphasis and where to use the other elements will become obvious.

For the meta tag, I am referring only to ...

There are lots of different character sets. Your web page could be composed of any of them. Its the character set which tells the browser how to interpret the byte sequences in your web page - that is what glyphs to display. Not all byte sequences are equal. This is something that is particularly apparent to users of other alphabets besides the 26 glyph roman alphabet english uses. The <title> element could contain those characters, making it good practice to tell the browser what the character set is before the title element. Note, this isn't mandatory. If you control your web server or generate your pages in scripts it is possible to ensure the http headers contain details of the character set used.

Maybe this is too much information. Its not really something neophyte web designers need to worry about, at least not straight away. However, you are using "utf-8" (a good thing IMHO) which means you could be using glyphs in your title that aren't part of ASCII and the browser should know how to get them right.

kilbad
Offline
Regular
Last seen: 11 years 9 weeks ago
Timezone: GMT-7
Joined: 2007-01-27
Posts: 14
Points: 0

Re:

Thank you all for your replies! I have since corrected my header, and will continue to work at making my CSS more concise, and to straighten out the semantics of my HTML.

A follow-up question would be this, is there a good tutorial available, or could someone help me regarding lists that continue for two columns? I ask specifically with regard to my "Favorites" page (see: http://www.kilbad.com/index.php?id=favorites). I realize this page should be coded as some type of list, but the way I coded it seemed to be the easiest way (I am not saying the best!). In general, I feel like lists are easy to code, but very hard to style. I've read http://alistapart.com/articles/taminglists/, but I still think it's hard If you have time, an example would be great.

Regardless, thank you all for your time and help. Brendan

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

For that page I think you'll

For that page I think you'll find you can:
- replace the div.link_container with ul.link_container
- wrap the A in LI and remove the BR
- add list-style: none to the .link_container style.
- set appropriate margins on .link_container li elements. Zero or close to zero will probably be ok.
- if necessary adjust the margin-left and padding-left of the UL[1].

Lists are indented. The spec doesn't provide any indication as to how that default indentation should be controlled. Some browsers use padding-left (e.g. FF), some use margin-left (e.g. IE). You, the web designer, need to control both to ensure all browsers are singing the same tune!

kilbad
Offline
Regular
Last seen: 11 years 9 weeks ago
Timezone: GMT-7
Joined: 2007-01-27
Posts: 14
Points: 0

re: outline

How does this look:: http://www.kilbad.com/index.php?id=favoritesTEST (I still have to put the CSS into the external file)? Also, I have also been working on the html semantics of the whole site, fyi. However, I still need to truncate the external css file.

Also, in your professional opinion, can I stick to tables with pages like this one:: http://www.kilbad.com/index.php?id=friends, or should I be using lists? I feel like for pages like that, tables are really convenient (but again, I want to do things the right way).

Thanks again.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

It looks

It looks fine.

Professionally - take a look around the web, you'll find plenty of sites that use tables for non-tabular data. I don't (most of the time Wink) and most of the people that use these forums don't or are learning not to. That is what these forums are about.

So yeah, I'd go the extra mile and not use a table there. It looks like a list of friends ...

If you use a UL as a container. Set the LIs to have widths of 30% and float them left, you'll end up with a three column layout. Or use three lists each set with a width of 30% and float the lists left.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

kilbad wrote:I feel like for

kilbad wrote:
I feel like for pages like that, tables are really convenient (but again, I want to do things the right way).

If you want to do things the right way, it shouldn't be about convenience, but using the correct tag to describe the content. As Chris says, what you've got there is a list of friends. If you were presenting a series of friends with their phone numbers, addresses and other 'columns' of information, then you would probably use a table, but as it is, it's just a list.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kilbad
Offline
Regular
Last seen: 11 years 9 weeks ago
Timezone: GMT-7
Joined: 2007-01-27
Posts: 14
Points: 0

re

(1) Those pages are now lists, and I am checking them for cross-browser compatibility/appearance at http://browsershots.org/..

(2) I truncated my CSS such that it went down about 2000bytes

(3) I think my site's HTML semantics are much better that they were a few days ago. Please let me know if you see any other problems.

Thanks again, everyone, for all your feedback.. I really appreciate it! Brendan

kilbad
Offline
Regular
Last seen: 11 years 9 weeks ago
Timezone: GMT-7
Joined: 2007-01-27
Posts: 14
Points: 0

Follow-up question...

Why does my list look like this http://browsershots.org/png/full/14/143280f5d10056bb0eb4bbe0e5d0a163.png in IE versions 5 to 6? See also http://browsershots.org/screenshots/997c37a2bdde38167fe784dce15b8be5/..

Thanks again, so much.. Brendan

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Without addressing what IE's

Without addressing what IE's doing differently, I'd point out that you're going about constructing your list the wrong way. You don't need to nest lists inside lists. It should either be just one list with all the items set to float left, or (if you're concerned that the names read down the columns in a certain way), create three separate lists that fall underneath each other - not wrapped inside other list item elements - and then float those lists left.

You also don't need to apply the tilde class to everything either - apply it to the starting <ul> and then you can target everything else from that, e.g.:

.tilde li {} .tilde a {} .tilde li li {}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kilbad
Offline
Regular
Last seen: 11 years 9 weeks ago
Timezone: GMT-7
Joined: 2007-01-27
Posts: 14
Points: 0

Re:

@Tyssen- You are absolutely right, and I think I have corrected those lists (making each column its own list). I agree, there was a ton of redundancy with all those lists.. I must have been taking crazy pills when I coded that.

Also, since then, those pages render much better in IE versions 5 to 6.

Thanks bt