Skocz do zawartości

Pytanie Etykieta na zdjeciach


hubson16

Rekomendowane odpowiedzi

Witam.. mam takie pytanko jak dodac etykiety na zdjeciach , chodzi mi o takie niby przyciski na zdjeciach.

Tworze "porownywarke esklepow" i chcialbym dodac na zdjeciu np Nike takie "etykiety" jak Buty / Dresy / Odziez / Zegarki itp.

Jest ktos w stanie mi pomoc i podeslac jakis poradnik / napisac mi to / wspomoc jak to mozna zrobic ? 

Odnośnik do komentarza

Dołącz do nas za darmo i naucz się zarabiać!

  • Dostęp do darmowych poradników pokazujących krok po kroku jak zarabiać w Internecie
  • Sposoby zarabiania niepublikowane nigdzie indziej
  • Aktywna społeczność, która pomoże Ci rozwiązać problemy i doradzi
  • Profesjonalne treści na temat SEO, social media, afiliacji, kryptowalut i wiele więcej!

 

 

@imgkasa No niestety nie masz racji. Przy kilku tagach robi się to niewygodne po prostu, mimo wykorzystania transform. Tutaj najlepiej nie dawać obrazka jako img, ale jako background diva, w którym umieścimy etykiety.

<div id="nike">
  <span class="etykieta">Bluzy</span>
  <span class="etykieta">Buty</span>
  <!-- i tak dalej -->
</div>
#nike {
  background-image: url(nike.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 20vh;
  width: 20vh;
}

#etykieta {
  background-color: black;
  color: white;
  padding: .25rem;
}

Tutaj wartości liczbowe - height, width i padding można podmienić. To jest przykładowe rozwiązanie problemu.

Edytowane przez krzmaciek
  • Super 2

Chętnie pomogę w sprawach związanych ze stronami internetowymi (HTML, CSS, WebDesign). Zapraszam do kontaktu na PW.

Odnośnik do komentarza

Oczywiście. To z img miałbyś problem w RWD, czyli z responsywnością. Jakbyś chciał takie tagi przesunąć na dół tego diva #nike to dajesz mu display: flex; a na elementy (te tagi) dajesz align-self: flex-end; Nie wiem czy znasz i używasz flexboxa, ale bardzo go polecam - rozwiązuje problemy o których ktoś wcześniej nie pomyślał. Zamiast bawić się w floaty i inne masz proste narzędzie do ogarnięcia wielu layoutów.

P.S. Dodatkowo do tych divów z id np. #nike dodaj 

background-position: center;

Tak, żeby obrazek był wycentrowany (background obetnie to co się nie mieści na brzegach obrazka tak, żeby zawsze dostosowywał wielkość do rozmiaru ekranu). Wartości wielkości tych divów, których style podałem wyżej zmień na własne potrzeby i w zależności tego jak te elementy obok siebie układasz - śmiało używaj wartości procentowych, vw i vh - czyli tych, które do tego zastosowania pasują. A najlepiej w ogóle użyć tutaj flexa. Na element przechowujący te divy typu #nike, #puma itp. daj display: flex; a samym elementom (wszystkim) możesz dać jednakowe klasy, a tą klase ostylować na flex-grow: 1; i wtedy ci się będą elementy dostosowały (rosły) wraz z wielkością ekranu. Dodatkowo właściwość flex-wrap: wrap; nadana na element rodzica tych elementów (tzn. rodzica elementów #nike itp.) pozwoli im (w razie kiedy ekran byłby za mały) układać się pod sobą.

Edytowane przez krzmaciek

Chętnie pomogę w sprawach związanych ze stronami internetowymi (HTML, CSS, WebDesign). Zapraszam do kontaktu na PW.

Odnośnik do komentarza

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Ta strona korzysta z ciasteczek aby świadczyć usługi na najwyższym poziomie. Dalsze korzystanie z witryny oznacza zgodę na ich wykorzystanie. Polityka prywatności .