Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: better solution to an image menu

Bottom of Page

1 to 7 of 7

  1.  
    • CommentAuthorpab
    • CommentTimeJan 16th 2006 edited
     permalink
    hello folks. i'm new to this css world and i comming with a lot of questions.

    i'm putting my webpage under the css/tableless rules, lokking for acessibillity too. my first question is about my menu. it's using just images and i want to display its correpsonding texts when CSS is not available.

    well. my trouble is using <a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2"> to the links. i was trying something like this:

    - - CSS
    div#menu {
    padding: 0;
    margin: 0;
    width: 200px;
    text-align: right;
    }

    div#menu a {
    text-indent: -9000px;
    }

    div#menu .home {
    width: 130px;
    height: 20px;
    background: transparent url('img/menu_home.gif') no-repeat 0 0;
    }

    div#menu a:hover {
    background-position: 0 100%;
    }


    - - - HTML

    <div id="menu">
    <a href="link1?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" class="home">Home</a>
    <a href="link2?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" class="about">About Us</a>
    <a href="link3?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" class="contact">Contact</a>
    </div>



    * * *
    but i cant set a width and height to <a> until it is now display:block
    and, displaying it in "block", mouse can click on any place and dont click just on the image area.

    can u guys give a solution to my problem? maybe using uberlinks <ul>?

    thank u all
  2.  permalink
    Uberlinks?
    • CommentAuthorpab
    • CommentTimeJan 16th 2006
     permalink
    yeah. i know it by this name. dont know if it's correct
    http://www.projectseven.com/tutorials/css/uberlinks/
    •  
      CommentAuthoradjustafresh
    • CommentTimeJan 16th 2006 edited
     permalink
    A ul tag opens an Unordered (or bulleted) List .

    I am not sure what kind of effect you're trying to create (vertical or horizontal navigation), but it is advisable to place your a tags in an unordered list similar to this:


    &lt;div id="menu"&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="link1" class="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="link2" class="about"&gt;About Us&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="link3" class="contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;

    Good Luck.
    • CommentAuthorpab
    • CommentTimeJan 16th 2006
     permalink
    ok. but doing that, i have two problems:

    1 - i cant set "text-indent: -9999px" on <a> if it's not "display: block"
    2 - i cant align this unordered list at right

    i'm trying to make a vertical menu
    i'll reproduce my actual website http://konb.org

    thanks for help ;)
  6.  permalink
    1. You shouldn't be using anchors on their own, they need to be contained within a block-level element. You should also put those links in a list which means you are text-indent: -5000em the lists, etc.
    2. Floats.
    • CommentAuthorpab
    • CommentTimeJan 17th 2006 edited
     permalink
    thanks nick1presta!

    well. my 2nd problem is solved, i forgot use floats there. it's at right, right now.

    to my first problem, i got this example and i'm trying an alternate method to do this. setting visibility to hidden, to me, do the same on the text. just hides it.

    http://www.alistapart.com/articles/imagemap/

    but i'm trying to do not use "absolute" positions, i dont like them.
    do u have any suggestion?

    thanks anyway

1 to 7 of 7

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page