Re: [WSG] how to use images and text in a menu

2008-08-28 Thread Bill Brown 
Michael Horowitz wrote:
 How would people suggest if I have a menu with an image on top and text
 underneath and I want both the text and the image as a link
 
 I'm thinking of making them link items and use css to move the image on
 top of the text.  Does that sound semantically correct.
 
 lia href=#img src=images/home.png //a /li
 lia href=#HOME/a/li

I see two options.
Option One:
li
  a href=/
img src=images/home.png
Link Text Here.
  /a
/li
CSS:
li a {display:block}
li a img {display:block}
...with of course all the normal adjustments for IE.

-or-
li class=home
  a href=/
Link Text Here.
  /a
/li
CSS:
li.home a {
  background: url(images/home.png) no-repeat;
  display: block;
  padding-top: [height-of-image]px;
  }

Whenever an image isn't content, for example, rounded corner images,
often image replacement images, I tend to load them as backgrounds in
CSS. This keeps things easier for the print style sheet as well for me.

Hope it helps.
--Bill



-- 
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - From dot concept to dot com since 1999
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] how to use images and text in a menu

2008-08-28 Thread Michael Horowitz 

I got the image replacement working

#home {
   padding-top:76px;
   height:0px;
   width: 34px;
   overflow: hidden;
   background:url(../images/Home.png) no-repeat;
  
}


Major change above was to change the heigh to 0px and I don't have to 
set the display to block.

However it also works this way

#home {
   padding-top:76px;
   height:0px;
   width: 34px;
   overflow: hidden;
   display:block;
   background:url(../images/Home.png) no-repeat;

  
}


Not really sure if I should have block turned on or not.

2nd change was the placement in my xhtml

 li id =homea href=#Home/a/li

I put the id on the li element not the a element.  Not sure why this 
worked.  If anyone can tell me why that placement is important I would 
appreciate it.


The article I found discussing how to do this that helped me with the 
height issue is here http://www.kryogenix.org/code/browser/lir/



Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079



Michael Horowitz wrote:

I've been using the background image idea.
#home {
   background:url(../images/Home.png) no-repeat top left;
   display: block;
   width: 34px;
   height: 75px;
   overflow: hidden;
   padding-top: 75px;
  }

I've seen other people say to use display block and that works better.

My xhtml is

lia href=# id=homeHOME/a/li

Everything validates

However instead of replacing the text and leaving it available for use 
by search engines and text reader both the text and image show.


Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079



Svip wrote:

Try style=background:url(images/home.png) no-repeat top left; width:
imagewidthpx; height: imageheightpx; for the first a.

I'd probably do something like this:

lia href=# id=home-linkHome/a/li

Then in CSS:

#home-link {
  background: url(images/home.png) no-repeat top left;
  width: WIDTHpx;
  height: HEIGHTpx;
  overflow: hidden;
  padding-top: HEIGHTpx;
}

That way, people using a graphical browser won't see the text, but
people using a text-based browser and search engines will see the
text.  Of course, you could just use alt= in the img / tag, but
that is not pretty either.

Regards,
Svip

2008/8/28 Michael Horowitz [EMAIL PROTECTED]:
 

How would people suggest if I have a menu with an image on top and text
underneath and I want both the text and the image as a link

I'm thinking of making them link items and use css to move the image 
on top

of the text.  Does that sound semantically correct.

lia href=#img src=images/home.png //a /li
lia href=#HOME/a/li

--
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***


  



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***