Помогите с комментариями

new01 · June 1, 2011

Вот у меня блок с ид homeInfoMan.Туда я сую н-ное количество комментариев.Мне над что блок самого комментария отражался корректно.Вот пример.

Черным прямоугольником изображено аватарка пользователя,который написал комментарий,Name=Имя,Data=Дата напписания.Снизу после каждого комментария черта,т.е border-bottom. Вот небольшой код,который я написал.Но у меня некорректно отображается сам текст в комментарии,скажите в чём проблема.?!


 <style type='text/css'>
#homeInfoMan{margin-top:10px;margin-bottom:20px;padding-left:35px;text-align:left;}	
#homeInfoMan p {padding:10px;text-align:right;margin-right:40px;}
#commenOne{border-bottom:1px solid red;width:490px; margin-top: 10px;display:inline-block }
#comAvatar{width:67px;height:67px;float:left;padding:5px;}
#commenText{word-wrap:break-word;width:346px;margin-top:3px;margin-left:10px;font-weight:100;font-size:12px;text-align:left;padding-bottom:10px;}


</style>


<title>$Welcometo</title>
 </head>
 <body>
 <div id='homeInfoMan'>

 <div id='commenOne'>
 <div id='comAvatar'>
<img src='../foto/1/name/Avatar/1.jpg' widht='67' height='67'/>
</div>
<div style='margin-left:5px;widht:390px;height:15px;float:left;'>
		    <div style='float:left;margin-left:10px;'>
			Name
			</div>
			 <div style='font-size:10px;margin-top:5px;float:right;margin-right:15px;'>
			 DATA
			 </div>
	          <div id='commenText'>
			 Text
 </div>

 </div>


 </body>

Softlink · June 1, 2011

так а в чем заключается некорректность?

psywalker · June 1, 2011

#commenOne {overflow: hidden;}, не?

Softlink · June 1, 2011

в общем для своей практики я еще и свой вариант сверстал

может поможет чем-нибудь

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <style type='text/css'>
.comments{
width:600px;
overflow:hidden;
}

.comment{
border-bottom:1px solid #ccc;
padding-bottom:20px;
overflow:hidden;
}

.avatar{
width:80px;
height:80px;
display:block;
float:left;
background:red;
}

.pole{
width:500px;
float:right;
margin-top:20px;
min-height:60px;
border:1px solid #000;
}

.info{
width:450px;
overflow:hidden;
margin-left:100px;
margin-bottom:-20px
}

.name{
float:left;
}

.date{
float:right;
}
</style>


<title>Welcometo</title>
 </head>
 <body>
	<div class="comments">
		<div class="comment">
			<div class="info">
				<div class="name">name</div>
				<div class="date">data</div>
			</div>
			<div class="avatar">ava</div>
			<div class="pole">текст текст текст текст текст текст текст текст текст</div>
		</div>
	</div>

 </body>
</html>

new01 · June 2, 2011

Softlink,разбираю ваш вариант,мне понравился,,только есть небольшая ошибка.Бордюр нижний у блока с классом comment border-bottom:1px solid #ccc; в экспловере смещается вверх будто там нет ваще никаких блоков выше.Вот скрин,специаольно поменял ширину борюда на 5 пикслейе чтоб лучше было видно.

psywalker.добавил #commenOne {overflow: hidden;},но проблема не решилась.В опере Блок С Текстом комментария встает справа от Имени,а в эспловере ниже ,но не ровно с ним по вертикали.Познакомился с overflow: hidden;,прочитал про него,но не совсем понял,что он значит.

Можете немного прояснить?

Softlink · June 2, 2011

On 6/2/2011 at 11:31 AM, new01 said:
Softlink,разбираю ваш вариант,мне понравился,,только есть небольшая ошибка.Бордюр нижний у блока с классом comment border-bottom:1px solid #ccc; в экспловере смещается вверх будто там нет ваще никаких блоков выше.Вот скрин,специаольно поменял ширину борюда на 5 пикслейе чтоб лучше было видно.
psywalker.добавил #commenOne {overflow: hidden;},но проблема не решилась.В опере Блок С Текстом комментария встает справа от Имени,а в эспловере ниже ,но не ровно с ним по вертикали.Познакомился с overflow: hidden;,прочитал про него,но не совсем понял,что он значит.
Можете немного прояснить?

а в каком ie смотрите? Я, например, с 6-ым уже давно распрощался. А в 8-м у меня все в порядке.

new01 · June 2, 2011

я про 6-ой говорю.

Softlink · June 2, 2011

On 6/2/2011 at 11:40 AM, new01 said:
я про 6-ой говорю.

печалька однако

Но в нем я вообще не проверял и уже вряд ли когда буду. Соответственно сходу подсказать не смогу

new01 · June 2, 2011

ну просто,я ориентируюсь на большие сайты типа mail.ru,ya.ru,facebook и т.д. У них во всех браузерах всё отбражается корректно.Я тоже хочу этого добиться. Если придумаете напишите решение,я пока тоже попробую.Заранее спасибо.

Softlink · June 2, 2011

в общем надо что-то придумать с min-height и будет вам счастье. Не будет схлопываться высота основного дива и поля с комментариями.

В ие 6 он не поддерживается. А как приделать такой костыль я не знаю

new01 · June 2, 2011

Я сам всё сделал.Сейчас выложу код.!

Сделал почти у каждого блока border:1px solid #000000; чтоб легче было видно блоки.


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> 
<html xmlns='http://www.w3.org/1999/xhtml'>
 <head>
 <style type='text/css'>
#homeInfoMan{margin-top:10px;margin-bottom:20px;padding-left:35px;text-align:left;}       
#homeInfoMan p {padding:10px;text-align:right;margin-right:40px;}

#commenOne{ clear: both;border-bottom:6px solid red;width:490px;overflow:hidden;min-height:80px; }
#comAvatar{width:67px;height:67px;float:left;padding:5px;border:1px solid red;text-align:center;}
#commenText{border:1px solid #000000;word-wrap:break-word;width:400px;margin-top:3px;font-
weight:100;font-size:12px;text-align:left;padding-bottom:10px;overflow: hidden;}

*html #commenOne {height: expression((document.documentElement.clientHeight || document.body.clientHeight) < 80 ? '80x' : 'auto');}

</style>


<title>$Welcometo</title>
 </head>
 <body>
<div id='homeInfoMan'>
     <div id='commenOne'>
          <div id='comAvatar'>

          <img src='../foto/1/name/Avatar/1.jpg' widht='67' height='67'/>

          </div>
		        <div style='float:left;margin-left:4px;text-align:left;border:1px solid red;width:405px;'> 

                 <div style='border:1px solid #000000;height:15px;float:left;width:400px;'>
                      <div style='float:left;border:1px solid #000000;'>
                      Name
                      </div>
                            <div style='font-size:10px;float:right;margin-right:15px;border:1px solid #000000;'>
                             DATA
                            </div>
				 </div>

                                   <div id='commenText'>
                                   Text
                                   </div>
				</div>



     </div>
</div>


 </body>
</html>

Edited June 2, 2011 by new01

Softlink · June 2, 2011

ага, expression пришел на помощь. Я ими ни разу не пользовался и не знаю как они работают.

new01 · June 2, 2011

Softlink,нет. expression здесь никакой роли не играет.(Он просто там остался ,я пробовал с ним) Просто я получше разобрался с блоками и всё . :-)

Softlink · June 2, 2011

On 6/2/2011 at 12:39 PM, new01 said:
Softlink,нет. expression здесь никакой роли не играет.(Он просто там остался ,я пробовал с ним) Просто я получше разобрался с блоками и всё . :-)

ладно, главное заработало

А про expression я вообще ничего не знаю. Надо будет почитать.

new01 · June 2, 2011

Я прям рад.Так хорошо разобрался .

Int · June 2, 2011

On 6/2/2011 at 11:47 AM, new01 said:
У них во всех браузерах всё отбражается корректно.Я тоже хочу этого добиться.

Даже в lynx проверяете? И Konqueror? opera mini, само собой?

Sign In

Помогите с комментариями

Question

Link to comment

Share on other sites

15 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

Join the conversation

Обсуждения

Important Information