SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Fancy calendar

  1. #1
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fancy calendar

    I'm trying to design a simple calendar with a cool feature when showing the day. The screenshot tells what I want to accomplish, basically clip the bottom portion of every number of the month.

    Is this possible with CSS and if it is what is the browser support of it?
    Author at GraphicRiver

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,032
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    There sure is, as an example:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>Calendar example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <style type="text/css">
                .date {
                    position: relative;
                    width: 160px;
                    height: 120px;
                    overflow: hidden;
                    border: 1px solid #eee;
                    float: left;
                }
                .daynum {
                    color: #eee;
                    position: absolute;
                    right: 0;
                    top: 50px;
                    font-size: 80px;
                }
                hr {
                    border: 0;
                    background-color: #eee;
                    color: #eee;
                    height: 1px;
                    width: 80%;
                }
            </style>
      </head>
      <body>
            <div class="date">
                <div class="daynum">1</div>
                Event 1
                <hr>
                Event 2
            </div>
            <div class="date">
                <div class="daynum">2</div>
            </div>
            <div class="date">
                <div class="daynum">3</div>
            </div>
            <div class="date">
                <div class="daynum">4</div>
            </div>
            <div class="date">
                <div class="daynum">5</div>
            </div>
      </body>
    </html>

    Still needs some tweaking to fully match the screenshot and you should probably use em's instead of px, but you'll get the idea
    Should work in all popular browsers, though I have to admit I didn't test it.
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, I'll definitely try it... and test it. Thanks!
    Author at GraphicRiver

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just for Fun

    For very modern browsers you could use generated content and counters.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        counter-reset: section;           /* Set the section counter to 0 */
    }
    ol {
        counter-reset: item;
        border-left:1px solid #ccc;
        border-top:1px solid #ccc;
        float:left;
        margin:0;
        padding:0;
        width:1120px;
    }
    li {
        width:159px;
        height:119px;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        float:left;
        position:relative;
        overflow:hidden;
    }
    li {
        display: block
    }
    li:after {
        content: counter(item);
        counter-increment: item;
        color:#eee;
        position:absolute;
        bottom:-.28em;
        right:0;
        font-size:500&#37;;
        font-weight:bold;
        line-height:1.0;
        z-index:-1;
    }
    li:nth-of-type(32):after,
    li:nth-of-type(33):after,
    li:nth-of-type(34):after,
    li:nth-of-type(35):after{content:" "}
    </style>
    </head>
    <body>
    <ol>
        <li>
            <p>test content test contenttest contenttest contenttest contenttest content</p>
        </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
        <li> test content </li>
    </ol>
    </body>
    </html>
    Won't work in IE7 and under. Works in IE8 apart from the nth-of-type rules that rub the last numbers out.

    For accessibility there would be an issue in having an important field like the day number being generated via the css though.

  5. #5
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I'm aware of the generated content trick, but I'm also aware that it's not very supported in older browsers, although I prefer this solution.
    Author at GraphicRiver

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Braveheart4 View Post
    Yeah I'm aware of the generated content trick, but I'm also aware that it's not very supported in older browsers, although I prefer this solution.
    It's basically only IE6/7 taht don't support it, most other people using FF/Chrome/Opera tend to be faster upgraders (FF are semi fast) so you really only ahve to worry about them. Though a worsened expereince for IE might help them change
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •