Смещение картинок,таблицы ,текста

@slam_jack · Регистрация: 05.09.2008

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

Я сверстал страницу,подгонял изображения на нужное мне место с помощью <div style="margin-left:%;margin-top:%"> и тд,таблица с текстом тоже в отдельном слое <div>,как и все остальное.
Но теперь в итоге появилась такая проблема - если в браузере смотришь эту страницу,а потом уменьшаешь окно браузера,так ,чтобы стр не была видно целиком,то все части страницы смешаются вслед за границей браузера и вообщем все в кашу.
Как сделать так чтобы все элементы не реагировали на размер окна браузера?

И еще вопрос - почему в IE изображения PNG обводятся синим прямоугольником по краям,хотя края у изображений меньше.
спасибо

Humanoid · 25.09.2008, 08:39

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

И еще вопрос - почему в IE изображения PNG обводятся синим прямоугольником по краям,хотя края у изображений меньше.

Укажи <img src="file.png" alt="Картинка" border="0" />
Или можно в стилях указать img {border: 0px;}

@slam_jack · 26.09.2008, 18:45 **[ТС]**

я понял,чтобы при разных разрешениях экрана и размерах окна браузера не было смещения картинок,фоновой картинки и слоя с текстом поверх фона,надо просто прописать автоматическую центровку для фонового изображения и для текста на этом изображении.
для изображения это было просто :

HTML5
1
<div style="margin-top:3% "> <p align = "center"><img src="BACKground.jpg" width="854" height="710" />

Но вот теперь еще остался слой поверх,где расположен текст.

HTML5
1
<div id="Text" style="overflow: auto; position:absolute; z-index:1; width: 789px; top: 194px; height: 498px; "><p>  Здесь мой текст</div></p>

И вот для этого слоя "center" я никак не могу прописать. Подскажите пожалуйста

@readonly · 26.09.2008, 19:25

text-align:center - а так пробовал?

@slam_jack · 26.09.2008, 22:32 **[ТС]**

нет не помогает.Ставлю разрешение 1024х 768 и слой с текстом уезжает направо,не центруется

@Kelt · 13.06.2011, 22:12

насколько я знаю размещение тегов <div><p></p></div> недопускается.Зато наоборот вполне,да и вообще не вижу смысла сейчас использовать тег <P>.чтобы отцентровать\сместить изображени внутри тега:например <div style:"width:1000px; height:1000px><img src="ваша_картинка"></div> стоит использовать position:relativ;left:XXpx;topXXpx так как абсолют привязывает картинку к краям экрана.И если вы настроили её на своем широкоформатнике где нибудь около правой стороны монитора(или левой) то на стандартном монике ваша картинка уедет либо в середину либо за края документа.Релатив же привязывает картинку к краям родительского элемента(наш тег див в 1000 на 1000 пикс) и картинка никуда не уедет.Для позиционирования самого элемента див можно прописать в стиле float:left\right.

@Skipy · 14.06.2011, 19:08

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

насколько я знаю размещение тегов <div><p></p></div> недопускается.

Допускается

да и вообще не вижу смысла сейчас использовать тег <P>.

Тег p - основной структурный тег разметки. Обозначает параграф.

@DuxGeneral · 14.06.2011, 21:51

Попробуй блок с картинкой вставить в основной блок и взять в

HTML5
1
<center></center>

или отцентрировать его с помощю

CSS
1
padding:10% 10% 10% 10%

с указанием растояния в процентах (так называемая резиновая верстка)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@slam_jack 0 / 0 / 0 Регистрация: 05.09.2008 Сообщений: 17

	Смещение картинок,таблицы ,текста 24.09.2008, 17:06. Показов 50702. Ответов 7 Метки нет (Все метки) Я сверстал страницу,подгонял изображения на нужное мне место с помощью <div style="margin-left:%;margin-top:%"> и тд,таблица с текстом тоже в отдельном слое <div>,как и все остальное. Но теперь в итоге появилась такая проблема - если в браузере смотришь эту страницу,а потом уменьшаешь окно браузера,так ,чтобы стр не была видно целиком,то все части страницы смешаются вслед за границей браузера и вообщем все в кашу. Как сделать так чтобы все элементы не реагировали на размер окна браузера? И еще вопрос - почему в IE изображения PNG обводятся синим прямоугольником по краям,хотя края у изображений меньше. спасибо 0

@readonly 5 / 5 / 0 Регистрация: 24.09.2008 Сообщений: 23
	26.09.2008, 19:25
	text-align:center - а так пробовал? 0

@slam_jack 0 / 0 / 0 Регистрация: 05.09.2008 Сообщений: 17
	26.09.2008, 22:32 [ТС]
	нет не помогает.Ставлю разрешение 1024х 768 и слой с текстом уезжает направо,не центруется 0

@Kelt 3 / 3 / 0 Регистрация: 13.06.2011 Сообщений: 54
	13.06.2011, 22:12
	насколько я знаю размещение тегов <div><p></p></div> недопускается.Зато наоборот вполне,да и вообще не вижу смысла сейчас использовать тег <P>.чтобы отцентровать\сместить изображени внутри тега:например <div style:"width:1000px; height:1000px><img src="ваша_картинка"></div> стоит использовать position:relativ;left:XXpx;topXXpx так как абсолют привязывает картинку к краям экрана.И если вы настроили её на своем широкоформатнике где нибудь около правой стороны монитора(или левой) то на стандартном монике ваша картинка уедет либо в середину либо за края документа.Релатив же привязывает картинку к краям родительского элемента(наш тег див в 1000 на 1000 пикс) и картинка никуда не уедет.Для позиционирования самого элемента див можно прописать в стиле float:left\right. 0