SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Entry level CSS question

    I have CSS classes the followings:
    Code:
    div.outline120
    {
        background-color: #f8f8f8;
        border: 1px solid #808080;
        padding: 0px;
        width: 120px;
    }
    div.outline160
    {
        background-color: #f8f8f8;
        border: 1px solid #808080;
        padding: 0px;
        width: 160px;
    }
    div.outline
    {
        background-color: #dff2fd;
        border: 1px solid #808080;
        padding: 0px;
        width: 100%;
    }
    They all share
    Code:
    border: 1px solid #808080;
    padding: 0px;
    What I'm wondering about now is "Is there some way to create a base class or some sort so that I can make css file smaller?"

    Please note that I also have other div classes and they do not share
    Code:
    border: 1px solid #808080;
    padding: 0px;

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You could always use multiple classes:
    Code:
    div.outline120
    {
        background-color: #f8f8f8;
        width: 120px;
    }
    div.outline160
    {
        background-color: #f8f8f8;
        width: 160px;
    }
    div.outline
    {
        background-color: #dff2fd;
        width: 100%;
    }
    
    div.outbase {
      border: 1px solid #808080;
      padding: 0px;
    }
    
    HTML Code:
    <div class="outbase outline160">
    A div that is styled according to the rules of the outbase and outline160 classes.
    </div>

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is really cool. A couple of more questions.

    q1. Can we do something like(multiple inheritance)
    Code:
    <div class="base1 base2 base3 derive_class">
    </div>
    q2. Can we use the inheritance for other tags as well like table, tr, td, etc.?

    q3. Is there any compliance issue? i.e., does this inheritance work in older browsers?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stoli_sambuca
    This is really cool. A couple of more questions.

    q1. Can we do something like(multiple inheritance)
    Code:
    <div class="base1 base2 base3 derive_class">
    </div>
    Yes, you can define many classes if you so wish.
    q2. Can we use the inheritance for other tags as well like table, tr, td, etc.?
    Yes
    q3. Is there any compliance issue? i.e., does this inheritance work in older browsers?
    [/quote]
    Works in all version 5+ browsers and is compliant with HTML 4.0+ and CSS. I'm not exactly sure how it fares in IE4 and Netscape 4.

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple calsses, eewwww...

    Since it is advised to define classes based on their meaning rather then on their appearance, I personally would suggest not to use multiple classes all over the place, even though it can be done. If multiple classes are needed, it usually is an indication that the chosen classes aren't as specific as they can be.

    Using the example mentioned in the original post, I'd like to submit the following alternative:
    Code:
    div.outline120, div.outline160, div.outline {
    border: 1px solid #808080;
    padding: 0px;
    }
    which in my humble opinion does the same.
    Not knowing the actual page code, a parent element may be suited to take on these properties, or, depending on the presence of other, "normal" divs,
    Code:
    div { ... }
    might even do the trick.
    Regards,
    Ronald.

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the example mentioned in the original post, I'd like to submit the following alternative:
    So if I write the whole thing, it's the following then
    Code:
    div.outline120, div.outline160, div.outline {
        border: 1px solid #808080;
        padding: 0px;
    }
    
    div.outline120
    {
        background-color: #f8f8f8;
        width: 120px;
    }
    div.outline160
    {
        background-color: #f8f8f8;
        width: 160px;
    }
    div.outline
    {
        background-color: #dff2fd;
        width: 100%;
    }
    (all in one css file)
    q1. Is that correct?

    Also as far as the standard compliancy is concerned, works in all version 5+ browsers and is compliant with HTML 4.0+ and CSS.

    q2. Is that correct?

    And just one more question.

    Does this work in IE4 and Netscape 4?

    (Man, you guys are good ...)

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    Birmingham, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does this work in IE4 and Netscape 4?
    Why not check yourself? http://www.skyzyx.com/downloads/ for old IE versions that run beside your current one. browsers.evolt.org for older Netscape versions.

    -Matt

  8. #8
    SitePoint Evangelist CapitalWebHost's Avatar
    Join Date
    Apr 2003
    Location
    Albany, NY
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One trick I like to use is giving classes a name that would make them extremely unique to the pages I'm designing.

    For example:

    Code:
     div.xyz_classname { whatever... }
    Why?

    Well, many times I need to incorporate a script like a forum or simular that has it's own CSS. Many times the CSS has simular if not same common class names that may clash with my own. This way I can ensure that my styles don't get corrupted by the scripts.

  9. #9
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,653
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Why not just make Div.Outline then add in the width as a local style element? Would make more sense IMHO.

    If not, I would really go with Wide, Wider and Widest or someother nomeclature.

    WWB

  10. #10
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you should look into child selectors too... although they don't have the kind of support as "normal" selectors, they keep you away from name conflicts...
    Code:
    html>#content>div {
        (will style divs within the #content div on anypage, etc.)
    }

  11. #11
    SitePoint Member NC1072's Avatar
    Join Date
    Apr 2004
    Location
    North Carolina
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    I'm really new to web design. I've never even posted online before I am currently taking a class in school dealing with web design, but we will only be learning Dreamweaver Mx and I'm kind of curious about CSS. I've read over some of the posts dealing with that subject, but I'm kind of lost. Any guidence as to where to go to gain a very basic understanding?? Thanx

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by NC1072
    I'm really new to web design. I've never even posted online before I am currently taking a class in school dealing with web design, but we will only be learning Dreamweaver Mx and I'm kind of curious about CSS. I've read over some of the posts dealing with that subject, but I'm kind of lost. Any guidence as to where to go to gain a very basic understanding?? Thanx
    http://www.w3schools.com/css/

  13. #13
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Going fast

    Whoa, had to catch up there:
    q1. Is that correct?
    Yep!
    Also as far as the standard compliancy is concerned, works in all version 5+ browsers and is compliant with HTML 4.0+ and CSS.

    q2. Is that correct?
    Yep again! You could validate it to be sure, but it should be ok.
    And just one more question.

    Does this work in IE4 and Netscape 4?
    Eeehmmm, always a tricky one; both browsers are known to have sketchy CSS1 support at best, so you really should try it out. There's nothing really exotic in it, though, so I expect they'll get it right.
    Regards,
    Ronald.

  14. #14
    SitePoint Evangelist CapitalWebHost's Avatar
    Join Date
    Apr 2003
    Location
    Albany, NY
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My personal opinion is that I don't code for NS4 or IE4 and below. If ppl are too lazy to update to modern browsers, I can live without them.

  15. #15
    SitePoint Member
    Join Date
    Apr 2004
    Location
    california
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could set each div border and padding property to inherit, or separate the div classes with a comma, or even use descendant or child selectors

  16. #16
    SitePoint Member
    Join Date
    Apr 2004
    Location
    california
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    good css help site
    http://www.wehep.com

  17. #17
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    w3schools is my number one stop when-ever i want a solid general understanding of something.. they are well worth bookmarking... just got a little taste of XML the other day from them



    as for other ways to learn, try to use dreamweaver in CODE VIEW as much as possible... That way you will understand how little edits in the code actually change the way the page looks (split view is greta for this too). I only say that because i know far too many people who "do web-design" but really don't understand the code behind it, which may not hurt you at first, but if anything ever goes wrong, or for debugging, some of them have to just start over because the code that Dreaweaver has made is too far beyond their grasp.

    All IMHO though, there IS a debate among designers between WYSIWYG and hand-coding... ou choose in the end.

  18. #18
    SitePoint Member
    Join Date
    Apr 2004
    Location
    california
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why would you use a what you see editor? they add extra code not usually w3c compliant or browser friendly?

  19. #19
    For Those About To Rock...
    Join Date
    Apr 2004
    Location
    maryland
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is really interesting...

  20. #20
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Rotterdam
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Handcoding

    Handcoding a site takes some getting used to if you've become used to a WYSIWYG editor like Dreamweaver, but I guarantee you, if you start handcoding now that you're still learning the basics, you'll thank yourself later on.

    There are lots of sites that will teach you about HTML and CSS. Most everything I learned about HTML was from HTML Goodies. There's not much there about XHTML in specific, but it has been an excellent source for me to learn the basics of HTML, after which I was ready to move on to more advanced sites.

    It is true that Dreamweaver does not always produce the best code. As has been suggested before, try to work in split view as much as possible, and read a lot about (X)HTML. Then at one point, you will find yourself wanting to do things in Dreamweaver that you know *exactly* how to code but you can't get Dreamweaver to do it. That would be a good time to start thinking about a professional code editor.

    On Windows, Topstyle is an excellent choice for CSS, but also for JavaScript, XHTML or even PHP.

    On the Mac, BBedit is a program a lot of people seem to use for handcoding.

  21. #21
    SitePoint Member
    Join Date
    Apr 2004
    Location
    california
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a editor with a macros is the best

    xhtml is simply a transformation, w3 is trying to push towards a language that's closer to sgml like xml.

  22. #22
    SitePoint Zealot itwebsolution's Avatar
    Join Date
    Jun 2003
    Location
    Richmond, VA
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure what effect you are trying to acheive with your site, but you might consider one time effects using ID tags instead of classess around your site. This way your cascading or "inheritied" effects do not get through out of whack if you want to through a tiny text block in the middle.

  23. #23
    SitePoint Addict adam2003w's Avatar
    Join Date
    Mar 2004
    Location
    colorado
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what are some of the best css tutorials? anybody? links?

  24. #24
    SitePoint Zealot bobmutch's Avatar
    Join Date
    Mar 2004
    Location
    Canada eh
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My Comments:

    WYSIWYG vs hand-coding: If you use a WYSIWYG program you will be using tables for presentation mark up. Presentation belongs in you CSS file not mixed in with your content.
    Tables should be used only for tabular data. Putting all your presentation data in CSS means your content (htm, html) files will be smaller and the CSS file(s) that contain the presentation code will be cached after the first page.

    Code Editors: You may want to give HTML-KIT try. It has some nice features and it is free. It has over 1,000,000 dl's on CNET so it is getting quite common. http://www.chami.com/html-kit

    IE4 and Netscape 4.x : As far as IE4.x NS4.x (esp ns4.x) they are not going to work with lots of CSS. What I have done is drawn the line. I don't try to support IE4.x or NS4.x as far as expecting them to see my pages the same way all the other current browsers see them.

    To do this what I have done is hide my CSS from both IE4.x and NS4.x so that when my sites are accessed they just see the content. They can still navigate the site via the menu and they get a message at the top of the page noting that their browser doesn't support CSS (or it's turned off).

    I apply an ID to this message and mark it display:none; so that CSS browsers done see it.

    To hide the CSS from IE4.x and NS4.x some people use js but I like to only use js when nessary so after some hunting I came up with the solution below. The below adds your CSS file to the page but hides it from IE4.x and NS4.x .

    Code:
    <style type="text/css" media="all">@import "stylecss.css";</style>
    <style type="text/css" media="print">@import "stylecssprn.css";</style>
    If you want to see how its done in js check this page out. http://archive.webstandards.org/upgrade/tips.html

    Browser Testing: Matt_Machell made a good suggest. Download all the IE browsers and install them on your box http://www.skyzyx.com/downloads . Check your page as you build it against IE5.01 and 5.5 because they don't support all the CSS that IE6.0 or all the current browsers do.

    Also I have the following browsers installed and test my pages against them: Opera7; NS 6.2.3, 7.1; Mozilla 1.6; Firefox 0.8 . And if you want to go over board set your work on safari 1.2 on iCapture http://www.danvine.com/icapture/ or Browser Cam http://www.browsercam.com .

    W3C Tested: You also want to validate you pages at http://validator.w3.org . When having problems with my page the first thing I do is go and validate my page to make sure its not some thing that is "wrong" with the code. It is also just a good practice to get into.

    Most browsers are quite forgiving with "wrong" code but there will always be a browser or browser version some where that will display your page funny because you got "wrong" code in it.

    doctype: Most know about this but doctype is important. Make sure it is at the very top of the page. If it isn't IE will drop down from standard mode to quirks mode and display you page different.

    Personally I am using the xhtml 1.0 stict doctype. I had all my paged done as html 4.01 stict and then in April where I heard about the new virus' that if you got infected it checked all html &amp; htm files to see if they validated xhtml 1.0 stict and deleted them if there weren't so I decided it was time to switch over. Also there was some "strange" op on #css EFnet that like to ban people that weren't xhtml 1.0 stict because that made you pages "garbage."
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Any way thats my two cents worth on this thread.
    Last edited by moospot; Sep 14, 2004 at 06:42.

  25. #25
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    Birmingham, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adam2003w
    what are some of the best css tutorials? anybody? links?
    http://www.alistapart.com has some of the best free ones, in my opinion.

    -Matt


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
  •