Расположение элементов на странице

337
09 апреля 2017, 00:40

Доброй ночи! Учусь верстать по макетам 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;}
}
Answer 1

Отступ между блоками — из-за 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>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте site-vizitka-kiev.org.ua
ТОП-10
READ ALSO
Golang Postgres pq формат даты
HTML

Golang Postgres pq формат даты

Есть база данных Postgresql, в ней табличка с полями типа date

 401
Как назвать переменную/className &ldquo;pop-up&rdquo; ? Сложно
HTML

Как назвать переменную/className “pop-up” ? Сложно

Здравствуйте,

 256
Как парсить и выводить JSON в HTML с помощью JavaScript?
HTML

Как парсить и выводить JSON в HTML с помощью JavaScript?

ПриветствуюНеобходимо парсить JSON, который находится на другом сайте, а после читать этот json и выводить таблицей в html на сайт

 376
Помогите с ссылкой на изображение
HTML

Помогите с ссылкой на изображение

Здравствуйте! Помогите сформировать ссылку на изображениеЕсть helper

 243