Re: [css-d] [+] Sprite technique question

2010-10-23 Thread MEM 
Context:

 #menu li a {
 background:url('image/menu.png') no-repeat;
 width:100%;
 height:100%;
 display:block;
 }

Add on:

#menu li {
 height: 100px;
 width: 200px;
}



 As are inline-level elements so width and height do not apply unless you
 style them as block-elements.

ok. :)

 Note that the background shows in both cases,

You mean when we have display:block; or the default display:inline, correct?

 it is just that the box is bigger once it is styled as block.

Here is the main doubt: how do you know that it will be enough
bigger to display the background?
Or, saying otherwise, when we set a to display block it will be ALWAYS
as bigger as the container allows it to be.
In this case, the container will be a fixed width and height of the
parent li element.
Yes?

 The width does not have to be explicit though as by default the value is
 auto and it will fill the parent container.

I would love to have a cheat-sheet so that I can see what is the
default position and display values of elements... :D :D

:D ?


 And height:100% is not a sure thing ;-)
So, should we consider other way for giving height to our a elements,
either then the couple: height:100%; + display:block; ?
ie. line-height + display:block; ?


 --
 Regards,
 Thierry

Thanks a lot.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] [+] Sprite technique question

2010-10-23 Thread Philippe Wittenbergh 

On Oct 23, 2010, at 8:07 PM, MEM wrote:

 I would love to have a cheat-sheet so that I can see what is the
 default position and display values of elements... :D :D
 
 :D ?

Have you tried the CSS 2.1 spec ? it has a helpful index.
http://www.w3.org/TR/CSS21/indexlist.html

- :D -

 And height:100% is not a sure thing ;-)
 So, should we consider other way for giving height to our a elements,
 either then the couple: height:100%; + display:block; ?
 ie. line-height + display:block; ?

Height: 100% only works if the height of the parent element is known, as in 
your code snippet:

 Add on:
 
 #menu li {
 height: 100px;
 width: 200px;
 }

You could of course specify the height of you a in something else than %, 
such as height: 300px, etc. to make sure it is tall enough to show your 
background image.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] [+] Sprite technique question

2010-10-23 Thread MEM 

 On Oct 23, 2010, at 8:07 PM, MEM wrote:
 Height: 100% only works if the height of the parent element is known, as in 
 your code snippet:

Ok. It's 100% of a given height. 100% is a relative measure, hence, we
need to have a reference. Slowly... I'm getting somewhere. :s



 Philippe

Thanks a lot,
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] sprite menu

2010-10-23 Thread MEM 
2010/10/23 MEM tal...@gmail.com:
 Hello (again),

 I'm trying to accomplish the following:
 http://www.occ.nuvemk.com/CssMarcio/secundariaOcc.html

 With the above CSS:
 http://www.occ.nuvemk.com/CssMarcio/occ.css

 The floats seem to be understood on latest FF, Opera and Mac Safari -
 But on IE8 the clear seems to clear more then what it should.

 I will not say that it's IE8 fault etc... cause normally I'm the issue. :s

 Can I have your help?


I have:
a) corrected the markup.
b) contain the floats with overflow property applied on the ul.
c) give a explicit width to the ul so that, the out of the flow
element could not go more upper then what it should.

Seems to be ok now.

 http://www.occ.nuvemk.com/CssMarcio/secundariaOcc2.html

Thanks for the previous answers... ;)
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] [+] Re: sprite menu

2010-10-23 Thread Thierry Koblentz 
 I have:
 a) corrected the markup.
 b) contain the floats with overflow property applied on the ul.
 c) give a explicit width to the ul so that, the out of the flow
 element could not go more upper then what it should.
 
 Seems to be ok now.
 
  http://www.occ.nuvemk.com/CssMarcio/secundariaOcc2.html

fwiw, I'd not use negative text-indent as it fails miserably with image off.
I prefer to use this technique, which allows the use of a sprite:
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_t
echnique.asp

As a side note, because of the font you're using, you could also make the
image *scalable*:
http://tjkdesign.com/articles/tip_5.asp

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/