Diskuze: Rolovací "div" s umiestnenim na spodku stranky
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Ja bych pouzil fixed, bottom nebo margin-bottom. fixed funguje tak, ze
ignoruje predesle styly a pozice. Takze, pri zmene okna se to obvykle rozsype,
pokud mu nedas pozici zleva. Nebo mozna margin-left:auto, margin:right:auto
(centrovani).
Nevim, zda by pomohlo dat ten fixed do bloku s position:relative. Myslim, ze ne,
ze fixed je vuci cele strance.
Zkratka, fixed se pouziva bud jako pruh nebo presna pozice (vetsinou left nebo
right:0 + top nenulove nebo bottom nenulove).
Muzes pro centrovani pouzit fintu s 50% pozici. left:50%; width:300px; margin-left:-150px; (polovina sirky vnitrku).
Tusim, ze pro pretekani obsahu je nutna block s position:relative a v nem
blok s vyskou + overflow. Nebo, tak nejak. na jakpsatweb.cz v css, priklady to
tam nekde je.
https://www.jakpsatweb.cz/…ss-orez.html
Tim chci rici, ze s fixed jsem to nikdy nezkousel pouzivat.
Sticky, to nepouzival, ale, to mozna funguje dobre pro zahlavi tabulky, aby
jsi ho neztratila. pri vetsi tabulce. Jakoze mas tabulku, kdyz zarolujes, tak
mas pryc zahlavi a nevis, ktery sloupec je ktery. Tak, to by mohlo resit sticky,
ze to zahlavi bude rolovat s tabulkou. Ale, na mne je to prilis nove, ja to
resival pres fixed 
Calc nepouzivam, ale asi by to slo.
U nas pouzivame redakcni system postaveny na bootstrapu. Asi je tam nejaky js
plugin, ktery dela to, ze posouva hlavicku a zmensi ji, kdyz je niz nez nahore.
Pravdepodobne to kluci nekde vygooglovali Ale, nefunguji nam spravne kotvy.
Mam pocit, ze by to mohlo byt tim menu. Ale, nemam to nastarost Ja bych mel k webu asi 1000
pripominek a oprav celeho programu. Poslali jsme asi 100. do dneska se vyresilo
10. A sam tam pristup nemam. Prej maji cely redakcni system v databazi, takze
oprava by byla narocna. To byl zas cisi genialni napad https://www.slu.cz/fpf/cz/
Ja jen, ze 900px hlavicka je dost narocny pocin a zobrazovat to treba na mobilu
muze byt docela problem. Resp, uzivateli misto obsahu nabidnes, ze musi rolovat
V podstate, fixed jsem pouzival jen tak, ze jsem si udelal prostor pomoci
marginu nebo padingu a na tom mel fixovany objekt. Ale, tak to asi resis taky
------------------ fixovany div----|
------------------..................|
|.bile misto....|...................|
|---------------|------------------
|.text..........|
|.text..........|Diana:9.2.2023 13:30
hlavicka stranky je robustna, to je fakt, ale kedze je to stranka o hre, tak
ta grafika udrzuje mysticku atmosferu nazvu klubu, pri osobnej stranke by som
samozrejme takto neblaznila v
podstate position: sticky riesi u mna to, ze element je v danom
boxe na relativnej pozicii a odtial sa mi nepohne nikam inam, len uz nechapem v
dnesnej dobe to, k comu je tisic vlastnosti na tisic elementov v ramci
pozicovania a nie je iba jeden element s viacerymi vlastnostami, napr.
position: a k tomu vsetky vlastnosti, ci je to fixed, absolute,
relative atd ? a takto je nutne vymyslat vselijake CSS tricks uplne zbytocne
Jo, ty chces asi docilit to, aby fixed position bylo jen ve vybrane oblasti.
Obavam se, ze na to neni css stavene Ono je hrozne tezke te pochopit a ten kod Zluty ramecek na bilem pozadi je
fakt skvele zvyrazneni toho sticky divu. Podbarvil jsem si cely blok
background-color, radeji
google = css position fixed to a location within an area
Ale, ty ten div preci muzes umisti Mimo tu oblast a dopozicovat si to. A pridat z-index na prekryti.
a<br>
b<br>
c<br>
<div style="width:100px; height:100px; border:2px solid #f00;">
<div style="width:100px; height:100px; background: #fcf; overflow-y:scroll; overflow-x:none;">text<br>q<br>w<br>e<br>e<br>e<br>e<br></div>
<div style="width:100px; height:30px; background: #ffc; position:relative; top:-30px;">text</div>
</div>Nevyhoda je, ze ti na tom nepujde scrolovat s tim textem. Leda, to dat do
pozadi a pak na to zas nepujde klikat A to uz by pak mohlo byt jako obrazek na pozadi.
https://developer.mozilla.org/…d-attachment
Diana:10.2.2023 10:47
asi sme sa nepochopili spravne, scrollovaci div (zlty) sa musi pohybovat v
scrollovacej oblasti (fuchsia) a pritom by som chcela, aby bol stale prilepeny v
spodnej casti scrollovacej oblasti a roloval sa len v nej a aby pri zmenseni
okna prehliadaca nevybocoval do lavej alebo pravej strany
Spracovala som jeden komplexny priklad, kde je vidiet, ako pracuje sticky prilepeny v lavom paneli nahor a v pravom paneli nadol.
<!DOCTYPE html>
<head>
<title>Sticky top and bottom</title>
<style>
html, body {height: 100%; margin: 0;}
/* Zakladna sablona stranky */
.container {
display: grid;
width: 100%;
height: 100%;
grid-template-areas: "header header header"
"left main right"
"footer footer footer";
grid-template-columns: 250px minmax(500px, 1fr) 250px;
grid-template-rows: 100px 1fr 100px;
gap: 0;
}
.header {grid-area: header; background: lightblue;}
.left {grid-area: left; background: green;}
.main {grid-area: main;}
.right {grid-area: right; display: flex; background: green;}
.footer {grid-area: footer; background: lightblue;}
/* Doplnkove elementy */
.content {
width: 100%;
height: 300vh;
}
.sticky-top {
position: sticky;
width: 100%;
height: 200px;
top: 0;
background: yellow;
}
.sticky-bottom {
position: sticky;
align-self: flex-end;
width: 100%;
height: 200px;
bottom: 0;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="left">
<div class="sticky-top">Sticky TOP</div>
</div>
<div class="main">
<div class="content">content</div>
</div>
<div class="right">
<div class="sticky-bottom">Sticky BOTTOM</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>- v pripade, ak potrebujete vnorit elementy do seba, napr. do praveho panelu budete musiet vlozit dalsi element obalovaci-div a az do neho sticky, musite obalovaciemu div-u nastavit vlastnosti parent-u (position: relative; display: flex;), ako som to uviedla vyssie a priradit mu este width: 100%; height: 100%; aby sa jeho sirka a vyska dorovnala sirke a vyske .right (praveho panelu)
- ak pouzivate sablonu, kde content (obsah) obtekaju sidebar-y (bocne panely) a do niektoreho z nich budete chciet umiestnit sticky tak, aby sa scrolloval prilepeny nadol, urcite sa vam to tymto sposobom nepodari, pretoze vyska sidebar-ov nebude nastavena na vysku obsahu, ktory by ho subezne roztahoval na vysku (preto je dolezite si najskor premysliet, ako bude cela sablona zostavena)
+5 Zkušeností
Podle mne, si stranku delas zbytecne komplikovanou Ja bych pouzil BT. Upravil si jeho
pridanym grafiku a bylo by. Vyuzil bych prvky, co jdou s pomoci BT vyskladat.
Par prikladu spesl veci se da vygooglovat. Driv, kdyz BT nebylo, jsem to delal
vsechno rucne. A tez kombinoval. Ale, to je moc pracne. Proc vymyslet spesl vec,
kterou mas na strance jen 1x? Jestli to radeji nejde prizpusobit na to ostatni.
Mne osobne rolovaci miniboxy moc nelakaji.
Ale, chapu, treba, ze si chces udelat na stranku neco jako hru pro navstevniky.
Kolega tam chtel dat Barta jezdiciho na skejtu. A byl desne zklamany, kdyz jsem
mu rekl, ze mu to tam klidne dam, jestli neco takoveho najdu nebo udelam, ale,
ze zrovna bart je zatizeny licencemi
Nebo, nekde jsem mel script na snezeni, magickou hulku (za kurzorem behaji
hvezdicky). Ale, to je, podle mne zcela zbytecne na webku. To spis do nejake hry
ja som to rolovacie tlacitko robila kvoli par strankam, kde ich obsah bude
dlhsi a je to unavne rolovat to prstom na niekolkokrat, ked sa chces hned dostat
k menu a ten bootstrap mam v hlave, neboj, k nemu sa dostanem tiez chcem ale najskor dorobit obsah a
az potom sa vrhnem na upravy, naskor som riesila nacitavanie stranky pri tom
mnozstve grafiky, co tam bude, lebo je to stranka o hre a tam treba dost veci
ukazat presne ako vyzeraju
Zobrazeno 26 zpráv z 26.