Wskazanie błędów

0

Cześć . mam prośbę może ktoś wskazać moje błędy na tej stronie bo widzę że są jednak nie mam pojęcia jak je naprawić. Byłbym bardzo wdzięczny za pomoc :)

0

Hmm, nawet ciężko mi jest powiedzieć o jakie błędy Ci może chodzić. Skoro Ty je widzisz, to napisz dokładnie co nie działa. Na tę chwilę:

  • w projekcie panuje chaos z plikami (masz w środku spakowanego bootstrapa - 2 razy bootstrap-4.3.1.zip oraz bootstrap-4.3.1-dist.zip)
  • fonty masz rozrzucone w katalogu głównym i folderze Fonts
  • strona kontakt.html praktycznie niczym sie nie rozni od pink.html
  • jesli strona glowna to pink.html - to powinna sie raczej nazywac index.html.
0

Chodzi głównie o plik kontakt.html
Wyjeżdżanie stopki poza dany okres.
I czemu napisy na górze przewijają się wraz ze stroną
Zaraz ogarnę ten folder

0

Napisy na górze jeśli mają być ciągle widoczne to robisz "sticky header" (w google znajdziesz jak to zrobić).
Twój <div id="slon"> jest fixed i przez to stopka wjeżdża Ci pod niego.

Ogólnie to polecałbym podzielić Ci layout strony na sensowne bloki - <div id="menu" font-family:'Roboto'> (to juz ma sens, nie licząc wpadki z źle zapisanym cssem), potem jakiś div z id = "page-content" a potem div z id "footer". W sumie to nawet może i lepiej by było gdybyś skorzystał z elementów semantycznych htmla 5 takich jak obecnie używany nav (który jest źle użyty, bo w navie masz całą stronkę) oraz footer.

7z to nadal nie jest zip :) - nie każdy użytkownik ma 7zipa czy winrara i nie kazdy będzie chciał go instalować na potrzeby rozpakowania Twojego archiwum.

0

Okej dzięki wielkie, jakbyś miał czasz to pokazałbyś mi jak mniej więcej napisać takie coś?
Chodzi mi o ten prostokąt podzielony na 6 kwadratów.

0

Nie patrzyłem na kod całej strony, ale jedynie na sam obrazek. Przygotowałem takie coś (@axelbest, to Ty zostałeś poproszony; nie obrazisz się?): https://jsfiddle.net/kxnw08qc/1/

Jeśli będzie trzeba, mogę napisać komentarze/wyjaśnić.

HTML:

<div class="container">
  <h1 class="heading">
    PORTFOLIO
  </h1>
  <div class="menu-container">
    <div>
      ILUSTRACJE
    </div>
    <div>
      PLAKATY
    </div>
    <div>
      ULOTKI
    </div>
    <div>
      POLIGRAFIA
    </div>
    <div>
      STRONY WWW
    </div>
    <div>
      FOTOGRAFIA
    </div>
  </div>
</div>

CSS:

.heading {
  text-align: center;
  font-size: 3em;
}

.menu-container {
  width: 60vw;
  height: 75vh;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  font-size: 2em;
}

.menu-container > div {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  letter-spacing: 2px;
}

.menu-container > div:nth-child(even) {
  color: black;
  background-color: pink;
}

.menu-container > div:nth-child(odd) {
  color: pink;
  background-color: black;
}

Kontener o klasie container dałem po to, byś łatwiej mógł wstawić to na stronę (możesz manipulować wtedy m.in. właściwościami display oraz position całego kontenera).

PS. Jeśli chcesz, to oczywiście możesz zamienić niektóre elementy div na elementy semantyczne header, article czy section. By było spójne z tym, co przyjąłeś na stronie.

PS2. Oczywiście nie wszystkie właściwości CSS muszą działać (lub działać tak samo) we wszystkich wersjach wszystkich przeglądarek. Sprawdź na stronie https://caniuse.com/ przez użyciem.

PS3. Dopasowałem trochę CSS, by lepiej wyglądał, no, ale to sobie już sam dopasuj wielkość czcionek i kafelków, by były zgodne z wymogami strony. :)

0
Silv napisał(a):

Nie patrzyłem na kod całej strony, ale jedynie na sam obrazek. Przygotowałem takie coś (@axelbest, to Ty zostałeś poproszony; nie obrazisz się?): https://jsfiddle.net/kxnw08qc/1/

Jeśli będzie trzeba, mogę napisać komentarze/wyjaśnić.

HTML:

<div class="container">
  <h1 class="heading">
    PORTFOLIO
  </h1>
  <div class="menu-container">
    <div>
      ILUSTRACJE
    </div>
    <div>
      PLAKATY
    </div>
    <div>
      ULOTKI
    </div>
    <div>
      POLIGRAFIA
    </div>
    <div>
      STRONY WWW
    </div>
    <div>
      FOTOGRAFIA
    </div>
  </div>
</div>

CSS:

.heading {
  text-align: center;
  font-size: 3em;
}

.menu-container {
  width: 60vw;
  height: 75vh;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  font-size: 2em;
}

.menu-container > div {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  letter-spacing: 2px;
}

.menu-container > div:nth-child(even) {
  color: black;
  background-color: pink;
}

.menu-container > div:nth-child(odd) {
  color: pink;
  background-color: black;
}

Kontener o klasie container dałem po to, byś łatwiej mógł wstawić to na stronę (możesz manipulować wtedy m.in. właściwościami display oraz position całego kontenera).

PS. Jeśli chcesz, to oczywiście możesz zamienić niektóre elementy div na elementy semantyczne header, article czy section. By było spójne z tym, co przyjąłeś na stronie.

PS2. Oczywiście nie wszystkie właściwości CSS muszą działać (lub działać tak samo) we wszystkich wersjach wszystkich przeglądarek. Sprawdź na stronie https://caniuse.com/ przez użyciem.

PS3. Dopasowałem trochę CSS, by lepiej wyglądał, no, ale to sobie już sam dopasuj wielkość czcionek i kafelków, by były zgodne z wymogami strony. :)

Dzięki wielkie, jakbyś jeszcze mógł mi powiedzieć jak stworzyć kwadrat z samym obramowaniem bez wypełnienia byłbym bardzo wdzięczny :)

0

Coś takiego?

.menu-container > div:nth-child(even) {
  color: black;
  border: 3px solid pink;
}

.menu-container > div:nth-child(odd) {
  color: pink;
  border: 3px solid black;
}
0

Chodzi mi o to jak mniej więcej zrobić takie kwadraty

0

No właśnie, to podobne do tego, co napisałem. Tutaj: https://jsfiddle.net/tx5k7ejg/9/
HTML

<h1 class="title">
  O NAS
</h1>
<div class="container">
  <figure class="square-container">
    <div class="square"></div>
    <figcaption class="square-caption">LOREM IPSUM</figcaption>
  </figure>
  <figure class="square-container">
    <div class="square"></div>
    <figcaption class="square-caption">LOREM IPSUM</figcaption>
  </figure>
  <figure class="square-container">
    <div class="square"></div>
    <figcaption class="square-caption">LOREM IPSUM</figcaption>
  </figure>
  <figure class="square-container">
    <div class="square"></div>
    <figcaption class="square-caption">LOREM IPSUM</figcaption>
  </figure>
  <figure class="square-container">
    <div class="square"></div>
    <figcaption class="square-caption">LOREM IPSUM</figcaption>
  </figure>
  <figure class="square-container">
    <div class="square"></div>
    <figcaption class="square-caption">LOREM IPSUM</figcaption>
  </figure>
</div>

CSS

.title {
  text-align: center;
}

.container {
  margin: auto;
  width: 80vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
}

.square {
  border: 5px solid black;
  box-sizing: border-box;
  /* Poniższą wysokość możesz usunąć albo dostosować - zależnie od zawartości, jaką dodasz do tego elementu. */
  height: 150px;
  width: 150px;
}

.square-container {
  box-sizing: border-box;
  margin: 10%;
}

.square-caption {
  margin: 10px;
  text-align: center;
}
0

Dzięki wielkie nawet nie wiesz jak mi pomagasz w nauce tego wszystkiego :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1