[WSG] how to use images and text in a menue

2008-08-28 Thread Michael Horowitz 
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]
***

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

2008-08-28 Thread Svip 
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]
***

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

2008-08-28 Thread Joseph Taylor 

Or you could:

style type=text/css
/* 
-

I'm assuming you've already reset the
padding and margins on all elements involved
-*/

ul#nav li {
 background: url(my-image.jpg) no-repeat;
 }

ul#nav li a {
 padding-top: ?px; // match the height of the image
 display: block;
 // you may or may not need this
 min-height: ?px;
 _height: ?px; // a little fix for ie6 and friends
 }
/style

!--HTML--
ul id=nav
 lia href=my-page.htmMy Page/a/li
/ul


That's the way I'd do it.  There are many, many ways to achieve this effect.

Joseph R. B. Taylor
/Designer / Developer/
--
Sites by Joe, LLC
/Clean, Simple and Elegant Web Design/
Phone: (609) 335-3076
Fax: (866) 301-8045
Web: http://sitesbyjoe.com
Email: [EMAIL PROTECTED]



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]
***

RE: [WSG] how to use images and text in a menue

2008-08-28 Thread Essential eBiz Solutions Ltd 
Have you got an example of what your wanting to achieve?

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Michael Horowitz
Sent: 28 August 2008 19:52
To: wsg@webstandardsgroup.org
Subject: [WSG] how to use images and text in a menue

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]
***



-- 
No virus found in this incoming message.
Checked by AVG. 
Version: 7.5.524 / Virus Database: 270.6.10/1638 - Release Date: 27/08/2008
19:06




***
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 menue

2008-08-28 Thread Michael Horowitz 

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]
***

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

2008-08-28 Thread Michael Horowitz 

Actually my last fix caused another problem.  My image isn't a link to click

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]
***

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

2008-08-28 Thread tee 


On Aug 28, 2008, at 1:40 PM, Michael Horowitz wrote:


lia href=# id=homeHOME/a/li


Hi Michael, the above ones should works and I find it easier than  
having the ID place in li


Here is a quick example

ul
lia href=# id=m1Home 1/a/li
lia href=# id=m2Home 1/a/li
lia href=# id=m3Home 3/a/li
/ul

 http://lotusseedsdesign.com/menu/menu.html

Hope this helps!
tee


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