Jeśli chcesz wziąć udział w dyskusjach na forum - zaloguj się. Jeżeli nie masz loginu - poproś o członkostwo.

• Zapomniane hasło?
• Poproś o członkostwo

1. • 1:
      
     CommentAuthormaly_swd
   • CommentTime9 May 2018

    
   Cześć.
   Nudziło mi się i postanowiłem wprowadzić małą modyfikację CSS.
   Dzięki temu forum zyskało "responsywność", 100% szerokości strony.
   
   Kod powinnien być wstrzyknięty jako ostatni plik CSS (jest to oczywiście szpachla):
   
   body > div:nth-of-type(1){
   background: #020202;
   width: auto!important;
   margin-left: 50px!important;
   margin-right: 50px!important;
   }
   
   body > div:nth-of-type(1) ul>li.head-of{
   background: #000;
   width: 100%;
   }
   
   body > div:nth-of-type(1) ul>li.head-of img:nth-of-type(1){
   float: left;
   }
   
   body > div:nth-of-type(1) ul>li.head-of img:nth-of-type(2){
   float: right;
   }
   
   body > div:nth-of-type(1) ul>li.head-of p{
   top: initial!important;
   background: #006699;
   margin-top:105px;
   padding: 10px !important;
   position: relative!important;
   text-align: left;
   }
   
   body > div:nth-of-type(2){
   width: auto!important;
   margin-left: 50px!important;
   margin-right: 50px!important;
   }
   
   body > div:nth-of-type(3){
   text-align: center;
   background: #020202;
   width: auto!important;
   margin-left: 50px!important;
   margin-right: 50px!important;
   border-radius: 0px 0px 15px 15px;
   }
   
   body > div:nth-of-type(3) > div img:nth-of-type(1){
   position:absolute;
   clip: rect(0px,390px,178px,20px);
   right: 50%;
   }
   body > div:nth-of-type(3) > div img:nth-of-type(2){
   position:absolute;
   clip: rect(0px,350px,178px,0px);
   left:50%;
   }
   
   body > div:nth-of-type(3) > div {
   text-align: center;
   position: relative;
   }
   
   
   body > div:nth-of-type(2) ol#Comments li{
   position: relative;
   }
   
   body > div:nth-of-type(2) .CommentHeader {
   background-image: none!important;
   }
   
   body > div:nth-of-type(2) .CommentHeader:before {
   content:"";
   position: absolute;
   left: 35px;
   top: 45px;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 14px 14px 14px;
   border-color: transparent transparent #ffffff transparent;
   z-index:9999;
   }
   body > div:nth-of-type(2) .CommentHeader:after {
   content:"";
   position: absolute;
   left: 35px;
   top: 43px;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 14px 15px 14px;
   border-color: transparent transparent #b4e4f0 transparent;
   z-index:9998;
   }
   body > div:nth-of-type(2) .CommentHeader {
   border-bottom: 2px solid #b4e4f0;
   
   z-index: 99999;
   }
2. • 2:
      
     CommentAuthorKaz
   • CommentTime9 May 2018

    
   Bomba!
   
   Czyli to jeszcze nie dodane tylko propozycja dodania?
3. • 3:
      
     CommentAuthormav
   • CommentTime9 May 2018

    
   Proteza z kolei przy mniejszych ekranach się wykrzacza...

   • Bez tytuÅ‚u.jpg
     
     
     
     
4. • 4:
      
     CommentAuthormaly_swd
   • CommentTime9 May 2018

    
   Na jakiej przeglądarce i rozdziałce masz taki efekt?
5. • 5:
      
     CommentAuthormaly_swd
   • CommentTime9 May 2018

    
   Dobra, widzę. Nie uruchamiasz tego na mobilnym. Tylko na małym oknie :)
   
   Zaraz sprawdzę.
6. • 6:
      
     CommentAuthormaly_swd
   • CommentTime9 May 2018

    
   Wprowadziłem na szybko ograniczenie do 760px. Można dać responsywne obrazki w "hederze". Ale to kupa zabawy bez dostępu do kodu.
   
   body > div:nth-of-type(1){
   background: #020202;
   width: auto!important;
   min-width: 760px;
   margin-left: 50px!important;
   margin-right: 50px!important;
   }
   
   body > div:nth-of-type(1) ul>li.head-of{
   background: #000;
   width: 100%;
   }
   
   body > div:nth-of-type(1) ul>li.head-of img:nth-of-type(1){
   float: left;
   }
   
   body > div:nth-of-type(1) ul>li.head-of img:nth-of-type(2){
   float: right;
   }
   
   body > div:nth-of-type(1) ul>li.head-of p{
   top: initial!important;
   background: #006699;
   margin-top:105px;
   padding: 10px !important;
   position: relative!important;
   text-align: left;
   }
   
   body > div:nth-of-type(2){
   width: auto!important;
   min-width: 760px;
   
   margin-left: 50px!important;
   margin-right: 50px!important;
   }
   
   body > div:nth-of-type(3){
   text-align: center;
   background: #020202;
   width: auto!important;
   min-width: 760px;
   margin-left: 50px!important;
   margin-right: 50px!important;
   border-radius: 0px 0px 15px 15px;
   }
   
   body > div:nth-of-type(3) > div img:nth-of-type(1){
   position:absolute;
   clip: rect(0px,390px,178px,20px);
   right: 50%;
   }
   body > div:nth-of-type(3) > div img:nth-of-type(2){
   position:absolute;
   clip: rect(0px,350px,178px,0px);
   left:50%;
   }
   
   body > div:nth-of-type(3) > div {
   text-align: center;
   position: relative;
   }
   
   
   body > div:nth-of-type(2) ol#Comments li{
   position: relative;
   }
   
   body > div:nth-of-type(2) .CommentHeader {
   background-image: none!important;
   }
   
   body > div:nth-of-type(2) .CommentHeader:before {
   content:"";
   position: absolute;
   left: 35px;
   top: 45px;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 14px 14px 14px;
   border-color: transparent transparent #ffffff transparent;
   z-index:9999;
   }
   body > div:nth-of-type(2) .CommentHeader:after {
   content:"";
   position: absolute;
   left: 35px;
   top: 43px;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 14px 15px 14px;
   border-color: transparent transparent #b4e4f0 transparent;
   z-index:9998;
   }
   body > div:nth-of-type(2) .CommentHeader {
   border-bottom: 2px solid #b4e4f0;
   
   z-index: 99999;
   }
7. • 7:
      
     CommentAuthormaly_swd
   • CommentTime9 May 2018

    
   @Kaz: Ja mam wstrzyknięte te style do swojej przeglądarki. Więc u mnie "działa".
8. • 8:
      
     CommentAuthormav
   • CommentTime9 May 2018

    
   Faktycznie teraz zapobiega rozjechaniu się i zapewne masz rację, że bez reorganizacji html kolejne protezy mające przesuwać obrazek na dół po zmniejszeniu są bezcelowe.
   Ciekawe masz zajęcia na nudę ;)
   
   (no dobra, czasem też tak mam)
9. • 9:
      
     CommentAuthormaly_swd
   • CommentTime9 May 2018

    
   @Mav: Jak siedzisz w robocie i piszesz jakieś mega skomplikowane systemy... to czasem fajnie jest zrobić kawałek CSSa.
10. • 10: CommentAuthorwieczor
    • CommentTime9 May 2018

     
    A zapytam z ciekawości - czemu służy manipulacja z-indexem?
11. • 11: CommentAuthorwieczor
    • CommentTime9 May 2018

     
    Wpuściłem tak jak jest
12. • 12:
       
      CommentAuthormav
    • CommentTime9 May 2018

     
    Na główną by się tak samo przydało ;) ten wąziutki pasek artykułu jest za wąziutki ;)
13. • 13: CommentAuthorwieczor
    • CommentTime9 May 2018

     
    Główna jest zrobiona na tabelkach... Jeszcze w tym roku będzie nowy layout, responsywny :)
14. • 14:
       
      CommentAuthormaly_swd
    • CommentTime9 May 2018

     
    @Wieczor: "A zapytam z ciekawości - czemu służy manipulacja z-indexem?"
    Ten "dziubek" przy postach jest na cssie a nie na grafice :) - nudziło mi się.
15. • 15:
       
      CommentAuthormaly_swd
    • CommentTime9 May 2018

     
    Powiedz, że główna będzie przynajmniej na Bootstrapie, flexsie albo czymś podobnym :)
16. • 16:
       
      CommentAuthorCOR/ira4
    • CommentTime9 May 2018

     
    na Playstation Vicie też się czasem kaszani ,ale i tak dobrze że działa.
17. • 17:
       
      CommentAuthormaly_swd
    • CommentTime9 May 2018

     
    @Wieczor: Podmień, zrobiłem mały fix na IE ;)
    
    body > div:nth-of-type(1){
    background: #020202;
    width: auto!important;
    min-width: 760px;
    margin-left: 50px!important;
    margin-right: 50px!important;
    }
    
    body > div:nth-of-type(1) ul>li.head-of{
    background: #000;
    width: 100%;
    }
    
    body > div:nth-of-type(1) ul>li.head-of img:nth-of-type(1){
    float: left;
    }
    
    body > div:nth-of-type(1) ul>li.head-of img:nth-of-type(2){
    float: right;
    }
    
    body > div:nth-of-type(1) ul>li.head-of p{
    top: auto!important;
    background: #006699;
    margin-top:105px;
    padding: 10px !important;
    position: relative!important;
    text-align: left;
    }
    
    body > div:nth-of-type(2){
    width: auto!important;
    min-width: 760px;
    
    margin-left: 50px!important;
    margin-right: 50px!important;
    }
    
    body > div:nth-of-type(3){
    text-align: center;
    background: #020202;
    width: auto!important;
    min-width: 760px;
    margin-left: 50px!important;
    margin-right: 50px!important;
    border-radius: 0px 0px 15px 15px;
    }
    
    body > div:nth-of-type(3) > div img:nth-of-type(1){
    position:absolute;
    clip: rect(0px,390px,178px,20px);
    right: 50%;
    }
    body > div:nth-of-type(3) > div img:nth-of-type(2){
    position:absolute;
    clip: rect(0px,350px,178px,0px);
    left:50%;
    }
    
    body > div:nth-of-type(3) > div {
    text-align: center;
    position: relative;
    }
    
    
    body > div:nth-of-type(2) ol#Comments li{
    position: relative;
    }
    
    body > div:nth-of-type(2) .CommentHeader {
    background-image: none!important;
    }
    
    body > div:nth-of-type(2) .CommentHeader:before {
    content:"";
    position: absolute;
    left: 35px;
    top: 45px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14px 14px 14px;
    border-color: transparent transparent #ffffff transparent;
    z-index:9999;
    }
    body > div:nth-of-type(2) .CommentHeader:after {
    content:"";
    position: absolute;
    left: 35px;
    top: 43px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14px 15px 14px;
    border-color: transparent transparent #b4e4f0 transparent;
    z-index:9998;
    }
    body > div:nth-of-type(2) .CommentHeader {
    border-bottom: 2px solid #b4e4f0;
    
    z-index: 99999;
    }
18. • 18:
       
      CommentAuthormaly_swd
    • CommentTime9 May 2018

     
    @IRATA4: możesz dać printscr albo zdjęcie?
19. • 19:
       
      CommentAuthormaly_swd
    • CommentTime9 May 2018

     
    A co Wy na to aby filmy były tak pokazywane?

    • Screenshot_8.png
      
      
      
      
20. • 20:
       
      CommentAuthorCOR/ira4
    • CommentTime9 May 2018

     
    Sprawdziłem w tym momencie i jest ok :-).
    Czasem zdarza się tak że cała grafika migocze ,dotyczy to jedynie Vity,czemu tak się dzieje to nie mam pojęcia,podejrzewam problem ze zwalnianiem pamięci (przeładowanie) jest to bardzo uciążliwe i nasila się przy powiększaniu i przewijaniu ,ale jakoś daje radę ...

    • ZdjÄ™cie-0030.jpg
      
      
      
      
21. • 21:
       
      CommentAuthorCOR/ira4
    • CommentTime9 May 2018

     
    kwestia przyzwyczajenia , ogólnie jak wszedłem to dziwnie mi się wydawało ;-).
22. • 22: CommentAuthorgorgh
    • CommentTime9 May 2018

     
    a nie dałoby się za pomocą @media ograniczyć zmiany do mobile? na kompie to kiepsko wygląda
23. • 23: CommentAuthorwieczor
    • CommentTime9 May 2018

     
    Na mobile to w ogóle nie wygląda :)
24. • 24:
       
      CommentAuthorlarek
    • CommentTime9 May 2018

     
    Jacie, co żeście zrobili? Nie da się teraz tego normalnie czytać. Czuję się jakbym w kinie siedział w pierwszym rzędzie. Aż szyja boli od kręcenia.
25. • 25: CommentAuthorwieczor
    • CommentTime9 May 2018

     
    Ja się chyba zgadzam z Larkiem. Ogólnie fajnie jest jak forum jest na pełną szerokość, ale ten layout się do tego nie nadaje :) Musi byc bardziej "listowy" jak AArea :) Revert ;)
26. • 26:
       
      CommentAuthorAlex
    • CommentTime9 May 2018

     
    Żądam przywrócenia normalnego layoutu! Teraz wszystko jest rozciągnięte i rozsypane.
27. • 27: CommentAuthorwieczor
    • CommentTime9 May 2018

     
    Już przywrócone, refresha zrób
28. • 28:
       
      CommentAuthormav
    • CommentTime10 May 2018

     
    Hehe i dupa z nowinek. A miałem pisać,że tabelki też da się porozciągać.
29. • 29: CommentAuthorwieczor
    • CommentTime10 May 2018

     
    Oczywiście, że się da. Ale tam jest burdel, wszystko się rozsyoie, szkoda czasu na łatanie dziurawej kurtki.
30. • 30:
       
      CommentAuthormav
    • CommentTime10 May 2018

     
    Dyskusja jednakże wraca o tym co jakiś czas. Ciekawi mnie, czy włodarze faktycznie planują coś z tym robić?
31. • 31: CommentAuthorwieczor
    • CommentTime10 May 2018

     
    Tak, mniej więcej. Spalić i zbudować nowe ;)
32. • 32:
       
      CommentAuthormav
    • CommentTime10 May 2018

     
    Tyle to też było ustalone wcześniej ;) pozostaje pytanie - kiedy...
33. • 33:
       
      CommentAuthormaly_swd
    • CommentTime10 May 2018

     
    Nie rozumiecie prawdziwego artysty...
    Odchodzę, żegnajcie...
34. • 34: CommentAuthorwieczor
    • CommentTime10 May 2018

     
    Rozumiemy. Zorganizowaliśmy nawet happening z wernisażem. Ale już po godzinach, bilety się skończyły, więc do następnego razu. Nie odchodź za daleko, bo się zgubisz :)
35. • 35:
       
      CommentAuthormaly_swd
    • CommentTime11 May 2018

     
    ;)