Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Hey guys, I just wanted to share something with you, that this forum shared with me!
    When creating my death note site I asked about the best way to layout wallpaper galleries and someone replied with "unordered lists and list items". OH MAN!...This opened up a whole new world.

    If you dont already know, a lot of menus are done using <ul>, as well as tiling images side by side. Anyways, Ive answered this question on this forum a few times as well, so I just wanted to post this tutorial for anyone watching.

    <ul> is my favorite tag.

    Wallpaper Gallery Tutorial

    P.S I linked back to WDF in my post, and if you were the one who suggested I use this technique for my alldeathnote.com wallpaper gallery, please post here with
    a link and anchor text, and i will provide a 1 way link back to your site .

    You helped me realize how powerful the <ul> tag is, its not just for beginner stuff like
    <ul>
    <li>Apples</li>
    <li>Bananas</li>
    </ul>

    Im sure weve all seen that!

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    it gets even better. IE8 and im sure future versions support :hover in CSS for all html tags so a structure like the following can be used for a pure CSS dropdown.

    <ul id="ulsuper">
    <li class="lisuper"><p>List 1</p>
    <ul class="ulmain">
    <li class="limain>blank</li>
    <li class="limain>blank</li>
    <li class="limain>blank</li>
    </ul>
    </li>
    <li class="lisuper"><p>List 2</p>
    <ul class="ulmain">
    <li class="limain>blank</li>
    <li class="limain>blank</li>
    <li class="limain>blank</li>
    </ul>
    </li>
    </ul>

    //css

    #ulsuper ul{ position: absolute; }
    #ulsuper .lisuper { display: inline; float: left; }
    #ulsuper .ulmain { diplay: none; }
    #ulsuper .lisuper:hover .ulmain{ diplay: block; overflow: hidden; }

    while($get_it !== true){ continue; }

  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    ooooo, i will have to look into this.

    the tutorial was an image layout, i wasnt concentrating on menu techniques.
    Also, i think :hover is supported on most tags in IE7+ and FF3+
    I know ie6 only supports hover on <a> tags.

    Does anyone have a tag list of IE7/FF of tags that work with hover/focus pseudos?

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    http://www.quirksmode.org/css/contents.html scroll down to :hover

    http://msdn.microsoft.com/en-us/library/ms530766.aspx
    "
    Note The order of pseudo-classes is important. For example, the style rule for :hover must occur after any :link rule or any :visited rule to prevent the pseudo-classes from hiding each other.
    Windows Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not only links. If the pseudo-class is not applied specifically to an element in the selector, such as the A tag, the Universal (*) Selector is assumed. Indiscriminate use of the :hover pseudo-class can negatively impact page performance." ok well if you call that working?

    while($get_it !== true){ continue; }

  6. #5
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    I found it!

    http://www.webdesignforums.net/showt...492#post226492

    YES, shadowfiend i love you
    You have made a huge difference in the way I design.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com