Как правильно переместить ту сумму чуть выше (ближе к слову “Корзина”)?

281
05 января 2017, 05:11

Вот код:

@import url(reset.css); 
 .header-up { 
  height: 44px; 
  font-family: Roboto; 
  margin: 0 auto; 
  width: 1200px; 
} 
body background { 
  width: 100%; 
} 
body { 
  margin: 0; 
  font-family: Roboto; 
} 
.header-up a { 
  text-decoration: underline; 
  color: #ffffff; 
} 
#header1 { 
  display: inline-block; 
  font-size: 15px; 
  margin-top: 12px; 
  overflow: hidden; 
} 
.header2-up { 
  background-color: #285023; 
} 
.header-up img { 
  margin-right: 10px; 
} 
#chelovek { 
  padding-left: 10px; 
  margin-left: 20px; 
  border-left: 1px #ffffff solid; 
} 
#login { 
  float: right; 
  display: inline-block; 
  margin-top: 12px; 
  margin-right: 20px; 
} 
#signin { 
  display: inline-block; 
  float: right; 
  margin-top: 12px; 
} 
#logo { 
  width: 220px; 
  float: left; 
  height: 50px; 
  margin-top: 30px; 
} 
#tovari { 
  float: left; 
  margin-top: 30px; 
  font-size: 14px; 
  color: #666666; 
  margin-left: 15px; 
} 
#korzina { 
  float: right; 
  width: 101px; 
} 
#korzina2 { 
  float: right; 
  height: 20px; 
} 
#summa { 
  float: right; 
  margin: 0; 
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
 
<head> 
  <meta http-equiv="content-type" content="text/html" charset="utf-8"> 
  <title>Мой сайт</title> 
  <link href="css/style.css" type="text/css" rel="stylesheet" /> 
</head> 
 
<body> 
  <div class="header2-up"> 
    <div class="header-up"> 
      <img src="images/Shesterenka.png" id="shesterenka"></img><span id="header1"><a href="#">Служба поддержки</a></span> 
      <img src="images/chelovek.png" id="chelovek"></img><span id="header1"><a href="#">Вакансии</a></span> 
      <span id="signin"><a href="#">Зарегестрироваться</a></span> 
      <span id="login"><a href="#">Войти</a></span> 
    </div> 
  </div> 
  <div class="headerlogo"> 
    <div id="logo"> 
      <a href="#"> 
        <img src="images/logo.png"> 
      </a> 
    </div> 
    <span id="tovari">Товары из Вьетнама<br/> от производителей</span> 
    <span id="vremya"><span>Пн-Вс:10:00-21:00</span> 
    <br/><span>+7 (495) 989-72-68</span></span> 
    <a href="#" id="zakazat"> 
      <img src="images/zakazat.png"></img> 
    </a> 
    <div id="korzina"> 
      <img src="images/korzina.png" /> 
      <a href="#" id="korzina2">Корзина<br/></a> 
      <h6 id="summa">35 560 р.</h6> 
    </div> 
</body> 
 
</html>

Answer 1

я добавил position: relative; margin-top: -5px;

#summa {
  float: right;
  margin: 0px;
  position: relative;
  margin-top: -5px;
}

@import url(reset.css); 
 .header-up { 
  height: 44px; 
  font-family: Roboto; 
  margin: 0 auto; 
  width: 1200px; 
} 
body background { 
  width: 100%; 
} 
body { 
  margin: 0; 
  font-family: Roboto; 
} 
.header-up a { 
  text-decoration: underline; 
  color: #ffffff; 
} 
#header1 { 
  display: inline-block; 
  font-size: 15px; 
  margin-top: 12px; 
  overflow: hidden; 
} 
.header2-up { 
  background-color: #285023; 
} 
.header-up img { 
  margin-right: 10px; 
} 
#chelovek { 
  padding-left: 10px; 
  margin-left: 20px; 
  border-left: 1px #ffffff solid; 
} 
#login { 
  float: right; 
  display: inline-block; 
  margin-top: 12px; 
  margin-right: 20px; 
} 
#signin { 
  display: inline-block; 
  float: right; 
  margin-top: 12px; 
} 
#logo { 
  width: 220px; 
  float: left; 
  height: 50px; 
  margin-top: 30px; 
} 
#tovari { 
  float: left; 
  margin-top: 30px; 
  font-size: 14px; 
  color: #666666; 
  margin-left: 15px; 
} 
#korzina { 
  float: right; 
  width: 101px; 
} 
#korzina2 { 
  float: right; 
  height: 20px; 
} 
#summa { 
  float: right; 
  margin: 0; 
  position: relative; 
  margin-top: -5px; 
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
 
<head> 
  <meta http-equiv="content-type" content="text/html" charset="utf-8"> 
  <title>Мой сайт</title> 
  <link href="css/style.css" type="text/css" rel="stylesheet" /> 
</head> 
 
<body> 
  <div class="header2-up"> 
    <div class="header-up"> 
      <img src="images/Shesterenka.png" id="shesterenka"></img><span id="header1"><a href="#">Служба поддержки</a></span> 
      <img src="images/chelovek.png" id="chelovek"></img><span id="header1"><a href="#">Вакансии</a></span> 
      <span id="signin"><a href="#">Зарегестрироваться</a></span> 
      <span id="login"><a href="#">Войти</a></span> 
    </div> 
  </div> 
  <div class="headerlogo"> 
    <div id="logo"> 
      <a href="#"> 
        <img src="images/logo.png"> 
      </a> 
    </div> 
    <span id="tovari">Товары из Вьетнама<br/> от производителей</span> 
    <span id="vremya"><span>Пн-Вс:10:00-21:00</span> 
    <br/><span>+7 (495) 989-72-68</span></span> 
    <a href="#" id="zakazat"> 
      <img src="images/zakazat.png"></img> 
    </a> 
    <div id="korzina"> 
      <img src="images/korzina.png" /> 
      <a href="#" id="korzina2">Корзина<br/></a> 
      <h6 id="summa">35 560 р.</h6> 
    </div> 
</body> 
 
</html>

READ ALSO
Как определить началась ли новая строка в textarea ? с помощью JQ

Как определить началась ли новая строка в textarea ? с помощью JQ

Добрый день, мне нужно увеличивать rows в textarea и увеличивать высоту самого блока вверх, если началась новая строка (как в Skype)Можно ли проверить...

295
Экспорт &ldquo;шрифтовой&rdquo; графики из Photoshop

Экспорт “шрифтовой” графики из Photoshop

Как экспортировать графику из Photoshop, которая сделана шрифтом?

375
Как начать две анимации одновременно? [требует правки]

Как начать две анимации одновременно? [требует правки]

Есть пример: сайт И иногда при его запуске анимация логотипа и анимация текста идет вразнобой (хотя кифреймы все выставлены одинаково)Чаще...

293
Элементы навигации в fancybox

Элементы навигации в fancybox

Доброго времени суток всем, столкнулся с проблемой, нужно сделать что бы элементы навигации в галерее "Вперед", "Назад", "Закрыть", были не именно...

324