[css-d] Seperating behavior and style
Hi Everyone, I'm in the process of building this page that has a lot of interactive elements. In partiular, I have a couple of "panes" that are expandable and collapsable, as per the reqirement. So, when you collapse the pane, the pane slides out of view using a neat lil animation (I vary widths in a loop in conjunction with setTimeOut() ) Now, I've been able to acheive this just fine with a "proof-of-concept" code. However, I want to have better seperation between the style and behavior. I need to be able to define a class="expanded" and class="collapsed". When the user asks for somethng that was expanded to be collapsed, the JS should read the CSS file for the width to which the pane will collapse (need not be 0px), and should accordingly start playing the animation. This way, I won't have any hard-coded width values in my JS. I have no clue how I'm going to read the CSS file in JS. Can anyone help? Regards, Rakesh Pai. PS. Sorry if this is off-topic. Can someone please point me to the right pages/lists where i can know more? TIA. -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] FOUC of a new kind
Consider the following markup: ... header stuff here ... lots of markup ... lots of markup ... Some footer stuff Now, let's assume that the #leftColumn is floated left, the #rightColumn is floated right, and the #footer clear:both the floats. Also, as per the design, the body has a black background, and some wrapper for this markup has a light patterned background. The problem is that until the footer is loaded in the markup, the content in the leftColumn and rightColumn is unreadable since the floats are not cleared making the background black. If the amount of markup in the left and right columns is a lot, there's a perceivable delay in loading the footer, making the page unusable till that time. Is there a solution to this problem? Colleagues are suggesting that I use tables to ensure that the background is available, but I don't like the idea. Note that I cannot give the left column and the right column a background, since I need the pattern to show up through them. This is very urgent, so speedy responses will be greatly appreciated. -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] css organization - (divide and conquer) or not?
May I add:
Method 4:
/* Header styles */
div#header {
/* all header related styles, making no distinction between of
layout and typography */
}
div#header img {
/* style rules for the logo */
}
/* Navigation */
...
/* Content area */
...
/* Footer */
...
I personally find this to be much easier to find stuff in the file. YMMV.
--
Rakesh Pai
Mumbai, India.
[EMAIL PROTECTED]
http://piecesofrakesh.blogspot.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Styling an RSS feed { #rss: bother; }
If I'm not mistaken, you should be able to style RSS feeds much like
you style any HTML document. Except, since you don't have a 'handle'
on every individual element, your styles will at best be generic and
apply to all the elements in the same way. Or of course, you could use
the 2.1 pseudo-classes like :first-child and stuff to target specific
elements.
Chris, I think what you are looking for is element selectors? Or have
I just understood everything wrong. You should be able to use
something like:
title {
font-size: 2em;
font-weight: bold;
}
Also, I'm a bit confused about how you will the stylesheet
in. But you seem to have figured that out already.
--
Rakesh Pai
Mumbai, India.
[EMAIL PROTECTED]
http://piecesofrakesh.blogspot.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Can this menu be reproduced with pure CSS?
This is fairly simple. You can use a border-left for the colored boxes with a background-position: left with an appropriate image to show that white gap between the colored box and the menu item. There might be other solutions too, though. This is just something I came up with off the top. Just a usability/accessibility tip while you are at it - The hover state for the menu item which shows the yellow background is deceptive. Not all the area of the menu item is clickable. Only the link is. You should use a display: block; width: 100%; on the "a" element, and specify the width of the menu item in the ul's properties to get this functioning. On 2/9/06, Jackie Carey <[EMAIL PROTECTED]> wrote: > http://www.itshere.org.uk > > > > I've inherited this table-based site, which is going to be replaced with > a CMS-based site at some point in the next six months. I've worked > styles into some of it, and the rest can remain until the switch. > However, I am not happy with the menu and would like to replace it with > a list-based menu. > > > > This could be done very easily if it weren't for the coloured boxes > alongside the menu items. I'd like to keep them as they're part of the > branding and look quite nice. > > > > Does anyone know of a way I could do this, without a whole heap of work > (and ideally without Javascript). > > > > Thanks > > > > Jackie > > > > Scanned by MailDefender - managed email security from intY - > www.maildefender.net > __ > 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/ > -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ __ 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] Form Layout "how would *you* do this?" question...
Give the "ROW" class a background: url() repeat-x bottom, and give the individual spans a background-color: white. This is assuming that you are working on a white background, and you already have the code to align the elements correctly. On 2/22/06, Les Mizzell <[EMAIL PROTECTED]> wrote: > > > Because of that, I would recommend you to use a table, and not DIVs > > (you may have "DIVitis") Also, I would suggest to use a FIELDSET and > > LABELs (instead of SPANs with your texts), so the (XHTML) structure > > would look like this: > > > > Short form description > > > > > > Field > > > > > > ยทยทยท > > > > > > *note: Label's FOR attribute acts upon field ID, not the NAME > > > I thought about tables - but the way the rest of the page is laid out > would lead to multiple tables, or nested tables, or all kinds of > differing column spans for every row. Plus, none of the rows have data > with any kind of fixed length, so you could end up with stuff like > > col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 .. col2 > col1 ... col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 co > col2 col2 col2 co > > > No consistant column widths = bit table mess. Between what I was working > on, and part of one of the examples posted by Holly, I think I've got it. > > 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/ > -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ __ 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] A Fairly Complex Design Complete, wishing to implement using all CSS
reslice the > template... But I'd really like the guidance of a CSS expert to help me > slice this template up "properly" so that it does what I want, but in CSS. > > The main problem is, I only have about $100 left in the budget to get a > guru's assistance. This was a fixed-bid project for a non-profit client. > That amount is generally insulting to experts, but I'm wondering if perhaps > for that amount, someone here would be willing to assist off-list, and just > point me in the right direction using the tools that I have available to me. > I could provide a JPG of the layout, and perhaps the right person could give > me a better starting point than I have right now...? > > Finally... I am (BRAND) new to the list - please accept my apologies if this > post is offensive in any way, as I have not had time to lurk and observe the > true etiquette and nature of the list. I just want to get this done, but if > a CSS-only layout is too much for this design, I'll have to go back to > regular tables. > > Thanks for whatever help you can provide... > > M > > __ > 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/ > -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ __ 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] A Question of Strategy
Hey Dean, I read your mail with a smile, as it reminded me of the time about two years ago when I shifted from table based design to CSS based design. IMHO, you've made the right choice to shift to CSS design. You've already started seeing the benefits, so I need not elaborate on that. About the box model problem. AFAIK, it is not just IE5, but also IE5.5 and IE6 - quirks mode that suffer from the misinterpretation of the CSS box model (List: Correct me if I'm wrong). So, I'd recommend you leave the hacks in your code. Besides, using a good box model hack will not affect any of the browsers that interpret the CSS correctly, so there's no harm done. Also, since you are using divs for the superfluous markup, you are not altering the semantics of the document in any way, so you don't have a need to feel guilty about bad semantics either, even though "divitis" are a bad idea. I know it doesn't feel too good to write bad code to support a bad browser, but until things change we have to change ourselves to fit in. -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ __ 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] FooterStickAlt with a background color
So, I've created a page using the exact code from footerStickAlt http://www.themaninblue.com/writing/perspective/2005/08/29/ except I've given a background to the HTML. Unfortunately, the background applies only to the page to the extent of the viewport height. Which means that if the page is taller than the viewport, the area below the viewport will not have the background applied. Any solutions? -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] FooterStickAlt with a background color
Thanks for the link, Francky. Following the markup in that page, I had to add an extra wrapper div inside the body to which I had to apply the background. This had to be done, since the body height was already specified to be a 100%, and wouldn't increase beyond that, I guess. Only if there was a way to do that without the extra markup, though. Hmmm. On 2/24/07, francky <[EMAIL PROTECTED]> wrote: > Rakesh Pai schreef: > > So, I've created a page using the exact code from footerStickAlt > > http://www.themaninblue.com/writing/perspective/2005/08/29/ except > > I've given a background to the HTML. Unfortunately, the background > > applies only to the page to the extent of the viewport height. Which > > means that if the page is taller than the viewport, the area below the > > viewport will not have the background applied. > > > > Any solutions? > > > Hi Rakesh, > In the FooterStickAlt example [1] I see the background-color and > background-img aren't attached to the HTML, but to the BODY styles. Is > that it? > > Success and greetings, > francky > > [1] > http://www.themaninblue.com/experiment/footerStickAlt/good_example_long.htm > > -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
