Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Wystający element poza ekran
daggoth
post 12.03.2014, 19:38:34
Post #1





Grupa: Zarejestrowani
Postów: 13
Pomógł: 1
Dołączył: 19.01.2014

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


Witam.

Mam problem iż ręcznie ustawiłem sobie wartość width dla pseudoklasy :after pewnego selektora na 1000px.
W pewnych momentach, element ten wystaje mi poza ekran (przy mniejszej rozdzielczości zwłaszcza). Da się to jakoś przyciąć? albo zrobić tak, aby element nie wystawał poza div który go ogranicza (width:100%) questionmark.gif

Myślałem, że uda mi się zmodyfikować atrybut width za pomocą jquery lecz jak się okazuje pseudoklasa :after nie wchodzi w skład DOM i nie może być modyfikowana za pomocą JQuery

Proszę o pomoc exclamation.gif
Kod
  1. <div class="box_header"><span>O Nas</span></div>
  2.  
  3. .box_header {
  4. display:block;
  5. width:100%;
  6. height:52px;
  7. background:url(../img/box_header.jpg) center no-repeat;
  8. background-position:center;
  9.  
  10. position: relative;
  11. z-index: inherit;
  12. text-align:center;
  13. -webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.75);
  14. -moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.75);
  15. box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.75);
  16. }
  17.  
  18. .box_header span {
  19. display: inline-block;
  20. position: relative;
  21. z-index:26;
  22. color:#fff;
  23. font-family: 'corbertregular';
  24. font-weight:bold;
  25. font-size:35px;
  26. padding:8px 0;
  27. margin:0;
  28. }
  29. .box_header span:before,
  30. .box_header span:after {
  31. content: "";
  32. position: absolute;
  33. height: 25px;
  34. border-bottom: 2px solid #cd3163;
  35. top: 0;
  36. width: 1000px;
  37. overflow: hidden;
  38. }
  39. .box_header span:before {
  40. content:" ";
  41. right:100%;
  42. margin-right: 60px;
  43. }
  44. .box_header span:after {
  45. left: 100%;
  46. margin-left: 60px;
  47. }
  48.  
Go to the top of the page
+Quote Post
trueblue
post 12.03.2014, 19:46:00
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


  1. .box_header{
  2. overflow:hidden;
  3. }


--------------------
Go to the top of the page
+Quote Post
daggoth
post 12.03.2014, 21:28:23
Post #3





Grupa: Zarejestrowani
Postów: 13
Pomógł: 1
Dołączył: 19.01.2014

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


Heh... Stary a głupi... No jasne exclamation.gif
Dzięki kolego ! smile.gif
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: 29.03.2024 - 07:40