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

Strona rozciąga tekst oraz pozostawia puste miejsca

VPS Starter Arubacloud
0 głosów
191 wizyt
pytanie zadane 15 kwietnia 2022 w HTML i CSS przez Sic Dyskutant (8,510 p.)

Witam, 

Staram się ustawić elementy na stronie za pomocą boostrap, część z nich jak np. navbar ustawiłem poprawnie jak również zdjęcie na "home page". Mam natomiast problem z tekstem który, powinien się znajdować na tym zdjęciu, nie poprawnie jest pod nim. Następnym problem mam z ustawieniem marginesów w jednej z sekcji, nie mogę ich odpowiednio wyrównać do środka, podobna sytuacja jest na tytułami sekcji. Stopka zajmuje nie wielką cześć, co jest akurat prawidłowe, jednak pod nią pojawia się pusta przestrzeń której nie powinno być. Przesyłam link do repozytorium.

Repozytorium strony

1
komentarz 15 kwietnia 2022 przez Wiciorny Ekspert (269,120 p.)
wrzuć kod z źródła problemu, a nie każ jeszcze komuś szukać po plikach...
komentarz 15 kwietnia 2022 przez Sic Dyskutant (8,510 p.)
edycja 15 kwietnia 2022 przez Sic
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Coffee Roaster</title>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Source+Sans+Pro:wght@300;600&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <nav class="navbar navbar-expand-md fixed-top navbar-dark">
      <div class="logo">
        <a class="navbar-brand" href="#">EL TIGRE</a>
        <h5 class="navbar-brand d-block">VENEZUELA COFFEE BEANS</h5>
      </div>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#mobile-menu"
        aria-controls="mobile-menu"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mobile-menu">
        <ul class="navbar-nav navbar">
          <li><a class="nav-link" href="#">HOME</a></li>
          <li><a class="nav-link" href="#">PRODUCTS</a></li>
          <li><a class="nav-link" href="#">ABOUT</a></li>
          <li><a class="nav-link" href="#">CONTACT</a></li>
        </ul>
        <div
          class="btn-toolbar mb-2 ml-auto"
          role="toolbar"
          aria-label="Toolbar with button groups"
        ></div>
      </div>
    </nav>

    <header class="splash">
      <div class="splash-inner position-relative text-center">
        <img src="images/background.png" class="w-100" alt="beans of Coffee" />
        <div class="description position-absolute">
          <p class="section-title font-weight-bold">
            HOME OF <span>ORIGINAL TASTES</span>
          </p>
        </div>
        <div class="discover position-absolute">
          <p>DISCOVER</p>
          <i class="icon-arrow btn"></i>
        </div>
      </div>
    </header>

    <section class="products">
      <h1 class="section-title text-center">PRODUCTS</h1>
      <div class="row">
        <article class="product-right">
          <div class="product-image">
            <img
              src="images/coffee-1.png"
              class="rounded float-right"
              alt="coffee_1"
            />
          </div>
          <div class="product-description pt-5">
            <div class="row">
              <h1 class="product-title text-center">01. LA LAGARTIJA</h1>
              <p class="section-title"></p>
              <p class="description">
                Mysterious and treacherous... The best choice for the start of
                you journey! It will provide you a rich delicious flavour.
              </p>
              <!-- ratings -->
              <div class="product-rating">
                <p>ROASTING: <span>5/10</span></p>
                <p>INTENSIVE: <span>6/10</span></p>
                <i></i>
              </div>
            </div>
          </div>
        </article>
        <article class="product-left">
          <div class="product-image">
            <img
              src="images/coffee-2.png"
              class="rounded float-left"
              alt="coffee_2"
            />
          </div>
          <div class="product-description p-5">
            <h1 class="product-title text-center">02. EL TIGRE</h1>
            <div class="row">
              <div class="section-title"></div>
              <p class="description text-right">
                Really dark coffee, only for the real gourments. It has bitter
                flavour of grapefruits and is mixed with a little bit of peanuts
                with caramel.
              </p>
            </div>
            <i></i>
            <!-- ratings -->
            <div class="product-rating">
              <p>ROASTING: <span>8/10</span></p>
              <p>INTENSIVE: <span>9/10</span></p>
            </div>
          </div>
        </article>
        <article class="product-right">
          <div class="product-image">
            <img
              src="images/coffee-3.png"
              class="rounded float-right"
              alt="coffee_3"
            />
          </div>
          <div class="product-description p-5">
            <h1 class="product-title text-center">03. LA CURACARACHA</h1>
            <div class="row">
              <p class="description text-right">
                Sweet and intense with a big amount of different flavours.
                Caramel, grapes, strawberry, you name it! It's great choice for
                warm summer days.
              </p>
              <div class="section-title"></div>
            </div>
            <i></i>
            <!-- ratings -->
            <div class="product-rating">
              <p>ROASTING: <span>3/10</span></p>
              <p>INTENSIVE: <span>7/10</span></p>
            </div>
          </div>
        </article>
      </div>
    </section>

    <section class="about">
      <div class="row">
        <img src="images/about-us.jpg" class="w-100" alt="about-us" />
        <h1 class="section-title text-center font-weight-bold">ABOUT US</h1>
        <p class="text-1">
          Who are we? Just a bunch of friends with a love for a good coffee and
          desire to create something new, something original.
        </p>
        <p>
          Our coffees reflect us- young, wild and free. We are on the journey of
          new tastes...
        </p>
        <p class="motto">Join us!</p>
      </div>
    </section>

    <!-- Footer -->
    <footer class="page-footer">
      <div class="footer-copyright text-center py-3">
        <i class="icon-copyright"></i>
        <a href="/"> 2021 EL TIGRE inc.</a>
      </div>
    </footer>

    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script src="js/script.js" type="module"></script>
  </body>
</html>

2 odpowiedzi

+2 głosów
odpowiedź 17 kwietnia 2022 przez VBService Ekspert (251,210 p.)
wybrane 19 kwietnia 2022 przez Sic
 
Najlepsza

Stopka zajmuje ..., jednak pod nią pojawia się pusta przestrzeń

Zapisz w ten sposób

    <footer class="page-footer">
      <div class="footer-copyright text-center">
        <i class="icon-copyright"></i>
        <a href="/"> 2021 EL TIGRE inc.</a>
      </div>
    </footer>

bez klasy  py-3

komentarz 19 kwietnia 2022 przez Sic Dyskutant (8,510 p.)
Dzięki, też już to znalazłem.
0 głosów
odpowiedź 17 kwietnia 2022 przez pablop76 VIP (123,060 p.)
edycja 17 kwietnia 2022 przez pablop76

Przejdź na bt 5 i użyj odpowiednich klas 

position-absolute top-50 start-50 translate-middle

 Nie mogę znaleźć analogicznych w bt 4. Jeżeli nie ma to dodaj do css. Nie korzystam z bt wolę uikit :)

komentarz 17 kwietnia 2022 przez Sic Dyskutant (8,510 p.)
Dzięki staram się jak mogę korzystać z dokumentacji. Jednak nie wiem dlaczego wysokość strony ustawiła się w tak nie typowy sposób, mianowicie pod stopką jest jeszcze miejsce mimo, że stopka jest już na samym dole.
1
komentarz 17 kwietnia 2022 przez VBService Ekspert (251,210 p.)

mianowicie pod stopką jest jeszcze miejsce mimo, że stopka jest już na samym dole.

a próbowałeś

html,
body {
  padding: 0;
  margin: 0;
}

 

komentarz 17 kwietnia 2022 przez Sic Dyskutant (8,510 p.)
Tak niestety to nie pomogło.
1
komentarz 17 kwietnia 2022 przez VBService Ekspert (251,210 p.)

Wygląda, że Twój footer jest "rozciągnięty" do spodu strony

html,
body {
  margin: 0;
  padding: 0;
}
footer {
  border: 1px solid red;
}

 

z poziomu BT masz dla

<div class="footer-copyright text-center py-3">
        <i class="icon-copyright"></i>
        <a href="/"> 2021 EL TIGRE inc.</a>
</div>

 

Podobne pytania

0 głosów
1 odpowiedź 265 wizyt
pytanie zadane 12 sierpnia 2021 w HTML i CSS przez Grzegorz Mikina Dyskutant (8,060 p.)
0 głosów
1 odpowiedź 471 wizyt
pytanie zadane 29 października 2019 w HTML i CSS przez Avalansz Użytkownik (580 p.)
0 głosów
0 odpowiedzi 288 wizyt
pytanie zadane 12 listopada 2016 w HTML i CSS przez Szymon Ciompała Mądrala (6,280 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...