SkillShare Forum - CSS Beauty - better solution to an image menu 2013-05-19T23:03:27-04:00 http://cssbeauty.com/skillshare/ Lussumo Vanilla better solution to an image menu http://cssbeauty.com/skillshare/discussion/166/?Focus=1323#Comment_1323 2006-01-16T16:25:54-05:00 2006-01-16T17:06:37-05:00 pab http://cssbeauty.com/skillshare/account/375/ 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 ...
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]]> better solution to an image menu http://cssbeauty.com/skillshare/discussion/166/?Focus=1326#Comment_1326 2006-01-16T17:01:11-05:00 2013-05-19T23:03:27-04:00 adjustafresh http://cssbeauty.com/skillshare/account/82/ Uberlinks? better solution to an image menu http://cssbeauty.com/skillshare/discussion/166/?Focus=1328#Comment_1328 2006-01-16T17:22:25-05:00 2013-05-19T23:03:27-04:00 pab http://cssbeauty.com/skillshare/account/375/ yeah. i know it by this name. dont know if it's correct http://www.projectseven.com/tutorials/css/uberlinks/ http://www.projectseven.com/tutorials/css/uberlinks/]]> better solution to an image menu http://cssbeauty.com/skillshare/discussion/166/?Focus=1329#Comment_1329 2006-01-16T17:35:15-05:00 2006-01-16T17:36:16-05:00 adjustafresh http://cssbeauty.com/skillshare/account/82/ 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 (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.]]> better solution to an image menu http://cssbeauty.com/skillshare/discussion/166/?Focus=1333#Comment_1333 2006-01-16T18:00:14-05:00 2013-05-19T23:03:27-04:00 pab http://cssbeauty.com/skillshare/account/375/ ok. but doing that, i have two problems: 1 - i cant set "text-indent: -9999px" on if it's not "display: block" 2 - i cant align this unordered list at right i'm trying to ...
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 ;)]]> better solution to an image menu http://cssbeauty.com/skillshare/discussion/166/?Focus=1341#Comment_1341 2006-01-16T22:08:32-05:00 2013-05-19T23:03:27-04:00 Nick Presta http://cssbeauty.com/skillshare/account/309/ 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, ... 2. Floats.]]> better solution to an image menu http://cssbeauty.com/skillshare/discussion/166/?Focus=1372#Comment_1372 2006-01-17T18:23:03-05:00 2006-01-17T18:24:29-05:00 pab http://cssbeauty.com/skillshare/account/375/ 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. ...
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]]>