Осел не дает выронять по правому краю спан

otmoroz095 · August 12, 2011

Привет всем! Делаю свою тему для друпал.

Есть блок (div class="node") шириной 100%, в нем статья.

Под статьей span (class="submitted") с подписью. Хочу выровнять его по правому краю.

Так вот в Мозилах и прочих операх достаточно выставить text-align:right, а Интернет Эксплорер 7 не выравнивает.

Код:


.node span.submitted {
position:relative;
font-size:0.8em;
text-align:right;
margin:3px;
padding:2px;
width:200px;
border:1px solid red
}
.node .submitted a {
color:#c21606;
font-weight:bold;
text-align:right;
}

Как видите, уже попробовал повторять свойства - не пашет! Подскажите, пожалуйста, в чем ошибка?

На всякий случай код всего этого чуда:

<div id="node-120" class="node sticky clear-block news">


            <h2>
            <a href="/bcs/content/story/120.htm" title="Телефоны экстренной помощи для Москвы">
                Телефоны экстренной помощи для Москвы            </a>
        </h2>

    <div class="meta">
                    <!--div class="terms terms-inline"></div-->
            </div>
    <div class="content">

        <div class="field field-type-content-taxonomy field-field-news-dept">
      <div class="field-label">Отдел: </div>
    <div class="field-items">
            <div class="field-item odd">
                    ИТ (Информационных технологий) отдел        </div>
        </div>
</div>
Действующие телефоны только <u>МОСКВА</u>:<br>

<img alt="" src="/bcs/sites/default/files/users/root/news/info.png" style="width: 128px; height: 128px; float: right; margin: 2px;"><br>
<br>
<table style="width: 500px;" border="1" cellpadding="1" cellspacing="1">
	<tbody>
		<tr>
			<td>
				<strong>Служба</strong></td>
			<td>
				<strong>Наш набор</strong></td>

		</tr>
		<tr>
			<td>
				<em>МЧС</em></td>
			<td>
				55501</td>
		</tr>
		<tr>

			<td>
				<em>Полиция</em></td>
			<td>
				55502</td>
		</tr>
		<tr>
			<td>
				<em>Скорая помощь</em></td>

			<td>
				55503</td>
		</tr>
	</tbody>
</table>
    </div>
	                  <span class="submitted">
			<p>
              Автор			  <a href="http://172.31.42.254/bcs/user/3" title="Информация о пользователе.">Морозов Андрей</a> <br>

			   23 Ноябрь 2010 			</p>
          </span>
         <p>
    </p><ul class="links inline"><li class="comment_comments first"><a href="/bcs/content/story/120.htm#comments" title="Перейти к первому комментарию.">2 комментария</a></li>
<li class="node_read_more"><a href="/bcs/content/story/120.htm" title="Читать дальше Телефоны экстренной помощи для Москвы">Подробнее</a></li>
<li class="statistics_counter last"><span>104 просмотра</span></li>
</ul> <p></p>

</div>

Great Rash · August 12, 2011

И правильно делает, что не работает. В <span> нельзя вставлять <p>.

otmoroz095 · August 12, 2011

ой-ей! У меня без <p> какая-то еще проблема была... сейчас уберу! Кстати, psywalker'у: Спасибо за это: http://psywalker.ru/Forum/Column/Untitled-2.html

у меня так теперь тема сверстана =)

убрал. теперь и мозила слева отображает. флоат делать?

ну а с флоатом, элементы, которые ниже - поднимаются =(

все, я потерялся(( если бы еще друпал легко можно было бы выложить на хостинг(

otmoroz095 · August 12, 2011

вот http://jsfiddle.net/4rwB4/

Softlink · August 12, 2011

ну так же вроде бы должно работать:

.node span.submitted {
float:right;
font-size:0.8em;
text-align:right;
margin:3px;
padding:2px;
width:200px;
border:1px solid red
}

.clear{clear:both;}

после submitted добавить <div class="clear"></div>

вот http://jsfiddle.net/4rwB4/2/ оно?

otmoroz095 · August 12, 2011

спасибо большое! Оно! Как раз не хватало <div class="clear">

а как думаешь, стоит до спана еще такой блок вставить, на случай обтекающих картинок?

надо! все теперь ок! Спасибо всем отозвавшимся :yahoo:

Softlink · August 12, 2011

насколько я знаю, поток чистят после плавающих элементов, а не до них. Попробуйте вставить этот див до него, ничего не изменится. Или я неправильно задачу понял?

psywalker · August 12, 2011

Вы очищаете поток грязью, которой не место в коде. Есть же нормальные, чистые способы, например поставить тому же родителю overflow: hidden; или очистить поток при помощи псевдоэлемента.

Softlink · August 12, 2011

Вы очищаете поток грязью, которой не место в коде. Есть же нормальные, чистые способы, например поставить тому же родителю overflow: hidden; или очистить поток при помощи псевдоэлемента.

Ну да, у меня была идея с overflow, потом посмотрел, что там родитель очень большой и после этого блока в этом родителе есть еще элементы, а значит надо делать еще одну обертку, поэтому предложил clear. А с ПЭ не вариант, автору надо, чтобы работало в ИЕ7

psywalker · August 12, 2011

Вы очищаете поток грязью, которой не место в коде. Есть же нормальные, чистые способы, например поставить тому же родителю overflow: hidden; или очистить поток при помощи псевдоэлемента.
Ну да, у меня была идея с overflow, потом посмотрел, что там родитель очень большой и после этого блока в этом родителе есть еще элементы, а значит надо делать еще одну обертку, поэтому предложил clear. А с ПЭ не вариант, автору надо, чтобы работало в ИЕ7

1) Я бы всё равно выбрал + ещё одну обёртку, лиж бы не делать этот ужас с клеар-дивом.

2) Для ИЕ6-7 давно уже есть спец. средство под названием zoom:1;

otmoroz095 · August 12, 2011

вот теперь я окончательно потерял нить.

я имел в виду чистку после блока с контентом, в котором плавающие картинки встречаются.

чем плохи пустые блоки? И к чему применять overflow?

psywalker · August 12, 2011

вот теперь я окончательно потерял нить.
я имел в виду чистку после блока с контентом, в котором плавающие картинки встречаются.
чем плохи пустые блоки? И к чему применять overflow?

1) Плохи лишней разметкой и тем, что если ты их уберёшь или забудешь поставить, то твой сайт развалиться.

2) Применять к родителю плавающих блоков.

otmoroz095 · August 12, 2011

но, во-первых у меня шаблон, то есть разметку я поставил 1 раз в 1-м месте и все. А во-вторых у меня родитель с плавающим, в нем еще два контейнера с плавающими и т.д. и еще:

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

hidden Отображается только область внутри элемента, остальное будет скрыто.

зачем мне что-то прятать? мне равнять нужно

psywalker · August 12, 2011

но, во-первых у меня шаблон, то есть разметку я поставил 1 раз в 1-м месте и все. А во-вторых у меня родитель с плавающим, в нем еще два контейнера с плавающими и т.д. и еще:
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
hidden Отображается только область внутри элемента, остальное будет скрыто.
зачем мне что-то прятать? мне равнять нужно

тогда сделай способ с псевдоэлементом.

otmoroz095 · August 12, 2011

это как? Извините, но я не очень в верстке :blush:

что-то типа

.submitted:before {clear:both}

?

psywalker · August 12, 2011

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}




* html .clearfix {height: 1%;}
*+ html  .clearfix {min-height: 1%;}

otmoroz095 · August 12, 2011

так все-таки создавать пустой блок с классом .clearfix )))

psywalker · August 12, 2011

так все-таки создавать пустой блок с классом .clearfix )))

Нет, повесить этот класс на нужные блоки.

otmoroz095 · August 12, 2011

чувствую чета сморозил отморозил. пойд с гуглом поговорю

sigma77 · August 12, 2011

otmoroz095,

http://www.xiper.net/collect/html-and-css-tricks/css-tricks/clearfix.html

otmoroz095 · August 12, 2011

а все, не успел)

спасибо! Этот способ семантически более правильный? буду пользовать.

psywalker · August 12, 2011

а все, не успел)
спасибо! Этот способ семантически более правильный? буду пользовать.

И правильно сделаешь. А то грязь разводил ненужную совершенно.

otmoroz095 · August 12, 2011

блин, не работает(

структура:

</div>

<span>выровнялось по краю

<p>опять ушло наверх.

</div>

psywalker · August 12, 2011

блин, не работает(
структура:
<div class="all">
<div class="content clearfix">
<p>TEXT</p>
<img float:left>
</div>
<span>выровнялось по краю
<p>опять ушло наверх.
</div>

Давай ссылку на тестовую страницу. И объясни, какой блок должен охватывать контент?

otmoroz095 · August 12, 2011

есть же ссылка выше (на первой странице)

сейчас заново сделаю.

на словах.

див. в нем все.

в этом диве еще один - в нем есть текст и картинки плавающие. закрывается

спан с подписью - нужно выровнять по правому краю. сейчас он обтекает справа.

далее список инлайновый.

первый див закрывается.

*****************

вот если перед и после спана не поставить cler:both - список поднимается к тексту с картинками, а спин его обтекает

otmoroz095,
http://www.xiper.net/collect/html-and-css-tricks/css-tricks/clearfix.html

спасибо, но не втыкаю.

вот сделал http://jsfiddle.net/VN34a/

psywalker · August 12, 2011

otmoroz095,

Ну вот, сделал же? http://jsfiddle.net/VN34a/

Тогда какие ещё вопросы?

Sign In

Осел не дает выронять по правому краю спан

Question

Link to comment

Share on other sites

38 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information