| |
Zdravo,
izdelujem preprostejšo spletno stran (HTML/CSS in nekaj malega PHP). Imam skupek fotografij, ki jih želim zapakirati v JS galerijo. Na spletu sem našel tisto najbolj osnovno, responsive in simpatično: https://github.com/viljamis/ResponsiveSl.... Imam pa težavo, zato se obračam k Vam za pomoč.
Za navigacijo med slikami imam omogočen pager, s puščicami v levo in desno. Vse lepo in prav, dokler ima slajder konstantno širino. Jaz pa imam slike tako v ležeči kot pokončni legi, sedaj pa me muči, kako bi lahko dinamično premaknil puščico za naprej (ki je na desni), da se prekriva s sliko v slajderju.
Okej, kako sem jaz razmišljal:
sedaj imam urejeno tako, da se puščice drži CSS ukaz margin-left (in notri razlika med širino slajderja in dolžino puščice). Ob nefiksni širini slajderja pa ta možnost jasno odpade. Če bi le bil CSS dinamični jezik, da bi prebral širino slike, pa ni ... Any ideas?
Hvala. 
spremenjeno: NikMan (31.3.2015, 6:59)
|
| |
| |
Kar sem pogledal primer na strani http://responsiveslides.com/themes/theme...., bi vse skupaj moralo delovati oz. ko sem sliko recimo zmanjšal, so bile tudi puščice prikazane pravilno.
Na strani tako pri puščici ni margin-left, ampak je samo left, ki je 0, kar pomeni, da je vedno na levem robu.
Prednost CSS je, da se zna avtomasko prilagajati elementom na strani, tako da ni potrebe po kakšnem dinamičnem spreminjanju.
Tako da, če v .rslides img stilu umakneš širino, bi verjetno že znalo delati.
|
| |
| |
Podtalje, naj se vam najprej zahvalim za prijazen odgovor.
Ampak to velja samo v primeru, ko so vse slike enako široke, kajne? Jaz pa bi rad da so enako visoke, kar pomeni, da je pokončna slika krajša kot ležeča.
Left in right sem ven dal zato, ker mi jih vrže ob skrajna robova ekrana. Sem jih sedaj vrnil nazaj v kodo.
Če se vam da ubadati z mojimi težavami, vam pošiljam še strukturo svoje kode, morda se bova tako lažje sporazumela: https://jsfiddle.net/rm1gv8rv/1/.
HVALA!
|
| |
| |
V mislih sem imel, da so različno široke, saj bi to načelno moralo delati.
Iz kode na jsfiddle pa bo težko ugotoviti, kaj točno je narobe, ker ni zraven celotne knjižnice galerije, ki lahko tudi dinamično spreminja CSS vrednosti, poleg tega pa so določeni stili podedovani iz splošne teme knjižnice in jih na jsfiddle ni.
Še najlažje bi bilo, če bi se dalo dobiti povezavo do strani, kjer je ta problem. Potem bi se dalo hitro pogledati.
spremenjeno: podtalje (30.3.2015, 7:35)
|
| |
| |
Evo, sem uspel pogledati.
Najenostavnejše rešiš tvoj problem, če v style.css dodaš naslednji stil:
article {
position: relative;
display: inline-block;
max-width: 774px;
}
|
| |
| |
Ooo, dbest, res dela, najlepša hvala!
A bi Vas lahko še malo zagnjavil za teoretično razlago, zato da bi vedel še za drugič.
Še enkrat hvala!
|
| |
| |
Ni problema.
Puščici sta imeli nastavljeno position:absolute ter left in right 0.
http://www.w3schools.com/cssref/pr_class....
Ker je position aboslute, to v praksi pomeni, da se gleda pozicija glede na prvi višji element v strukturi (parent), ki ima nastavljeno position.
V tem primeru je to značka article, zato sem ji dodal position:relative. S tem sta se puščici premaknili znotraj na sliko.
Druga stvar je div, ki se privzeto razteza čez celotno širino. Zato sem mu nastavil lastnost display:inline-block. Vse, kar je inline, se avtomatsko prilagaja širini elementa, v tvojem primeru sliki.
max-width pa sem nastavil bolj za vsak slučaj zato, da če je slika prevelika, da se ne raztegne čez čez rob.
|
| |
| |
Ja, ja, zdaj mi je pa jasno. Sem si prebral tudi na w3schools.
Dejansko torej absolute posluša prvega nestatičnega nad sabo, kar je bil pa html, zato je šel na robove, kajne? Potem pa ste mi v kodi popravili article na relative, zato je upošteval article. Hkrati pa ste nastavili article na inline-block, da uporabi le toliko širine, kot jo potrebuje, a ga omejili z max-width, da ne gre preko robov.
Zdaj imam pa samo še eno vprašanje: inline in inline-block. Če sem prav razumel, je razlika le v tem, da inline-block lahko določiš širino/višino, inline pa ne. Torej ste vi v kodi izbrali inline-block prav zaradi max-width?
spremenjeno: Odin (1.4.2015, 16:05)
|
| |
| |
Aha, pa še nekaj, tole je pa malo off-topic: ali se CSS reset dejansko uporablja ali je malo old-school?
|
| |
Prikazujem 1 od skupno 2 strani |
|
