1

Доброй ночи! Учусь верстать по макетам PSD. Подскажите пожалуйста, как убрать пробелы между картинками в моём случае, расположить вход так как показано на скриншотах? Уже 2-й час бьюсь, безрезультатно. Разметку и скрины прикрепляю ниже.

Старая версия

Ныне

Необходимый результат

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Snow</title>
  <link rel="shortcut icon" href="favicon.ico"/>
  <link rel="stylesheet" href="css/bootstrap.css"/>
  <link rel="stylesheet" href="css/bootstrap-theme.css"/>
  <link rel="stylesheet" href="css/font-awesome.css"/>
  <link rel="stylesheet" href="css/font-awesome.min.css"/>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <meta name="viewport" content="width=450, initial-scale=1.0"/>
</head>
<body>

     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->

    <div class="header">

        <div class="col-sm-offset-1 col-md-2 col-xs-12 col-lg-2">
          <a href="#"><img src="img/logo.png" class="logo"></a>
        </div>

        <div class="col-md-6 col-xs-12 col-lg-6">
          <p class="inheader">Все заявки и поставщики в одном месте</p>
          <p class="outcounter">Заявок вчера:</p><p class="incounter">4</p><p class="incounter">1</p><p class="incounter">3</p>
          <p class="outcounter2">Заявок сегодня:</p><p class="incounter">4</p><p class="incounter">1</p><p class="incounter">3</p>
        </div>

         <div class="col-md-2 col-xs-12 col-lg-3">
             <div class="button"></div>
         </div>
      </div>
    </div>

    <div class="header2">
    </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

* {
  font-family: 'Open Sans', sans-serif;
}


html, body {
  padding: 0;
  margin: 0;
}


.header2 {
  background: #2b2b2b;
  position: relative; 
  width: 100%;
  height: 140px;
  display: inline-block;
}

.header {
  background-image: url('img/headbackground.png');
  background-repeat: no-repeat;
  position: relative;  
  width: 100%;
  height: 140px;
  display: inline-block;
  background-size: cover;
}


.logo {
  width: auto;
  height: auto;
  position: relative;
  margin-top: 9%;
}

p.inheader {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.875em;
  position: relative; 
  color: #fff;
  margin-top: 1.6%;
  font-weight: bold;
}

p.outcounter {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  position: relative; 
  color: #fff;
  margin-top: 1%;
  margin-left: 1%;
  font-weight: bold;
  display: inline;
}

p.incounter{
  font-family: 'Open Sans', serif;
  font-size: 1.313em;
  position: relative; 
  color: #fff;
  display: inline-block;
  margin-left: 0.3%;
  margin-top: 1%;
  font-weight: bold;
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 8px 3px;
}

p.outcounter2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  position: relative; 
  color: #fff;
  margin-top: 1%;
  margin-left: 12%;
  font-weight: bold;
  display: inline;
}

div.button {
  width: 278px;
  height: 45px;
  background: #2aaa3d;
  border-radius: 15px;
  margin-top:60px;
  box-shadow: 0 -6px #008729 inset;
  transition: 0.3s;
  }

  div.button:hover {
  background: #0d881f;
  box-shadow: 0 -6px #095320 inset;
  }


a.logreg {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.000em;
  position: inline; 
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 1366px) {
p.inheader{font-size: 1.3em;}
p.incounter{font-size: 1em;}
p.outcounter{font-size: 1em;}
p.outcounter2{font-size: 1em;}
}

@media screen and (max-width: 1024px) {
.header{height: 300px;}
.logo{display:block; margin:10px auto 20px;}
}
11
  • Колонка 1: Лого. Колонка 2: Заявки и поставщики. Колонка 3: Вход, ниже кнопка. Или: Колонка 1: Лого. Колонка 2. Общая для правой части. Ее разбить на два ряда, в каждом по две колонки.
    – labris
    8 апр 2017 в 2:12
  • @labris - Это уже сделал, даже сделал их в кой то мере адаптивным, а что делать с нижней частью? Как её приклеить к верхней?
    – user234223
    8 апр 2017 в 2:52
  • Как можно было заметить там есть пробел между ними
    – user234223
    8 апр 2017 в 2:53
  • Залил нынешнюю картинку
    – user234223
    8 апр 2017 в 2:54
  • там еще styles.css тянется, где-то что-то прописано, попробуйте убрать маргины и отступы у хедеров (хотя бы через инспектор кода, там сразу будет видно).
    – labris
    8 апр 2017 в 3:07

1 ответ 1

0

Отступ между блоками — из-за inline-block у header, замените на display: block.

Стрелочку можно выделить с помощью clip-path:

html, body {
  padding: 0;
  margin: 0;
}


.header2 {
  background: #2b2b2b;
  position: relative; 
  width: 100%;
  height: 140px;
  display: block;
}

.header {
  background-image: url(http://www.hdwallpaper.nu/wp-content/uploads/2015/02/patterns_textures_gradient_car_2560x1600_wallpaperhi.com_.jpg);
  background-repeat: no-repeat;
  position: relative;  
  width: 100%;
  height: 140px;
  display: block;
  background-size: cover;
  
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 52% 90%, 50% 100%, 48% 90%, 0 90%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 52% 90%, 50% 100%, 48% 90%, 0 90%);
  margin-bottom: -5%;
  z-index: 10;
}

.logo {
  width: auto;
  height: auto;
  position: relative;
  margin-top: 9%;
}

p.inheader {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.875em;
  position: relative; 
  color: #fff;
  margin-top: 1.6%;
  font-weight: bold;
}

p.outcounter {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  position: relative; 
  color: #fff;
  margin-top: 1%;
  margin-left: 1%;
  font-weight: bold;
  display: inline;
}

p.incounter{
  font-family: 'Open Sans', serif;
  font-size: 1.313em;
  position: relative; 
  color: #fff;
  display: inline-block;
  margin-left: 0.3%;
  margin-top: 1%;
  font-weight: bold;
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 8px 3px;
}

p.outcounter2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  position: relative; 
  color: #fff;
  margin-top: 1%;
  margin-left: 12%;
  font-weight: bold;
  display: inline;
}

div.button {
  width: 278px;
  height: 45px;
  background: #2aaa3d;
  border-radius: 15px;
  margin-top:60px;
  box-shadow: 0 -6px #008729 inset;
  transition: 0.3s;
  }

  div.button:hover {
  background: #0d881f;
  box-shadow: 0 -6px #095320 inset;
  }


a.logreg {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.000em;
  position: inline; 
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 1366px) {
p.inheader{font-size: 1.3em;}
p.incounter{font-size: 1em;}
p.outcounter{font-size: 1em;}
p.outcounter2{font-size: 1em;}
}

@media screen and (max-width: 1024px) {
.header{height: 300px;}
.logo{display:block; margin:10px auto 20px;}
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Snow</title>
  <link rel="shortcut icon" href="favicon.ico"/>

  <meta name="viewport" content="width=450, initial-scale=1.0"/>
  
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

  </head>
<body>

     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->

    <div class="header">

        <div class="row">
          <div class="col-sm-offset-1 col-md-2 col-xs-12 col-lg-2">
            <a href="#"><img src="img/logo.png" class="logo"></a>
          </div>

          <div class="col-md-6 col-xs-12 col-lg-6">
            <p class="inheader">Все заявки и поставщики в одном месте</p>
            <p class="outcounter">Заявок вчера:</p><p class="incounter">4</p><p class="incounter">1</p><p class="incounter">3</p>
            <p class="outcounter2">Заявок сегодня:</p><p class="incounter">4</p><p class="incounter">1</p><p class="incounter">3</p>
          </div>

           <div class="col-md-2 col-xs-12 col-lg-3">
               <div class="button"></div>
           </div>
        </div>
    </div>

    <div class="header2">
    </div>

 
    </body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.