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 |
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
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>
<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
Subscribe to:
Posts (Atom)