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: 8 let
|
0