NOTLARIMDAN...: Css3

Css3 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

24 Aralık 2010 Cuma

Yuvarlak kenarlı genişleyip daralabilir groupbox


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        /* CONTAINER */
        .divContainer
        {
            color: White;
            font-family: Verdana;
            font-size: 10px;
            width: 400px;
        }
        /* UST */
        .divBaslik
        {
            border: 0 solid red;
            float: left;
            height: 12px;
            overflow: hidden;
            position: absolute;
            text-align: left;
            top: 4px;
            width: 420px;
        }
        .divUst, .divUstSag, .divUstOrta
        {
            height: 22px;
            width: 22px;
            padding: 0;
            margin: 0;
        }
        .divUst
        {
            width: 100%;
            padding-left: 10px;
            background: url("solUstKose.png") no-repeat scroll 0 0 transparent;
        }
        .divUstOrta
        {
            background: url("ustOrta.png") repeat-x scroll 0 0 transparent;
            width: 100%;
            float: left;
            position: relative;
        }
        .divUstSag
        {
            background: url("sagUstKose.png") no-repeat scroll 0 0 transparent;
            float: right;
        }
        /* ORTA */
        .divOrta
        {
            background: url("Orta.png") repeat-x scroll 0 0 Black;
            color: White;
            padding: 8px 0px 8px 9px;
            width: 100%;
            display: block;
        }
        /* ALT */
        .divAltSol, .divAltSag, .divAltOrta
        {
            height: 22px;
            width: 22px;
            padding: 0;
            margin: 0;
        }
        .divAltSol
        {
            background: url("solAltKose.png") no-repeat scroll 0 0 transparent;
            width: 100%;
            padding-left: 10px;
        }
        .divAltOrta
        {
            background: url("AltOrta.png") repeat-x scroll 0 0 transparent;
            width: 100%;
            float: left;
        }
        .divAltSag
        {
            background: url("sagAltKose.png") no-repeat scroll 0 0 transparent;
            float: left;
        }
    </style>
</head>
<body>
    <div class="divContainer">
        <div class="divUst">
            <div class="divUstOrta">
                <div class="divBaslik" onclick="f_BaslikTiklandi(21)">
                    Hemoglobin ( g/dl)
                </div>
                <img src="sagUstKose.png" style="float: right" />
            </div>
        </div>
        <div class="divOrta" id="Div1">
            <img src="Charts%5C32440281510%5C21%5C32440281510_21_5_12_2010.png" height="200px" />
        </div>
        <div class="divAltSol">
            <div class="divAltOrta">
                <img src="sagAltKose.png" style="float: right" />
            </div>
        </div>
    </div>
</body>
</html>

17 Ağustos 2010 Salı

Arka planlar - Şablon stiller


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <!--    <style>
        input, select, textarea, button
        {
            font-family: Arial,Helvetica, "Nimbus Sans L" ,sans-serif;
        }
        button, input[type="reset"], input[type="button"], input[type="submit"]
        {
            background-color: buttonface;
            border: 2px outset buttonface;
            color: buttontext;
            cursor: default;
            line-height: normal !important;
            padding: 0 6px;
            text-align: center;
            text-shadow: none;
            white-space: pre;
        }
        input
        {
            letter-spacing: normal;
            text-indent: 0;
            text-rendering: optimizelegibility;
            text-transform: none;
            word-spacing: normal;
        }
    </style>-->
    <style>
        input, select, textarea, button
        {
            font-family: Arial,Helvetica, "Nimbus Sans L" ,sans-serif;
        }
    </style>
    <style>
        .btn-primary
        {
            background-color: #0571A6 !important;
            background-position: 0 -400px;
            border-color: #045A8B;
            color: #FFFFFF !important;
        }
        .btn-primary:hover
        {
            background-color: #04608E !important;
            background-position: 0 -450px;
            border-color: #004A73;
        }
        .btn-primary:active
        {
            background-position: 0 -500px;
            border-color: #004A73;
        }
        .btn-primary
        {
            -moz-border-radius-bottomleft: 3px;
            -moz-border-radius-bottomright: 3px;
            -moz-border-radius-topleft: 3px;
            -moz-border-radius-topright: 3px;
            background-image: url(https://www.linkedin.com/scds/common/u/img/sprite/sprite_chrome_v2.png);
            background-repeat: repeat-x;
            border-style: solid;
            border-width: 1px;
            cursor: pointer;
            font-size: 12px;
            line-height: 1.35;
            margin: 0;
            overflow: visible;
            padding: 3px 10px 2px;
            text-decoration: none !important;
            vertical-align: top;
            width: auto;
        }
    </style>
    <style>
        .btn-secondary
        {
            background-color: #CECECE;
            background-position: 0 -600px;
            border-color: #999999;
            color: #666666 !important;
        }
        .btn-secondary
        {
            -moz-border-radius-bottomleft: 3px;
            -moz-border-radius-bottomright: 3px;
            -moz-border-radius-topleft: 3px;
            -moz-border-radius-topright: 3px;
            background-image: url(https://www.linkedin.com/scds/common/u/img/sprite/sprite_chrome_v2.png);
            background-repeat: repeat-x;
            border-style: solid;
            border-width: 1px;
            cursor: pointer;
            font-size: 12px;
            line-height: 1.35;
            margin: 0;
            overflow: visible;
            padding: 3px 10px 2px;
            text-decoration: none !important;
            vertical-align: top;
            width: auto;
        }
        .btn-secondary:hover
        {
            background-color: #B7B7B7;
            background-position: 0 -650px;
        }
        .btn-secondary:active
        {
            background-color: #C9C9C9;
            background-position: 0 -700px;
        }
    </style>
    <style>
        .bar
        {
            -moz-background-clip: border;
            -moz-background-inline-policy: continuous;
            -moz-background-origin: padding;
            background: transparent url(https://www.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png) no-repeat scroll 0 -470px;
            width: 100%;
        }
        .wrapper
        {
            color: #000000;
            font-family: Arial,Helvetica, "Nimbus Sans L" ,sans-serif;
            font-size: 62.5%;
            font-size-adjust: none;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            line-height: 1.2;
            -moz-background-clip: border;
            -moz-background-inline-policy: continuous;
            -moz-background-origin: padding;
            background: transparent url(https://www.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png) no-repeat scroll 0 -510px;
            height: 39px;
            padding: 0 5px;
        }
        .nav
        {
            margin-left: 5px;
        }
        ul, menu, dir
        {
            -moz-padding-start: 40px;
            display: block;
            list-style-type: disc;
            margin: 1em 0;
        }
        ol, ul
        {
            list-style-image: none;
            list-style-position: outside;
            list-style-type: none;
        }
        .tab
        {
            float: left;
            font-size: 13px;
            line-height: 35px;
            margin: 1px 0 0;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <input type="submit" class="btn-primary" value="Submit Address" name="request">
    <input type="submit" class="btn-secondary" value="Go" name="ppSearch">
    <input type="text" maxlength="20" id="firstName-registration" value="" name="firstName">
    <div class="bar">
        <div class="wrapper">
            <ul class="nav">
                <li class="tab" id="nav-primary-home"><a href="http://www.linkedin.com/home?trk=hb_home">
                    <span>Home</span></a></li>
                <li class="tab" id="nav-primary-what"><a href="http://www.linkedin.com/static?key=what_is_linkedin&trk=hb_what">
                    <span>What is LinkedIn?</span></a></li>
                <li class="tab" id="nav-primary-join"><a rel="nofollow" href="/secure/register?trk=hb_join">
                    <span>Join Today</span></a></li>
                <li class="tab" id="nav-primary-auth"><a rel="nofollow" href="/secure/login?trk=hb_signin">
                    <span>Sign In</span></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

28 Temmuz 2010 Çarşamba

XPath ve CSS 3

ref:http://ejohn.org/blog/xpath-css-selectors/


Goal                   CSS 3               XPath
All Elements            *                   //*
All P Elements          p                   //p
All Child Elements      p > *               //p/*
Element By ID           #foo                //*[@id='foo']
Element By Class        .foo                //*[contains(@class,'foo')] 1
Element With Attribute  *[title]            //*[@title]
First Child of All P    p > *:first-child   //p/*[0]
All P with an A child   Not possible        //p[a]
Next Element            p + *               //p/following-sibling::*[0]

Syntactically, I was surprised how similar the two selectors were, in some cases - especially between the '>' and '/' tokens. While they don't always mean the same thing (depending on what axis you're using in XPath), they're generally assumed to mean the child element of the parent. Also, the ' ' (space) and '//' both mean 'all descendants of the current element'. Finally, the '*' means 'all elements', regardless of their name, in both

NOTLARIMDAN...

Aklımda Kalası Kelimeler