Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

Przylegające obrazy do siebie html/css

Loczuch

Przez Loczuch
w Niezbędnik Programisty - Archiwum

Rekomendowane odpowiedzi

Loczuch Pasjonat

Loczuch

Opublikowano
Pasjonat

Loczuch

Opublikowano

Cześć!

Mam pewien problem, mianowicie chciałabym stworzyć coś na podobieństwo tego: http://azymut.maurycy.eu

A dokładniej tych 8 kwadratów na dole strony. Czy ktoś umie takie coś napisać w HTML/CSS? Ważne, aby podpisy zdjęć zostały w tym miejscu, w którym są... 

Wynagradzam dużą ilością lajków (+/-80)

 

Z góry dziękuję!

(: .ćyż usnes am eiN

Gość

Gość

Opublikowano

Gość

Opublikowano

Proszę =)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div {
        display:table;
      }
      div > .a {
        display:table-row;
      }
      div > .a > span {
        display:table-cell;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="a">
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
      </div>
      <div class="a">
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
      </div>
    </div>
  </body>
</html>
 
http://prntscr.com/90yef0

I tu z napisami

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .imgs {
        display:table;
      }
      .row {
        display:table-row;
      }
      .cell  {
        display:table-cell;
      }
      .image {
         position: relative;
      }
      h2 {
         position: absolute;
         top: 40px;
         width: 100%;
      }
      h2 span {
       color: white;
       font: bold 24px/45px Helvetica, Sans-Serif;
       letter-spacing: -1px;
       background: rgb(0, 0, 0);
       background: rgba(0, 0, 0, 0.7);
       padding: 10px;
    }
    </style>
  </head>
  <body>
    <div class="imgs">
      <div class="row">
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
      </div>
      <div class="row">
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
      </div>
    </div>
  </body>
</html>

http://prntscr.com/90yp9a
Loczuch Pasjonat

Loczuch

Opublikowano
Pasjonat

Loczuch

  • Autor
Opublikowano

 

Proszę =)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div {
        display:table;
      }
      div > .a {
        display:table-row;
      }
      div > .a > span {
        display:table-cell;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="a">
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
      </div>
      <div class="a">
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png' width='225'></span>
      </div>
    </div>
  </body>
</html>
 
http://prntscr.com/90yef0

I tu z napisami

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .imgs {
        display:table;
      }
      .row {
        display:table-row;
      }
      .cell  {
        display:table-cell;
      }
      .image {
         position: relative;
      }
      h2 {
         position: absolute;
         top: 40px;
         width: 100%;
      }
      h2 span {
       color: white;
       font: bold 24px/45px Helvetica, Sans-Serif;
       letter-spacing: -1px;
       background: rgb(0, 0, 0);
       background: rgba(0, 0, 0, 0.7);
       padding: 10px;
    }
    </style>
  </head>
  <body>
    <div class="imgs">
      <div class="row">
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
      </div>
      <div class="row">
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
        <div class="image cell">
          <img src="http://i0.wp.com/azymut.maurycy.eu/wp-content/uploads/2015/10/stockvault-paraglider-in-sky138850.jpg?resize=590%2C590" alt="" width='225' />
          <h2><span>O Mnie</span></h2>
        </div>
      </div>
    </div>
  </body>
</html>

http://prntscr.com/90yp9a

Super! Powiedz proszę czy umiesz zrobić tak, aby wszystko było responsywne? Zobacz jak to jest na aktualnej stronie tamtej. Gdy przejdzie do szerokości mniejszej niż tablet (chyba) to są dwa obrazki w wierszu... Jak już powiedziałam, wynagradzam dużą ilością lajków :)

(: .ćyż usnes am eiN

Jakub Specjalista

Jakub

Opublikowano
Specjalista

Jakub

Opublikowano

Możesz się pokusić o jakiś framework HTML/CSS, nic nie sugeruję, bo zaraz znowu ktoś na mnie nakrzyczy ( xD). 

 

Na tej stronie co podałaś, koder użył media queries. Tutaj możesz o tym poczytać więcej

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Swoją drogą zamiast na sztywno ustawiać szerokość obrazka w znaczniku HTML'a lepiej to zrobić w pliku .css. Jeśli masz jakieś pytania co do MQ to wal śmiało :D.

Loczuch Pasjonat

Loczuch

Opublikowano
Pasjonat

Loczuch

  • Autor
Opublikowano

Możesz się pokusić o jakiś framework HTML/CSS, nic nie sugeruję, bo zaraz znowu ktoś na mnie nakrzyczy ( xD). 

 

Na tej stronie co podałaś, koder użył media queries. Tutaj możesz o tym poczytać więcej

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Swoją drogą zamiast na sztywno ustawiać szerokość obrazka w znaczniku HTML'a lepiej to zrobić w pliku .css. Jeśli masz jakieś pytania co do MQ to wal śmiało :D.

 

Trochę wiem jak działają MQ, jednak nie wiem jak użyć ich w przypadku tego kodu, co kolega napisał wyżej.. :(

 

@Edit

Czyli chciałabym, aby przy małej szerokości strony były tworzone cztery wiersze obrazków (w każdym wierszu wtedy po dwa obrazki)

(: .ćyż usnes am eiN

Jakub Specjalista

Jakub

Opublikowano
Specjalista

Jakub

Opublikowano

Ajajaj nie czaje dlaczego te obrazki były robione na planie tabeli. 

 

Tutaj łap przerobiony kod

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        .obrazki img {
            width: 25%;
            float: left;
        }
    </style>
  </head>
  <body>
    <div>
      <div class="obrazki">
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
      </div>
      <div class="obrazki">
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
      </div>
    </div>
  </body>
</html>

W media queries łapiesz rozdziałke jaką potrzebuje i dla rozdziałki większej od x robisz sobie

        .obrazki img {
            width: 25%;
            float: left;
        } 

a dla rozdziałki mniejszej od x

        .obrazki img {
            width: 50%;
            float: left;
        } 

W skrócie w pierwszej opcji obrazek zajmuje 1/4 powierzchni, czyli są 4 obrazki w 1 rzędzie, w drugim przypadku 2, bo jeden zajmuje 50%. Odpowiedni media queries i masz to co chcesz :P.

Loczuch Pasjonat

Loczuch

Opublikowano
Pasjonat

Loczuch

  • Autor
Opublikowano

Ajajaj nie czaje dlaczego te obrazki były robione na planie tabeli. 

 

Tutaj łap przerobiony kod

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        .obrazki img {
            width: 25%;
            float: left;
        }
    </style>
  </head>
  <body>
    <div>
      <div class="obrazki">
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
      </div>
      <div class="obrazki">
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
        <span><img src='http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png'></span>
      </div>
    </div>
  </body>
</html>

W media queries łapiesz rozdziałke jaką potrzebuje i dla rozdziałki większej od x robisz sobie

        .obrazki img {
            width: 25%;
            float: left;
        } 

a dla rozdziałki mniejszej od x

        .obrazki img {
            width: 50%;
            float: left;
        } 

W skrócie w pierwszej opcji obrazek zajmuje 1/4 powierzchni, czyli są 4 obrazki w 1 rzędzie, w drugim przypadku 2, bo jeden zajmuje 50%. Odpowiedni media queries i masz to co chcesz :P.

 

Niestety to nie działa :( Poza tym, jak te media queries zrobic? I... te obrazki są bez podpisów :(

(: .ćyż usnes am eiN

Loczuch Pasjonat

Loczuch

Opublikowano
Pasjonat

Loczuch

  • Autor
Opublikowano

Pokaż swój kod, będzie łatwiej pomóc :P.

Dobra, jedyne co wymyśliłam to to:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .pierwszy{
float:left;
}
    }
    @media (max-width:499px){img{min-width:100%;}}
    </style>
  </head>



<div style="text-align:center;">
<div class="pierwszy" ><img src="http://azymut.maurycy.eu/wp-content/uploads/2015/11/stockvault-paraglider-in-sky138850-2_oferta.jpg" style="max-width:200px;" ><img src="http://azymut.maurycy.eu/wp-content/uploads/2015/11/stockvault-paraglider-in-sky138850-2_oferta.jpg" style="max-width:200px;" ><img src="http://azymut.maurycy.eu/wp-content/uploads/2015/11/stockvault-paraglider-in-sky138850-2_oferta.jpg" style="max-width:200px;" ><img src="http://azymut.maurycy.eu/wp-content/uploads/2015/11/stockvault-paraglider-in-sky138850-2_oferta.jpg" style="max-width:200px;" ><img src="http://azymut.maurycy.eu/wp-content/uploads/2015/11/stockvault-paraglider-in-sky138850-2_oferta.jpg" style="max-width:200px;" ><img src="http://azymut.maurycy.eu/wp-content/uploads/2015/11/stockvault-paraglider-in-sky138850-2_oferta.jpg" style="max-width:200px;" ><img src="http://azymut.maurycy.eu/wp-content/uploads/2015/11/stockvault-paraglider-in-sky138850-2_oferta.jpg" style="max-width:200px;" ><img src="http://azymut.maurycy.eu/wp-content/uploads/2015/11/stockvault-paraglider-in-sky138850-2_oferta.jpg" style="max-width:200px;" >
</div>
</div>


</html>

Niestety, Wasza pomoc niczego mi nie dała :/

(: .ćyż usnes am eiN

Hans Kloss PL Uczeń

Hans Kloss PL

Opublikowano
Uczeń

Hans Kloss PL

Opublikowano

@Loczuch

Masz błąd - jedna klamra za dużo.

 

Jak szukasz gotowca to zły dział, poza tym nie cytuj postów które są tuż nad Twoimi!

Mało tego - rzadko kiedy jest potrzeba cytowania całego postu.

Chcesz precyzyjnej i zrozumiałej odpowiedzi? - Zadaj precyzyjne i zrozumiałe pytanie. Nie przyjmuję zleceń.
Nie odpowiadam na priv na pytania, które można zadać na forum. Chcesz mojej pomocy - oznacz mnie w poście =>  @"Hans Kloss PL" 

Loczuch Pasjonat

Loczuch

Opublikowano
Pasjonat

Loczuch

  • Autor
Opublikowano

Super! Wymyśliłam :D

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        .obrazkii img {
            width: 25%;
            float: left;
        }
@media screen and (max-width: 885px) {.obrazkii img {
            width: 50%;
            float: left;
        }}
@media screen and (max-width: 590px) {.obrazkii img {
            width: 100%;
            float: left;
        }}
    </style>
  </head>
  <body>
    <div>
      <div class="obrazkii"><span><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></span><span><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></span>        <span><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></span><span><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></span>
      </div>
      <div class="obrazkii">
<span><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></span><span><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></span><span><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></span><span><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></span>
      </div>
    </div>
  </body>
</html>

Można zamykać temat :) Dziękuję wszystkim za pomoc!

(: .ćyż usnes am eiN

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...