Помогите с версткой (img в div)

  1. Weblancer
  2. Форум фрилансеров
  3. Программирование
Марат А.
245 сообщений
#16 лет назад
Всем привет! Такая проблема. Сделал админку. Редактор - tinymce. Макет сайта резиновый. (средняя часть тянется). При изменении средней колонки, слой изменяется, но изображение (<img> остается таким же (что и естественно).
У кого такое было, что Вы делали? Вариант с присвоением слою overflow:hidden не предлагать
(т.к. при этом и сам текст теряется)

Вот сама верстка:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>



<title>Трехколоночный макет страницы с помощью CSS</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style>

* {margin: 0;padding: 0; font: 14px/17px "Trebuchet MS", Tahoma, Arial}

p {padding: 10px;}

#header {height: 100px; background: #DFDFDF; text-align: center;}

#text {background: #D5FFD5; overflow:hidden;}

#left {background: #FFF2BF;}

#right {background: #BFF2FF;}

#footer {height: 100px; background: #FFCACA;}

.clear {clear: both;}



/* код для разметки 3-х колонок */

#wrapper {

  width: 100%;

  width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');

  min-width: 1000px;

}

#container {width: 100%;}

#content {

  width: 100%;

  float: left;

}

#text {margin: 0 250px;}

#left {

  float: left;

  width: 250px;

  margin-left: -100%;

  display:inline;

}

#right {

  float: left;

  width: 250px;

  margin-left: -250px;

  display:inline;

}

</style>

</head><body>


<div id="wrapper">



<div id="header"></div>

  <div id="container">



<div id="content">



<div id="text">

		<img src="1.jpg" alt="foto" title="foto" width="604" height="453" />



</div>



</div>



<div id="left">

	</div>



<div id="right">

	</div>



<div class="clear"></div>

  </div>

  <div id="footer"></div>

</div>


</body></html>
Алексей Б.
897 сообщений
#16 лет назад
А как нужно? Чтоб картинка тянулась или чтоб её не закрывало?
Михаил В.
2195 сообщений
#16 лет назад
Тоже ничего не понял. И особнно причем тут какая-то админка и tinymce?
Марат А.
245 сообщений
#16 лет назад
Нужно, чтобы картинку закрывало.
p.s.: пардон, только увидел ваши ответы =)
Михаил В.
2195 сообщений
#16 лет назад
Поясните еще раз, что именно нужно. Нужно чтобы при сжимании макета обрезало изображение по высоте и ширине или что?
Марат А.
245 сообщений
#16 лет назад
Есть 3-х колонный макет (центральная колонка тянется, остальные фиксированной ширины) . При появлении в центральной колонке изображения (тег <img> средняя колонка начинает сужаться, а изображение при этом остается такого же размера и выходит за рамки колонки. Лучший вариант - это обрезание картинки как по ширине, так и по высоте. Может сделать из <img> блочный элемент и сделать overflow:hidden (только к <img>?
Михаил В.
2195 сообщений
#16 лет назад
A) Пересмотрите ваш трехколоночный layout. Так, чтобы контентному div'у были присвоены какие-то размеры, хотя бы ширина.
Б) Попробуйте вставить внутрь #text подобное (ваш макет не проверял, пишу из головы - могу ошибиться):



<div style="position:relative;width:100%;overflow:hidden;"

<img src="1.jpg" alt="foto" title="foto" width="604" height="453" />

</div>


В этом случае, если изображение не поместится в ширину колонки - изображение обрежет по ширине.

Что же касается высоты - тут надо понять вашу задачу. В общем случае - опять же overflow:hidden с указанием какой-то высоты (может быть и 100%) чему-то, что выше вашего img.
Марат А.
245 сообщений
#16 лет назад
Цитата ("Sir_Michael"):
Пересмотрите ваш трехколоночный layout.
Попробуйте вставить внутрь #text подобное (ваш макет не проверял, пишу из головы - могу ошибиться):



<div style="position:relative;width:100%;overflow:hidden;"

<img src="1.jpg" alt="foto" title="foto" width="604" height="453" />

</div>


В этом случае, если изображение не поместится в ширину колонки - изображение обрежет по ширине.

Что же касается высоты - тут надо понять вашу задачу. В общем случае - опять же overflow:hidden с указанием какой-то высоты (может быть и 100%) чему-то, что выше вашего img.


Данный вариант не подходит. Изображения вставляются в слой с помощью TinyMCE
Михаил В.
2195 сообщений
#16 лет назад
Почему не подходит? Подавляющее большинство cms используют WYSIWYG редакторы и верстка на сайтах не ломается.
<div style="position:relative;width:100%;overflow:hidden;"> ... </div> - в этот слой я предлагаю не оборачивать изображения, а весь контент из вашего редактора, чтобы содержимое центральной колонки помещалось в слой с "position:relative;width:100%;overflow:hidden;.
Или привести к такому виду css вашего #text (см. вариант А).
Марат А.
245 сообщений
#16 лет назад
Цитата ("Sir_Michael"):
Почему не подходит? Подавляющее большинство cms используют WYSIWYG редакторы и верстка на сайтах не ломается.
<div style="position:relative;width:100%;overflow:hidden;"> ... </div> - в этот слой я предлагаю не оборачивать изображения, а весь контент из вашего редактора, чтобы содержимое центральной колонки помещалось в слой с "position:relative;width:100%;overflow:hidden;.
Или привести к такому виду css вашего #text (см. вариант А).


Допустим обернем. НО и сам текст ведь тоже будет вырезаться! (проверьте ради интереса, если не верите): overflow:hidden сработает
Михаил В.
2195 сообщений
#16 лет назад
Разумеется не верю.
Вот возьмем макет от Matthew James Taylor (не к тому, что я рекомендую его использовать, просто там вставленная картинка есть).
Сожмите его до минимальной ширины - невлезающее изображение обрежет по краю.
Марат А.
245 сообщений
#16 лет назад
Я Вам про свой макет говорю А за этот макет - спасибо, гляну
Михаил В.
2195 сообщений
#16 лет назад


<div id="text">

<div style="position:relative;width:100%;overflow:hidden;">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<img src="1.jpg" alt="foto" title="foto" width="604" height="453" />

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

В FF не вижу проблемы.
Марат А.
245 сообщений
#16 лет назад
Народ, а какой бы Вы мне посоветовали использовать шаблон в данном случае?
спасибо!
Сергеевич А.
791 сообщение
#16 лет назад
Есть средняя колонка минимум 500px как может текст теряться?
через nbsp чтоли написан?)

хотите чтобы совсем ничего не терялось сделайте таблицей