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

3 zdjęcia na sobie w HTML/CSS

VPS Starter Arubacloud
+1 głos
436 wizyt
pytanie zadane 28 maja 2021 w HTML i CSS przez Piotrek G Nowicjusz (160 p.)

Witam

Tworzę swoją stronę i chciałbym w 1 miejscu nałożyć na siebie 3 zdjęcia. Pewnie jest to dziwne, ale 1 zdjęcie to taki mały szablon, 2 zdjęcie to koło zębate, które będzie się obracało, a 3 zdjęcie to narzędzia ;). 

Jak poprawnie zdjęcia na siebie nałożyć, aby były wycentrowane względem niebieskiego boxa? 

Próbowałem zrobić box na relative oraz 1 zdjęcie czyli inz na relative to ładnie się wycentrowało. Natomiast problem jest z następnymi zdjęciami. Dziwnie przesuwają się w różne miejsca, nie chcą się centrować, a chce je umieścić w tym szablonie (1 zdjeciu) jeden na drugim. Jak polecacie to zrobic? zdjęcie strony na dole. 

html:

<div class="box2">
                <center><img src="images/inz1.png" class="inz"></center>
                <img src="images/GEAR2.png" class="engineer">
                <img src="images/tools.png" class="tools">
</div>

 CSS:

.box2{
    position: relative;
    flex: 2;
    background: blue;
}

inz{
    position: relative;
    height: 300px;
}
.engineer{
    position: absolute;
    height: 140px;
    top: 0;
    margin: auto;
    width: auto;
}

.tools{
    position: absolute;
    height: 220px;
    display: block;

    margin-left: 0;
    margin-right: 0;
}

1 odpowiedź

+1 głos
odpowiedź 28 maja 2021 przez cava96 Gaduła (3,940 p.)
Zrób głównego div z position relative. Jego dzieci maja position absolute i możesz użyć funkcje translate do przesunięcia ich
komentarz 29 maja 2021 przez Piotrek G Nowicjusz (160 p.)

U mnie jakies dziwne rzeczy się dzieją. Jak dodaje głównego diva to usuwa mi całego niebieskiego boxa...

teraz mam box niebieski na relative a zdjecia na absolute i wychodzi coś takiego:

<div class="box2">
                <img src="images/inz1.png" class="inz">
                <img src="images/GEAR2.png" class="engineer">
                <img src="images/tools.png" class="tools">
            </div>

CSS:

.box2{
    position: relative;
    flex: 2;
    background: blue;
}


.tools{
    height: 100px;
    position: absolute;
}


.inz{
    position: absolute;
    height: 300px;
}
.engineer{
    position: absolute;
    height: 140px;
    top: 0;
    margin: auto;
    width: auto;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
    
}

 

Podobne pytania

0 głosów
3 odpowiedzi 476 wizyt
pytanie zadane 16 maja 2021 w HTML i CSS przez Hubert731 Obywatel (1,650 p.)
0 głosów
2 odpowiedzi 327 wizyt
pytanie zadane 17 września 2022 w HTML i CSS przez Vitaminka Nowicjusz (120 p.)
0 głosów
1 odpowiedź 252 wizyt

92,839 zapytań

141,780 odpowiedzi

320,848 komentarzy

62,171 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

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!

...