• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Po zmniejszeniu strony w okienku strona zaczyna się krzaczyć. Bootstrap.

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
908 wizyt
pytanie zadane 7 lipca 2017 w HTML i CSS przez Erhart Początkujący (280 p.)

Cześć,

W oknie zmaksymalizowanym wszystko się wyświetla ok, ale przy zmniejszeniu okienka zaczyna się zdjęcie nie proporcjonalnie do tekstu skalować i i logo dziwnie przesuwać. Proszę o pomoc.

 

1
komentarz 7 lipca 2017 przez fkwilczek Nowicjusz (240 p.)
Nie znamy kodu jak mamy ci pomóc?
komentarz 7 lipca 2017 przez Erhart Początkujący (280 p.)
Już.

3 odpowiedzi

+1 głos
odpowiedź 7 lipca 2017 przez JayJay Mądrala (6,020 p.)
edycja 7 lipca 2017 przez JayJay

Nie mogłem się trochę połapać w CSS (6878 linii kodu) ;), więc napisałem własny, podpiąłem do HTML oraz podpiąłem Bootstrap.min.css . (Gdyby czegoś brakowało dopisz, skopiuj ze swojego pliki itp.) Postaraj się następnym razem zamieścić tylko ten CSS, który sam stworzyłeś/edytowałeś, a nie cały z Bootstrap'a i zedytowany w jednym pliku, ułatwi to pomoc.

Wydaje mi się, że przyczyną niedziałania kodu było zdefiniowanie rozmiaru obrazów w px, a nie według grid'a Bootstrap'a.

Aby wszystko poprawnie działało na razie podepnij do HTML tylko wymienione pliki CSS:
Bootstrap.min.css.
oraz poniższy kod
(co do pozostałych styli to dodaj je, kiedy przetestujesz, czy podane przeze mnie rozwiązanie działa, postaraj się dodać tylko te elementy, których brakuje, aby nie duplikować kodu):

body{
  background: #038004;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  padding-top: 70px;
}
.navbar-inverse{
  background: #fff;
}
.navbar-inverse .navbar-nav li a{
  color: #038004;
  font-size: 20px;
  border-right: 1px solid #038004;
}
.navbar-inverse .navbar-nav li:last-child a{
  border: none;
}
.page-header{
  color: #fff;
}
.copyrights{
  text-align: center;
  padding: 1%;
  color: #fff;
  background: #282A2B;
}
.copyrights p{
  margin:0;
  padding: 0;
}
.navbar-inverse .navbar-toggle .icon-bar{
  background: #038004;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover{
  background-color: #038004;
}
.navbar-inverse .navbar-toggle:hover .icon-bar,.navbar-inverse .navbar-toggle:focus .icon-bar{
   background: #fff;
}
.navbar-inverse .navbar-toggle{
  border-color:#038004;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
  border-color:#038004;
}
.navbar-inverse .navbar-nav li a:hover{
  color: #038004;
}

Zmodyfikowałem też trochę kod HTML (w różnych miejscach, więc wklejam cały):

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="chachaj, toruń, drewno, drzewo, przedsiębiorstwo, Wiesław Chachaj, Owsiana 3, transport, chachaj.pl">
  <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Przedsiębiorstwo Chachaj. Świadczy usługi w zakresie transportu drewna dłużycowego, kłodowanego oraz krótkiego do 1,8 m.
   Oferujemy również państwu sezonowane i świeże drewno kominkowe buk i dąb.
   Naszą działalnością obejmujemy terenie całej Polski .
   Chętnie nawiążemy stałą współpracę.
   Świadczymy także usługi naprawy i diagnostyki samochodów ciężarowych.">
  <meta name="author" content="Zbigniew Kożuchowski">
  <title>ChachajC</title>
  <!-- Bootstrap Core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <link href="css/style.css" rel="stylesheet">
  <!-- Custom Fonts -->
  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <header>    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="">Oferta</a>
                    </li>
                    <li>
                        <a href="o_firmie">O firmie</a>
                    </li>
                    <li>
                        <a href="kontakt">Kontakt</a>
                    </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
</header>
    <!-- Header Carousel -->
<div class="container">
  <!-- Page Content -->
    <div class="col-lg-4 col-lg-offset-6 col-md-4 col-md-offset-6 logo">
         <img class="img-responsive" src="img/logo.jpg" />
    </div>
    <div id="myCarousel" class="carousel slide col-lg-10 col-lg-offset-1">
        <!-- Indicators -->
         <!-- Logo -->
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
              <img class="img-fill" src="img/1.jpg">
              <div class="carousel-caption">
              </div>
          </div>
          <div class="item">
              <img class="img-fill" src="img/2.jpg">
              <div class="carousel-caption">
              </div>
          </div>
          <div class="item">
              <img class="img-fill" src="img/3.jpg">
              <div class="carousel-caption">
              </div>
          </div>
            <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
    </div>
</div>
        <!-- Marketing Icons Section -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Szanowni Państwo
                </h1>
            </div>
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 style="color:black;"><img src="img/znak choinka.png" class="tree"/> Przedsiębiorstwo Chachaj </h4>
                    </div>
                    <div class="panel-body">
                        <p>Świadczy usługi w zakresie transportu drewna dłużycowego,
                        kłodowanego oraz krótkiego do 1,8 m.</p>
                        <p>Oferujemy również państwu sezonowane i świeże drewno kominkowe buk i dąb.</p>
                        <p>Naszą działalnością  obejmujemy terenie całej Polski .</p>
                        <p>Chętnie nawiążemy stałą współpracę.</p>
                        <p>Świadczymy także usługi naprawy i diagnostyki samochodów ciężarowych.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <!-- /.row -->
        <!-- Features Section -->
        <!-- /.row -->
        <!-- Footer -->
</div>
    <footer >
        <div class="col-md-12 copyrights">
                <p>Copyright &copy; 2017 Firma „Chachaj” Wiesław Chachaj</p>
        </div>
    </footer>
    <!-- /.container -->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Script to Activate the Carousel -->
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>
</body>
</html>

Przydatne linki:

http://getbootstrap.com/components/

http://getbootstrap.com/css/#overview

komentarz 7 lipca 2017 przez Erhart Początkujący (280 p.)

Mistrzu chyle czoło, już dzisiaj doszedłem do usterki, ale nie mogłem tego naprawić. Jeszcze tylko na mozille się dziwnie strona  wyświetla,a na chromie dobrze. Jednak przy chromie jak dojdzie jakby do klasy md zdjęcie to jest nie proporcjonalne do tekstu, czyli podczas zmniejszania okienka. 

Pierwsze zdjęcie z mozilli, drugie chrome.

komentarz 8 lipca 2017 przez JayJay Mądrala (6,020 p.)
edycja 8 lipca 2017 przez JayJay

Ten przeskok w Chrome występuje właśnie dlatego, że (tak jak sam stwierdziłeś) przy zmniejszaniu zmienia się klasa na md, wtedy z klas (ze zdjęć widzę, że chyba trochę jeszcze zedytowałeś stronę :), na potrzeby wyjaśnienia posłużę się wartościami, których ja użyłem) "col-lg-10 col-lg-offset-1" dla slider'a przechodzi na domyślnie "col-md-12" i dla row znajdującego się poniżej domyślnie też występuje "col-md-12", stąd proporcje slider na górze do row na dole zmieniają się z 10:12 na 12:12. Dodaj odpowiednie klasy "col-md" do wyżej wymienionych elementów i powinno wszystko działać, bo znasz grid Bootstrap'a, tak?

Jeżeli chodzi o Firefox'a to opisz, co się dzieje? Czy występuje ten sam problem z obrazkami, co wcześniej? Pojawił się jakiś nowy problem? (Nie potrafię ocenić na podstawie wysłanych screnshot'ów, co jest źle / co miało się zachowywać inaczej)

 

 

 

komentarz 8 lipca 2017 przez Erhart Początkujący (280 p.)
Ok, nie było klasy dospisałem col-lg-10 w carousel-inner i jest ok, tylko jeszcze przy xs się, źle przesuwa ale kurs na youtubie bootstrapa gośc mówi, że klasa lg jest na duże monitory i tam może być źle przy mobilnych.

Fierfox zobacz www.chachaj.pl. Jest jakby inna strona proporcja zdjęcia.
komentarz 8 lipca 2017 przez JayJay Mądrala (6,020 p.)

Zacznij od usunięcia zbędnych właściwości dla elementów. Pamiętaj w Bootstrap wiele rzeczy jest zdefiniowana i czasami lepiej sprawdzić na ich stronie, co jak się robi niż kombinować na siłę samemu. Nie mówię tu oczywiście, że rozpracowywanie czegoś, kombinowanie wymyślanie, .. jest złe, tylko staram się zaznaczyć, że tak, jak przy nauce języka obcego, czasami trzeba zajrzeć do słownika, tak tu na stronę Bootstrap'a.

Usuń przy:
header.carousel - height
header.carousel .fill  - width, height

W Bootstrap, aby ułatwić tworzenie responsywnych witryn, czyli działąjącychi dostosowujących swój wygląd do każdego urządzenia stworzono tzw. siatkę, która dzieli się na dwanaście kolumn, szerokość elementów na stronie, takich jak np. div'y definiujemy podając jaką wartość z dwunastu części wewnątrz danego obiektu ma zajmować div, np. jeżeli chcemy by zajmował całą dostępną szerokość piszemy 12, a jeżeli chcemy by zajmował połowę, piszemy 6. Aby odsunąć div od lewej krawędzi piszemy "offset" oraz wartość - o ile kolumn chcemy go odsunąć od lewej krawędzi np. offset-3. Takie wartości możemy definiować dla różnych rozmiarów ekranów: lg, md, sm, xs. Możemy po kolei ustawiać szerokość div'a dla różnych rozmiarów ekranu np. lg-8 md-6 itd lub ustawić rozmiar tylko dla jednego rozmiaru ekranu, a Bootstrap dobierze, dla pozostałych rozmiarów ekranu domyślne ustawienia np. lg-6. Jednak to tylko wartości, aby działały poprawnie musimy zastosować odpowiednią konstrukcję np: col-lg-6 - czyli kolumna (col), dalej po myślniku rozmiar ekranu "lg", następnie po myślniku szerokość div'a  "6" jakie 6/12, bo 12 to maksymalna szerokość w siatce Bootstrap'a. Jeżeli chodzi o odsunięcie od krawędzi to ponownie zaczynamy "col",myślnik,  rozmiar ekranu, ale dalej dopisujemy już "offset", czyli odsunięcie od lewej krawędzi, a następnie wartość - o ile kolumn odsuwamy, np. col-lg-offset-3.
Aby przypisać do div'a którąś z wymienionych wyżej własności, po prostu nadajemy mu taką klasę np. <div class="col-lg-offset-3">...</div> lub nawet kilka np. <div class="col-lg-offset-3 col-lg-6">...</div>

Wracając jednak dalej do twojej strony to:
Umieść div'a z klasą carousel-inner wewnątrz nowego div'a o klasach: col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 (div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 ")
W pliku css zapisz klasy: .panel, .page-header {width:100%;}; page-header: margin-top:10px; @media (min-width: 1200px){.container {width: 75%; max-width: 1300px;}}

komentarz 8 lipca 2017 przez Erhart Początkujący (280 p.)
Dzięki, nie mogę znaleźć:

"Usuń przy:
header.carousel - height
header.carousel .fill  - width, heigh" gdzie to masz html czy css?
komentarz 8 lipca 2017 przez JayJay Mądrala (6,020 p.)
Przepraszam nie wyjaśniłem,
Stworzyłeś plik CSS, tam wystylizowałeś takie elementy jak " header.carousel" i  "header.carousel .fill". Miałem na myśli, abyś usunął dla
header.carousel  właściwość height (oczywiście wraz z wartością) oraz dla
header.carousel .fill  właściwości width i heigh (wraz z ich wartościami)
0 głosów
odpowiedź 7 lipca 2017 przez Erhart Początkujący (280 p.)
<head>

    <meta charset="utf-8">
    <meta name="keywords" content="chachaj, toruń, drewno, drzewo, przedsiębiorstwo, Wiesław Chachaj, Owsiana 3, transport, chachaj.pl">
    <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Przedsiębiorstwo Chachaj. Świadczy usługi w zakresie transportu drewna dłużycowego, kłodowanego oraz krótkiego do 1,8 m.

Oferujemy również państwu sezonowane i świeże drewno kominkowe buk i dąb.

Naszą działalnością obejmujemy terenie całej Polski .

Chętnie nawiążemy stałą współpracę.

Świadczymy także usługi naprawy i diagnostyki samochodów ciężarowych.">
    <meta name="author" content="Zbigniew Kożuchowski">

    <title>Chachaj</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/modern-business.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
              
               
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="">Oferta</a>
                    </li>
                    
                    <li>
                        <a href="o_firmie">O firmie</a>
                    </li>
                    
                    <li>
                        <a href="kontakt">Kontakt</a>
                    </li>
                    
                    
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
        
    </nav>
   

    <!-- Header Carousel -->
    <header id="myCarousel" class="carousel slide">
        
        <!-- Indicators -->
        
         <!-- Logo -->
         <picture>

            <div class="navbar-brand">

            </div>

           <div class="col-lg-12 logo">
                <img  src="img/LOGO.png" class="img-reponsive"/>
           </div>

 

        </picture>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
            <div class="item active">
                <img class="fill" src="img/1.jpg"></>
                <div class="carousel-caption">
                   
                </div>
            </div>
            <div class="item">
                <img class="fill" src="img/2.jpg"></>
                <div class="carousel-caption">
                    
                </div>
            </div>
            <div class="item">
                <img class="fill" src="img/3.jpg"></>
                <div class="carousel-caption">
                   
                </div>
            </div>
        

        
    </header>

    <!-- Page Content -->
    <div class="container">

        <!-- Marketing Icons Section -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Szanowni Państwo
                </h1>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 style="color:black;"><img src="img/znak choinka.png" class="tree"/> Przedsiębiorstwo Chachaj </h4>
                    </div>
                    <div class="panel-body">
                        <p>Świadczy usługi w zakresie transportu drewna dłużycowego,
kłodowanego oraz krótkiego do 1,8 m.</p>
<p>Oferujemy również państwu sezonowane i świeże drewno kominkowe buk i dąb.</p>
<p>Naszą działalnością  obejmujemy terenie całej Polski .</p>
<p>Chętnie nawiążemy stałą współpracę.</p>
<p>Świadczymy także usługi naprawy i diagnostyki samochodów ciężarowych.
</p>
                       
                    </div>
                </div>
            </div>
            
            
        </div>
        <!-- /.row -->

       
        </div>
        <!-- /.row -->

        <!-- Features Section -->
        
        <!-- /.row -->

      

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; 2017 Firma „Chachaj” Wiesław Chachaj</p>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Script to Activate the Carousel -->
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>

</body>

 

0 głosów
odpowiedź 7 lipca 2017 przez Erhart Początkujący (280 p.)
CSS: https://codepen.io/Erhart/pen/BZOmeY

 

Podobne pytania

0 głosów
2 odpowiedzi 2,085 wizyt
0 głosów
2 odpowiedzi 887 wizyt
0 głosów
1 odpowiedź 212 wizyt

93,187 zapytań

142,203 odpowiedzi

322,024 komentarzy

62,515 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2581p. - dia-Chann
  2. 2537p. - Łukasz Piwowar
  3. 2528p. - Łukasz Eckert
  4. 2514p. - CC PL
  5. 2476p. - Tomasz Bielak
  6. 2445p. - Łukasz Siedlecki
  7. 2443p. - rucin93
  8. 2310p. - Michal Drewniak
  9. 2156p. - Marcin Putra
  10. 2152p. - Adrian Wieprzkowicz
  11. 2105p. - Mikbac
  12. 2048p. - Anonim 3619784
  13. 1733p. - rafalszastok
  14. 1701p. - Michał Telesz
  15. 1580p. - ssynowiec
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...