Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Blanks space in css need help

    Im trying to change the background color of my news posts for the main page.
    What I want is to have every second post a darker grey than the one before.

    In my css file Ive added the following lines to accomplish this. Sectiontable1 and 2 beeing the different posts.

    Code:
    .sectiontableentry,
    .sectiontableentry0 { padding: 5px; }

    .sectiontableentry1 {
    border-bottom: 1px solid #ccc;
    padding: 5px;
    background-color: #ffffff;
    }

    .sectiontableentry2 {
    border-bottom: 1px solid #ccc;
    padding: 5px;
    background-color: #f6f6f6;
    }


    The code look like this(see below) when inspecting in the browser and I can cleary see that there is a blank space in between the class name and the number. But the problem is I have no clue how I can write that space in css. Cause if I just add a blank space in the css it thinks its another class or rather a standard tag like h1 and it doesnt work. Is there some way to write a space like that in css?


    Code:
    <span class=contentpane>
    <div class=sectiontableentry 1></div>
    <div class=sectiontableentry 2></div>
    <div class=sectiontableentry 1></div> /* see there is a space between sectiontableentry and 1*/
    </span>

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    There is no way, though you can use underscores _

    In HTML, you can specify multiple CSS classes to one element, and spaces are the separators.

    As for naming your classes, you should probably do it like a variable: no spaces, each word comes right after each other with the first letter of a word capitalized unless its the very first word.
    ie: sectionTableEntryTwo, sectionTableEntryEven, and if you have to: sectionTableEntry2

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This was solved by the lovely KorRedDevil <3
    __________________________________________

    The trick is simple, based exactly on W3C Recommendation:

    [...] Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code.

    That means we can use UTF-8 notation (important: followed by a space - to tell the interpreter that the UTF-8 ends there)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <style type="text/css">
    .\31 {
    color:#F00
    }
    .\32 {
    color:#0F0
    }
    </style>
    </head>
    <body>
    <div class="1">text</div>
    <div class="2">text</div>
    </body>
    </html>


    where \31 and \32 are the UTF-8 notation for 1 and 2. It works in all the browsers, so that, if anything fails, use that.

    Note: make sure you are using an UTF-8 charset for your document
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


  •  

    Posting Permissions

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