Re: FN-FORUM: CSS woes

date posted 18th February 2004 19:40

Cool..even looks pixel perfect on a mac. I used...



for the 'active' link...I couldn't ditch my trusty spacer gif!

Nice one Tony
Paul.



Paul Cooper
Internet Developer
Intex Design
http://www.intexdesign.net





>From: Tony Crockford [EMAIL REMOVED]
>Reply-To: [EMAIL REMOVED]
>To: "FN-FORUM / [EMAIL REMOVED] [EMAIL REMOVED]
>Subject: Re: FN-FORUM: CSS woes
>Date: 18 Feb 2004 09:08:19 -0000
>
>
>On 17 Feb 2004 23:56:50 -0000, Paul Cooper [EMAIL REMOVED] wrote:
>
>>Thanks Nick. I’ve tried using unordered lists but it poses two
>>problems. This was my code yesterday...
>>
>>
>>-----------8>-----------8>
>>The problem is the style for links has an underline decoration for
>>mouseOver state. Therefore, if the link text wraps onto the next line it
>>goes under the bullet, and the line is visible if I use   to line it
>>up. Also for the ‘active’ page I do not want to have the 'bullet'
>>icon visible. So I’d be sorted if there are style definitions for
>>making the bullet icon not appear (overide style property for li element I
>>guess), and also for keeping the text in line when it wraps. I've tried
>>left-padding and anything else I could think of. That's wyy I thought
>>spans might do the trick ... but they don't. I’m thinking of just
>>absolute positioning divs. At least there'd be some seperation of content
>>from layout. Again, any pointers welcome. Tomorrow I'm testing a weeks
>>worth of my amateur css code on MACs/Moz etc. and I'm really not looking
>>forward to it!
>
>
>try this code:
>
>
>#navlist li
>{
>padding-left: 25px;
>height:25px;
>background-image:url(file:///C|/Apache2/htdocs/kdtc/cms/img/bin.gif);
>background-repeat: no-repeat;
>background-position: 0 50%;
>}
>
>#navlist ul
>{
>margin-left: 0;
>padding-left: 0;
>list-style: none;
>}
>
>
>
>
>
>Skinsense
>Laundry and
>Excema
>advice">Skincare expert advice
>checklist">Sensitive skin checklistli>
>Older skin
>Teenage skin
>Adult skin
>organisations">Experts & organisationsa>
>
>
>
>
>
>it uses a background image for the icon and padding-left on the li to make
>sure the text never goes over the top. (the height is needed to make room
>for the background image.
>
>have a look at: http://css.maxdesign.com.au/listamatic/vertical05.htm for
>more on using background images, and study the way they're doing current
>link styling.
>
>There's some neat stuff going on with background images on links allowing a
>single image to be shifted up and down for the various rollover states -
>looks cool and needs no preloading.
>
>see: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ for the howto.
>
>and http://sophie-g.net/jobs/css/e_buttons.htm for a different
>interpretation
>
>hth
>
>Tony
>
>--
>** Get all the Freelance Work you Can Handle *
>The Web Design Business Kit will show you proven tactics
>and strategies for marketing your business, winning bids,
>managing projects and pricing your work. Free Shipping Worldwide.
>Read more & get free chapters at:
>http://www.sitepoint.com/launch/b7c91e/3/4
>
>To advertise here: http://www.freelancers.net/advertising.html
>
>