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

@dddddd · Регистрация: 19.01.2012

Студворк — интернет-сервис помощи студентам

У меня на странице есть парочка картинок и меня все устраивает, кроме одного, при уменьшение окна браузера картинки уходят за экран и при заходе с ноутбука они уже около рамки окна браузера!
Вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>background-attachment</title>
  <style>
   body {
    background-image: url(im/polka.gif);
    background-position:center;
    background-position:top;
    background-repeat: no-repeat;
  </style> 
 </head>
 <body>
 
  <div style="height:2000px;">
 
<div class="top">
   <img src="ikonky/vov.gif" style="position: absolute; top: 130px; left: 550px;">
   <img src="ikonky/font.gif" style="position: absolute; top: 260px; left: 550px;">
   <img src="ikonky/exp.gif" style="position: absolute; top: 130px; left: 680px;">
   <img src="ikonky/zg.gif" style="position: absolute; top: 130px; left: 810px;">
   <img src="ikonky/1sen.gif" style="position: absolute; top: 130px; left: 940px;">
   <img src="ikonky/2sen.gif" style="position: absolute; top: 260px; left: 680px;">
</div>
 
 
  </div>
 
 </body>
</html>

Очень прошу подсказать, как сделать так чтобы на всех экранах они были привязаны к середине.
Заранее спасибо!

@conformist · 20.01.2012, 01:29

убери у всех картинок

CSS
1
position:absolute

сделай расположение относительное, а не абсолютное

@component6 · 20.01.2012, 01:54

Сообщение от dddddd

body {
background-image: url(im/polka.gif);
background-position:center;
background-position:top;
background-repeat: no-repeat;

Скобку забыл закрыть. запись можно сократить до одной строки

HTML5
1
body{ background:transparent url('im/polka.gif') no-repeat center top; }

Добавлено через 2 минуты
конечно conformist прав. сделай так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style>
body{ background:transparent url('im/polka.gif') no-repeat center top; }
.top{ position:relative; width:800px; height:100%; margin:0px auto; padding:0px 0px; border:1px GRAY ridge; }
.my_ikons{ position:absolute; width:50px; }
</style>
</head>
<body>
 
<div style="height:2000px;">
 
<div class="top">
    <img class='my_ikons' src="ikonky/vov.gif" style=" top: 100px; left: 150px;">
    <img class='my_ikons' src="ikonky/vov.gif" style=" top: 230px; left: 150px;">
    <img class='my_ikons' src="ikonky/vov.gif" style=" top: 100px; left: 280px;">
    <img class='my_ikons' src="ikonky/vov.gif" style=" top: 100px; left: 410px;">
    <img class='my_ikons' src="ikonky/vov.gif" style=" top: 100px; left: 540px;">
    <img class='my_ikons' src="ikonky/vov.gif" style=" top: 230px; left: 280px;">
</div>
 
</div>
 
</body>
</html>

вот это извращение для чего

HTML5
1
<div style="height:2000px;">

@dddddd · 26.01.2012, 10:40 **[ТС]**

Спасибо большое, все заработало!

@Kantaria · 31.01.2012, 01:05

Сообщение от conformist

убери у всех картинок

CSS
1
position:absolute

сделай расположение относительное, а не абсолютное

Кстати место absolute можно сделать position:relative; и далее просто уравнять его как душе удобно - top,left,right и т.д.

@conformist · 31.01.2012, 01:50

Kantaria, а вы тему внимательнее читайте,
component6 именно так и сделал, добавить к его посту более нечего.

@Kantaria · 31.01.2012, 01:53

Сообщение от conformist

Kantaria, а вы тему внимательнее читайте,
component6 именно так и сделал, добавить к его посту более нечего.

разве дать человеку более подробное описание, является преступлением?)))

@conformist · 31.01.2012, 01:56

да нет, просто зачем повторяться? )

@Kantaria · 31.01.2012, 01:57

Сообщение от conformist

да нет, просто зачем повторяться? )

и то верно, просто если честно вам скажу в свое время если мне кто либо не написал бы четко как называется скрипт на английском я бы фиг , что либо понял бы ) (из-за нехватки знаний)

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@dddddd 0 / 0 / 0 Регистрация: 19.01.2012 Сообщений: 6
	26.01.2012, 10:40 [ТС]
	Спасибо большое, все заработало! 0

@conformist O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681
	31.01.2012, 01:50
	Kantaria, а вы тему внимательнее читайте, component6 именно так и сделал, добавить к его посту более нечего. 0

@conformist O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681
	31.01.2012, 01:56
	да нет, просто зачем повторяться? ) 0