Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ?? / 13 сообщений из 13, страница 1 из 1
07.06.2013, 18:13
    #38290880
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
Вот такой незамысловатый код:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<html>
<head>
<style>
  body {font-family: Arial;}
  .gb_subjpnl {background: silver;}
  .gb_date {float: right; color: red; font-weight: bold;}
</style>
</head>

<body>
<div class=gb_subjpnl>
  test
  <span class=gb_date>01.01.2013</span>
</div>
</body>
</html>



Не пойму, почему дата выделенная красным цветом вылезает за рамки DIV-а?
Если убрать выравнивание по правому краю, то дата отрисовывается внутри блока...
Как сделать чтобы она оставалась внутри DIV-а, при этом оставаясь выравненной по правому краю?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.06.2013, 18:18
    #38290885
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
SQL-Talker,

а браузер какой? Сейчас попробовал в Опере, Хромом - всё нормально.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.06.2013, 03:03
    #38291568
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
user89,

На работе под winXP перепробовал в опере, хроме, ie6, ie8, везде указанная кривизна. Дома на ноуте под Win8 в хроме и встроенном ie все тип-топ, а под оперой - та же байда...
Прикрепил картинку.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.06.2013, 14:45
    #38291700
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
Есть такая штука, доктайп называется. Первой строкой идёт именно он - <!DOCTYPE html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2013, 09:30
    #38292074
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
SQL-Talker,

как правильно заметил st_st, надо указать доктайп.
 
Проверял на WinXP
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<!DOCTYPE html>
<html>
<head>
<style>
  body {font-family: Arial;}
  .gb_subjpnl {background: silver;}
  .gb_date {float: right; color: red; font-weight: bold; display: inline;}
</style>
</head>

<body>
<div class=gb_subjpnl>
  test &#8744;
  <span class=gb_date>01.01.2013</span>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2013, 09:52
    #38292103
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
Все верно, с доктайпом почти на всех браузерах все корректно отображается.
Кроме IE6. Отмахнуться от него не могу - порядка 40% пользователей сидят на нем ((
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2013, 10:26
    #38292147
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
SQL-Talker,

1. Добавить для спана смещение вверх margin-top:-17px;
2. Разметить с помощью таблицы
3. Попросить админов сделать групповую политику, что при входе в домен, у пользователей установился нормальный браузер
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2013, 10:57
    #38292189
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
user89,

спасибо, дописал:
Код: html
1.
<!--[if IE]> <style>.gb_date {margin-top:-18px;}</style> <![endif]-->


вроде везде работает.

пункт 3 - было бы, конечно, идеально, но, к сожалению, нереализуемо, т.к. с приложением работает хотя и ограниченное кол-во пользователей, но все из разных организаций..
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2013, 11:57
    #38292282
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
Я тут решил глянуть в сети как такие вещи реализованы и вот первое попавшееся: ссылка на форум
На форуме номер сообщения тоже обернут в спан, тоже выровнен в право и тоже находится внутри див-а и тем не менее в IE 6 отображается все правильно.

Хочу понять, почему? Почему в моем примере приходится подставлять костыль, а тут все нормально?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2013, 13:07
    #38292410
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
SQL-Talker,

если спан вынести за пределы родительского дива, то будет нормально
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<!DOCTYPE html>
<html>
<head>
<style>
  body {font-family: Arial;}
  .gb_subjpnl {float:left; width:550px; height:20px; background-color:#8DD5EB;}
  .gb_date {float:left; width:90px; height:20px; text-align:right; background-color:#9C8DEB;} 
</style>
</head>
<body>
<div class=gb_subjpnl>test</div>
<span class=gb_date>01.01.2013</span>
</body>
</html>


З.Ы. А почему нельзя использовать верстку таблицами?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2013, 13:27
    #38292441
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
user89,

В этом варианте фиксируется ширина, а хотелось бы обойтись без фиксирования.
Почему не таблица - тренируюсь в верстке только дивами ))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2013, 13:52
    #38292497
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
SQL-Talker,

тогда еще один внешний див
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<!DOCTYPE html>
<html>
<head>
<style>
  body {font-family: Arial;}
  .gb_subjpnl {float:left; height:20px; background-color:#8DD5EB;}
  .gb_date {float:right; height:20px; text-align:right; background-color:#9C8DEB;} 
</style>
</head>
<body>
<div style="background-color:#8DD5EB; width:100%; height:20px;">
<div class=gb_subjpnl>test</div>
<span class=gb_date>01.01.2013</span>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2013, 16:14
    #38292854
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ??
Абсолютное позиционирование так же никто не отменял...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.gb_subjpnl {
	position: relative;
	background: silver;
}
.gb_date {
	position: absolute;
	top: 1px;
	right: 1px;
	color: red; 
	font-weight: bold;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class='gb_subjpnl'>
	test
	<span class='gb_date'>01.01.2013</span>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [HTML + CSS] Выровненненный по правому краю SPAN отрисовывается ниже блока DIV. ПОЧЕМУ?? / 13 сообщений из 13, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 472ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448243]:
 0ms
get settings:
 9ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 161ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 34ms
get tp. blocked users:
 1ms
others: 243ms
total:  472ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]