Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Разбивка текста в левый и правый край.

Автор: Dima85 10.5.2010, 14:59

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

Код


<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; - использовать нельзя.

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

Автор: djamshud 10.5.2010, 15:05

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

Автор: Dima85 10.5.2010, 15:07

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

Пришлось отказаться от 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 этого расплывания не происходит.)

Автор: Mavrun 10.5.2010, 15:10

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

Код


<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>

Автор: Dima85 10.5.2010, 15:20

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

Код


<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

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