| Autor | Zpráva | ||
|---|---|---|---|
| TheWeirdGuy Profil * |
#1 · Zasláno: 5. 10. 2014, 18:17:21
Ahoj,
zajímalo by mě jak mám vypočítat v css pozice, aby když umístím třeba nějaký text, tak aby byl vidět na stejné pozici u každého rozlišení. Řekněme, že já mam rozlišení 1920x1080, tudíž text který umístím budou vidět na správné pozici jenom lidi, kteří mají rozlišení 1920x1080, ale lidi s nižším/vyšším už né. css: div.footer p {
color: #FFFFFF;
font-family: rt;
font-size: 18px;
position: relative;
top: 935px;
} |
||
| Trejpa Profil |
#2 · Zasláno: 5. 10. 2014, 23:58:30
TheWeirdGuy:
„Jak bych tedy měl vypočítat ty pozice?“ Nijak. Pozicováním se layout obvykle nedělá, začátečníci nedomýšlí vytrhávání elementů a jejich pozice vůči různé velikosti okna prohlížeče. Relativním už vůbec ne. Relativní pozicování trápí začátečníky Oprosti se od nutkání rozsekat stránku na desítky malých kousků a vlepovat je zpět samostatně pozicováním. Využij plynulou posloupnost prvků, jak jsou v HTML kódu. Obalujícím blokům nastav šířky. Pro více prvků vedle sebe použij plavání. Vzájemné vzdálenosti řeš okrajem požadovaného bloku. Jednoduché schéma stránky Bez konkrétního odkazu těžko radit. Podle mě je tvým problémem neschopnost zadat horní odsazení kvůli různé výšce elementů nad patičkou. To se v nepozicovaném layoutu stát nemůže. Jako tvůrce stránky by tě nemělo zajímat rozlišení obrazovky, ale velikost okna (viewportu) prohlížeče. |
||
| TheWeirdGuy Profil * |
#3 · Zasláno: 6. 10. 2014, 11:42:24
No zkusil jsem to takhle:
css: body {
background-color: #22313F;
background-repeat: no-repeat;
background-position: cover;
width: 100%;
height: 100%;
position: fixed;
display: block;
}
@font-face {
font-family: rt;
src: url("fonts/rt.ttf");
}
div.footer {
background: #ffffff;
width: 60%;
height: 5%;
margin-left: auto;
margin-right: auto;
}html: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jan Dvorak</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="footer">
</div>
</body>
</html>Ukázka: http://stranger.cf/private/ |
||
| Joker Profil |
#4 · Zasláno: 6. 10. 2014, 12:33:06
TheWeirdGuy:
„když umístím třeba nějaký text, tak aby byl vidět na stejné pozici u každého rozlišení“ Tenhle výrok platí pro všechny způsoby pozicování, jen se liší význam toho „na stejné pozici“ :-) Třeba 1000 px zleva je taky u každého rozlišení na stejné pozici, akorát ve full HD to je zhruba uprostřed, zatímco v 800x600 to je za pravým krajem obrazovky. ad [#3]: Tohle by ještě chtělo zkombinovat s nastavením nějaké minimální šířky, aby se obsah na malých rozlišeních nerozsypal. |
||
| TheWeirdGuy Profil * |
#5 · Zasláno: 6. 10. 2014, 13:52:06
Takže trošku jsem ten web upravil, ale vyskytlo se tam pár menších problémů.
css: html {
width: 100%;
height: 100%;
}
body {
background-image: url("http://stranger.cf/private/images/background.png");
background-repeat: no-repeat;
background-size: cover;
}
div.menu {
background: #00A380;
position: fixed;
height: 5%;
width: 45%;
margin-left: 10%;
margin-top: 3%;
border-radius: 5px;
}
div.menu table {
width: 100%;
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jan Dvořák</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="menu">
<table>
<td>
<th>link1</th>
<th>link2</th>
<th>link3</th>
<th>link4</th>
</td>
</table>
</div>
</body>
</html>Takže první problém je, že když začnu scrollovat (ctrl+kolečko myši), tak text začne vylézat z toho rámečku, který jsem vytvořil nahoře. Druhej problem: Při scrollování se zvětšuje a zmenšuje border-radius, takže při maximální velikosti ten rámeček vypadá úplně jinak než při 100% Třetí problém: Texty v menu "link1,2,3,4" jsou od sebe přílíš daleko. Náhled: http://stranger.cf/private/ |
||
| Tomáš123 Profil |
#6 · Zasláno: 6. 10. 2014, 18:36:55
TheWeirdGuy:
„tak text začne vylézat z toho rámečku, který jsem vytvořil nahoře“ Udávaj preto hodnoty v pixeloch (alebo iných absolútnych jednotkách). „Při scrollování se zvětšuje a zmenšuje border-radius“ Na tvojej stránke sa práveže okrúhlosť rohov nemení (aspoň v Mozille nie). Každopádne mne nikdy takéto chovanie nevadilo, lebo stále sa zväčšoval resp. zmenšoval aj zbytok stránky. „Třetí problém: Texty v menu "link1,2,3,4" jsou od sebe přílíš daleko.“ Zmenši hodnotu na riadku 23 alebo to celé prerob. Zvyčajne sa menu robí pomocou neočíslovaného usporiadaného zoznamu <ul> a <li>.
„Náhled: http://stranger.cf/private/“ Obsah na stránke nie je. |
||
| Joker Profil |
#7 · Zasláno: 6. 10. 2014, 19:00:01
TheWeirdGuy:
Když má prvek výšku i šířku natvrdo v procentech, nepochybně se při některých velikostech okna obsah nevejde dovnitř prvku. Hlavně nechápu nastavení výšky v procentech, hlavně v kombinaci height: 100% nadřazených prvků, tj. výška menu jestli se nemýlím bude 5% dostupné výšky pro stránku. Velikost obsahu uvnitř menu se asi tolik měnit nebude, takže v malých rozlišeních se obsah do prvku nevejde a ve velkých bude kolem spousta prázdného místa. |
||
|
Časová prodleva: 10 let
|
|||
0