5 résultats taggé css

Un lien « Retour en haut » dynamique

<div class="relative">
    <div class="toTop">
        <a href="#top" title="Retour en haut">
            Retour en haut
        </a>
    </div>
</div>
<footer id="footer">
…
</footer>
.relative {
    position:relative;
}

.toTop {
    display:none;
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1000;
}
function toTop(element,footer){
    var scroll = $(window).scrollTop();
    var maxScroll = $(window).height() * 0.4;

    if(scroll > maxScroll)
        $(element).show();
    else
        $(element).hide();

    if($(element).offset().top + $(element).height() >= $(footer).offset().top - 10)
        $(element).css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $(footer).offset().top)
        $(element).css('position', 'fixed');
}   

$(window).scroll(function() {
    toTop('.toTop',"#footer");
});

$(window).resize(function() {
    toTop('.toTop',"#footer");
});

Minimal CSS Grid System with flexbox

/* Greatly inspired by Frow https://github.com/Beg-in/frow */
.row,
[class*="row-"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -15px; /* Gutters */
    margin-right: -15px; /* Gutters */
}

.row > *,
[class*="row-"] > * {
    max-width: 100%;
    width: 100%;
    padding-left: 15px; /* Gutters */
    padding-right: 15px; /* Gutters */
}

@media (min-width: 992px) { /* Only on desktop by default */
    .row,
    [class*="row-"] {
        justify-content: start;
    }
    /* Only on unstyled col in unstyled row 
       That way, unstyled col in styled rows will adapt */
    .row > * { 
        flex: 1 1 auto;
        width: auto;
    }

    .row-1 > * { width: 100%; }
    .row-2 > * { width: 50%; }
    .row-3 > * { width: 33.33%; }
    .row-4 > * { width: 25%; }
    .row-5 > * { width: 20%; }
    .row-6 > * { width: 16.66%; }
    .row-7 > * { width: 14.28%; }
    .row-8 > * { width: 12.5%; }
    .row-9 > * { width: 11.11%; }
    .row-10 > * { width: 10%; }
    .row-11 > * { width: 9.09%; }
    .row-12 > * { width: 8.33%; }

    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33%; }
    .col-8 { width: 66.66%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33%; }
    .col-11 { width: 91.66%; }
    .col-12 { width: 100%; }
}

So you can add columns without class:

<div class="row">
    <div></div>
    <div></div>
</div>

Or, you can specify the number of columns with .row-*:

<div class="row-2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

(will output 2 columns of 3 items)

Or, you can specify the width of each item with .col-*:

<div class="row-12">
    <div class="col-6"></div>
    <div class="col-2"></div>
    <div></div> <!-- Automagically fill -->
    <div class="col-1"></div>
</div>

By default, will be displayed as a single column on mobile and tablets.

Responsive table column to row

@media screen and (max-width:800px) {
    td, 
    th {
        display: block;
    }
}

Or, with flexbox:

@media screen and (max-width: 800px) {
    tr {
        display: flex; 
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    td, 
    th {
        flex: 1 1 10%;
        text-align: center;
    }

}

Flexbox form skeletton

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

input {
    margin:5px;
    flex: 1 1 50%;

}
input[type=submit] {
    flex: 1 1 20%;
    cursor: pointer;
    background: #5766AD;
    color: white;
    font-weight: 600;
}
input[name=url] {
/* Will occupy the entire width */
    flex: 1 1 100%;
}

Flex skeletton for a sticky footer

/* Flex Skeletton
For a column main+footer
with a sticky footer */

body,
html {
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-x: hidden;
}
section {
    flex: 1 0 auto;
}
footer {
    flex: none; // It's here the magic begins
}

Or another:

html, body {
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
section {
  flex: none;
  margin-top: 0;
  margin-bottom: auto;
}
footer {
    flex: none;
}