Re: [WSG] Horizontal List Issue
something like that ?!
style type=text/css
html, body { margin: 0 ; padding: 0 ; display: block ;}
ul { margin: 0 ; padding: 0 ; list-style: none ; }
li { margin: 0 ; padding: 0 ; display: block ; width: 15% ; float:
left ; background: #f0f0f0 ; text-align: center }
a { float: left ; display: block ; padding: 0.8em ; text-decoration:
none ; color: #494949 }
a:hover { float: left ; display: block ; background: #C5FFCD ; color: #000 }
img { border: 0 ; display: block ; margin: 0 auto }
/style
/head
body
ul
li
a href=#
img
src=http://imgs.sapo.pt/images/c2/www.sapo.pt/icones_topo/icone_topo_blogs_novo.gif;
/
creat your own blog
/a
/li
li
a href=#
img
src=http://imgs.sapo.pt/images/c2/www.sapo.pt/icones_topo/icon_mail.gif;
/
look up in your e-mail
/a
/li
/ul
/body
On 6/1/06, Jonathan Carter [EMAIL PROTECTED] wrote:
I'm trying to create a horizontal navigation menu where each list item
contains an image and descriptive text. I want the image to be centered
within the item and also be block so that the text is below it. I
haven't been able to get this to work perfectly between IE/FF and I
haven't found a good example of a list styled like what I'm trying to
achieve. If anyone has any examples or could help me in getting this
result, I would greatly appreciate it.
Here's what the HTML looks like:
ul
li
img src=image.gif /
pThis paragraph explains the item./p
/li
li
img src=image2.gif /
pThis paragraph explains the item 2./p
/li
/ul
The only reason why I'm actually putting an img element within the
list item is because the list markup is built dynamically from cod and
the image for each item is editable by the user.
Thanks again for any help,
Jonathan
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
http://www.artideias.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Horizontal List Issue
Hi, Jonathan I think it would be better if you don't add the p inside your list item. You don't need them. Cheers, Angela -Message d'origine- De : listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] De la part de Jonathan Carter Envoyé : jeudi 1 juin 2006 09:51 À : Web Standards Group Objet : [WSG] Horizontal List Issue I'm trying to create a horizontal navigation menu where each list item contains an image and descriptive text. I want the image to be centered within the item and also be block so that the text is below it. I haven't been able to get this to work perfectly between IE/FF and I haven't found a good example of a list styled like what I'm trying to achieve. If anyone has any examples or could help me in getting this result, I would greatly appreciate it. Here's what the HTML looks like: ul li img src=image.gif / pThis paragraph explains the item./p /li li img src=image2.gif / pThis paragraph explains the item 2./p /li /ul The only reason why I'm actually putting an img element within the list item is because the list markup is built dynamically from cod and the image for each item is editable by the user. Thanks again for any help, Jonathan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Horizontal List Issue
Jonathan Carter wrote:
I'm trying to create a horizontal navigation menu where each list item
contains an image and descriptive text. I want the image to be
centered within the item and also be block so that the text is below
it. I haven't been able to get this to work perfectly between IE/FF
and I haven't found a good example of a list styled like what I'm
trying to achieve. If anyone has any examples or could help me in
getting this result, I would greatly appreciate it.
Jonathan
I struggle to figure out exactly what it is you are after. Something
like this?
css
ul#navlist{padding: 0;margin: 0;list-style-type: none;}
ul#navlist li { display: inline; }
ul#navlist li a{float: left;width: 5em;}
span { display: block;}
html
ul id=navlist
lia href=#img src=01-a.gif /spanMauris luctus, nisi eget
porta sagittis, sem leo viverra lorem, a dictum tellus mi ac arcu. Nam
placerat nibh id risus euismod ultricies./span/a/li
/ul
Regards,
~davidLaakso
--
http://www.dlaakso.com/gustave/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Horizontal List Issue
Jonathan Carter wrote: That would be the my desired way of doing it, but like I said, the list is generated dynamically, it's not static HTML. There could be any number of list items that are displaying any image that is uploaded by the user, so I wouldn't know what image to make as the background for each item. isn't that going to be a bit messy as a horizontal list? an unknown width caused by unknown number of items isn't the best plan for horizontal. and if you can insert the img element dynamically then you can insert li style=background : #fff url(../directory/image.jpg) no-repeat 50% 0;The text goes here with adequate top padding for the image to be seen/li can't you? or is what you're trying to do better suited to a table? and is this really a navigation list? or a series of images uploaded (an image gallery) and therefore more suited to floated divs? which will wrap onto two rows if there are more than the width available ;o) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Horizontal List Issue
I've had good luck with li img {vertical-align:middle}
This helps if you have an image that is roughly the same height as the text
in the list item. It's not as good if the text begins to wrap.
-Original Message-
From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED]
On Behalf Of Thierry Koblentz
Sent: Thursday, June 01, 2006 9:45 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Horizontal List Issue
Jonathan Carter wrote:
That would be the my desired way of doing it, but like I said, the
list is generated dynamically, it's not static HTML. There could be
any number of list items that are displaying any image that is
uploaded by the user, so I wouldn't know what image to make as the
background for each item.
What about:
HTML:
liimg src=image.gif alt=Some Text /This is more text/li
CSS:
li {list-style-type:none;text-align:center;float:left;width:100px}
li img {display:block;margin:0 auto}
---
Regards,
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Horizontal List Issue
Jonathan Carter wrote: I've actually isolated what my issue is with this. I've got the list working fine in both FF and IE, but if I try to absolutely position the entire list, the images are no longer centered in FF, but it still works in IE. Do you have a test page to show us what you're trying to achieve exactly? It doesn't make sense to me that you're using an absolute positionned element that could contain an unlimited amount of children. Usually, when the size of an element can be anything, it is better to leave it in the flow... BTW, did you try to set a with on your floats? --- Regards, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
