Re: [css-d] custom background image on menu items

[Brian Hazelton]

Bob Meetin wrote:
> I am trying to set custom background images for menu items on a menu 
> auto-generated through a CMS.  Them CMS gives both a class and an ID to 
> each menu item, each has a numerical suffix.  Example:
>
> 
> 
>   
>  href="index.php?option=com_content&view=article&id=99&Itemid=54" 
> class="menu-item3" id="menu54" title="CONTACT"> class="menu-title">CONTACT
>   
>
>   
>  class="menu-item4" id="menu58" title="DEALER/REP"> class="menu-title">DEALER/REP
>   
>
>   ...
>   ...
>
> 
> 
>
> The relevant section of the stylesheet looks like:
>
> #ja-cssmenu li a {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
> -2px -29px;
> }
>
> The above style will work to give every link the blue image, but I don't 
> want that so I commented out the background and tried to apply a custom 
> class or id to the individual links.  I thought something like one of 
> the following should work, keying off of (class="menu-item3" 
> id="menu54") but no image appears:
>
> #menu54 .menu-item3 li a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
> -2px -29px;
> }
>
> .menu-item3 #menu54 li a  {
>  background: url(/images/blu-glossy-spheres-light-30.png) no-repeat -2px 
> -29px;
> }
>
> #menu54 li a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
> -2px -29px;
> }
>
>  .menu-item3 li a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
> -2px -29px;
> }
>
> #menu54 a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
> -2px -29px;
> }
>
> .menu-item3 a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
> -2px -29px;
> }
>
> What am I missing?
>
> -Bob
> __
> 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/
>
>   
If you would give us a URL to work with it will be easier to help you, 
also what are the differences between each button you are trying to 
achieve, is it different for each and every button or just a few?
Thanks,
Brian
__
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] custom background image on menu items

[Thierry Koblentz]

> I am trying to set custom background images for menu items on a menu
> auto-generated through a CMS.  Them CMS gives both a class and an ID to
> each menu item, each has a numerical suffix.  Example:
> 
> 
> 
>   
> 
href="index.php?option=com_content&view=article&id=99&Itemid=54"
> class="menu-item3" id="menu54" title="CONTACT"> class="menu-title">CONTACT
>   
> 
>   
>  class="menu-item4" id="menu58" title="DEALER/REP"> class="menu-title">DEALER/REP
>   
> 
>   ...
>   ...
> 
> 
> 
> 
> The relevant section of the stylesheet looks like:
> 
> #ja-cssmenu li a {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
> 
> The above style will work to give every link the blue image, but I don't
> want that so I commented out the background and tried to apply a custom
> class or id to the individual links.  I thought something like one of
> the following should work, keying off of (class="menu-item3"
> id="menu54") but no image appears:
> 
> #menu54 .menu-item3 li a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
> 
> .menu-item3 #menu54 li a  {
>  background: url(/images/blu-glossy-spheres-light-30.png) no-repeat -2px
> -29px;
> }
> 
> #menu54 li a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
> 
>  .menu-item3 li a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
> 
> #menu54 a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
> 
> .menu-item3 a  {
>   background: url(/images/blu-glossy-spheres-light-30.png) no-repeat
> -2px -29px;
> }
> 
> What am I missing?

Hi Bob,

IDs and classes are set on the anchors, so your rules above do not match any
element in the menu (google "descendant selectors" to better understand your
problem).

So since you need to be more specific than this:

#ja-cssmenu li a {}

You can try:

#ja-cssmenu li .menu-item3 {}

or this:

#ja-cssmenu li #menu54 {}
 

As a side note, it would be much better to have these hooks on the list
items rather than the As.


-- 
Regards,
Thierry | http://www.TJKDesign.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/

[css-d] custom background image on menu items

[Bob Meetin]

I am trying to set custom background images for menu items on a menu 
auto-generated through a CMS.  Them CMS gives both a class and an ID to 
each menu item, each has a numerical suffix.  Example:



  
CONTACT
  

  
DEALER/REP
  

  ...
  ...




The relevant section of the stylesheet looks like:

#ja-cssmenu li a {
  background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
-2px -29px;
}

The above style will work to give every link the blue image, but I don't 
want that so I commented out the background and tried to apply a custom 
class or id to the individual links.  I thought something like one of 
the following should work, keying off of (class="menu-item3" 
id="menu54") but no image appears:

#menu54 .menu-item3 li a  {
  background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
-2px -29px;
}

.menu-item3 #menu54 li a  {
 background: url(/images/blu-glossy-spheres-light-30.png) no-repeat -2px 
-29px;
}

#menu54 li a  {
  background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
-2px -29px;
}

 .menu-item3 li a  {
  background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
-2px -29px;
}

#menu54 a  {
  background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
-2px -29px;
}

.menu-item3 a  {
  background: url(/images/blu-glossy-spheres-light-30.png) no-repeat 
-2px -29px;
}

What am I missing?

-Bob
__
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] CSS Drop Down Menu

[Wayne Wickson]

Sample Menu Site
http://www.wickson.net/_CSS_09/index.htm 


Style Sheet 1
http://www.wickson.net/_CSS_09/style1.css

Style Sheet 2
http://www.wickson.net/_CSS_09/style2.css

Menu item "HELLO 3", a dropdown from "HELLO", displays two levels of 
dropdown/flyout.  The second flyout should be linked to "HELLO 3 B" but 
displays without mouseover on both "HELLO 3 A" and "HELLO 3 B".  Is 
there a tweak in the coding that would cause that submenu to only 
display on mouseover "HELLO 3 B"?

What if the menu stretched to the right side of the screen?  Is it 
possible to have the dropdown appear on the left side of its parent item?

wayne.wick...@gmail.com
 

Wayne

__
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] Float problem

[MOHAMMED NASEER]

that does the job but it's out of place from the rest of the layout  
due to the border. I tried wrapping it up in a div, applied a class  
with 'clear:left' and that did the trick :-)

On 24 Sep 2009, at 16:31, Thierry Koblentz wrote:
>>
>
> Try to you use a fieldset instead of a p to wrap the radio buttons  
> and use
> clear:left on that fieldset. That you should fix your float problem as
> fieldsets create a new block-formatting context and will also  
> contain the
> floats.
> Also, using fieldset is more semantic than using paragraphs for this.
>
>
> -- 
> Regards,
> Thierry | http://www.TJKDesign.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] Dealing with IE's decimal rounding of percentages

[D A]

>> To accomodate the 18 columns, I set them to a width of 5.55%
> [...]
>
> 18 columns on a single page? That sounds an awful lot like a tabular data
> situation. If it is, a table is a semantically correct, and probably
> preferred, solution.

Indeed it would.

In this case, though, it's the blueprintCSS framework (or any
multi-column grid system).

It would definitely be crazy to actually use 18 individual columns. In
this case, the 18 columns were merely an extreme example to show the
rounding issue in IE being compounded.

-Darrel
__
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] instead of br clear?

[Graham, Steve R.]

>> Can someone direct me to the article/info on using a different means to
>> achieve the same effect?

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

This is several years old, and may be incorporated with several of the 
responses already given, but I thought I would pass it along in case it is 
helpful to you.

Start reading about 3/4 of the way through the article at "'Rubbish' I thought 
to myself."


__
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] Dealing with IE's decimal rounding of percentages

[Felix Miata]

On 2009/09/24 12:27 (GMT-0500) D A composed:

> I'm sure this has been answered before, but am not quite sure what to
> search for.

> The sample scenario:

> Contain div with 18 floated divs within (acting as columns).

> To accomodate the 18 columns, I set them to a width of 5.55%
[...]

18 columns on a single page? That sounds an awful lot like a tabular data
situation. If it is, a table is a semantically correct, and probably
preferred, solution.
-- 
"The Scriptures tell us righteousness exalteth a Nation."
2nd U.S. President, John Adams

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.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] Dealing with IE's decimal rounding of percentages

[Thierry Koblentz]

> I'm sure this has been answered before, but am not quite sure what to
> search for.
> 
> The sample scenario:
> 
> Contain div with 18 floated divs within (acting as columns).
> 
> To accomodate the 18 columns, I set them to a width of 5.55%
> 
> Firefox handles this wonderfully, adjusting various divs within to
> ultimately end up with 18 divs that exactly fill the container or,
> worst case, 1 pixel short.
> 
> Safari does a commendable job, appearing to round down to make sure
> all columns fit within the container.
> 
> IE is the trouble maker (as always). Depending on the width of the
> container, the internal columns may fall slightly short due to
> rounding (which is fine) or slightly MORE due to rounding (which is
> bad, causing the last item to wrap).
> 
> For example, a container of 500px will cause the 18th div to drop. A
> conteinr of 505px will leave a few extra pixels after the 18th div.
> 
> Obviously, this is a bit of an extreme example. This problem only
> appears when you have enough individual items inside the wrapper to
> compound the rounding error.
> 
> That said, has anyone found a css-centric solution for this? I did
> find a suggestion by Eric Meyer to give the last item being contained
> a negative left-margin of a handful of pixels. That might be the best
> solution.

Hi Darrel,

The way I deal with this is by *not* floating the last container, but
instead making it a new block formating context. Using zoom:1 for IE (which
triggers hasLayout and works as intended) and using overflow:auto or
overflow:hidden with other browsers (or keep the last float if you have no
issue in other browsers). That way there is no width to set and the
container fits whatever space is left.

-- 
Regards,
Thierry | http://www.TJKDesign.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/

[css-d] Dealing with IE's decimal rounding of percentages

[D A]

I'm sure this has been answered before, but am not quite sure what to
search for.

The sample scenario:

Contain div with 18 floated divs within (acting as columns).

To accomodate the 18 columns, I set them to a width of 5.55%

Firefox handles this wonderfully, adjusting various divs within to
ultimately end up with 18 divs that exactly fill the container or,
worst case, 1 pixel short.

Safari does a commendable job, appearing to round down to make sure
all columns fit within the container.

IE is the trouble maker (as always). Depending on the width of the
container, the internal columns may fall slightly short due to
rounding (which is fine) or slightly MORE due to rounding (which is
bad, causing the last item to wrap).

For example, a container of 500px will cause the 18th div to drop. A
conteinr of 505px will leave a few extra pixels after the 18th div.

Obviously, this is a bit of an extreme example. This problem only
appears when you have enough individual items inside the wrapper to
compound the rounding error.

That said, has anyone found a css-centric solution for this? I did
find a suggestion by Eric Meyer to give the last item being contained
a negative left-margin of a handful of pixels. That might be the best
solution.

-Darrel
__
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] instead of br clear?

[Thierry Koblentz]

CCing the list

>This article lists different ways to do it without structural markup:
>http://tjkdesign.com/articles/clearing-floats_and_block-formatting_cont
>ext.a
>sp
>
> FYI, if you enclose a url in an email with angle brackets, it won't
> break as yours did above.
> 
> Try this:
> 
>

> 

Hi Tedd,
Thanks for sharing


-- 
Regards,
Thierry | http://www.TJKDesign.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] Float problem

[Thierry Koblentz]

> Hi - I was working on a tutorial and they suggested adding 'clear:
> left;'   to the descendent selector below in order to remove the
> problem of next label/question ( in this case:  'Rate your apartment
> farming skills' ) wrapping around the float in case where the text for
> the question/label before runs more than one line, as is the case with
> the second label.
> Although this problem is fixed, but now I am running into another
> problem in that the next 'input types' ( Novice, Intermediate, and
> Advanced  ) are wrapping around the long text. How can I best resolve
> this - thanking in advance, Naz.
> 
> 
> #subForm .label {
>float: left;
>width: 230px;
>margin-right: 10px;
>text-align: right;
>font-weight: bold;
>clear: left;
> }
> 
> .
> 
> 
> 
>   What is your
name?
>
>What is your email
> address? There's one last step for these labels. Because they're
> floated to the left, if the
> text runs more than one line, the question that follows will also try
> to wrap around to the right./* ...SECOND LABEL */
>   
>Rate your apartment farming
skills
>   
>/>Novice
>   
>  >Intermediate
>   
>/>Advanced label>
>
> 
>   .
> 

Try to you use a fieldset instead of a p to wrap the radio buttons and use
clear:left on that fieldset. That you should fix your float problem as
fieldsets create a new block-formatting context and will also contain the
floats.
Also, using fieldset is more semantic than using paragraphs for this. 


-- 
Regards,
Thierry | http://www.TJKDesign.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] instead of br clear?

[Shawn Lawler]

Greg Wilker wrote:
> Hello Everyone,
>
> A while back, someone posted about using a better means of "clearing"
> content then the  fix when dealing with floating elements
> that extend past the main content height.
>
> I have a page example here where I am using the br clear fix:
> http://www.jonglidden.com/thank-you.php
>
> Can someone direct me to the article/info on using a different means to
> achieve the same effect?
>
> Thank you,
> Greg
>
>   
As long as the heights of your blocks are flexible you can use 
overflow:hidden on the block wrapping your floats.
In your case, ditch the  -- then add this to your stylesheet.

#main {overflow:hidden;}

You may need to trigger hasLayout for some IE versions.  width:100% will do.

-- 
//
Shawn Lawler
Research and Training Center on Community Living
Institute on Community Integration
University of Minnesota

__
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] instead of br clear?

[G.Sørtun]

Greg Wilker wrote:
> Can someone direct me to the article/info on using a different means to
> achieve the same effect?

4 pages with alternatives linked in under "containing floats" on this 
page...



regards
   Georg
__
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] instead of br clear?

[Thierry Koblentz]

> A while back, someone posted about using a better means of "clearing"
> content then the  fix when dealing with floating
elements
> that extend past the main content height.
> 
> I have a page example here where I am using the br clear fix:
> http://www.jonglidden.com/thank-you.php
> 
> Can someone direct me to the article/info on using a different means to
> achieve the same effect?

Hi Greg,

This article lists different ways to do it without structural markup:
http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a
sp


-- 
Regards,
Thierry | http://www.TJKDesign.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/

[css-d] instead of br clear?

[Greg Wilker]

Hello Everyone,

A while back, someone posted about using a better means of "clearing"
content then the  fix when dealing with floating elements
that extend past the main content height.

I have a page example here where I am using the br clear fix:
http://www.jonglidden.com/thank-you.php

Can someone direct me to the article/info on using a different means to
achieve the same effect?

Thank you,
Greg

greg wilker | video/web producer

__
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] Float problem

[MOHAMMED NASEER]

Hi - I was working on a tutorial and they suggested adding 'clear:  
left;'   to the descendent selector below in order to remove the  
problem of next label/question ( in this case:  'Rate your apartment  
farming skills' ) wrapping around the float in case where the text for  
the question/label before runs more than one line, as is the case with  
the second label.
Although this problem is fixed, but now I am running into another  
problem in that the next 'input types' ( Novice, Intermediate, and  
Advanced  ) are wrapping around the long text. How can I best resolve  
this - thanking in advance, Naz.


#subForm .label {
   float: left;
   width: 230px;
   margin-right: 10px;
   text-align: right;
   font-weight: bold;
   clear: left;
}

.



What is your name?
 
 What is your email  
address? There’s one last step for these labels. Because they’re  
floated to the left, if the
text runs more than one line, the question that follows will also try  
to wrap around to the right./* ...SECOND LABEL */

 Rate your apartment farming 
skills

Novice

 Intermediate

Advanced
 

.


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