SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34
  1. #1
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink 3D Unordered Vertical List idea needs New Eyes

    Hi All

    I don't often start threads here, but, I had an idea for using unordered lists and wondered what you think. This url is a test of the code (if it was compressed it would be about 3,800 bytes).

    I need some new eyes to look at the code to see if it works for you.

    And what do you think of the look and feel?

    It came from an original idea by stu.

    [edit: new address]

    http://209.216.241.33/stus_buttons.html






    Trevor
    Last edited by ClevaTreva; May 19, 2004 at 03:55.

  2. #2
    SitePoint Guru DCS's Avatar
    Join Date
    Apr 2002
    Location
    Arkansas
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great in IE6 & Firefox.
    You text in Opera 7 however gets pushed off to the left

  3. #3
    SitePoint Guru TurtleX's Avatar
    Join Date
    Apr 2004
    Posts
    782
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is so cool , I really like what you've done. Works for me I'm using Firefox 0.8.

  4. #4
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice, but I will never use it in any of my site , thats alot of css for a menu. but very very cool. Just shows you the power of some code and no images.

  5. #5
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys.

    [edited: fixed that problem ]


    Trevor
    Last edited by ClevaTreva; May 1, 2004 at 15:20.

  6. #6
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DCS
    Works great in IE6 & Firefox.
    You text in Opera 7 however gets pushed off to the left
    Hi

    I've made some mega changes to the css and html. Can you check it again in Netscape? I have v 7.1 but it has gone t*ts up





    Trevor

  7. #7
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jag5311
    Very nice, but I will never use it in any of my site , thats alot of css for a menu. but very very cool. Just shows you the power of some code and no images.
    Hi

    I have redone the code. Much slimmer, easier to use. Compare it to using images:

    1. The design shows that dl,dd can be used for a navbar instead of ul,li
    2. It suggests that the correct way to do it (and it is only iE that can't cope with the other way round) is to put the dd inside the link and use the dt elsewhere (be careful where) for any descriptions.
    3. The html is really small, probably no worse than that required for a rollover, and isn't too hard on the eyes.
    4. The css is now much smaller. I made it into an external fle to check. It was just 1,639 bytes. Now to do a graphic version of this would require 2 buttons for rollover and an extra graphic for them to 'sit in', in all about 780bytes of files (super compressed gifs), plus the css to handle the rollover and place the text over them. I doubt this would be much different in size to this css.
    5. It's pure css, no graphics (no IE flicker). And it looks nice (thanks to stu, what a boy ).
    6. It will work in a text browser.

    The buttons don't need a width, they will expand to fill the box. If the box width is too small, the buttons will push it wider, but they won't line themselves up (that's asking too much). Using non-breaking spaces is a good idea! DO NOT use a 0 width for the menu box in the * html IE hack, as IE doesn't like this (a well known IE bug, just use 1% instead). IE 5 may not be happy with a box width smaller than the contents.

    A word of warning. Putting the dt tags before the dd content messes up big time in IE, even if it is set to display:none ! Beware of this if you use this set of tags.

    I haven't looked into how one might convert it into a horizontal bar. I can do it with an unordered list, but this?






    Trevor

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Trevor,

    The button looks very nice

    The only problem I can see is that you are using invalid code here:
    Code:
    		 <div> <a href="#" onmouseover="self.status='Item One'; return true;" onmouseout="self.status=''; return true;"> 
    			<div> <span>Item&nbsp;One</span> </div>
    			</a> </div>
    The anchor cannot wrap the div. Can't you change it to a span and style it accordingly?

    The button doesn't depress in Netscape 6.2 and it might be because of the point mentioned above.

    Otherwise its a good looking button

    Paul

    (BTW What does that bit of javascript do ?)

  9. #9
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    I haven't looked into how one might convert it into a horizontal bar. I can do it with an unordered list, but this?
    My take on it: http://esb.neuance.net/button/

    A button is just:
    Code:
    <dd><div><a href="button"><span>Text</span></a></div></dd>
    But, as jag5311 said, I wouldn't use this code on a site. A CSS rollover (even a preloaded one) would use less CSS and less HTML.

    Regards,
    Douglas
    Hello World

  10. #10
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Can be done with images
    2. ???
    3. Untrue
    4. Mine's even smaller
    5. Images (could ) look better
    6. So will images with alt text
    Hello World

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by doug
    4. Mine's even smaller
    Was that a freudian slip

    Quote Originally Posted by doug
    Nice example Doug (as always ).

  12. #12
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    The button looks very nice
    Thanks, the appearance was stu's idea.

    The only problem I can see is that you are using invalid code ... Can't you change it to a span and style it accordingly?
    Re-done it. Validates to xhtml1.0 strict

    The button doesn't depress in Netscape 6.2 and it might be because of the point mentioned above.
    Maybe the revised version will be OK?

    BTW What does that bit of javascript do ?)
    It puts the text in the status bar on mouseover, and takes it off when the mouse leaves the button.

    Notice how the revised version correctly uses the defintion list protocol, and the css hides the Definition. A text browser would not read the css and thus show the title. The big reason for the code was to make a list that looked nice if using a text browser (where a list of links still shows)

    The button tag route doesn't give this default list, and doesn't look so nice. Using rollover graphics is just as heavy on code+filesize as far as bandwidth is concerned. I deliberately designed it to be small enough to compete on bandwidth.

    I could do with making it work hroizontally. I know that the buttons will default to wahtever size they need. Is there a way to stop the text wrapping other than to use a non-breaking space (I mean cross browser way).

    Also notice the min-width hacks added.

    This is really just a code expose, so others can see how it can be done. I may make it into a tool to make different colors.

    But I would like to find a way to make it horizontal. I know you can do it Paul




    Trevor

  13. #13
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoops, posted the wrong file to my server

    Correct one now up.



    Trevor

  14. #14
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Was that a freudian slip
    Not a chance

    Using rollover graphics is just as heavy on code+filesize as far as bandwidth is concerned.
    I'd expect the overall file size to be larger using images, but images are just more fun to work with. You can do more. If I want to add a shadow, or a glow, or have a picture of a rabbit on them, then it is no big deal.

    Text nav does have advantages, but images are still good too. HTML wise, all you need is the <a> and the <img> tags for CSS rollovers. Hell, you don't even need the <img> tag (having just posted about JIR, Javascript Image Replacement). Wrap it all up in a list and you are away.

    You could look up something on whitespace handling for the wrapping issues.

    white-space: nowrap;

    may be enough, but it won't work in IE 5.0 (though it will [should] work in IE 5.5)

    hth,
    Douglas
    Hello World

  15. #15
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I just uploaded a newer version.

    The css is 50% smaller. Compressed, the css for the buttons is about 1,000 bytes.

    Agreed you can do lots of fancy things with buttons.

    My aims were:

    1. Produce something that degraded well with images off and for text-only browsers.
    2. Use Definition Lists instead of Unordered Lists for both Vertical and Horizontal menu's (the latter to have choice of fixed width or variable width buttons).
    3. Not use tables.
    4. To not place a significant overhead in terms of bandwidth.
    5. To validate to xhtml1.0 strict.

    Whilst the buttons look pretty, my main aim was to show how to use a Definition List to make a menu. It is a good tag to use because getting widths to work is easy (fluid or fixed), it degrades well, and it seems a better choice than unordered lists.

    Clearly, one can cut out a lot of the code and have a simple styled menu. Using multiple divs and spans simply demonstrates, in a pretty way, that widths and heights are inherited nicely, inwards as well as outwards.

    And this version should work well across browsers.






    Trevor

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Good demo Trevor and I see you solved the horizontal problem. I've been busy otherwise i would have been back sooner .

    Semantically though I still have to go with lists because menus are in fact a list of links. Whereas a dl should be a data term with its following data definitions. There is no definition for a menu link.

    However I understand the reasons for the example and the semantics is probably not a justifiable argument.

    As you say the code could be reduced to eliminate some of those nestings but scarifice some of the borders etc and as no images are required it should degrade gracefully.

    A good example and interesting comments from doug also pushing the other side of the argument.

    Keep up the good work.

    Paul

    BTW just checked out the link to Stu's site and its an interesting read

  17. #17
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    My aims were:
    I think you even bettered your aims; for 1, your menus don't degrade with images turned off!

    With the other 4 points, I appreciate your aims; though 2, 3 and 5 are the same aim expressed differently: write valid xhtml.

    Using multiple divs and spans simply demonstrates, in a pretty way, that widths and heights are inherited nicely, inwards as well as outwards.
    This needs shown to people who use position: absolute on everything

    Later,
    Douglas
    Hello World

  18. #18
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks fab And I don't think the amount of CSS it takes is any kind of problem - 3 or 4 K of CSS for a navigation bar is fine, I think.

    But I do take issue with the use of <dl> - how it looks in text only browsers is not a good reason - I think that this is a semantically wrong use of a definition list - the links in the navbar are not definitions of the navbar itself, there's no kind of name-value relationship going on there at all, but that's what the semantics say.

    I'd stick with a regular <ul> for best semantics, and put a heading before it like <h2>Site navigation</h2> for better accessibililty. I would also get rid of the status bar mouseover - it doesn't work for me anyway, because I block status bar writing in my brower prefs - which means I get no mouseover status text at all. Leave that alone, and just make sure that the default behavior of links to show their URL in the status bar works natively.

    Otherwise great :thumbsup:

  19. #19
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Semantically though I still have to go with lists because menus are in fact a list of links. Whereas a dl should be a data term with its following data definitions. There is no definition for a menu link.
    Hi Paul

    I did one heck of a lot of reading before doing this demo and working hard on the code. What started as stu's code looks nothing like what we finally cobbled together. Indeed I am still making changes to it to get it working in Mac IE5. I'm sure it will get there.

    Anyway, I did tons of reading about using the dl (stands for definition list) for links and menus.

    From what I can tell, the structure is very defined and tight, very few things can be allowed from a validation point of view. However, you can put what you like inside the dd. Indeed, it seems to allow a whole page (like an iframe) in here.

    Why did I use it? Coz I was having so much trouble getting ul/li's to work the same way across browsers, and even then formatting was a pain.

    As if to prove this, try substituting ul for dl and li for dd. It simply doesn't work.

    As such, when first introduced, neither definition lists or unordered lists were intended for links in menu's. It's just that UL's got used. But, I have demonstrated here that DL's can be more flexible.





    Trevor

  20. #20
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brothercake
    Looks fab And I don't think the amount of CSS it takes is any kind of problem - 3 or 4 K of CSS for a navigation bar is fine, I think.
    Actually, if you cut the css dealing with the buttons out to an external file and compress it (no whitespace, line returns, etc) it is about 1k

    But I do take issue with the use of <dl> - how it looks in text only browsers is not a good reason - I think that this is a semantically wrong use of a definition list - the links in the navbar are not definitions of the navbar itself, there's no kind of name-value relationship going on there at all, but that's what the semantics say.
    Semantics schemantics. The validator at w3c allows it And the browsers all support it.

    I would also get rid of the status bar mouseover
    DONE. I only put it in for fun

    Otherwise great
    Thanx to me and stu, praise always accepted

    I'm still trying to get MAC IE to behave with it. Just tried a new version, better, but still not quite.




    Trevor

  21. #21
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    I'm still trying to get MAC IE to behave with it. Just tried a new version, better, but still not quite.
    Hi

    Done it.




    Trevor

  22. #22
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    Why did I use it? Coz I was having so much trouble getting ul/li's to work the same way across browsers, and even then formatting was a pain.
    Really?

    I'll have to look at that. I've never has a problem with that.

    Code:
    ul, li, dl, dd, dt {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    has always set me on the same footing in most (=all) browsers.

    Regards,
    Douglas,
    Hello World

  23. #23
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    Why did I use it? Coz I was having so much trouble getting ul/li's to work the same way across browsers, and even then formatting was a pain.
    Some folk say I've got a really weird sense of humor

    No, really, it was just a joke (should've put a )

    I REALLY did it coz I was getting bored with the project I was doing, which I shall get back to tomorrow now that I have had time to clear my mind and get re-focussed.

    But thanks for the tip on the css





    Trevor
    (was it Oscar Wilde who, after telling a poor taste joke, was told by a woman that 'Sarcasm is the lowest form of humor,' and he replied, 'Madam, I adjust the level of my wit to suit my company,' or something like that?)
    "Good artists copy, great artists steal."
    - Pablo Picasso
    The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness

  24. #24
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not just by random that Mark Newhouse chose <ul> lists for his article - lists are the best choice, the closest semantics we have. The semantics of a <dl> are not appropriate here - I don't care if it is easier to make - it's wrong, and if you're going to abuse element semantics like that, you might as well be using a <table>

    No offence like, but semantics matter; if you don't care about semantics why use XHTML at all?

  25. #25
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brothercake
    It's not just by random that Mark Newhouse chose <ul> lists for his article - lists are the best choice, the closest semantics we have. The semantics of a <dl> are not appropriate here - I don't care if it is easier to make - it's wrong, and if you're going to abuse element semantics like that, you might as well be using a <table>

    No offence like, but semantics matter; if you don't care about semantics why use XHTML at all?
    It validates as xhtml1.0 strict.
    DL's are lists (albeit lists of defintions, which allow urls in the description).
    UL's were not intended for lists of links either.
    DL's allow a formatting technique not possible (as far as I can tell) with UL's.





    Trevor
    "Good artists copy, great artists steal."
    - Pablo Picasso
    The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •