Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2013, 23:21
Аспирант
Отправить личное сообщение для valyan Посмотреть профиль Найти все сообщения от valyan
 
Регистрация: 05.11.2012
Сообщений: 55

Div внутри div
Здравствуйте. Никак не пойму как мне сделать div с чертой внизу другого div. Есть такой код
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="dialog">
  <div>
    <p>
      <font style='color: #2878af; font-size: 21px; font-family: Segoe_light;'> шоссе 144а</font><br>    <font style='font-size: 13px; font-family: Segoe_Semibold;'>заказов 2</font>
    </p>
  </div>
  <div id='orders'>
    <div class='line-1'></div>
    <p class='porders' id='porders1'>
      <table class='listorder'>
        <tr>
          <td>Заказ № 150</td>
          <td style='text-align:right;'>14:04</td></tr>
        <tr>
          <td>ул.Маршала Жукова дом12, кв 23<br/>статус кухни<br/>5</td>
          <td style='text-align:right;' valign='top'>14:04</td>
        </tr>
    </table>
  </p>
  <div class='line-1'></div>
  <p class='porders' id='porders0'>
    <table class='listorder'>
      <tr>
        <td>Заказ № 178</td>
        <td style='text-align:right;'>19:06</td>
      </tr>
      <tr>
        <td>ул.Маршала Жукова дом12, кв 23<br/>статус кухни<br/>undefined</td>
        <td style='text-align:right;' valign='top'>19:06</td>
      </tr>
  </table>
  </p>
  </div>
  <div id='component'> 
	<div class='line-1'></div>
	  <p >
        <input  type='button' id='CloseBtn' class='MapButton' value='Закрыть' />
    </p>
  </div>
</div>
</body>
</html>


и css
Код:
#dialog {
    border: 1px solid silver;
    /*margin: 15px;*/
    padding-left: 20px;
    padding-right: 20px;
    /*border-radius: 10px;/* закругленные углы*/
    width: 20%;
    position: absolute;
    z-index: 999;
    height: 85%;
    background: rgba(240, 240, 240, 0.9);
    /*bottom: 100px; /* Положение от нижнего края */
    top: 30px; /* положение от ыерхнего края */
    right: 25px; /* Положение от правого края */
    /*overflow: auto;*/
    font-size: 11px;
}

#dialog p
{
    margin: 0; /* Убираем отступы вокруг */
    padding-top: 5px;
    padding-bottom: 7px;
}
.line-1 
{ 
  border-top: 1px solid #c8c8c8; 
  border-bottom: 1px solid #fff; 
  height: 0px; 
}
.porders
{
	cursor: pointer;
}

.MapButton 
{
        color: #333333;
        background: yellow;
        border: 1px dotted #83B8C7;
        margin-top: 20px;
}
.listorder
{
	font-size: 11px;
	width: 100%;
	
}
#component
{
    position: absolute;
    bottom: 0px;
  right: 10px;
}
Получить черту и кнопку, привязанную к родительскому div снизу.
Ответить с цитированием
  #2 (permalink)  
Старый 03.09.2013, 00:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

valyan, вариант...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style type="text/css">
#dialog {
    border: 1px solid silver;
    /*margin: 15px;*/
    padding-left: 20px;
    padding-right: 20px;
    /*border-radius: 10px;/* закругленные углы*/
    width: 20%;
    position: absolute;
    z-index: 999;
    height: 85%;
    background: rgba(240, 240, 240, 0.9);
    /*bottom: 100px; /* Положение от нижнего края */
    top: 30px; /* положение от ыерхнего края */
    right: 25px; /* Положение от правого края */
    /*overflow: auto;*/
    font-size: 11px;

}

#dialog p
{
    margin: 0; /* Убираем отступы вокруг */
    padding-top: 5px;
    padding-bottom: 7px;
}
.line-1
{
  border-top: 1px solid #c8c8c8;
  border-bottom: 1px solid #fff;
  height: 1px;
  width: 100%;
}
.porders
{
	cursor: pointer;
}

.MapButton
{
        color: #333333;
        background: yellow;
        border: 1px dotted #83B8C7;
        margin-top: 20px;
}
.listorder
{
	font-size: 11px;
	width: 100%;

}
#component
{   width: 90%;
    position: absolute;
    padding-right: 5px;
    bottom: 0px;
    right: 10px;
    text-align: right;
}
</style>
<title>JS Bin</title>
</head>
<body>
<div id="dialog">
  <div>
    <p>
      <font style='color: #2878af; font-size: 21px; font-family: Segoe_light;'> шоссе 144а</font><br>    <font style='font-size: 13px; font-family: Segoe_Semibold;'>заказов 2</font>
    </p>
  </div>
  <div id='orders'>
    <div class='line-1'></div>
    <p class='porders' id='porders1'>
      <table class='listorder'>
        <tr>
          <td>Заказ № 150</td>
          <td style='text-align:right;'>14:04</td></tr>
        <tr>
          <td>ул.Маршала Жукова дом12, кв 23<br/>статус кухни<br/>5</td>
          <td style='text-align:right;' valign='top'>14:04</td>
        </tr>
    </table>
  </p>
  <div class='line-1'></div>
  <p class='porders' id='porders0'>
    <table class='listorder'>
      <tr>
        <td>Заказ № 178</td>
        <td style='text-align:right;'>19:06</td>
      </tr>
      <tr>
        <td>ул.Маршала Жукова дом12, кв 23<br/>статус кухни<br/>undefined</td>
        <td style='text-align:right;' valign='top'>19:06</td>
      </tr>
  </table>
  </p>
  </div>
  <div id='component'>
	<div class='line-1'></div>
	  <p >
        <input  type='button' id='CloseBtn' class='MapButton' value='Закрыть' />
    </p>
  </div>
</div>
</body>
</html>

Последний раз редактировалось рони, 03.09.2013 в 00:27.
Ответить с цитированием
  #3 (permalink)  
Старый 03.09.2013, 08:24
Аспирант
Отправить личное сообщение для valyan Посмотреть профиль Найти все сообщения от valyan
 
Регистрация: 05.11.2012
Сообщений: 55

рони, спасибо. Но почему последняя линия не подчиняется padding-left: 20px и padding-right: 20px?
Сделал пока так
#component
{   width: 83%;
    position: absolute;
    padding-right: 10px;
    padding-left: 10px;
    bottom: 0px;
    right: 10px;
    text-align: right;
}

Интересно, почему не подчиняется div`у dialog..

Последний раз редактировалось valyan, 03.09.2013 в 08:52.
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2013, 22:43
Интересующийся
Отправить личное сообщение для errante Посмотреть профиль Найти все сообщения от errante
 
Регистрация: 27.08.2013
Сообщений: 13

потому что ты используешь id а не class

используй !important там где есть противоречия
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать обход элементов внутри DIV reno4 jQuery 4 24.07.2013 13:30
выравнивание div внутри div ilnurgi (X)HTML/CSS 1 03.04.2013 15:18
Событие onclick на div, кроме элементов внутри него klev2004 Общие вопросы Javascript 3 04.10.2012 20:33
fade маленького div внутри большого div kenwo0d jQuery 17 19.05.2012 16:27
Перемещение div внутри другого Danila74 jQuery 1 24.09.2009 17:31