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. Советую вам подтянуть основы. В сети полно обучающих материалов на эту тему. Когда подтянете базу, тогда можно смело браться и за адаптив.

Ваш ответ

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

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