Rubrika: CSS

Sloupce v tabulce s danou a proměnnou šířkou

Na DJPW se objevil dotaz, jak mít u čtyř sloupců pevnou šířku, tak Vám napíšu řešení i sem na web. Základem úspěchu je nebát se používat vlastnost min-width, což znamená minimální šířku.

HTML + CSS:

<table style="text-align: left; width: 1800px;" border="1">
  <tbody>
    <tr>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text -  8956254564184. Klidně se i zalomí...</td>
      <td style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí</td>
      <td style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí a může být stráááááááááááááááááááááááááááááááááááááááššššššššššššššněěěěěěěěěěěěěěěě dlouuuuuuuuuuuuuuhýýýýýýý</td>
    </tr>
  </tbody>
</table>

Živá ukázka

Dvojstĺpcový layout s pätou vždy dole

Niekedy z rôznych dôvodov (obsahu je príliš málo, a nevyzerá to dobre) obyčajný dvojstĺpcový layout nestačí. Je preto na mieste zabezpečiť, aby minimálna výška obsahovej časti bola vždy aspoň 100% veľká. Ako na to, si ukážeme a popíšeme v nasledujúcom príklade:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="obal">
               <div id="stlpec">
                   <p>iné informácie</p>
               </div>
               <div id="obsah">
                   <h1>Webová stránka</h1>
                   <p>Obsah webovej stránky</p>
               </div>
               <div class="clear"></div>
               <div id="pata">
                   <p>&copy; Vaše meno</p>
               </div>
           </div>
    </body>
</html>
   

CSS bude vyzerať takto:

html, body {
    height: 100%;    /*zapezpečí, že dokument bude vždy vysoký na celú výšku monitora*/
}
body {
    margin: 0; /*vynuluje predvolený vonkajší okraj 8px*/
}
#obal {
    width: 960px;    /*určí šírku obaľovacieho prvku*/
    margin: 0 auto;    /*vycentruje*/
    min-height: 100%;    /*ak by ste použili height, obsah by pri stránke vyššej ako 100% vytiekol*/
    padding-bottom: 8em;    /*vytvorí miesto pre pätu*/
    position: relative;    /*zapezbečí možnosť poziciovať pätu vzhľadom na obaľovací prvok,
 namiesto <body>*/
    background-color: #CCC;    /*slúži na viditeľnosť pri kontrole správnosti*/
}
#stlpec {
    float: right;    /*vlastnsoť float dovolí prvkom byť zoabrazené vedľa seba*/
    width: 240px;    /* určenie rozmerov*/
    min-height: 700px;    /*min-height kvôli neprečeteniu obsahu pri jeho väčšom množstve;
 hodnota musí byť v pixeloch*/
    padding: 5px;
    background-color: rebeccapurple;    /*opäť kvôli viditaľnosti*/
}
#obsah {
    padding: 10px;
    margin-right: 250px;    /*vytvorí miesto pre stĺpec; v prípade,
 že by bol zobrazený naľavo, použijeme vlastnsoť margin-left*/
}
.clear {
    clear: both;
}
#pata {
    width: 100%;    /*nastaví päte rozmery, ktoré deaktivovalo použitie absolútneho poziciovania*/
    position: absolute;    
    left: 0;
    bottom: 0;    /*zariadime, aby bola päta vždy dole vzhľadom na obaľovací prvok
 (ktorý je vždy vysoký aspoň 100%) a nastavíme umiestnenie zľava a zdola*/
    text-align: center;
    border-top: 1px dotted #000;    /*viditeľnosť*/
}

Živá ukážka

Princípom jednostĺpcového layoutu je nastaviť obalu minimálnu výšku (min-height) 100% a pätu absolútne napoziciovať (position: absolute;) na dno stránky. Ak obalu neudáme vlastnosť position: relative päta sa bude poziciovať, ale vzhľadom na prvok <body>, nie obal.

Pri dvojstĺpcovom layoute ide o rovnaký princíp, ale obsahovú časť musíme rozdeliť. Požadovaný efekt by sa nám podarilo dosiahnuť, aj v prípade, že by sme nechali obtekať (pomocou float) obidva stĺpce… Nebolo by však možné vytvoriť aspoň sčasti responzívny dizajn (ak nie je float, môžeme použiť min-width a max-width).

Dúfam, že je článok pochopiteľný a pre mnohých z vás  aj poučný. Ak by ste niečomu nerozumeli alebo v článku našli chybu, pokojne prispejte do komentárov.

Zalamování slov v CSS pomocí word-wrap

Aniž bychom museli používat maximální šířku v CSS pro body, můžeme v CSS použít vlastnost word-wrap

HTML (s inline stylem):

<div class="obal-sloupce" style="word-wrap: break-word">
    <p>NějakéHodněDlouhéSlovoCoSeDoSloupceNevejde</p>
  </div>

CSS je zapsáno inline stylem, ale je možné vlastnost zapsat i externím CSS souborem.

Živá ukázka

Zdrojový kód

Škrtnutí textu pomocí značky s

Tato značka slouží pro škrtání obsahu. Používá se stejně jako značky <h1>, <span>, <div>, což znamená, že je  párová. Musí mít začátek <s> a konec </s>. Zdrojový kód:

<s>Toto je přeškrtnutý text pomocí značky  &lt;s&gt; v CSS.</s>

Pro správné vypsání jsem pochopitelně musel výpis fráze „<s>“ zaentinovat (aby se podruhé neprovedl, nýbrž vypsal.

Živá ukázka

Zdrojový kód

Proč používat značku <s> a ne značku <del>?

Jak jste si jistě všimli, na předchozí ukázce je pouze základní zápis značky <s>. Ano, samozřejmě uznávám, že existuje i značka <del>, která je také párová. Značka <del> byla vyvinuta předevšim pro nahrazování již neplatného textu. Chci tím říci, že značkou <del> škrtáme již neplatný obsah, informaci. Nyní se ale budeme věnovat především značce <s>.

<del>Neplatné sdělení</del>. <p>Platné sdělení</p>

Živá ukázka

Stylování značky <s>

Značka <s> jde pochopitelně velmi dobře stylovat pomocí (většinou) externího CSS.

→ Šikmé přeškrtnutí pomocí CSS

Ano, i to je možné. Tuto variantu asi často vídáte na různých nákupních serverech. Přeškrtnutí už ale nebude tak jednoduhé (= podpora ve starších prohlížečích). I tak se dá do CSS zapsat:

s {
    position: relative;
    text-decoration: none;
}
 
s:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #000;
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);

}
A HTML tedy bude vypadat následovně:

<p><s>Neplatné sdělení</s></p>
<p>Platné sdělení</p>

Živá ukázka

Zdrojový kód

CSS jsme vlastně druhým zápisem s before deklarovali „nasměrování“ přeškrtnutí na text, a pomocí prvního zápisu, aby se text neotáčel spolu s přeškrtnutím.

→ Cenové přeškrtnutí (jako u e-shopu)

Přeškrtnutí starých cen a nahrazení novými je velmi lehké. Pokud bychom chtěli mít starou cenu červeně přeškrtnutou a novou cenu tučně zelenou, stačí si pohrát barvami: 

HTML: 

<p>Dříve: <s>250,- Kč s DPH</s></p>
<p>Nyní:  <span>180,- Kč s DPH</span></p>

CSS:

s {
    position: relative;
    text-decoration: none;
    background
}
 
s:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px solid red;
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);
}
 
span {
    color: green;
    font-weight: bold;
}

Živá ukázka

Zdrojový kód

Flip animace – otočení hoverem pro druhý „obsah“

HTML:

<div class="otoceni">
    <div class="predni">
        MůjSkript.cz
    </div>
    <div class="zadni">
        Veřejná sbírka
    </div>
</div>

CSS:

.otoceni {
    width: 500px;
    position: relative;
    
    -webkit-perspective: 500;
    -moz-transform-style: preserve-3d; 
    -moz-transprform: perspective(500px);
}
 
.otoceni > div {
    line-height: 100px;
    text-align: center;
    font-size: 80px;
    background: #0D6AB7;
    color: #fff;
    transition: all .5s;
    transform: rotateY(00deg);
}
 
.otoceni:hover > div {
    transform: rotateY(180deg);
}
 
.otoceni .predni {
    z-index: 1;
    position: relative;
}
 
.otoceni .zadni {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
    background: red;
}
 
.otoceni:hover .zadni {
    transform: rotateY(0deg);
    z-index: 2;
}

Živá ukázka

Zdrojový kód

Stín za objektem pomocí box-shadow

HTML: 

<div id="element">
<h2><center>Box-shadow</center></h2>
<ul>
    <li>První hodnota (10px) určuje <b>horizontální umístění zleva</b></li>
    <li>Druhá hodnota (13px) určuje <b>vertikální umístění shora</b></li>
    <li>Třetí hodnota (37px) určuje <b>sílu rozmazání efektu</b></li>
    <li>Čtvrtá hodnota (6px) určuje <b>velikost stínu všemi směry</b></li>
    <li>Pátá hodnota (#ff8000) určuje <b>barvu stínu</b></li>
</ul>
</div>

CSS:

#element {
  box-shadow: 10px 13px 37px 6px #ff8000;
}
 
#element {
    width: 450px;
    height: 100%;
}

Teď si rozebereme co se určuje v CSS v hodnotě box-shadow:

  • První hodnota (10px) určuje horizontální umístění zleva
  • Druhá hodnota (13px) určuje vertikální umístění shora
  • Třetí hodnota (37px) určuje sílu rozmazání efektu
  • Čtvrtá hodnota (6px) určuje velikost stínu všemi směry
  • Pátá hodnota (#ff8000) určuje barvu stínu

Živá ukázka

Zdrojový kód

Plynulý hover efekt

HTML:

<div class="menu">
    <a href="">První</a>
    <a href="">Druhý</a>
    <a href="">Třetí</a>
    <a href="">Čtvrtý</a>
    <a href="">Pátý</a>
    <a href="">Šestý</a>
    <span></span>
</div>

CSS:

.menu {
    position: relative;
    overflow: hidden;
    background: #0D6AB7;
}
.menu a {
    float: left;
    width: 100px;
    text-align: center;
    padding: .5em 0 .7em 0;
    text-decoration: none;
    color: #fff;
    z-index: 1;
    position: relative;
}
.menu span {
    position: absolute;
    height: 100%;
    background: red;
    border-bottom: 5px solid yellow;
    width: 100px;
    bottom: 0;
    left: -100px;
    transition: left .2s;
}
 
.menu a:nth-child(1):hover ~ span {left: 0}
.menu a:nth-child(2):hover ~ span {left: 100px}
.menu a:nth-child(3):hover ~ span {left: 200px}
.menu a:nth-child(4):hover ~ span {left: 300px}
.menu a:nth-child(5):hover ~ span {left: 400px}
.menu a:nth-child(6):hover ~ span {left: 500px}
 
body {
    font-family: Segoe UI, Arial;
}

Živá ukázka

Zdrojový kód

Po najetí na DIV1 se zobrazí DIV2

HTML:

<div class="prvni">První div<br>Najeďte na tento DIV a "Druhý div" se prolnutím (9. řádek v CSS) zabarví červeně.</div>
<div class="druhy">Druhý div</div>

CSS:

.prvni, .druhy {
    border: 1px solid black;
    padding: 20px;
    margin: 20px;
}
 
.druhy {
    display: none;
}
.prvni:hover + .druhy {
    background: red;
    transition: 0.8s;
    display: block;
}

Živá ukázka (zdroj)

Živá ukázka

Související článek: Po najetí na DIV1 se zabarví DIV2

 

Po najetí na DIV1 se zabarví DIV2

Chcete vytvořit, aby po najetí na DIV1 se DIV2 zabarvil?

HTML:

<div class="prvni">První div<br>Najeďte na tento DIV a "Druhý div" se prolnutím (9. řádek v CSS) zabarví červeně.<a href="#">Ahoj</a></div>
<div class="druhy">Druhý div</div>

CSS:

.prvni, .druhy {
    border: 1px solid black;
    padding: 20px;
    margin: 20px;
}
 
a:hover + .druhy {
    background: red;
    transition: 0.8s;
}

Živá ukázka (zdroj)

Živá ukázka

Související článek: Po najetí na DIV1 se zobrazí DIV2