Форум программистов
 
Регистрация на форуме тут, о проблемах пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Как купить рекламу на форуме


Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы Поиск в этой теме
Старый 29.05.2009, 21:05   #1
FINoM
 
Регистрация: 29.05.2009
Сообщений: 3
По умолчанию Позиция текста по отношению к картинке в блоке <div>, CSS

Приветствую.
Вопрос из рубрики "не получается".
Всё выглядит довольно просто: нужно в <div> положить текст, состоящий из двух-трех строк по паре слов, выровнять по правой стороне, и картинку, которая выравнивается по левой. Блок должен быть со стилем background и и иметь нефиксированную высоту (height:auto; ). Так-же он должен быть внутри другого блока (div'a). Обязательно использование css для решения этой задачи.
Код HTML:
<div class="a">
<div class="b">
<img src="#">
<p> <a href="#"> ссылка </a></p>
<p> <a href="#"> ссылка </a></p>
<p> текст </p> <!-- <p> использовать не обязательно, но лучше с ним. -->
</div>
</div> 
Выглядеть должно примерно так:

Экспериментировал как мог, но ничего не привело к желаемому результату. То картинка вылазит из бэкграунда, то текст ниже картинки... Тестировал на IE7, Opera9, FF3.
...Легко, правда? Но сегодня решил обратится к преподвавтелю по верстке, думая, что просто что-то недоучил. Оказалось эта задача не такая простая, как казалось бы, даже для неё.
Обязательным требованием является корректная работа в большинстве современных броузеров и использование css.
Пожалуйста, не предлагайте альтернативных решений, типа таблиц и яваскриптов.
Заранее огромнейшее "благодарю".
FINoM вне форума Ответить с цитированием
Старый 29.05.2009, 21:36   #2
uberchel
Участник клуба
 
Аватар для uberchel
 
Регистрация: 19.01.2009
Сообщений: 1,395
По умолчанию

Во! держи.
Код HTML:
  <style type="text/css">

   #div1 {
   	background: #333 url(картинка); 
       width: 30%; 
	padding: 5px;
}
   #div2 {
  	background: #fff url(картинка) no-repeat; 
  	width: 60%; 
  	padding: 10px;
}
  </style>


  <div align="right" id="div1">
  <div align="left" id="div2">
  <p><a href="#">ссылка</a></p>
  <p><a href="#">ссылка</a></p>
  </div>
  </div>

Последний раз редактировалось uberchel; 29.05.2009 в 21:45.
uberchel вне форума Ответить с цитированием
Старый 29.05.2009, 21:51   #3
FINoM
 
Регистрация: 29.05.2009
Сообщений: 3
По умолчанию

uberchel, спасибо, но
Код HTML:
 background: #fff url(картинка) no-repeat;
Не подходит. Надо именно img'ом, так как таких блоков будет много и с разными картинками. Так-же очень желательно отказаться от атрибутов HTML тегов типа align и других.
Еще на картинке, приложенной выше блок с рамкой и фоном - это второй div, в html коде - class="b" (первый, второй - это условные обозначения, так как сайт имеет большую таблицу стилей и сравнительно сложную структуру, построенную на тех-же div'ах).
FINoM вне форума Ответить с цитированием
Старый 11.06.2009, 15:31   #4
Red Africa
Новичок
Джуниор
 
Регистрация: 08.06.2009
Сообщений: 2
По умолчанию Позиция текста по отношению к картинке в блоке t divt CSS

в css напписано следующее:

td.Form_Caption
text-align: center;
font: bold 16px Verdana;
color: #FFFFFF;
background: #DCDCDC;
border: 1 solid black;
width: 100;
height: auto;
vertical-align: middle;
padding-top: 5;
padding-bottom: 5;


но border: 1 solid black;
не применяется...
Почему?
Red Africa вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме 20000 рублей в месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибки в блоке Портала Modernistka PHP 7 05.04.2009 00:17
Как отключить кнопки питания на системном блоке? Kamikadze_666 Общие вопросы Delphi 5 20.02.2009 20:19
Растягивающийся DIV и толкающий в низ следующий DIV Суриков HTML и CSS 6 29.08.2008 11:01
Поднятие вольтажа на блоке питания experts91 Компьютерное железо 1 04.10.2007 16:17


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS