Diskuze: Prekrytie dvoch "div" nad sebou + skrytie a zobrazovanie div-u s s inymi elementami po najazde mysou
Ten kod, to je dost strasidelne. A nejsem si jisty, ceho chces docilit. Proc
to delat jako takhle slozite. Ja jsem spis stara skola a umel bych to starymi
zpusoby, ne flex, ne grid. Zkusim to nejak prepsat a pak se zeptam 
Ale, treba napise i nekdo
jiny...
Kazdopadne, tahle cesta, pres css, pokud budou vsechny barvicky vzdy stejne a
pocet take, to je cesta ke zkaze. Jakoze, zbytecne moc textu navic Cela ta cast s naviganici, za tech
stejnych podminek, by mohla byt resena pres js.
Ok, sak si to uprav, jak potrebujes. Se mi to tve resen nezdalo, tak jsem
vychazel z flexu, viz ta stranka. To mi davalo vetsi smysl.
To unikani mimo obrazovku je asi zpusobeno tim zapornym marginem. To asi fakt
bude treba resit pres to position nebo nejak, co ti funguje. Ja bych ti to
napsal klidne tim starym spusobem, ale, to bys zas nechapala, proc je tam, co
tam je A tim tvym to neumim
toto by mi robilo problem, pretoze ak spravne chapem, tak adresa obrazka, typ a sposob otvorenia je definovany v skripte a ja sa potrebujem rozhodnut az v HTML, ci tam dam len farbu pod link bez vlozeneho obrazka, alebozastupny obrazok s farbou
aby si spravne chapal, teraz robim auta, kde nepotrebujem vkladat *.gif a staci len farba - neskor vsak budem robit odkazy na ine typy vecí, ktore mozu mat v sebe nejaky vzorok a budem musiet pouzit maly gif, jpg alebo png podla okolnosti
riesenie s JS i bez JS, ktore si navrhol, mi plne vyhovuje a ked si prerobim
tvoje CSS a bude fungovat spravne, tak co viac si mozem priat, budem rada, ze
nebudem musiet JS pouzit vobec
Diana:25.1.2023 9:43
Dokoncene so zabudovanim prehravania galerie s yoxview.
CSS:
.galeria {text-align: center;} /* pouzite iba ako obal na vycentrovanie celeho obsahu na stred */
.galeria .item {
/* https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox */
position: relative; /* pre pozicovanie elementov vnutri s absolutnou poziciou */
display: inline-flex;
justify-content: center; /* vodorovne zarovnanie vnutornych elementov na stred*/
/* align-items: center; */ /* vertikalne zarovnanie vnutornych elementov vynechane, aby sa nizsie uvedeny element ".galeria .item-nav" nezarovnal automaticky vertikalne */
width: 84px;
height: 84px;
padding: 0; /* vnutorne odsadenie od obrazka pre pripad zmeny */
margin-bottom: 1px; /* pridane kvoli kolizii odsadenia kontajnerov po zalomeni */
border: 2px solid #00B9B9;
}
.galeria .item:hover {border: 2px solid #F8CE00; cursor: pointer;}
.galeria .item-image {
position: absolute; /* pre umiestnenie elementu s absolutnou poziciou */
display: inline-block;
align-self: center; /* pre vertikalne zarovnanie sameho seba, nakolko v ".galeria .item" je tato vlastnost zakazana, aby sa element ".galeria .item-nav" nezarovnal automaticky vertikalne */
width: 80px;
height: 80px;
}
.galeria .item-image img{
width: 80px;
height: 80px;
}
.galeria .item-nav {
position: absolute; /* pre umiestnenie elementu s absolutnou poziciou */
display: inline-block;
top: 84px; /* pre odsadenie pod ".item" - posuvatelne prekrytie v ktorejkolvek casti */
width: 127px;
padding: 2px 4px 3px 5px; /* odsadenie boxov s odkazmi vnutri tohoto kontajnera */
text-align: left; /* pre zarovnanie vnutornych boxov vlavo */
/* visibility: hidden; */ /* duplicita - tato vlastnost je definovana nizsie v ".galeria .item .item-nav" */
border: 2px solid #F8CE00;
border-radius: 4px 4px 12px 12px;
background-color: #000;
z-index: 1; /* definuje poradie prekryvajucich sa prvkov HTML - umiestnenie navrch */
}
.galeria .item .item-nav {visibility: hidden;} /* zmena z "display: none;" kvoli kolizii so skriptom "yoxview" */
.galeria .item:hover .item-nav {visibility: visible;} /* zmena z "display: inline-block;" kvoli kolizii so skriptom "yoxview" */
.galeria .item-nav a {
display: inline-block; /* nesmie byt definovane ako "display: block;" - inak elementy zoradi pod seba */
width: 15px;
height: 15px;
line-height: 15px; /* pre vertikalne zarovnanie v pripade vlozenia "obrazka s texturou" */
border: 1px solid #F8CE00;
}
.galeria .item-nav a .color {
display: inline-block; /* nesmie byt definovane ako "display: block;" - inak elementy zoradi pod seba */
width: 15px;
height: 15px;
line-height: 15px; /* pre vertikalne zarovnanie v pripade vlozenia "obrazka s texturou" */
border: 1px solid #F8CE00;
}
.galeria .item-nav a:hover {border: 1px solid #000;}
.galeria .item-nav a img { /* pouzit len pri vkladani "obrazka s texturou", inak tuto vlastnost vynechat, nakolko v mozille zobrazuje prazdny okraj, ak v HTML nezadam adresu obrazka */
display: block; /* nesmie byt definovane ako "display: inline-block", inak dochadza k posunu vlozeneho "obrazka s texturou" nadol */
width: 15px;
height: 15px;
border: none;
}
/* farby su platne len pre dany "item-nav a", takze to musim definovat osobitne bud v CSS alebo priamo v HTML */
/* tu som opravila postupnost od (1), pretoze od (0) nenacita ziadnu farbu */
.galeria .item-nav a:nth-child(1) {background-color: #F9F9F9;}
.galeria .item-nav a:nth-child(2) {background-color: #0564D7;}
.galeria .item-nav a:nth-child(3) {background-color: #026E23;}
.galeria .item-nav a:nth-child(4) {background-color: #FEF18F;}
.galeria .item-nav a:nth-child(5) {background-color: #983253;}
.galeria .item-nav a:nth-child(6) {background-color: #E70DDD;}
.galeria .item-nav a:nth-child(7) {background-color: #8E19B1;}HTML:
<div class="galeria">
<!-- Pre obrazok s vyberom farieb -->
<div class="item">
<div class="item-image"><img src="../img/auta/01-1.jpg" alt="" title="Aston Martin Vantage"></div>
<div class="item-nav">
<div class="yoxview">
<a href="../img/auta/01-2.jpg"><img src="" alt="" title="Aston Martin Vantage1"></a>
<a href="../img/auta/01-3.jpg"><img src="" alt="" title="Aston Martin Vantage2"></a>
<a href="../img/auta/01-4.jpg"><img src="" alt="" title="Aston Martin Vantage3"></a>
<a href="../img/auta/01-5.jpg"><img src="" alt="" title="Aston Martin Vantage4"></a>
<a href="../img/auta/01-6.jpg"><img src="" alt="" title="Aston Martin Vantage5"></a>
<a href="../img/auta/01-7.jpg"><img src="" alt="" title="Aston Martin Vantage6"></a>
<a href="../img/auta/01-8.jpg"><img src="" alt="" title="Aston Martin Vantage7"></a>
</div>
</div>
</div>
<!-- Pre obrazok bez vyberu farieb -->
<div class="item">
<div class="item-image">
<div class="yoxview">
<a href="../img/auta/02-2.jpg"><img src="../img/auta/02-1.jpg" alt="" title="Black Carriage (Čierny koč)"></a>
</div>
</div>
</div>
</div>Test (zmazat cache prehliadaca)
- farby som este zatial nerobila, v prvom aute su definovane spravne
+5 Zkušeností
Zobrazeno 29 zpráv z 29.