Re: [css-d] Show more text using CSS
Hi Janet and all of you that reply to this post, Like Chris said there is an interesting avenue in CSS developed by Stu Nicholls of CSSPlay at this page: http://www.cssplay.co.uk/menu/more.html. Stu used only CSS and a little JavaScript to do that. Unfortunately, it does not work very well in all browsers. Some experts in JavaScript say that it is possible to modify this little JavaScript to get a better result. But I am not a JavaScript Expert and I do not know how. There are some comments on this page at CSSPlay: http://www.cssplay.co.uk/comments/comments.php?comment_id=more%20poetry asking Stu advices for corrections on that coding. Many of them found limitation on using an tag or the impossibility to add links in the hidden text. I am one of them. To be able to put tags in it would be useful to. Maybe the use of links and tags would be appreciated by you to. Stu propose to use nested tables like he used in his drop down menus to get links in the more part. I am not a CSS expert. I tried this advice without success. Maybe Chris or another more skilled CSS user than me will be able to make this and show us how to achieve this. The "more" part is embedded in a link. There are not many nested tags validate in a link tag. Stu used a tag. It is not possible to put a tag that validate in a tag. I changed the for a and now it is valid. At least I gain this point. Stu answer this comment: If there is a need for this then I might be persuaded to produce a 'more v2'. Maybe Stu will make them if there is a lot of comment asking for this all CSS more v2. Or we have to wait for the demo that Chris talk about in one of is reply for this topic. Anyway, an all CSS solution will be welcome. gjfortin - Original Message - From: "Janet Chang" <[EMAIL PROTECTED]> To: "Christian Heilmann" <[EMAIL PROTECTED]> Cc: Sent: Thursday, August 10, 2006 10:38 AM Subject: Re: [css-d] Show more text using CSS > At 03:08 PM 8/9/2006, Christian Heilmann wrote: > >> >> >>Basically, we need some way to code a "Show More" function that would > >> >> allow > >> >> >>us to take a long piece of text, shorten it to X maximum lines, then > >> >> have a > >> >> >>"Read more" link that when clicked would display the rest of the > >> text on > >> >> >>the page below the first half. > >> > > >> >There you go: > >> >http://icant.co.uk/sandbox/morecontentlinks/ > >> > > >> >I didn't use any fancy word counting or anything, but instead you need > >> >to set a div with the class "more" around all the elements you want > >> >hidden. > > > >>Great, thanks! I will play around with implementing it on our pages. One > >>more thingHow would you do a "Hide" link to make the extra text > >>disappear after you're done reading it? > > > >Added this functionality... > > > >-- > >Chris Heilmann > >Book: http://www.beginningjavascript.com > >Blog: http://www.wait-till-i.com > >Writing: http://icant.co.uk/ > > Thanks, Chris. I was able to get the code you sent to work with our text. > However, I'm wondering if there's a much less complicated formula for > getting this to work like that blog site without having to link to 4 js files? > > > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with css popup info box
Hi Michael, I made some corrections to validate. But I still have problems. The validation failed before because the hidden text where separated with nested with the rest of the code. Now I use instead. I try to use a demo created by Stu Nicholls of CSSPLAY. The demo is "show me some more". http://www.cssplay.co.uk/menu/more.html In an answer by Stu to one of my comments he said that I have to use nested tables like he use in is drop down menus. http://www.cssplay.co.uk/comments/comments.php?comment_id=more%20poetry I am not an expert in css and I do not know if I understand completely the advice of Stu. By trying is advice It is a step forward in FF. Links in the hidden part works but the links "plus" is working up side down and the hidden part refuse to hide. In IE6 links not showed and part of the hidden texts are missing. You talk about JavaScript but I know nothing about it. I do not know what to change in this script. GJ - Original Message - From: "Michael Landis" <[EMAIL PROTECTED]> To: "Appalaches Web" <[EMAIL PROTECTED]> Cc: Sent: Monday, July 31, 2006 1:25 PM Subject: Re: [css-d] Problem with css popup info box On 7/28/06, Appalaches Web <[EMAIL PROTECTED]> wrote about http://connaissances.org/site2: > In the hidden part the link anchor text in the middle of the first paragraph > is missing in IE6 but all texts after this link are in italic. Other links in > hidden paragraph 2 and 3 are visible but in italic too. How could I fix that? > > The only way I know to fix the missing link is to erase the rules for > these links in the span="liens" of my style sheet and put directly > these rules in the link tag. But the italic still remains. > > In FF it is worst as you can see. The "plus»" link to show the hidden > part of the box works in a reversed way. The first part of hidden paragraph > #1 is missing but the link missing in iE6 Is there in FF. The following > texts are in italic too. Hi, GJ, I think many of the problems are coming from the fact that the popups are not valid HTML. According to the HTML 4 space (which the XHTML 1 spec is based on), and tags are inline, and can only contain other inline elements. tags are block elements, which cannot reside within inline elements. It seems likely that the browsers are attempting to deal with this by cutting some tags short and adding additional ones to make up for the cut tags. You may want to run the page through the W3C validator[1] and rewrite your page until it validates correctly. More likely than not you will need to make your "plus" links separate from the hidden content. This is not necessarily a bad thing. Since you are having the user click the link to make the content appear, you are adding behavior to the link. It may be more appropriate to use a little more JavaScript than what you already have, and have the JS show the additional content explicitly, rather than relying on the presentational language of CSS to handle this behavior. HTH, Michael [1] http://validator.w3.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with css popup info box
Hi, I have a problem with an all css snippet box containing a more information link. On this page http://connaissances.org/site2/ there are two of these snippet boxes. The second box is working fine in IE6 and FF except when you hit your browser scrollbar. I tried to make links in the first one and I have problems. There is no problem at all in the visible part of the box. In the hidden part the link anchor text in the middle of the first paragraph is missing in IE6 but all texts after this link are in italic. Other links in hidden paragraph 2 and 3 are visible but in italic to. How could I fix that? The only way I know to fix the missing link is to erase the rules for these links in the span="liens" of my style sheet and put directly these rules in the link tag. But the italic still remains. In FF it is worst as you can see. The "plus»" link to show the hidden part of the box works in a reversed way. The first part of hidden paragraph #1 is missing but the link missing in iE6 Is there in FF. The following texts are in italic to. Do you have a solution for this? CSS sheets are at: http://connaissances.org/site2/web.css http://connaissances.org/site2/css/flyout_ie.css Thank You, GJ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] World is upside-down, IE is good but FF is wrong
Hi Kenny,
I add what you suggest:
#menu ul li ul li a:hover {
border-right-width: 0;
It's solved a part of my problem. The 4px red border disappear at the right
of the sub-menu when mouseover. It's ok for that.
But the 4px red border disappear to at the left of the sub-menus when
mouseover. I need to keep this left border to make the bridge between menu
and sub-menus during mouseover.
I need to know how I could keep this bridge between them during scrooling
sub-menus.
I would like to have exactly the same thing in FF that we could see in IE.
I know that I have a clipped off to fix in IE but my biggest problem now is
with the red border.
GJ
- Original Message -
From: "Kenny Graham" <[EMAIL PROTECTED]>
To: "Appalaches Web" <[EMAIL PROTECTED]>;
Sent: Tuesday, May 30, 2006 1:59 AM
Subject: Re: [css-d] World is upside-down, IE is good but FF is wrong
> Looks fine for me in FF, but the bottom nav item is clipped off in IE.
> The only other difference I can see is that the submenu items have a
> red border on hover in FF and not IE. However, FF is doing it
> correctly here, because of this rule:
>
> #menu ul li a:hover {
> border-right: 4px solid #f00;
> }
>
> the 's of the submenus are decendants of 's which are
> decendants of #menu. If this is the problem you're talking about, it
> can be fixed by adding this rule:
>
> #menu ul li ul li a:hover {
> border-right-width: 0;
> }
>
> It could be better fixed by changing the original rule's selector to
> #menu ul > li a:hover, but IE wouldn't understand that.
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] World is upside-down, IE is good but FF is wrong
Hi, I try to fix a flyout menu. I do not know why it happens but by chance or maybe not I found my menu working fine in IE but I have problem to correct it for Firefox. You could look at the page at: http://connaissances.org/site2/ Css are at: http://connaissances.org/site2/web.css and http://connaissances.org/site2/css/flyout_ie.css I know it is not the good way to have a good working site in IE first but I am not able fix it for Firefox. I need help. Thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Marquee xhtml and css3
Hi, Is there a way to achieve a valid marquee effect with css and xhtml ? I tried a marquee tag in xhtml page and css rules. It is working fine in most browsers but not validate in xhtml validator. I reed the Bert Bos article at W3C Working Draft http://www.w3.org/TR/css3-box/#marquee I tried some testing with marquee css3 rules proposed by Bert Bos like marquee-style: slide; marquee-direction: left; marquee-speed: fast Without success. Is anybody knows how to achieve a valid sliding mechanism like this ? Thanks, GJ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] H1 like watermark
Hi, Is anybody knows how to turn a h1 tag transparent like a watermark ? Thanks, GJ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertical deviders in hoizontal lis tnav bar
Hi, I want to apply vertical dividers in my horizontal side bar between links. I want to achieve these dividers looks like transparent and about 2px large. How could I insert this kind of dividers between list elements? http://awreferencement.com/site1/ http://awreferencement.com/site1/web.css Thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List nav bar problem
Bill wrote: > On Line 189 of your web.css, you have this declaration: > > .menu ul li a, a:visited > > Changing that to read > > .menu ul li a, .menu ul li a:visited > > should solve the problem. > > Hope it helps. > Bill Brown I did not expect that a rule in my other nav bar is the cause of this problem. Thanks Bill for your help. Only an annoying thing left in FF: When I return to the page where the link was clicked it looks like about on or two px higher until I click again somewhere on the page. Do you know a way to prevent that? GJ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] List nav bar problem
Hi, My horizontal nav bar extends when clicked and when visited in FF and IE, How could I fix it to keep the same width and height of the original layout? http://awreferencement.com/site1/ http://awreferencement.com/site1/web.css Thanks GJ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
