VPF::Разбивка текста в левый и правый край.

Dima85

Дата 10.5.2010, 14:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Есть такая контструкция, к теме еще прикрепил рисунок, возможно с ним будет более понятно

Код


<div id="content">
    <h2 id="title">
      <span class="left">Название темы</span>
      <span class="right"><a href="#" onclick="Hide('text');"><img src="/hide.png" alt="" /></a></span>
  </h2>
  <p class="text"></p>
</div>

В <span class="right"> находиться рисунок, нажимая на который <p class="text"> становиться невидемым.
Дак вот, необходимо этот hide.png размещать всегда в правом углу конструкции,
float:right; - использовать нельзя.

Может у кого-то есть идеи?
(Конструкция резиновая)
В целом если необходимо конструкцию при необходимости можно изменить.

Это сообщение отредактировал(а) Dima85 - 10.5.2010, 15:06

Присоединённый файл ( Кол-во скачиваний: 11 )

img.PNG 8,08 Kb

djamshud

Дата 10.5.2010, 15:05 (ссылка)

(нет голосов)

Загрузка ...

Пердупержденный

Профиль
Группа: Завсегдатай
Сообщений: 1655
Регистрация: 23.11.2009

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

Вместо span-ов воспользоваться таблицей?
...
http://tsya.ru/

--------------------

'Cuz I never walk away from what I know is right
Alice Cooper - Freedom

Dima85

Дата 10.5.2010, 15:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Нет, хочеться найти решение и без Таблиц, оно наверняка есть.

Пришлось отказаться от float:right; из за глюка в IE7. Тоесть когда делаю

Код


 <span style="float:right;"><a href="#" onclick="Hide('text');"><img src="/hide.png" alt="" /></a></span>

То в IE7
<div id="content">
разежаеться по всему экрану, этого не должно быть (в Mozilla, Opera этого расплывания не происходит.)

Это сообщение отредактировал(а) Dima85 - 10.5.2010, 15:12

Mavrun

Дата 10.5.2010, 15:10 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Первый вариант, которому флоат райт может и подойдёт

Код


<span class="left">Название темы</span>
<a class="right" href="#" onclick="Hide('text');"></a>

Код


.left {float:left}
.right {
display:block;
width: 20px;
height: 20px;
background: url(/hide.png) no-repeat;
float:right;
}

второй вариант - оставить первый спан как есть, второй сделать ашкой. тогда после спана переноса строки не будет и всё будет на одной строке

Код


<span class="left">Название темы</span> <a href="#" onclick="Hide('text');"><img src="/hide.png" alt="" /></a>

Это сообщение отредактировал(а) Mavrun - 10.5.2010, 15:10

Dima85

Дата 10.5.2010, 15:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Mavrun , попробовал. Но <p class="text"> наезжает на h2

Пришлось отказаться от float:right; из за глюка в IE7. Тоесть когда делаю

Код


 <span style="float:right;"><a href="#" onclick="Hide('text');"><img src="/hide.png" alt="" /></a></span>

То в IE7
<div id="content">
разежаеться по всему экрану, этого не должно быть (в Mozilla, Opera этого расплывания не происходит.)

Может проще решить эту проблему?...

Amphiluke

Дата 10.5.2010, 15:20 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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

Код


<div id="content">
    <h2 id="title"><span class="right"><a href="#" onclick="Hide('text');"><img align="right" src="hide.png" alt="" /></a></span>
      <span class="left">Название темы</span>    
  </h2>
  <p class="text"></p>
</div>

Dima85

Дата 10.5.2010, 15:47 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Разобрался, проблема решена, спасибо.

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