Autor Zpráva
Stig001
Profil
Dobrý den,

Zrovna jsem se dal do úpravy svého webu a potřebuji doladit jednu triviální věc.

Zde je odkaz: radekcaga.wz.cz/00gal.php

Na středu té rozmazané fotky je nadpis s datem atd. Na monitoru full HD to je OK, ale problém je na mobilu atd. nastavil jsem tam totiž na tvrdo padding-top, jinak se mě to nepodařilo dát na střed tak, aby to bylo na středu na všech zařízeních. Situaci možná komplikuje to "bootstrap menu", protože mě překrývá z malé části tu fotku.

Dokázal by prosím někdo vědět, jak z toho "vybruslit" ? Předem děkuji, níže přikládám kod a css.

<div class="zahlavi_foto" style="background-image: url(0_menu_sport.jpg)">

    <div class="popis_kategorie">  
    
        <hr class="zahlavi_hr">
        <h1 class="popis_kategorie_h1">The best of Czech rally 2016</h1>
        <hr class="zahlavi_hr_short">
        <div class="popis_kategorie_p"><p>12.01.2017 * Radek Caga * fotogalerie</p></div>
        <hr class="zahlavi_hr">
    
    </div>
    
</div>


.zahlavi_foto {
    width: 100%;
    height: 60vh;
    overflow : hidden;
    max-width: 1920px;
    position: relative;
    opacity: 0.9;
    margin: 0 auto;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-transform: uppercase;
 
}     

.zahlavi_hr {
width: 80%;
border: black dotted 1px;
}

.zahlavi_hr_short {
width: 60%;
border: black dotted 1px;
}

.popis_kategorie {
margin: auto;
padding-top: 20vh;
}

.popis_kategorie_h1 {
margin: auto;
font-size: 2.3em;

}

.popis_kategorie_p {
margin: auto;
font-size: 1.4em;
color: black;

}
joe
Profil
Jednoduše to půjde, pokud to upravíš na

.zahlavi_foto { display: table; }
.popis_kategorie { display: table-cell; vertical-align: middle; padding-top: 51px; // 51px = výška horní navigace }
Tomáš123
Profil
Stig001:
Problémy nastávajú kvôli kombinácii s rozmermi iných jednotiek.

Skús namiesto nastavovania výšky použiť rovnaké odsadenie zhora i zdola pre prvok .popis_kategorie. Ak zostaneš pri jednotke vh, ktorá ale nemá plnú podporu, môžeš na mobilných zariadeniach dosiahnuť menšieho odsadenia. Osobne by som kvôli kompatibilite minimálne použil dvojicu deklarácií:
.popis_kategorie {
  padding: 20px 0; /* v prípade nepodpory jednotky vh sa nastaví aspoň malé statické odsadenie */
  padding: 20vh 0;
}

Aplikuješ priveľké množstvo nezmyselných tried, nevyužívaš možnosť zamerať prvky konkrétnejším selektorom a vzhľad neoddeľuješ striktne od HTML (hlavne narážam na značky <hr>).


joe:
Tam už sa zíde hodnotu 51px previesť na jednotky, ktorej rozmer závisí od veľkosti písma (najskôr asi em).

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: