Jak to zrobić. Obrazek na obrazku?

pytanie zadane 4 listopada 2017 w HTML i CSS przez RAD Obywatel (1,810 p.)
edycja 4 listopada 2017 przez RAD

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <title>Programing4you-software house </title>
         <meta name="description" content="+++++++++++m">
         <link rel="stylesheet" href="style.css">
         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
  <div class="ractangle">
    <center>
        <div id="nav">Programing4You-Software Room </div>
        <div id="poster">
            <img src="poster.img" />
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAM
            AAADsEZWCAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAADsMAAA7DAc
            dvqGQAAAAtUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMGgKD4A
            AAAPdFJOUwL98gzTvBkvSqZfk3DjgPrfG5YAAAJKSURBVDgRvVO9ixNREP/
            hXjYfxsAsyXkfycHioYLNYuMHFnmIXCFK9kT
            0rMJpY3GSaBCukU0jogjJFVcngn0CgoVN4tWC4cBOyDWC4h/h773N5nbBVgd2vn7zZufNzAP+K9l76wd//+GCSCXQUPqDcy8R0t+4rFbpsX0RCeKQ30NeOs
            Bn56M1PIwjbh1oTXFF9oHUSgyxHGPY6jxlTqeNyKoYbadYp8wsR27K8Ex6ckf78vEzEO3aKXlapJY0j2hS50FVM2bzT
            OTV0g8YW/S0ikc9I2ZsOII1POfFXaFuD2/ccnn79a1fzxLoG0WvVL67Wtx8OcesL+JsrjxXHeDS659K5IE3w97K7Ua2XKjM7BebcqFuoILcZ0dKzfktrPey
            aqL6ZQZYjj8AHlKr89uVDXKokeY+k7VkgLRpWstpRC3DmK1XUoat5wGre0juEgbGi7BFSkB3qs0FPaPudTLLXYMlwlTNrzTDfpuhFCqc0FBOM9rUWFgjnFYs
            /+KSCpDfajDalPCUMeDwqxjX+lWqJNvxOFa3o3XsTqGCU9FN/QAZf9kzC
            GMqyBVn+niAtjOaGcjyh6oXWs0qHh9EAE4sAu2zoan1Y2pXOezZMiUX5GjAotwAmk7qDs+
            J9bBB34ydXDfTxhS7RsqEwujsmJb2ZKBFOoGEC980jyCBhMuLnPR4JpENqsEsdTO+5CPBUQd2t8ZnNwCyiaq3S6/2HKZ6VwywbQbAtI
            Yy3M59aulJ6bfeyBg9ufvDWNdcMe8uBkXq1U/HfY58/1b+AcA7aR+ruHXXAAAAAElFTkSuQmCC">
        </div>
      </center>
  </div>
  <div class="squere">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur imperdiet finibus commodo. In at lorem vel
  felis varius malesuada. Nulla semper sagittis convallis. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus
   <p>non metus tincidunt nunc vulputate laoreet.
  Sed sollicitudin dui ac pretium dictum. Suspendisse et suscipit ipsum. Mauris pretium
  aliquam orci, luctus gravida mauris
  finibus vitae. Aliquam pretium nibh eget pulvinar efficitur. Donec eget neque volutpat ligula laoreet
  ultrices sed quis dolor. Phasellus tristique eros non ex volutpat pulvinar. In faucibus dapibus purus
  id facilisis. Cras mollis enim quis feugiat volutpat. Vivamus venenatis tellus</p>
  ellus, sit amet rutrum quam auctor in. Vivamus condimentum, felis sit amet porttitor
  auctor, mi augue efficitur erat, at blandit erat magna
  emper lorem. Ut ut libero euismod, rhoncus lacus eget, lobortis lectus.</p>
  </div>
  <div class="footer">

  </div>
</div>

</body>

</html>

body
{
  background-color: #303030;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 21px;
}

#container
{
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.ractangle
{
  width: 960px;
  margin: 20px;
}

.squere
{
  width: 960px;
}

.footer
{
  width: 960px;
}

#nav
{
  width: 780px;
  height: 27px;
}

#poster
{
  width: 780px;
  height: 499px;
}

Wkleiłem dla was HTML'a i CSS'a. Jak zrobić żeby ikona (Atom Edytor) była na zdjęciu macbooka na samym dole. (Będzie ich kilka, jeszcze niewiem czy będą na środku czy gdzie. Muszę potestować) Strona wczesnej fazie tworzenia. Jeszcze coś jak zmienić kolor tego i dodać tekst pod spód.

Za wszystkie odpowiedzi i komentarze dziękuję. Pozdro!!

2 odpowiedzi

odpowiedź 4 listopada 2017 przez cz3ran Stary wyjadacz (13,380 p.)

Niestety nie widzę jakie to jest zdjęcie (pobierasz je lokalnie), ale najlepszym pomysłem jest danie jakiegoś diva, któremu ustawisz background jako twoje zdjęcie, ustawisz mu

position: relative;

a następnie w nim wypozycjonujesz ikonę, dająć jej

position: absolute;

Przykład tutaj:

https://codepen.io/Czeran/pen/KyzQjq

Jeżeli jednak koniecznie chcesz to zrobić na 2 img, to ja dał bym jakiś wrapper (np. w postaci div'a), dolne zdjęcie (tło) rozciągną na wielkość diva i dał mu z-index < niż z-index elementu, który ma być na tym zdjęciu.

odpowiedź 4 listopada 2017 przez bicnet Gaduła (4,800 p.)

Tak swoją drogą , zamiast <div id="nav"> użyj po prostu <nav>,

Staraj się unikać znacznika <center> , tylko robić to w css,

Zamiast <div class="footer"> użyj <footer>