Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> изображение растягивает div - проблема 
:(
    Опции темы
tequilla4white
Дата 7.9.2007, 21:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 8.1.2007
Где: Крым

Репутация: нет
Всего: нет



Есть страница, состоящая из 3 колонок. Колонки по бокам с фиксированной шириной, и центральная "резиновая". В центральной колонке (в зависимости от контента) есть изображения, которые при уменьшении окна, не помещаются, и растягивают центральный div, который в свою очередь не помещается на своем месте и опускается в низ...

Как всегда, везде нормально, кроме ИЕ. В ФФ например изображение как бы накладывается на правый, боковой div и все...

Вопрос: как добиться такого же эффекта и ИЕ, или как сделать чтобы кусок изображения который не помещается просто скрывался? Как я понимаю, для этого, в CSS есть свойство overflow, но ИЕ его почему то не воспринимает...
PM MAIL WWW ICQ Jabber   Вверх
WebDisaster
Дата 8.9.2007, 08:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19



К подобным вопросам нужно прикладывать код страницы (html+css) и скриншот "проблемной" страницы с пояснениями. А ещё лучше выложить в тырнет и дать ссылки на 1. "нормальную" страницу и 2. страницу с "поломанной" вёрсткой. Это даст информации на порядок больше, чем целая страница с объяснениями проблемы "на пальцах". А подходящих для этого бесплатных хостингов - выше крыши.

По сути вопроса. Моя ИМХА думает, что решать это нужно в другую сторону: организовать min-width для контейнера, содержащего в себе все три колонки, чтоб ничего никуда не "сползало" в принципе.
PM MAIL   Вверх
tequilla4white
Дата 8.9.2007, 13:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 8.1.2007
Где: Крым

Репутация: нет
Всего: нет



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

Код

<div id = "page">
   <div id = "leftColumn">
      <!-- Левая колонка -->
   </div>
   <div id = "mainBlock">
      <div id = "rightColumn">
         <!-- Правая колонка -->
      </div>
      <div id = "centerColumn">
         <div id = "header">
            <!-- Тут шапка и все такое... -->
         </div>
         <div id = "content">
            <!-- Вот тут много текста и больших картинок -->
         </div>
      </div>
   </div>
</div>


Стили (тоже схематически):
Код

#leftColumn { width:250px; float:left; }
#mainBlock { margin-left:250px; }
#rightColumn { width:250px; float:right; }
#centerColumn { margin-right:250px; }


min-width (FF + костыли для IE) имееться, просто картинки все равно больше того размера который отводиться их контейнеру при минимальной ширине (их контейнера...)

Проблемная страница: http://ladoshki.ch/?page=113
PM MAIL WWW ICQ Jabber   Вверх
WebDisaster
Дата 8.9.2007, 21:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19



У меня есть ощущение, что собака порылась совсем не там, где Вы думаете. min-width там уже приделана, но одну мелочь, ИМХО, недоучли. Думаецца, что отца демократии может спасти следующая вещь: открываете файл style.css в корне, находите строки 15, 19, 26 и заменяете 950 на 1000

Должно получиться так:

Код

#min-width {
  width:100%;
  min-width: 1000px;
}

* html .minwidth {
  border-left: 1000px solid #fff;/*min-width*/
  position:relative;
  float:left;
  z-index:1;
}

* html .container {
  margin-left: -1000px; /*-min-width*/
  position:relative;
  float:left;
  z-index:2;
}


И, кстати, путь к файлу iehacks.css в шаблончике написан неправильно. Он тоже лежит в корне.
PM MAIL   Вверх
tequilla4white
Дата 8.9.2007, 22:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 8.1.2007
Где: Крым

Репутация: нет
Всего: нет



Ну так, я тоже умею ;) Но там еще и отступы есть, пикселей по 25 где то, и поэтому если сделать min-width:1000 + 25 * 2 = 1050, так что при разрешении 1024 х 768 появляется прокрутка...

Цитата

И, кстати, путь к файлу iehacks.css в шаблончике написан неправильно. Он тоже лежит в корне.

Но работает же ;) Хотя надо посмотреть...

P.S. Какие наши годы, зачем на Вы? ;)
PM MAIL WWW ICQ Jabber   Вверх
WebDisaster
Дата 9.9.2007, 09:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19



Цитата(tequilla4white @  8.9.2007,  22:45 Найти цитируемый пост)
Какие наши год

Не знаю, отсюда не видно. А бывает всякое smile

Я написал то, что я написал, потому, что думаю, что дело не в ширине картинок. Просто когда-то экспериментировал, ставя "распорку" гиф'ом для удержания ширины div'а, так оно (IE6) не работает - картинка просто "обрезается" по ширине div'а (как это происходит с бэкграундами) и всё. Работало только в таблице. Хотя, возможно, какие-то дополнительные условия я недоучёл.

PM MAIL   Вверх
tequilla4white
Дата 9.9.2007, 13:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 8.1.2007
Где: Крым

Репутация: нет
Всего: нет



Ок. Спасибо. Чувствую самому придеться заново, переверстывать...
PM MAIL WWW ICQ Jabber   Вверх
yakushevsky
Дата 11.9.2007, 08:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 8.8.2007

Репутация: нет
Всего: нет



Цитата

Как я понимаю, для этого, в CSS есть свойство overflow, но ИЕ его почему то не воспринимает... 


На сайте
Код

div#middleColumn #content img { margin: 5px 0px; overflow-x:hidden; }


overflow прописывается на контейнер с картинками, а не на саму картинку. Но это не сработает и если прописать на сам #middleColumn, потому что у него не задана ширина. 

В данном случае, переверстки можно избежать, если добавить style='width: 100%; overflow: hidden;' на тот div, который содержит проблемные картинки, и который используется для выравнивания их по центру. Это поможет.

Правда есть ощущение, что там всё вставляется через WYSIWYG, и сложно будет управлять стилями этого дива. 



PM MAIL GTalk   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0437 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.