Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML]Element nie zmienia pozycji podczas zmiany rozdzielczości
smiesznylolek
post 16.12.2014, 12:05:12
Post #1





Grupa: Zarejestrowani
Postów: 62
Pomógł: 0
Dołączył: 27.12.2011

Ostrzeżenie: (0%)
-----


mam taki problem, już któryś raz mi się tak dzieje i nie mogę dojść do tego co robię źle. Chodzi o to że mam taki element "strzalkę w bok" przy prawej krawędzi na środku ekranu. Chciałem do niej umieścić taką strzałkę opisową. Tylko jest taki problem że ta "strzałka w bok" w zależności od rozmiaru okna przeglądarki zawsze jest na środku, a ta strzałka opisowa nie porusza się równo z nią. Pokaże to na screenach
tutaj jest screen na ekranie 22"
screen 1
Jak widać białe strzałki sa po środku ekranu i nad nią jest ta czerwona strzałka opisowa (jest między nimi odstęp)
a tutaj screen z ekranu 15.6"
screen 2

Białe strzały się wyśrodkowały, ale czerwona strzałka jakby nie ruszyła się z miejsca i nachodzi na biała.

fragment css odpowiedzialny za strzałki, gdzie:
fp-controlArrow - jest kontenerem na białe strzałki
.fp-controlArrow.fp-prev - biala w lewo
.fp-controlArrow.fp-next - biała w prawo
.fp-controlArrow.descArrow - moja czerwona strzałka
  1. .fp-controlArrow {
  2. position: absolute;
  3. z-index: 4;
  4. top: 50%;
  5. cursor: pointer;
  6. width: 0;
  7. height: 0;
  8. border-style: solid;
  9. margin-top: -38px;
  10. }
  11. .fp-controlArrow.fp-prev {
  12. left: 25px;
  13. width: 0;
  14. border-width: 38.5px 34px 38.5px 0;
  15. border-color: transparent #fff transparent transparent;
  16. }
  17. .fp-controlArrow.fp-next {
  18. right: 25px;
  19. border-width: 38.5px 0 38.5px 34px;
  20. border-color: transparent transparent transparent #fff;
  21. }
  22. .fp-controlArrow.descArrow{
  23. right: 32px;
  24. top:37%;
  25. background: url("images/strzalka.png") no-repeat;
  26. width:60px;
  27. height:93px;
  28. border:none;
  29. }


  1. <div class="fp-controlArrow fp-prev"></div>
  2. <div class="fp-controlArrow fp-next"></div>
  3. <div class="fp-controlArrow descArrow"> </div>


Jak w .fp-controlArrow.descArrow wstawię kod od .fp-controlArrow.fp-prev lub ... next, w tedy ta dodatkowa strzałka się centruje tak jak powinno.
Nie mam pojęcia co robię źle i jak to powinno wyglądać, już się pogubiłem


Może robię to całkowicie źle, ale ogólnie chcę otrzymać taki efekt :
tak powinno wygladac
Czyli do białej strzałki, strzałka czerwona a nad nią jakiś tekst


Ten post edytował smiesznylolek 16.12.2014, 12:25:13
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 13:05