| Autor | Zpráva | ||
|---|---|---|---|
| Stig001 Profil |
#1 · Zasláno: 19. 2. 2017, 19:52:23
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 |
#2 · Zasláno: 19. 2. 2017, 20:32:09
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 |
#3 · Zasláno: 19. 2. 2017, 20:50:32
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).
|
||
|
Časová prodleva: 7 let
|
|||
0