@
Bazan ;
toto szare jest w tle, ma niższy z-index
środkowy prostokąt to obrazek, wycentrowany jeśli mniejszy niż ekran, dopasowany do szerokości jeśli taki sam lub większy
strzałki to strzałki, pojawiają się jeśli jest dokąd przewijać, duzy prostokąt to ekran
w tej chwili mam coś w stylu
Kod:
<div id='popup' class='hide'>
<div id='popup_content'>
<nav id='prevPhoto'><a href='gallery/picture/8/category/box'>←</a></nav>
<div id='popup_center'><img onclick=op('popup') src='static/comic/FINtest.png' alt='asdf' class='popimg'></div>
</div>
</div>
wrzucone do body
Kod:
#popup
{
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: rgba(25,25,25, 0.8);
z-index:100;
overflow: auto;
margin: auto;
}
.show
{
display: block;
}
.hide
{
display: none;
}
#popup_content
{
display: table;
width: 100%;
height: 100%;
text-align:center;
margin: auto;
overflow: auto;
}
#popup_center
{
display: table-cell;
vertical-align: middle;
}
#prevPhoto a
{
top: 0;
display: block;
cursor: pointer;
height: 500px;
position: absolute;
width: 450px;
margin-top: 380px;
margin-left: 0;
margin-right: auto;
text-align: left;
z-index: 200;
color: rgba(255, 0, 0, 0);
}
#prevPhoto a:hover
{
color: rgba(255, 0, 0, 1);
}
#nextPhoto a
{
top: 0;
right: 0;
display: block;
cursor: pointer;
height: 500px;
position: absolute;
width: 450px;
margin-top: 380px;
text-align: right;
margin-right: 0;
margin-left: auto;
z-index: 200;
color: rgba(255, 0, 0, 0);
}
#nextPhoto a:hover
{
color: rgba(255, 0, 0, 1);
}
img.popimg
{
display: block;
margin: auto;
height: auto;
max-width: 100%;
}
pewnie burdel, ale css jest
jak masz jakiekolwiek rady jak to ogarnąć, żeby wyglądało chociaż w przybliżeniu jak należy nie tylko na blinku to będę bardzo wdzięczny
za jakieś rady jak zmniejszyć tego cssa albo wywalić kawałek html też
Zakładki