БЛОГ НА HUSL


Смещение картинки

Автор вопроса: Rerima

У меня проблема я пишу сайт и я добавила прокрутку сайта. И у меня возникла проблема. У меня они куда то ушли я и перемещала их absolute делала но и они улетают!

<!DOCTYPE html>
<html>


<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
            font-size: 28px;
        }

        .header {
            position: fixed;
            top: 0;
            z-index: 1;
            width: 100%;
            background-color: #f1f1f1;
        }

        .header h2 {
            text-align: center;
        }

        .progress-container {
            width: 100%;
            height: 8px;
            background: #ccc;
        }

        .progress-bar {
            height: 8px;
            background: #4caf50;
            width: 0%;
        }

        .content {
            padding: 100px 0;
            margin: 50px auto 0 auto;
            width: 80%;
        }
        phow{
            height:260px ;
            width: 245px;
        }
    </style>
</head>
<body>

<div class="header">
    <h2>Незнайка в Солнечном городе</h2>
    <div class="progress-container">
        <div class="progress-bar" id="myBar"></div>
    </div>
</div>


    <title>Незнайка в солнечном городе</title>
    <h1 align="center">Глава 1.</h1>
    <h3 align="center">НЕЗНАЙКА МЕЧТАЕТ</h3>
    <p>Некоторые читатели уже, наверно, читали книгу "Приключения Незнайки и его друзей". В этой книге рассказывается о сказочной стране, в которой жили малыши и малышки, то есть крошечные мальчики и девочки, или, как их иначе называли, коротышки. Вот такой малыш-коротышка и был Незнайка. Жил он в Цветочном городе, на улице Колокольчиков, вместе со своими друзьями Знайкой, Торопыжкой, Растеряйкой, механиками Винтиком и Шпунтиком, музыкантом Гуслей, художником Тюбиком, доктором Пилюлькиным и многими другими. В книге рассказывается о том, как Незнайка и его друзья совершили путешествие на воздушном шаре, побывали в Зеленом городе и городе Змеевке, о том, что они увидели и чему научились. Вернувшись из путешествия, Знайка и его друзья взялись за работу: стали строить мост через реку Огурцовую, тростниковый водопровод и фонтаны, которые они видели в Зеленом городе.<br><br><br><br><br><br><br><br>

    </p><br/><br/><br/><br/><br/><br/><br/>
    <p>Коротышкам все это удалось сделать, после чего они принялись проводить на улицах города электрическое освещение, устроили телефон, чтоб можно было разговаривать друг с другом, не выходя из дома, а Винтик и Шпунтик под руководством Знайки сконструировали телевизор, чтоб можно было смотреть дома кинокартины и театральные представления.
    </p>
    <p>Как уже всем известно, Незнайка после путешествия значительно поумнел, стал учиться читать и писать, прочитал всю грамматику и почти всю арифметику, стал делать задачки и уже даже хотел начать изучать физику, которую в шутку называл физикой-мизикой, но как раз тут ему почему-то расхотелось учиться. Это часто случается в стране коротышек. Иной коротышка наобещает с три короба, наговорит, что сделает и это и то, даже горы свернет и вверх ногами перевернет, на самом же деле поработает несколько дней в полную силу, а потом снова понемножку начинает отлынивать.<body>
<img id="ph" align="center" src="https://i.pinimg.com/originals/25/18/63/251863032aa45fc14c65ef6649016a96.jpg" width="245px" height="300 px"

     style="position:absolute;right: 1670px;left: 120px"/>
<img id="phow" align="center" src="https://avatars.mds.yandex.net/get-pdb/1899227/12e53115-a5f7-49aa-8651-de6c153fb361/s1200" width="280" height="260 px"
     style="position:absolute;right: 1200px;left: 20px;bottom: 510px"/>
</body>



    </head>
    <body>
    <img id="pho" align="center" src="https://i.pinimg.com/originals/25/18/63/251863032aa45fc14c65ef6649016a96.jpg" width="245px" height="320 px"
         style="position:absolute;right: 1670px;left: 120px;bottom: 2px"/>

    <table align="top" border="2 width="100%" border="1" bgcolor="#f1f29b;"; >


    </tr>
    <tr id="s" align="top">
        <td >
            <a href="ssilki.html"align = "right">Информация</a>
        </td>
    </tr>
    <tr>
        <td id="r"align="top">
            <a href="Sayt.html"align = "right">Главная</a>
        </td>
    <tr>
        <td id="p" align="top">
            <a href="Romans.html."align = "right">Романы</a>
        </td>

    </tr>
    <tr>
        <td id="y"align="top">
            <a href="kinder.html."align = "right">Детское</a>
        </td>
    </tr>
    <tr>
        <td id="c"align="top">
            <a href="fantastic.html."align = "right">Фантастика</a>
        </td>
    <tr/>
    </body>
    </html>

Источник

Ответы (2 шт):

Автор решения: Daniel Shevchenko

Вставьте тег <img> туда, где должна быть картинка. Далее для отступов используйте свойство margin.

→ Ссылка
Автор решения: Arcadiy 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
            font-size: 28px;
        }
.photos{width:260px;
height:260px;
display:inline;
position:relative;
position: relative;}
        .header {
            position: fixed;
            top: 0;
            z-index: 1;
            width: 100%;
            background-color: #f1f1f1;
        }
.tablestd{display:block;}
        .header h2 {
            text-align: center;
        }

        .progress-container {
            width: 100%;
            height: 8px;
            background: #ccc;
        }

        .progress-bar {
            height: 8px;
            background: #4caf50;
            width: 0%;
        }
td {
float: left;
padding: 5px;
margin: 5px;
}
        .content {
            padding: 100px 0;
            margin: 50px auto 0 auto;
            width: 80%;
        }
       
    </style>
</head>
<body>

<div class="header">
    <h2>Незнайка в Солнечном городе</h2>
    <div class="progress-container">
        <div class="progress-bar" id="myBar"></div>
    </div>
</div>
    <title>Незнайка в солнечном городе</title>
    <h1 align="center">Глава 1.</h1>
    <h3 align="center">НЕЗНАЙКА МЕЧТАЕТ</h3>
    <p>Некоторые читатели уже, наверно, читали книгу "Приключения Незнайки и его друзей". В этой книге рассказывается о сказочной стране, в которой жили малыши и малышки, то есть крошечные мальчики и девочки, или, как их иначе называли, коротышки. Вот такой малыш-коротышка и был Незнайка. Жил он в Цветочном городе, на улице Колокольчиков, вместе со своими друзьями Знайкой, Торопыжкой, Растеряйкой, механиками Винтиком и Шпунтиком, музыкантом Гуслей, художником Тюбиком, доктором Пилюлькиным и многими другими. В книге рассказывается о том, как Незнайка и его друзья совершили путешествие на воздушном шаре, побывали в Зеленом городе и городе Змеевке, о том, что они увидели и чему научились. Вернувшись из путешествия, Знайка и его друзья взялись за работу: стали строить мост через реку Огурцовую, тростниковый водопровод и фонтаны, которые они видели в Зеленом городе.</p>
    <p>Коротышкам все это удалось сделать, после чего они принялись проводить на улицах города электрическое освещение, устроили телефон, чтоб можно было разговаривать друг с другом, не выходя из дома, а Винтик и Шпунтик под руководством Знайки сконструировали телевизор, чтоб можно было смотреть дома кинокартины и театральные представления.
    </p>
    <p>Как уже всем известно, Незнайка после путешествия значительно поумнел, стал учиться читать и писать, прочитал всю грамматику и почти всю арифметику, стал делать задачки и уже даже хотел начать изучать физику, которую в шутку называл физикой-мизикой, но как раз тут ему почему-то расхотелось учиться. Это часто случается в стране коротышек. Иной коротышка наобещает с три короба, наговорит, что сделает и это и то, даже горы свернет и вверх ногами перевернет, на самом же деле поработает несколько дней в полную силу, а потом снова понемножку начинает отлынивать.</p>
<img id="ph" src="https://i.pinimg.com/originals/25/18/63/251863032aa45fc14c65ef6649016a96.jpg" class="photos"/>
<img id="phow" src="https://avatars.mds.yandex.net/get-pdb/1899227/12e53115-a5f7-49aa-8651-de6c153fb361/s1200" class="photos"/>
    <img id="pho" src="https://i.pinimg.com/originals/25/18/63/251863032aa45fc14c65ef6649016a96.jpg" class="photos"/>
    <table width="100%">
     <tr id="s">
        <td id="r" class="tablestd">
            <a href="ssilki.html"align = "right">Информация</a>
        </td>
  
   
        <td id="r" class="tablestd">
            <a href="Sayt.html"align = "right">Главная</a>
        </td>
  
        <td id="p" class="tablestd">
            <a href="Romans.html."align = "right">Романы</a>
        </td>

  
  
        <td id="y" class="tablestd">
            <a href="kinder.html."align = "right">Детское</a>
        </td>
  
        <td id="c" class="tablestd">
            <a href="fantastic.html."align = "right">Фантастика</a>
        </td>
    <tr/>
    </table>
    </body>
    </html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.