[Typo3] More menus with TV

Kraft Bernhard kraftb at kraftb.at
Fri Apr 15 11:32:39 CEST 2005


Christopher wrote:
> 
> Ok, first of all, your css is a) bloated, and b) wrong :) You should
> probably have something more like this:
> 
> 
> 
> .menu { /* ALL properties go in here that are common to all menu items; use
> this on ALL of your menus - if there is more than one menu. It might be
> even better to define the font properties in the <body> element (except for
> 'font-weight') if the same fonts are used throughout the document... */
>   font-family:verdana,arial,sans-serif; /* Use a generic font family in
> case the user's system doesn't have your favourites! */
>   font-size:12px;
>   font-weight:bold; /* 'bold' is a possible value for the 'font-weight'
> property, not the 'text-decoration' property. */
> }
> 
> .menu a:link,
> .menu a:visited { /* Link pseudo-classes should appear in your stylesheet
> in the order :link, :visited, :hover, :active. You should also combine the
> different pseudo-classes where they have identical properties. */
>   color:#fff; /* '#fff' is shorthand for '#ffffff' */
> }
> 
> .menu a:hover {
>   color:#999; /* I'm _guessing_ that you mean to have the alternate colour
> on the :hover state, and not on the :active state (which is effectively
> unnoticeable the way most browser's do it. :hover is like 'onmouseover' in
> javascript...) */
> }
> 
> .menu a:active {color:#fff;}
> 

Complete ACK to everything :)

A little hint:
You do underline no/underline with:
text-decoration: none/underline;
in your CSS ... add it as needed to the link,visited,hover active states.

What happens if I don't have the pseudo classes in your mentioned order ?
I always use:
a:link, a:visisted, a:active {
...
}
a:hover {
...
}

> ...instead. Also, using 'before' and 'after' with &nbsp; is almost
> certainly unnecessary. It's a job probably better handled in your css
> file...

tip - try:
.menu a:hover {
   color:#999;
   /* margin assigned clockwise from top on */
   margin: 0px /*top*/, 10px /*right*/, 0px /*bottom*/, 10px /*left*/;
}

so you have left and right of the link 10px space ... you could also use
padding but they are differently renderend in IE and Firefox if you don't
use XHTML.



greets,
Bernhard



More information about the TYPO3-english mailing list