Jak stworzyć dwa przyciski (które są obok siebie i podlinkowane do osobnych treści) wyświetlające się na obrazku?

pytanie zadane 9 stycznia 2022 w HTML i CSS przez XIAOS454 Nowicjusz (160 p.)

Ktoś poratuje? Próbowałam już wiele razy, ale za każdym razem dwa przyciski są pod spodem ale bo jeden na środku a druki pod zdjęciem.

<div class="container">
  <img src="img_snow.jpg" alt="Snow">
  <button class="btn">Button</button>
</div>

.container {
  position: relative;
  width: 50%;
}

/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;

1	komentarz 9 stycznia 2022 przez VBService Ekspert (253,340 p.) @XIAOS454, Jak wstawić do pytania kod źródłowy?

komentarz 9 stycznia 2022 przez XIAOS454 Nowicjusz (160 p.)

Sorki, nie wiedziałam, że trzeba, dopiero się uczę. Znalazłam na: https://www.w3schools.com/

komentarz 9 stycznia 2022 przez CubeStorm Pasjonat (15,020 p.)

Ło matkooo, usuń w3schools z komentarza, inaczej przyjdzie wielki, zły Comandeer, porwie Cię i wywiezie daleko!

Jak będę miał dzieci to właśnie tak będę je straszył ;)

https://forum.pasja-informatyki.pl/298199/w3schools-ostatnie-slowo

1 odpowiedź

odpowiedź 9 stycznia 2022 przez VBService Ekspert (253,340 p.)

Możesz np. utworzyć kontener na przyciski.

przykład

<div class="container">
  <img src="https://picsum.photos/500/500/?random=1" alt="Snow">
  <div class="buttons">
    <button class="btn">Button</button>
    <button class="btn">Button</button>
  </div>
</div>

.container {
  position: relative;
  width: 50%;
}

/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.container .buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.container .buttons .btn {  
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;
}

komentarz 9 stycznia 2022 przez XIAOS454 Nowicjusz (160 p.)

Wow, dzięki, tylko jeszcze potrzebuje, żeby każdy przycisk był podlinkowany, ja posiłkowałam się <a href

komentarz 9 stycznia 2022 przez VBService Ekspert (253,340 p.)

Możesz dalej używać tag a np. tak

<div class="container">
  <img src="https://picsum.photos/500/500/?random=1" alt="Snow">
  <div class="buttons">
    <button class="btn"><a href="https://www.twoj-link.pl">Button</a></button>
    <button class="btn"><a href="https://www.twoj-link.pl">Button</a></button>
  </div>
</div>

...

.container .buttons .btn a {
  text-decoration: none;
}

...

komentarz 9 stycznia 2022 przez XIAOS454 Nowicjusz (160 p.)

Okej, a co gdy jak zmniejszam strone (urzadzenia mobilne) to przyciski i tak ustawiają się jeden POD drugim?

komentarz 9 stycznia 2022 przez VBService Ekspert (253,340 p.)
edycja 9 stycznia 2022 przez VBService

Responsive buttons in css

/ * Jeśli rozmiar ekranu wynosi 1024 pikseli lub więcej, ustaw rozmiar czcionki na 18px * /
@media screen and (min-width: 1024px) {
  .container .buttons .btn {
    font-size: 18px;
  }
}

/* Jeśli rozmiar ekranu ma szerokość 1023 pikseli lub mniej, ustaw rozmiar czcionki na 14 pikseli */
@media screen and (max-width: 1023px) {
  .container .buttons .btn {
    font-size: 14px;
  }
}

lub dodaj

w <head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

i użyj np.

  font-size: 2vw;
  padding: 0.5em 1em;

komentarz 10 stycznia 2022 przez XIAOS454 Nowicjusz (160 p.)

Niestety jeśli zmienię wielkośc czcionki na większą lub przyciski szersze to i tak się ustawiają pod sobą i przyciski nie sa równe. Czy ma Pan na to jakąś rade?

.container {
position: relative;
width: 100%;
}

/* Make the image responsive */
.container img {
width: 100%;
height: auto;
}

/* Style the button and place it in the middle of the container/image */
.container .buttons {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

}

.container .btn:hover {
background-color: black;
color: white;
}

.container .buttons .btn a {
text-decoration: none;

}
.btn {
display:inline-block;
background-color: #000;
color: black;
font-size: 3vw;
padding: 0.5em 3em;
border: 1px outset white;
padding: 4px
cursor: pointer;

}

komentarz 10 stycznia 2022 przez VBService Ekspert (253,340 p.)
edycja 10 stycznia 2022 przez VBService

ustaw w css-ie width dla przycisków.

<div class="container">
  <img src="https://picsum.photos/500/500/?random=1" alt="Snow">
  <div class="buttons">
    <button class="btn"><a href="https://www.twoj-link.pl">Button</a></button>
    <button class="btn"><a href="https://www.twoj-link.pl">Button xxx</a></button>
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}
 
/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}
 
/* Style the button and place it in the middle of the container/image */
.container .buttons {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
 
.container .btn:hover {
  background-color: black; /* rgba(0,0,0,1) */
  color: white;
}
 
.container .buttons .btn a {
  text-decoration: none;
}
.btn { 
  display: inline-block;
  background-color: rgba(0,0,0,0.6);
  color: white;
  font-size: 3vw;
  padding: 0.5em 3em;
  border: 1px outset white;
  padding: 4px; 
  cursor: pointer;
  width: 20vw; /* TUTAJ */
  transition: background-color 0.5s;
}