SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logical issue - css properties placement

    Hello all,

    I'm having this issue here and I can't understand properly what do you commonly do.

    We have an element A, let's say DIV A with some styles applied on a HOME PAGE.

    We have that same element A, with the same styles applied (but with a minor differences) on SECONDARY pages.


    What do we do? Should we have two times this element styles on our css? One for home and another for the secondary pages?

    Thanks in advance,
    Márcio

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could give the <body> a class and then differentiate
    Code:
    .home #container{}
    .about #container{}
    Set up page specific styles
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But that way I would duplicate almost every style of this item for each page or I'm I missing something logical ?

    Thanks,
    Márcio

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by oikram View Post
    But that way I would duplicate almost every style of this item for each page or I'm I missing something logical ?
    What you can do is declare the styles that apply on all pages once in

    Code:
    #container{}
    and then declare just the styles that are unique to specific pages with these:

    Code:
    .home #container{}
    .about #container{}

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I say logical I really mean it. sorry.
    I'm getting now.

    Btw, is it like this that you gurus normally do it?
    Do you apply a class of each body element and that element will have only the differences on a specific page class?

    Thanks in advance,
    Márcio

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by oikram View Post
    Do you apply a class of each body element and that element will have only the differences on a specific page class?
    I do this a lot, but only if it's needed. Mind you, I use this technique on most sites because it's handy for getting a page's menu link to be highlighted when you are on that page... so it has multiple uses.

    (I thought I'd answer this question, even though you directed it to "gurus"! )

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. I will need to create a layout on a mvc structure, and of course have some views etc... and the way we organize the css should play a role yes?.
    The idea of organization given here seems to be quite interesting.

    Any other suggestions would be more then welcome.

    Thanks a lot,
    Márcio

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by oikram View Post
    I see. I will need to create a layout on a mvc structure, and of course have some views etc... and the way we organize the css should play a role yes?
    Heh heh, "MVC structure", "views"? We don't speak that language here in the CSS forum. I'm not sure if MVC and CSS are logically linked (I've only dipped the tip of my toe into PHP frameworks), but certainly CSS plays a role in how you organize things.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oikram View Post
    When I say logical I really mean it. sorry.
    I'm getting now.

    Btw, is it like this that you gurus normally do it?
    Do you apply a class of each body element and that element will have only the differences on a specific page class?

    Thanks in advance,
    Márcio
    It's the safeste way. You could give the #container element a class instead of the body and reference it via #container.home{} but IE6 is buggy with that and it's best to identify pages via a class on the body.

    Besides server side options of course
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •