Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Problem z Css na auto width

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Problem z Css na auto width

Post 22.11.2016, 16:28:07

Witam mam slider w jquery gdzie po dodaniu go na strone i ustawieniu na sztywno szerokosci wyswietla się lecz po dodaniu min-width znika on z strony ,jedyną opcją jest powiekszenie strony na ctrl+ wtedy się pojawia gdzie robie błąd?

kod slidera:
Kod: Zaznacz cały
.slider_description {
            position: absolute;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background: rgba(255,255,255,.5);
            font-weight: 500;
            text-transform: uppercase;
            color: #000;
            border: 2px solid transparent;
            border-radius: 50px;
            cursor: pointer;
            z-index: 1000;
   
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
         }
         .slider_description:hover {
            background: rgba(255,255,255,.0);
            color: #FFF;
            border-color: #FFF;
         }
         
         /* Slider Styles */
         #exampleone {
            position: relative;
            top: 0;
                                left: 0px;
            bottom: 0;
            right: 0;
            height: 868px;
                                min-width: 1400px;
                                background: none;

         }
         #exampleone .frame {
                             width: auto;
                             min-width: 1400px;   
            height: 868px;

                                -webkit-perspective: 1000px;
            perspective: 1000px;

            -webkit-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;

         }
         #exampleone .frame .slide_element {
            height: 100%;

            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
         }
         #exampleone .frame .slide_element > div {
            float: left;
            height: 100%;
         }
         #exampleone .frame .mSCover img {
            max-width: none;
         }

         /* Animated layers styles */
         .transparent {
            opacity: 0;
         }
         .bgImg {
            top: 0;
            left: 0;
            width: 100%;
            height: 115%;
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-transform: translateZ(0px) translateY(-7%);
            transform: translateZ(0px) translateY(-7%);
            z-index: 10;
         }
         .bgImg1 {
            background-image: url('http://www.wallpapermaiden.com/image/2016/06/17/hatsune-miku-undersea-vocaloid-twintail-anime-1268.png');
         }
         .bgImg2 {
            background-image: url('http://76.72.168.19/images/2015-11-28-788237.png');
         }
         .bgImg3 {
            background-image: url('https://archive-media.nyafuu.org/wg/image/1420/42/1420420990953.png');
         }
         .bgImg4 {
            background-image: url('http://www.fullhdwpp.com/wp-content/uploads/Dwarf-in-a-Hood-with-a-Magic-Weapon-42_www.FullHDWpp.com_.jpg');
         }
         .bande {
            background: url('wp-content/themes/onetone-pro/slider/assets/img/captions/bande.png') no-repeat 0 50%;
            height: 1110px;
            width: 632px;
            left: 0;
            -webkit-transform: translateZ(0px) translateX(-632px);
            transform: translateZ(0px) translateX(-632px);
            bottom: 0;
            z-index: 120;
         }
         .line {
            background: url('wp-content/themes/onetone-pro/slider/assets/img/captions/line.png') no-repeat 0 50%;
            height: 1110px;
            width: 556px;
            left: 0;
            -webkit-transform: translateZ(0px) translateX(-773px);
            transform: translateZ(0px) translateX(-773px);
            bottom: 0;
            z-index: 110;
         }
         .titres {
            left: 120px;
            bottom: 140px;
            color: #353535;
            text-transform: uppercase;
            -webkit-transform: translateZ(0px) translateX(-100%);
            transform: translateZ(0px) translateX(-100%);
            z-index: 130;
         }
         .titres .titrePartie {
            top: auto;
            bottom: 38px;
            text-align: left;
         }
         .titrePartie > span {
            position: relative !important;
            left: 0;
            display: block;
            float: left;
            clear: both;
            padding: 10px 25px;
            background-color: rgba(229, 229, 229, 0.87);
            white-space: nowrap;
            letter-spacing: 6px;
         }
         .titres .titrePartie span.l1,
         .titres .titrePartie span.l2 {
            left: -50px;
         }
         .titrePartie > span.l1 {
            padding-bottom: 0;
            font-size: 30px;
            font-weight: 300;
            line-height: 40px;
         }
         .titrePartie > span.l2 {
            font-size: 30px;
            font-weight: 500;
            line-height: 40px;
         }
         .titres .sousTitre {
            position: relative !important;
            left: -50px;
            clear: both;
            float: left;
            font-size: 11px;
            color: #353535;
            line-height: 28px;
            padding: 0 25px;
            background-color: #e4e3e5;
            letter-spacing: 2px;
            margin-top: 1em;
         }

         @media screen and (max-width:959px) {
            .titres .titrePartie {
               top: 58px;
            }

            .titrePartie > span {
               padding: 7px 20px !important;
               letter-spacing: 3px !important;
               font-size: 25px !important;
               line-height: 35px !important;
            }
         }

         @media screen and (max-width:959px) {
            .bande {
               margin-left: -70px;
            }

            .line {
               margin-left: -70px;
            }

            .titres {
               left: 0px;
            }

            .titres .titrePartie {
               top: 58px;
            }

            .titrePartie > span {
               padding: 7px 20px !important;
               letter-spacing: 3px !important;
               font-size: 25px !important;
               line-height: 35px !important;
            }

            .titres .sousTitre {
               right: 60px;
            }
         }

         @media screen and (max-width:639px) {
            .bande {
               margin-left: -100px;
            }

            .line {
               margin-left: -140px;
            }

            .titres {
               width: 100%;
               padding-right: 80px;
            }

            .titres .titrePartie {
               top: 40px;
            }

            .titrePartie > span {
               padding: 5px 15px !important;
               letter-spacing: 2px !important;
               font-size: 20px !important;
               line-height: 30px !important;
               white-space: inherit !important;
            }
            
            .titres .titrePartie > span.l1 {
               margin-right: 7px;
            }
                   }


link strony : melodiatest.byethost22.com
login i haslo tester
Lsn
Posty: 8
Dołączył(a): 05.11.2016

Re: Problem z Css na auto width

Post 22.11.2016, 20:14:47

Wyrzuciłem widht strona wyświetla się tak jak powinna być ale dopiero po naciśnieciu ctrl+ tak po odświeżeniu jakby nie ładował się skrypt lub coś ;/
Nowy kod
Kod: Zaznacz cały
.slider_description {
            position: absolute;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background: rgba(255,255,255,.5);
            font-weight: 500;
            text-transform: uppercase;
            color: #000;
            border: 2px solid transparent;
            border-radius: 50px;
            cursor: pointer;
            z-index: 1000;
   
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
         }
         .slider_description:hover {
            background: rgba(255,255,255,.0);
            color: #FFF;
            border-color: #FFF;
         }
         
         /* Slider Styles */
         #exampleone {
            position: relative;
            background-color: #dff;
                                overflow: hidden;
         }
         #exampleone .frame {
            height: 868px;

                                -webkit-perspective: 1000px;
            perspective: 1000px;

            -webkit-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;


         }
         #exampleone .frame .slide_element {
            height: 100%;

         }
         #exampleone .frame .slide_element > div {
            float: left;
            height: 100%;
                                width: 100%
                                background-color: #ff03

            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
         }
         #exampleone .frame .mSCover img {
            max-width: none;
         }

         /* Animated layers styles */
         .transparent {
            opacity: 0;
         }
         .bgImg {
            top: 0;
            left: 0;
            width: 100%;
            height: 115%;
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-transform: translateZ(0px) translateY(-7%);
            transform: translateZ(0px) translateY(-7%);
            z-index: 10;

         }
         .bgImg1 {
            background-image: url('http://www.wallpapermaiden.com/image/2016/06/17/hatsune-miku-undersea-vocaloid-twintail-anime-1268.png');
         }
         .bgImg2 {
            background-image: url('http://76.72.168.19/images/2015-11-28-788237.png');
         }
         .bgImg3 {
            background-image: url('https://archive-media.nyafuu.org/wg/image/1420/42/1420420990953.png');
         }
         .bgImg4 {
            background-image: url('http://www.fullhdwpp.com/wp-content/uploads/Dwarf-in-a-Hood-with-a-Magic-Weapon-42_www.FullHDWpp.com_.jpg');
         }
         .bande {
            background: url('wp-content/themes/onetone-pro/slider/assets/img/captions/bande.png') no-repeat 0 50%;
            height: 1110px;
            width: 632px;
            left: 0;
            -webkit-transform: translateZ(0px) translateX(-632px);
            transform: translateZ(0px) translateX(-632px);
            bottom: 0;
            z-index: 120;
         }
         .line {
            background: url('wp-content/themes/onetone-pro/slider/assets/img/captions/line.png') no-repeat 0 50%;
            height: 1110px;
            width: 556px;
            left: 0;
            -webkit-transform: translateZ(0px) translateX(-773px);
            transform: translateZ(0px) translateX(-773px);
            bottom: 0;
            z-index: 110;
         }
         .titres {
            left: 120px;
            bottom: 140px;
            color: #353535;
            text-transform: uppercase;
            -webkit-transform: translateZ(0px) translateX(-100%);
            transform: translateZ(0px) translateX(-100%);
            z-index: 130;
         }
         .titres .titrePartie {
            top: auto;
            bottom: 38px;
            text-align: left;
         }
         .titrePartie > span {
            position: relative !important;
            left: 0;
            display: block;
            float: left;
            clear: both;
            padding: 10px 25px;
            background-color: rgba(229, 229, 229, 0.87);
            white-space: nowrap;
            letter-spacing: 6px;
         }
         .titres .titrePartie span.l1,
         .titres .titrePartie span.l2 {
            left: -50px;
         }
         .titrePartie > span.l1 {
            padding-bottom: 0;
            font-size: 30px;
            font-weight: 300;
            line-height: 40px;
         }
         .titrePartie > span.l2 {
            font-size: 30px;
            font-weight: 500;
            line-height: 40px;
         }
         .titres .sousTitre {
            position: relative !important;
            left: -50px;
            clear: both;
            float: left;
            font-size: 11px;
            color: #353535;
            line-height: 28px;
            padding: 0 25px;
            background-color: #e4e3e5;
            letter-spacing: 2px;
            margin-top: 1em;
         }

         @media screen and (max-width:959px) {
            .titres .titrePartie {
               top: 58px;
            }

            .titrePartie > span {
               padding: 7px 20px !important;
               letter-spacing: 3px !important;
               font-size: 25px !important;
               line-height: 35px !important;
            }
         }

         @media screen and (max-width:959px) {
            .bande {
               margin-left: -70px;
            }

            .line {
               margin-left: -70px;
            }

            .titres {
               left: 0px;
            }

            .titres .titrePartie {
               top: 58px;
            }

            .titrePartie > span {
               padding: 7px 20px !important;
               letter-spacing: 3px !important;
               font-size: 25px !important;
               line-height: 35px !important;
            }

            .titres .sousTitre {
               right: 60px;
            }
         }

         @media screen and (max-width:639px) {
            .bande {
               margin-left: -100px;
            }

            .line {
               margin-left: -140px;
            }

            .titres {
               width: 100%;
               padding-right: 80px;
            }

            .titres .titrePartie {
               top: 40px;
            }

            .titrePartie > span {
               padding: 5px 15px !important;
               letter-spacing: 2px !important;
               font-size: 20px !important;
               line-height: 30px !important;
               white-space: inherit !important;
            }
            
            .titres .titrePartie > span.l1 {
               margin-right: 7px;
            }
                   }
Lsn
Posty: 8
Dołączył(a): 05.11.2016


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 1 gość

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 49381 zarejestrowanych użytkowników.
Najnowszy użytkownik: padres


Nasi użytkownicy napisali:

  • 933260 wiadomości
  • w 245688 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)