@Elbakidze

Как сделать ширину меньше?

5ecce8ca5e50e760575818.png
Как сделать вот такую ширину как на фото?
CSS стили формы системы комментирования
/*.zeroCommentsCount:before {
  content: "No one has posted a comment yet"!important;
}*/
.sendNotAvail:before {
  content: "Возможность комментирования недоступна"!important;;
}
.showSortButton {
  cursor: pointer;
  color: rgb(80,80,80);
}
.showSortButton:hover {
  color: black;
}
.sortLinks {
  display: none;
}
.social_auth_buttons {

}
.activeMessage {
  background: rgb(250,250,250);
}
.ratingBarBlock {
  float: right;
  height: 50px;
  padding: 10px 10px 0px 0px;
}
.ok_auth_button {
  display: inline-block;
  background: url(http://sigcomments.com/icons/ok.png) transparent no-repeat no-repeat;
  background-size: 100% 100%;
  width: 22px;
  height: 30px;
  cursor: pointer;
}
/*
.twitter_auth_button {
  display: inline-block;
  background: url(/icons/twitter.png) transparent no-repeat no-repeat;
  width: 32px;
  height: 32px;
  cursor: pointer;
}*/
.vk_auth_button {
  color: rgb(76,117,163);
  margin-top: 4px;
  margin-right: 6px;
  display: inline-block;
  width: 32px;
  height: 32px;
  font-size: 2.1em;
  cursor: pointer;
  font-family: FontAwesome;
}
.vk_auth_button:before {
  content: "\f189";
}
/*.ok_auth_button {
  color: rgb(245,130,32);
  margin-top: 4px;
  margin-right: 6px;
  display: inline-block;
  width: 32px;
  height: 32px;
  font-size: 2.1em;
  cursor: pointer;
  font-family: Arial;
}
.ok_auth_button:before {
  content: "Ok";
}*/
.twitter_auth_button {
  color: rgb(39,170,225);
  margin-top: 4px;
  display: inline-block;
  width: 32px;
  height: 32px;
  font-size: 2.1em;
  cursor: pointer;
  font-family: FontAwesome;
}
.twitter_auth_button:before {
  content: "\f081";
}
.facebook_auth_button {
  color: rgb(60,89,159);
  margin-top: 4px;
  display: inline-block;
  width: 32px;
  height: 32px;
  font-size: 2.1em;
  cursor: pointer;
  font-family: FontAwesome;
}
.facebook_auth_button:before {
  content: "\f082";
}
.chatContainer {
  font-family: Arial;
  background-color: white;
  right:0px;
  bottom:0px;
  padding: 0px;
  border: 2px solid rgb(198,198,198);
  overflow: hidden;
  position: relative;
  margin: 5px;
  border-radius: 5px;
}
.chatBlockHeader {
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  overflow: hidden;
  margin-left: 3%;
  margin-right:3%;
  padding-right: 15px;
  /*line-height: 50px;
  white-space: nowrap;*/
  /*width: 100%;
  display: table-cell;*/
  /*display:inline-block; vertical-align:middle;*/
  cursor: pointer;
  -moz-user-select: none; 
  -khtml-user-select: none; 
  -webkit-user-select: none; 
  -o-user-select: none; 
  float: left;
}
.chatBlockSendMessageForm {
  /*height: 100px;*/
}
.chatBlockSendMessageButtonBlock {
  width: 92%;
  margin: 0px auto 0px;
}
.chatBlockSendMessageButton {
  float:right;
}
.chatBlockUploadPhotoButton {
  cursor: pointer;
  width: 32px;
  height: 26px;
  float:right;
  /*background-image: url(/icons/camera_1.jpeg);
  background-color: transparent;
  background-repeat: no-repeat no-repeat;
  background-position: 0px 0px;
  border: 0px solid transparent;*/
  color: rgb(41,150,204);
  margin-top: 3px;
  font-size: 1.6em;
  outline: none;
}
.chatBlockUploadPhotoButton:hover {
  color: rgb(37,134,183);
}
.chatBlockHeaderText {
  display: inline-block;
  vertical-align: middle;
  line-height: 14px;
}
.logOutButton {
  cursor: pointer;
  float: right;
  color: rgb(37,134,183);
  font-size: 1.4em;
  padding: 1px;
}
.logOutButton i {
  vertical-align: -3px;
  margin-left: 5px;
}
.logOutButton span {
  font-size: 0.7em;
}
.bottomInfo {
  text-align: right;
}
.loginForm {
  float: right;
  display: none;
  margin-top: 10px;
}
.loginForm div {
  padding: 3px;
}
.loginForm div span {
  float:left;
  line-height: 25px;
  padding-right: 7px;
}
.loginFormInput {
  padding: 3px;
  margin: 0px;
  float:right;
  font-size: 16px;
}
.loginFormButton {
  float: right;
}
.orderLinks {
  color: inherit;
  text-decoration: none;
  margin-right: 7px;
  cursor: pointer;
}
.orderLinks:hover {
  text-decoration: underline;
}
.messageAtt {
  margin: 5px;
  cursor: pointer;
  float: left;
}
.loadMoreButton {
  padding: 4px;
  margin: 10px auto;
  cursor: pointer;
  border: none;
}
.lMBBlock {
  text-align: center;
  padding: 10px;
}

.blueButton {
  display: inline-block;
  margin: 3px 0px 0px;
  cursor: pointer;
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 25px;
  padding: 0px;
  text-align: center;
  background-color: rgb(41,150,204);
  font-size: 0.7em;
  padding: 0px 24px;
  border-radius: 3px;
}
.blueButton:hover {
  background-color: rgb(37,134,183);
}
.btn {
  cursor: pointer;
  background: #67afdb;
  background-image: -webkit-linear-gradient(top, #67afdb, #0b68a1);
  background-image: -moz-linear-gradient(top, #67afdb, #0b68a1);
  background-image: -ms-linear-gradient(top, #67afdb, #0b68a1);
  background-image: -o-linear-gradient(top, #67afdb, #0b68a1);
  background-image: linear-gradient(to bottom, #67afdb, #0b68a1);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  text-shadow: 0px 1px 3px #666666;
  -webkit-box-shadow: 0px 0px 1px #666666;
  -moz-box-shadow: 0px 0px 1px #666666;
  box-shadow: 0px 0px 1px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 8px 5px 8px;
  border: solid #0b68a1 0px;
  text-decoration: none;
}

.btn:hover {
  background: #0b68a1;
  background-image: -webkit-linear-gradient(top, #0b68a1, #0b68a1);
  background-image: -moz-linear-gradient(top, #0b68a1, #0b68a1);
  background-image: -ms-linear-gradient(top, #0b68a1, #0b68a1);
  background-image: -o-linear-gradient(top, #0b68a1, #0b68a1);
  background-image: linear-gradient(to bottom, #0b68a1, #0b68a1);
  text-decoration: none;
}
.sc_userPhoto {
float: left;
}
.sc_userPhoto img {
width: 50px; height: 50px;
}
.sc_sendTextarea {
position:relative;
margin-left: 70px;
}
.chatBlockSendMessageTextarea {
  border: 2px solid rgb(200,200,200);
  background-color:white;
  height: 50px;
  padding: 5px;
  font-family: Arial;
  border-radius: 5px;
  outline: none;
  overflow-y: hidden;
  font-size: 16px;
  width: 100%;
  float: right;
}


HTML формы системы комментирования
<div class="chatContainer borderRadius" {elem:chatContainer}>
  <div class="chatBlockHeader borderRadius" {elem:header}>
    {text:header}
    {text:commentsCount} {text:commentsCountWord}
  </div>
  <div class="ratingBarBlock">{elem:ratingBar}</div>
  <div class="clear"></div>
  <div class="chatBlockSendMessageButtonBlock">
    <div class="logOutButton" title="{text:logOutButton}" {elem:logOutButton}>
<span>{text:userName}</span><i class="fa fa-sign-out"></i></div>
    <div class="clear"></div>
  </div>
  <div class="chatBlockSendMessageForm" {elem:chatBlockSendMessageForm}>
<div style="width: 92%; margin: 10px auto;">
<div class="sc_userPhoto">
<img src="/icons/anon.gif" {elem:userPhoto}>
</div>
<div class="sc_sendTextarea">
<textarea placeholder="{text:helloText}" class="chatBlockSendMessageTextarea" {elem:sendTextarea}></textarea>
</div>
<div class="clear"></div>    
</div>
    <div class="chatBlockSendMessageButtonBlock">
      <div class="chatBlockSendMessageButton blueButton" {elem:sendButton}>
        {text:sendButton}
      </div>
      <i class="fa fa-camera chatBlockUploadPhotoButton" alt="{text:uploadButton}" {elem:uploadButton}></i>
      <div class="clear"></div>
      <div class="loginForm" {elem:loginForm}>
        <form onsubmit="return false;">
          <div>
            <span>{text:enterName}:</span><br/><input type="text" class="loginFormInput userName" {elem:enterNameInput}>
          </div>
          <div>
          <div class="clear"></div>
          <span>{text:enterEmail}:</span><br/><input type="text" class="loginFormInput userEmail" {elem:enterEmailInput}></div>
          <div>
            <div class="clear"></div>
            <button class="loginFormButton" {elem:loginFormButton}>{text:loginFormButton}</button>
          </div>
          <div class="clear"></div>
          {text:socialLogin}
          <div class="social_auth_buttons">
            <span class="vk_auth_button" {elem:vk_auth}></span>
            <span class="twitter_auth_button" {elem:twitter_auth}></span>
            <span class="facebook_auth_button" {elem:facebook_auth}></span>
            <span class="ok_auth_button" {elem:ok_auth}></span>
          </div>
        </form>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <div style="padding: 7px 4% 1.3em;">
    <div class="showSortButton" onclick="$(this).hide();$('.sortLinks').fadeIn(200);">
      {text:sortButton} <i class="fa fa-caret-down"></i>
    </div>
    <div class="sortLinks">
      <span class="orderLinks" {elem:idDescOrderButton}>{text:idDescOrderButton}</span>
      <span class="orderLinks" {elem:ratingDescOrderButton}>{text:ratingDescOrderButton}</span>
    </div>
  </div>
  {elem:messages}
  <div class="lMBBlock"><button class="loadMoreButton blueButton" {elem:loadMoreButton}>{text:loadMore}</button></div>
</div>


CSS стили блока сообщения
HTML блока сообщения
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
@g33km
Один из вариантов - высчитать вручную наибольшую ширину в px/% и задать для класса
.chatContainer {
max-width: значение;
}


Где "значение" - высчитанное значение максимальной ширины (например, 80% - тогда блок с отправкой сообщения будет занимать 80% от ширины родителя)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы