Načrtovanje in razvoj spletnih aplikacij

Prikaz elementov s CSS

Z oblikovno lastnostjo display določimo vrsto elementa. Pri tem lahko izbiramo med naslednjimi elementi:

Vrednost Pomen
none prazen element, ni viden in ne zasede prostora
block bločni element (kot <p>)
inline vrstični element (kot <span>, <img>)
inline-block  blok v vrstici
list-item točka seznama (kot <li>)
run-in  element, ki bo prikazan znotraj naslednjega elementa
table  tabela (kot <table>)
inline-table  vrstična tabela
table-caption  opis tabele (kot <caption>)
table-row-group  skupina vrstic v tabeli (kot <tbody>)
table-column-group  skupina stolpcev v tabeli (kot <colgroup>)
table-header-group  glava tabele (kot <thead>)
table-footer-group  noga tabele (kot <tfoot>)
table-row  vrstica tabele (kot <tr>)
table-column  stolpec tabele (kot <col>)
table-cell  celica v tabeli (kot <td>)
flex  prilagodljivo območje CSS3
inline-flex  prilagodljivo območje v vrstici CSS3
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa

Primer uporabe oblikovne lastnosti display:

<p> Uporaba lastnosti display omogoči, da bosta odstavka (p) postala vrstična 
elementa, odstvaek (div) bo neviden, element (span) pa bo postal bločni element. </p>
<p> Ta odstavek se nadaljuje v isti vrstici. </p>
<div> Odstavek div ni viden. </div>
<span> Element <span> je postal bločni element. </span>
p {display: inline}
div {display: none}
span {display:block}

Uporaba lastnosti display omogoči, da bosta odstavka (p) postala vrstična elementa, odstavek (div) bo neviden, element (span) pa bo postal bločni element.

Ta odstavek se nadaljuje v isti vrstici.

Sekcija div ni vidna.
Element span je postal bločni element.

display: flex

Primer prilagodljivega menija z uporabo lastnosti flex:

<ul class="meni">
    <li><a href="#">Domov</a></li>
    <li><a href="#">O nas</a></li>
    <li><a href="#">Izdelki</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>
.meni {
    list-style: none;
    margin: 0;
    background: deepskyblue;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: flex-end;  
}

.meni a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: white;
}    

.meni a:hover {
    background: #00b7f5;  
}    

@media all and (max-width: 800px) {    
    .meni {      
        justify-content: space-around;    
    }  
}    
@media all and (max-width: 600px) {
    .meni {
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        padding: 0;
    }
    .meni a {
        text-align: center;
        padding: 10px;
        border-top: 1px solid rgba(255,255,255,0.3);
        border-bottom: 1px solid rgba(0,0,0,0.1);
    } 
    .meni li:last-of-type a {
        border-bottom: none;
    }  
}

Prikaz primera v brskalniku v novem oknu. Za prikaz vseh lastnosti menija spremeni širino okna!