Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Tuesday, February 25, 2020

CSS Aligning Last Item to the Bottom of a Container Using Flex Attribute

The ordered list has its initial layout controlled by a row flexbox layout and the list items are controlled by a column flexbox layout.
Containing ul tag flexbox CSS is…

ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
Markup for the list item is…

<li>
    <h3>Header</h3>
    <p class="price"><sup>$</sup>100</p>
    <p class="details">CSS Aligning Last Item</p>
    <a class="button" href=""><p>Buy Now</p></a>
</li>
The Flexbox CSS for the li tag is…

li {
    display: flex;
    flex-flow: column nowrap;
    margin-top: auto;
}
JSFiddle Example Link

Saturday, June 16, 2018

BEGENING OF CSS > TABLE WITH SCROLLBAR AND FIXED HEADER POSITION > How to make Scrollable Table with fixed headers using CSS


Jsfiddle link to check

<div class="fixed-table-container">
      <div class="header-background"> </div>
      <div class="fixed-table-container-inner">
        <table cellspacing="0">
          <thead>
            <tr>
              <th class="first">
                <div class="th-inner">First</div>
              </th>
              <th>
                <div class="th-inner">Second</div>
              </th>
              <th>
                <div class="th-inner">Third</div>
              </th>
              <th>
                <div class="th-inner">Fourth</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>First</td>
              <td>First</td>
              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Fourth</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>Last</td>
              <td>Last</td>
              <td>Last</td>
              <td>Last</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

.fixed-table-container {
    width: 70%;
    height: 200px;
    border: 1px solid black;
    margin: 10px auto;
    background-color: white;
    position: relative;
    padding-top: 30px;
}
.fixed-table-container .header-background {
    background-color: #D5ECFF;
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid black;
}
.fixed-table-container .fixed-table-container-inner {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}
.fixed-table-container table {
    background-color: white;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.fixed-table-container th {
    padding: 0 5px;
    text-align: left;
}
.fixed-table-container .first .th-inner {
    border-left: none;
    padding-left: 6px;
}

.fixed-table-container .th-inner {
    position: absolute;
    top: 0;
    line-height: 30px;
    text-align: left;
    border-left: 1px solid black;
    padding-left: 5px;
    margin-left: -5px;
}
.fixed-table-container td + td {
    border-left: 1px solid #ccc;
}
.fixed-table-container td {
    border-bottom: 1px solid #ccc;
    padding: 5px;
    text-align: left;
}

HTML + CSS TRICKS, FLOAT LEFT DIV WITH EQUAL HEIGHT, MAGIC OF USING FLEX - CSS BEGINING



<section class="container">
    <div class="left-half">
        <article>
            <h1>Left Half 1</h1>
        </article>
    </div>
    <div class="left-half">
        <article>
            <h1>Left Half 2</h1>
        </article>
    </div>
    <div class="left-half">
        <article>
            <h1>Left Half 3</h1>

            <p>Weekends don't</p>
        </article>
    </div>
    <div class="left-half">
        <article>
            <h1>Left Half 4</h1>

            <p>Weekends don't</p>

            <p>Weekends don't</p>
        </article>
    </div>
    <div class="left-half">
        <article>
            <h1>Left Half 5</h1>

            <p>Weekends don't</p>

            <p>Weekends don't</p>
        </article>
    </div>
    <div class="left-half">
        <article>
            <h1>Left Half 6</h1>

            <p>Weekends don't</p>
        </article>
    </div>
</section>

html, body, section {
    height: 100%;
}

body {
    color: #fff;
    font-family: sans-serif;
    font-size: 1.25rem;
    line-height: 150%;
    text-align: center;
    text-shadow: 0 2px 2px #b6701e;
}

h1 {
    font-size: 1.75rem;
    margin: 0 0 0.75rem 0;
}

.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.left-half {
    background-color: #ff9e2c;
    padding: 0;
    width: calc(50% - 6px);
    border: 2px solid red;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

Jsfiddle link

Saturday, May 13, 2017

Responsive CSS - It's Begining

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    html {
        font-family: sans-serif;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%
    }

    .component {
        width: 33.33333333%;
        float: left;
        border: none;
        text-align: center;
    }

    .component .element {
        border: 1px solid #a7a7a7;
        padding: 10px;
    }

    /* For Tablets */
    @media screen and (min-width: 600px) and (max-width: 999px) {
        .component {
            width: 50%;
        }
    }

    /* For Mobiles */
    @media screen and (min-width: 0px) and (max-width: 599px) {
        .component {
            width: 100%;
        }
    }
</style>

<div>
    <div class="component"><div class="element">A</div></div>
    <div class="component"><div class="element">B</div></div>
    <div class="component"><div class="element">C</div></div>
    <div class="component"><div class="element">D</div></div>
    <div class="component"><div class="element">E</div></div>
    <div class="component"><div class="element">F</div></div>
</div>




Friday, August 23, 2013

How can i add css with !important , only using jquery

jQuery code


var div = $(".my_class")
div.click(function() {
 div.style("color", "blue", "important")
        div.append("<div>Color: " + div.style('color') + "</div>")
 div.append("<div>Is_Important: " + div.style().getPropertyPriority('color') + "</div>")
})

$.fn.style = function(styleName, value, priority) {
    var node = this.get(0)
    if (typeof node == 'undefined') {
        return
    }
    var style = node.style
    if (typeof styleName != 'undefined') {
        if (typeof value != 'undefined') {
            var priority = typeof priority != 'undefined' ? priority : ''
            style.setProperty(styleName, value, priority)
        }
        else {
            return style.getPropertyValue(styleName)
        }
    } 
    else {
        return style
    }
}

And finally jsFiddle link

Click here to view effect