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/

[css-d] Sprite technique question

2010-10-22 Thread MEM 
Hello all,

On a sprite technique we often see something like this:

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

Why, when we set the display to block, the width and height properties
seem to realise the background image presence and, because of that,
the width and height setted to 100% will exactly fit the background
image size?
To be more clear - I'm not properly getting the relation between this
triad: background image, display:block; and width or height.

Can I have a push?

K. Regards,
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 technique question

2010-10-22 Thread Thierry Koblentz 
 On a sprite technique we often see something like this:
 
 #menu li a {
 background:url('image/menu.png') no-repeat;
 width:100%;
 height:100%;
 display:block;
 }
 
 Why, when we set the display to block, the width and height properties
 seem to realise the background image presence and, because of that,
 the width and height setted to 100% will exactly fit the background
 image size?
 To be more clear - I'm not properly getting the relation between this
 triad: background image, display:block; and width or height.

As are inline-level elements so width and height do not apply unless you
style them as block-elements.
Note that the background shows in both cases, it is just that the box is
bigger once it is styled as block.
The width does not have to be explicit though as by default the value is
auto and it will fill the parent container.
And height:100% is not a sure thing ;-)

--
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/