Separating out presentation: So many controls to style!

Last post 03-18-2008 7:02 PM by Dave Sussman. 4 replies.

Sort Posts:

  • Separating out presentation: So many controls to style!

    03-18-2008, 1:35 PM
    • Loading...
    • tmpuzer
    • Joined on 03-07-2008, 5:45 PM
    • Posts 315

    I'm trying not to put any presentation information in my aspx pages, and instead keep it all in css and skin files.  However, it seems like I have a good number or text boxes and also gridview columns many of which need at least a custom width.  But then it seems like I'll need to have an almost one-to-one ratio between textboxes (the content) and either textbox skins or css rules (the presentation).  Clearly things like fonts and colors can be shared among many items on the page, but widths? Do I just accept this fact or is there another way of looking at this?

    If a post helps me I'll always eventually mark it as an answer. But I frequently don't mark it right away because I feel once a thread is marked as answered, discussion tends to end. And I like to discuss things a bit.
  • Re: Separating out presentation: So many controls to style!

    03-18-2008, 2:57 PM

    I try not to set explicit widths on text boxes, but obviously there are places where it needs setting, so I just take the hit and set styles for each as necessary. The worst part comes when using server side controls, which you can't match up to style rules with an ID; you end up putting a class on it, which only ever gets used once; I always feel dirty when I do that. You can get away with context naming sometimes, so don't need to explicitly set each text box.

    d

  • Re: Separating out presentation: So many controls to style!

    03-18-2008, 3:06 PM
    • Loading...
    • tmpuzer
    • Joined on 03-07-2008, 5:45 PM
    • Posts 315

    So for server side controls do you prefer to use a skin file or do you create one-time-use css classes? 

    Dave Sussman:
    You can get away with context naming sometimes, so don't need to explicitly set each text box.
     

    Can you elaborate just a little on that? 

    If a post helps me I'll always eventually mark it as an answer. But I frequently don't mark it right away because I feel once a thread is marked as answered, discussion tends to end. And I like to discuss things a bit.
  • Re: Separating out presentation: So many controls to style!

    03-18-2008, 3:10 PM
    Answer
    • Loading...
    • kirchi
    • Joined on 03-07-2007, 7:47 AM
    • Posts 328

    Hello tmpuser,

    some useful facts:

    you can use more then one css class for the element:

    <asp:TextBox runat="server" ID="txt1" CssClass="shadow midSize etc" />

    you can use advanced technics to define style of controls inside containers with specific class:

    div.TitleDiv

    {

     font-weight:bold;

    }

    div.TitleDiv a:visited

    {

     color:red;

    }

    etc.

    Basically you should try to define as much as possible in css, (at least while it is reusable in several places), but in some places of course you will have very specific style, and set it in place to not raise the size of css that is shared between possibly hundreds of pages.

     

    My blog: http://blog.devarchive.net
    My samples: http://devarchive.net
  • Re: Separating out presentation: So many controls to style!

    03-18-2008, 7:02 PM
    Answer

    Multiple classes are good; it was ages before I realised you could do that. Note that VS 2005 shows multiple classes in a CSS file as an error, when it's not. Ie, if you do .foo.bar as a class name, it's flagged - just ignore the error.

    For context I mean using the inheritence and child selectors. So:

    • div input - an input below a div, at any level
    • div > input - an input directly below a div
    • div + input - an input next to (ie a sibling) of a div

    Classes apply here too, so:

    • div.inputform > input - an input within a div that has a class of 'inputform'

    So you might be able to use the context within which some of your textboxes sit to avoid having to add additional classes. You can also select on attributes:

    • input[type="text"] - a text input; ie where the 'type' attribute has a value of 'text'
    • input[id^="text1"] - a textbox where the id starts with 'text1'
    • input[id$='text1] - a textbox where the id ends with 'text1'
    • input[id*='text1'] - a textbox where the id contains 'text1'

    Attribute selectors are really useful for targetting specific controls, especially the contains one when using ASP.NET text box controls in a control tree hierarchy (user controls or master pages) and the ID is munged to include the parent controls.

    d

Page 1 of 1 (5 items)
Microsoft Communities
Page view counter