Позиционирование изображений при разных разрешениях мониторов

@hoperkrot · Регистрация: 29.01.2012

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

Проблемка такая: на страницу вывожу фотки, всего их 12. Заключены все они в div'ы, div'ы прописаны в стилях, для местоположения их использую position:absolute, top и left в процентах. Так вот, у меня монитор 23 дюйма, на нем показывается все как надо, а если беру ноут 17 или даже 15 дюймов, то все съезжает, фотки, которые не меняются по размеру, накладываются друг на друга, в общем лажа полная получается. как избавится мне от этого, что можно сделать?

@maximus2011 · 28.10.2012, 18:14

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

Проблемка такая: на страницу вывожу фотки, всего их 12. Заключены все они в div'ы, div'ы прописаны в стилях, для местоположения их использую position:absolute, top и left в процентах. Так вот, у меня монитор 23 дюйма, на нем показывается все как надо, а если беру ноут 17 или даже 15 дюймов, то все съезжает, фотки, которые не меняются по размеру, накладываются друг на друга, в общем лажа полная получается. как избавится мне от этого, что можно сделать?

А зачем абсолютную позицию то давать? Ну отделите им определенные блоки по левой стороне и правой и все. Дайте ссыль на сайт.

@hoperkrot · 28.10.2012, 18:27 **[ТС]**

maximus2011, http://maestro89.16mb.com/inde... t=&btext2=

@maximus2011 · 28.10.2012, 18:47

Сделайте обычные контейнеры с фиксированной шириной, высоту не указывайте. Пусть будет по содержимому. Либо и высоту и ширину указывайте. Но не присваивайте никаких абсолютных позиций.

Вот примерно так надо:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="wrapp">
        <div class="fotoBox">
            <div class="box"></div>
        </div>
        <div class="fotoBox">
            <div class="box"></div>
        </div>
        <div class="fotoBox">
            <div class="box"></div>
        </div>
        <div class="fotoBox">
            <div class="box"></div>
        </div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
* {
margin: 0;
padding: 0;
}
#wrapp{
width:1000px;
margin:0 auto;
}
.fotoBox{
float:left;
width:250px;
height:250px;
background:#009999;
}
.box{
margin:10px;
width:230px;
height:230px;
background:#33FF99;
}

@hoperkrot · 28.10.2012, 19:08 **[ТС]**

maximus2011, сейчас попробую)

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

* {
margin: 0;
padding: 0;
}

а вот это что?

Добавлено через 13 минут
maximus2011, так они че-то залазиют друг на друга, мне как расстояние между ними сделать, не прибегая к absolute?

@vantyz · 28.10.2012, 19:10

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

а вот это что?

Этот код убирает отступы со страницы,которые создаются по умолчанию.

@hoperkrot · 28.10.2012, 19:23 **[ТС]**

vantyz, понял, скажи, что делать чтоб div'ы друг на друга не залазили?

Добавлено через 2 минуты
как я понял, расстояние между fotoBox'ами нужно указать

Добавлено через 1 минуту
margin-left наверное нужно указать, и fotoBox в relative определить

@maximus2011 · 28.10.2012, 19:26

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

так они че-то залазиют друг на друга, мне как расстояние между ними сделать, не прибегая к absolute?

ну смотря какая у вас ширина основного блока, поделите на ровные части. Допустим у вас 1000px ширина. Вам нужно 4 блока. Делаем их шириной 235px получается 940px и остается 60px. Отсюда следует: Крайний левый и крайний правый прижаты соответственно к левой и правой сторонам. И нам нужны отступы. Делаем так. Присваиваем нашему классу id кроме последнего. И прописываем стили.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="wrapp">
        <div class="fotoBox" id="b_1">
            <div class="box"></div>
        </div>
        <div class="fotoBox" id="b_2">
            <div class="box"></div>
        </div>
        <div class="fotoBox" id="b_3">
            <div class="box"></div>
        </div>
        <div class="fotoBox">
            <div class="box"></div>
        </div>
    </div>

CSS
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
* {
margin: 0;
padding: 0;
}
#wrapp{
width:1000px;
margin:0 auto;
}
.fotoBox{
float:left;
width:235px;
height:250px;
background:#009999;
}
.box{
margin:10px;
width:215px;
height:230px;
background:#33FF99;
}
#b_1{
margin-right:20px;
}
#b_2{
margin-right:20px;
}
#b_3{
margin-right:20px;
}

@hoperkrot · 28.10.2012, 20:46 **[ТС]**

maximus2011, хорошо, а если у людей нету 1000px на компах, такое же может быть, тогда min-width и max-width использовать?

Добавлено через 1 час 1 минуту
maximus2011, я сделал вот так:

CSS
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
.fotoBox{
position:relative;
margin-left:40px;
margin-top:15px;
float:left;
width:250px;
height:250px;
}
 
.fotoBox2{
position:relative;
margin-left:40px;
margin-top:50px;
float:left;
width:250px;
height:250px;
}
 
.box{
margin:10px;
width:230px;
height:230px;
background:#FFF;
border-color:#60F;
border-width:thin;
border-style:groove;
}

что получилось, можешь снова сюда зайти посмотреть.
Единственное, я не понял почему фотки и все записи в div'е съехали?
Спасибо тебе!)

Добавлено через 58 секунд
то есть первые три diva с классом fotoBox, последующие 9 с классом fotoBox2

@hoperkrot · 31.10.2012, 19:24 **[ТС]**

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

А зачем мы тут вообще добавляем див с классом fotobox, почему сразу нельзя класс box вставить?

Добавлено через 4 минуты
http://maestro89.16mb.com/infa... el=pokupka сюда вот можете зайти? объясните, почему при добавлении в див fotoGlavnoe фотки, у меня съезжают другие дивы вниз. Фотка умещается в границы.

@Taatshi · 31.10.2012, 19:27

[MENTION=224472]hoperkrot[/MENTION]; Вы добавьте-то фото - нужно на проблему в действии посмотреть.

@hoperkrot · 31.10.2012, 19:54 **[ТС]**

Taatshi, добавил, http://maestro89.16mb.com/infa... el=pokupka

Добавлено через 13 минут
Taatshi, вот ссылка http://maestro89.16mb.com/infa... el=pokupka

Добавлено через 1 минуту
блин, короче ссылки нужно будет убрать вот это amp; , я не знаю в чем проблема, видать при переходе на другую страницу, что-то добавляется в URL

@Taatshi · 31.10.2012, 20:34

hoperkrot, Вы вставляете картинку в общий контейнер. Попробуйте создать для нее отдельный див, отпозиционируйте его относительно остальных, и в него уже - картинку...

Позиционирование изображений при разных разрешениях мониторов

@hoperkrot · 01.11.2012, 01:01 **[ТС]**

Taatshi, я так тоже делал, вот смотри что получается (по ссылки той еще раз пройди).

CSS
1
2
3
4
5
6
.foto_glav
{
margin:10px;
width:240px;
height:240px;   
}

Добавлено через 4 часа 18 минут
Taatshi, короче такая ситуация здесь: если я вставляю фотку html-образом, то есть

HTML5
1
<img src="">

, то все нормально, ниче не сэезжает, а в случае когда, я вставляю через php, то есть

PHP
1
<?php  Select ... ;  echo "<img src="" ...>"?>

то все съезжает. это из-за чего такое может быть?

@Taatshi · 01.11.2012, 09:19

эээ... весь код php давайте)

@hoperkrot · 01.11.2012, 10:40 **[ТС]**

Taatshi,

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<?php
$db=mysql_connect("localhost","name","password");
mysql_select_db ("db", $db);
 
$foto_glav=$_REQUEST['foto_glav'];
$selsel=$_REQUEST['selsel'];
 
$result=mysql_query("Select * from `fotki` where `foto_glav`='$foto_glav'", $db);
$myrow=mysql_fetch_assoc($result);
echo " <img src=\"images_2/$selsel/vse/$myrow[foto_glav]/$myrow[foto_glav].jpg\"";
 
?>

@Taatshi · 01.11.2012, 10:43

и как Вы это прикручиваете к html?

ВЕСЬ код хочу...

@hoperkrot · 01.11.2012, 10:51 **[ТС]**

Taatshi,

PHP
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
32
33
<div class="wrapp_infa">  
  <div class="fotoGlavnoe">    
        <?php
$db=mysql_connect("localhost","name","password");
mysql_select_db ("db", $db);
 
$foto_glav=$_REQUEST['foto_glav'];
$selsel=$_REQUEST['selsel'];
 
$result=mysql_query("Select * from `fotki` where `foto_glav`='$foto_glav'", $db);
$myrow=mysql_fetch_assoc($result);
echo " <img src=\"images_2/$selsel/vse/$myrow[foto_glav]/$myrow[foto_glav].jpg\"";
?>    
  </div>
 
  <div class="foto1">   
  </div>
  <div class="foto1_1">   
  </div>
  <div class="foto1_1">   
  </div>
  <div class="foto1_1">   
  </div>
  
  <div class="foto2">   
  </div>
  <div class="foto1_1">   
  </div>
  <div class="foto1_1">   
  </div>
  <div class="foto1_1">   
  </div>
</div>

@Taatshi · 01.11.2012, 11:05

css???

@hoperkrot · 01.11.2012, 12:42 **[ТС]**

Taatshi,

CSS
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
* {
margin: 0;
padding: 0;
}
 
.wrapp_infa
{
width:1000px;
height:600px;
margin:0 auto;
background:#FFF;
}
 
.fotoGlavnoe
{
 
float:left;
margin-left:30px;
margin-top:0px;
width:330px;
height:280px;   
}
 
.foto1
{
float:left;
margin-left:45px;
margin-top:15px;
width:125px;
height:100px;
background:#300;    
}
 
.foto1_1
{
float:left; 
margin-left:15px;
margin-top:15px;
width:125px;
height:100px;
background:#33C;
border-color:#60F;
border-width:thin;
border-style:groove;    
}
 
.foto2
{
float:left;
margin-left:45px;
margin-top:15px;
width:125px;
height:100px;
background:#300;    
}

Добавлено через 41 минуту
Taatshi, ну что, можешь сказать что-нибудь?

Добавлено через 50 минут
В общем ребят, спасибо всем, справился я с задачей, значит так: отделил php-шные скрипты друг от друга, connect и select оставил в одном, а в фотки уже вставлял без них:

PHP
1
2
3
4
5
6
7
8
9
10
<?php
$db=mysql_connect("localhost","name","password");
mysql_select_db ("db", $db);
 
$foto_glav=$_REQUEST['foto_glav'];
$selsel=$_REQUEST['selsel'];
 
$result=mysql_query("Select * from `fotki` where `foto_glav`='$foto_glav'", $db);
$myrow=mysql_fetch_assoc($result);
 ?>

и в fotoGlavnoe:

PHP
1
<?php echo "<img src=\"images_2/$selsel/vse/$myrow[foto_glav]/$myrow[foto_glav].jpg\">"; ?>

Таким образом стало все норм работать!

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@hoperkrot 3 / 3 / 0 Регистрация: 29.01.2012 Сообщений: 266

	Позиционирование изображений при разных разрешениях мониторов 28.10.2012, 18:09. Показов 5190. Ответов 19 Метки нет (Все метки) Проблемка такая: на страницу вывожу фотки, всего их 12. Заключены все они в div'ы, div'ы прописаны в стилях, для местоположения их использую position:absolute, top и left в процентах. Так вот, у меня монитор 23 дюйма, на нем показывается все как надо, а если беру ноут 17 или даже 15 дюймов, то все съезжает, фотки, которые не меняются по размеру, накладываются друг на друга, в общем лажа полная получается. как избавится мне от этого, что можно сделать? 0

@hoperkrot 3 / 3 / 0 Регистрация: 29.01.2012 Сообщений: 266
	28.10.2012, 18:27 [ТС]
	maximus2011, http://maestro89.16mb.com/inde... t=&btext2= 0

@hoperkrot 3 / 3 / 0 Регистрация: 29.01.2012 Сообщений: 266
	28.10.2012, 19:23 [ТС]
	vantyz, понял, скажи, что делать чтоб div'ы друг на друга не залазили? Добавлено через 2 минуты как я понял, расстояние между fotoBox'ами нужно указать Добавлено через 1 минуту margin-left наверное нужно указать, и fotoBox в relative определить 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	31.10.2012, 19:27
	[MENTION=224472]hoperkrot[/MENTION]; Вы добавьте-то фото - нужно на проблему в действии посмотреть. 0

@hoperkrot 3 / 3 / 0 Регистрация: 29.01.2012 Сообщений: 266
	31.10.2012, 19:54 [ТС]
	Taatshi, добавил, http://maestro89.16mb.com/infa... el=pokupka Добавлено через 13 минут Taatshi, вот ссылка http://maestro89.16mb.com/infa... el=pokupka Добавлено через 1 минуту блин, короче ссылки нужно будет убрать вот это amp; , я не знаю в чем проблема, видать при переходе на другую страницу, что-то добавляется в URL 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	31.10.2012, 20:34
	hoperkrot, Вы вставляете картинку в общий контейнер. Попробуйте создать для нее отдельный див, отпозиционируйте его относительно остальных, и в него уже - картинку... 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	01.11.2012, 09:19
	эээ... весь код php давайте) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	01.11.2012, 10:43
	и как Вы это прикручиваете к html? ВЕСЬ код хочу... 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	01.11.2012, 11:05
	css??? 0