0

Поставил h3 а он выделяется таким образом, с текстом траблы, текст вылезает за блок, прикрепляю полный CSS и HTML код

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

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

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

a.onhead{
  text-decoration: none;
  color: #000;
  position: relative;
  padding: 1px;
  display: inline;
}

a.onhead:hover{
  color: #a9aaac;
  transition: 1s;
}

li {
  display: inline;
  list-style-type: none;
}

h3.onhead{
  display: inline;
  text-decoration: none;
  font-size: 25px;
  color: #fff;
  padding-left: 3em;
  padding-top: 3%;
  font-weight: bold;
  white-space: nowrap;
  min-width: 300px;
  max-width: 700px;
}

.row{
  background-image: url('img/headbackground.png');
  background-repeat: no-repeat;
  background-size:cover;
  -moz-background-size:cover;
  -webkit-background-size:cover;
}

#logo{
  margin-top: 3%;
  margin-left: 20%;
}

.head-block{
    height:150px;
}

#counter{
  position: absolute;
  font-size: 16px;
  color: #fff;
  border: 0.063em solid #fff;
  border-radius: 3px;
  display: inline;
  height: 40px;
  padding: 9px 2px;
  margin-left: 40.5%;
  margin-top: -1%;
}

a.counter{
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  margin-top: -40%;
  font-weight: bold;
  position: relative;
  bottom: 15%;
}

a.infocounter{
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  margin-top: 7%;
  margin-left: -25.5%
}
<!DOCTYPE html>

<html>

	<head>

		<title>MetPG - Металлургический портал</title>
		<meta charset="UTF-8">    
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="styles.css">
		<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
		<link rel="shortcut icon" href="favicon.ico">

		 <!-- 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]-->

		</head> 
<div class="row">
	<div class="shapka">
		<a href="#"><img id="logo" src="img/logo.png" alt="MetPG"></img></a>
		<h3 class="onhead">Все заявки и поставщики в одном месте</h3>
    <a class="infocounter">Заявок вчера:</a>
    <br><div id="counter"><a class="counter">1</a></div>     <div id="counter"><a class="counter">5</a></div>     <div id="counter"><a class="counter">7</a></div><br><br><br>
	</div>
</div>


<!-- <div class="body">
  <div class="col-xs-12 col-md-6 col-md-push-3">
    Middle
  </div>
  <div class="col-xs-12 col-md-3 col-md-pull-5">
    START
  </div>
  <div class="col-xs-12 col-md-3">
    FINISH
  </div>
</div>
</header> -->

    <!-- 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>

введите сюда описание изображения

1 ответ 1

0
  1. В HTML тег <img> не имеет закрывающего тега.

  2. Для стилей всегда используйте reset или normalize

  3. h3 у вас задано инлайновое отображение, поэтому на него ни ширина ни внешние отступы не подействуют, сделайте его блочным, или хотя бы инлайново-блочным.

  4. Для того чтобы вам подсказать, как сделать адаптивный сайт нужно знать исходные данные. Исходя из вашего вопроса и кода - у вас слабые знания html и css. Советую вам подтянуть основы. В сети полно обучающих материалов на эту тему. Когда подтянете базу, тогда можно смело браться и за адаптив.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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