WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Получай пассивный доход от сайта с помощью браузерных PUSH уведомлений

Скатились блоки и стили за черную рамку

У меня по какой-то причине съезжают некоторые стили(большая проблема особенно с блоками). Все в коде стоит вроде нормально,но все равно не выводит нормально стили. Один блок съехал влево, строки в самом верху за черную панель зашли. Надпись "Basic information about this site" вообще куда-то вверх в бок ушла(за блок не зашла)
Код style.css

body{
   background-size: cover;
   background-repeat:no-repeat;

}

.header_logo_popup img{
background-image: url(C:\OSPanel\domains\ShablonMedicine\wp-content\themes\ShablonMedicine\assets\images\1.jpg);
background-repeat: no-repeat;
background-position: center;
margin-top: 140px;
height: 760px;
width:100%;
background-size: cover;
padding: 0;
margin: 0;
}

.logo{
font-size:70px;
color: aliceblue;
position: absolute;
margin-left: 30px;
top: 25px;
}

.logo_picture img{
background-size: cover;
background-position: center center;
height: 120px;
width: 120px;
margin-left: 540px;
top: 8px;
position: absolute;
}

.header_panel p {
	word-spacing: 10px;
	font-size:25px; 
	color:white;
	position: absolute;
	margin-right:30px;
	top: 75px;
	left:760px;
}

.header_ss {
	font-size: 30px;
	margin-left: 760px;
	top: 30px;
	position: absolute;
}

.header_ss2{
font-size:40px;
position: absolute;
color: white;
top: 935px;
left: 340px;
}

.logo_picture2 img{
background-size: cover;
position: absolute;
height: 450px;
left: 495px;
margin-top: 75px;
}

.logo3{
font-size: 80px;
font-weight: bold;
margin-left: 75px;
position: absolute;
margin-top: 80px;
}

.text{
  position: absolute;
  font-size: 30px;
  margin-top: 200px;
  margin-left: 40px;
}

.Button img{
  position: absolute;
  background-size: cover;
  height: 75px; 
  margin-top: 400px ;
  margin-left: 75px;
}

.Podrobno{
font-weight: bold;
color: teal;   
font-size: 40px;
margin-top: 407px;
margin-left: 150px;
position: absolute;
}

.logo_picture3 img{
	background-size: cover;
	position: absolute;
	height: 450px;
	left: 100px;
	margin-top: 75px;
	}
	.logo4{
		font-size: 80px;
		font-weight: bold;
		margin-left: 800px;
		position: absolute;
		margin-top: 80px;
		}

	.text2{
	  position: absolute;
	  font-size: 30px;
	  margin-top: 200px;
	  margin-left: 770px;
	}

	.Button2 img{
	  position: absolute;
	  background-size: cover;
	  height: 75px; 
	  margin-top: 400px;
	  margin-left: 800px;
	}

	.Podrobno2{
	font-weight: bold;
	color: teal;   
	font-size: 40px;
	margin-top: 407px;
	margin-left: 875px;
	position: absolute;
	}
.logo_picture4 img{
		background-size: cover;
		position: absolute;
		height: 450px;
		left: 430px;
		margin-top: 75px;
		}

		.logo5{
		font-size: 80px;
		font-weight: bold;
		margin-left: 60px;
		position: absolute;
		margin-top: 80px;
		}

		.text3{
		  position: absolute;
		  font-size: 30px;
		  margin-top: 200px;
		  margin-left: 40px;
		}

		.Button3 img{
		  position: absolute;
		  background-size: cover;
		  height: 75px; 
		  margin-top: 400px ;
		  margin-left: 50px;
		}

		.Podrobno3{
		font-weight: bold;
		color: teal;   
		font-size: 40px;
		margin-top: 407px;
		margin-left: 127px;
		position: absolute;
		}

		.text_os{
		  color: #033;
		  font-size: 80px;
		  text-align: center;
		  margin-top: 200px;
		}

	.text_info{
	color: white;
	font-size: 35px;
	margin-left: 550px;
	margin-top: 40px;
	position: absolute;

	}

.social_net1 img{
	position: absolute;
	background-size: cover;
	height: 90px;
	margin-left: 660px;
	margin-top: 150px;

			 }    
	.social_net2 img{
	position: absolute;
	background-size: cover;
	height: 90px;
	margin-left: 780px;
	margin-top: 150px;

	}    
	.social_net3 img{
		position: absolute;
		background-size: cover;
		height: 90px;
		margin-left: 900px;
		margin-top: 150px;
	}    

	.number{
	 color: white;
	font-size: 50px;
	position: absolute;
	margin-top: 120px;
	margin-left: 40px;
	}

	.telephone_hot{
	 color: aquamarine;
	 font-size: 30px;
	  position: absolute;
	  margin-top: 80px;
	  margin-left: 79px;
	}

Код block.css

figure{
  font-size: 0;
}

#block1{
  height: 140px;
  background-color: darkturquoise;
}

#block2{
	height:100px;
	background-color: #033;
}

#block3{
width: 1180px;
height: 600px;
background-color: whitesmoke;
margin-top: 70px;
}

#block4{
  width: 1165px;
  height: 600px;
  background-color: whitesmoke;
  margin-top: 30px;
  margin-left: 50px;
  }

  #block5{
	width: 1180px;
	height: 600px;
	background-color: whitesmoke;
	margin-top: 30px;
	}

  #block6{
	  height:300px;
	  background-color: #033;
	  margin-top: 300px;

  }

Код header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel = "stylesheet" href = "/assets/css/magnific-popup.css"/> -->
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
<title><?php bloginfo('description'); ?></title>
</head>
<body <?php body_class(); ?>>
<header class = "header">
<div id = "block1">
	<div class = "header_ss">
	  <?php the_field('header_ss');?>
	</div>   
<div class="logo_picture">
  <img src = "<?php the_field('logo_picture');?>"> 

</div>
<div class = "logo">
<?php the_field('logo');?>
   </div>
</div>  
<div class = "header_logo_popup">
<figure>
	<img src = "<?php the_field('header_logo_popup');?>">
</figure> 
</div>
</header>

Код index.php

<?php get_header(); ?>
<div id = "block2">
	<div class = "header_ss2">
		Basic information about this site
	</div> 
</div>

  <div id="block3">
	<div class = "logo_picture2">
		<img src = "<?php the_field('logo_picture2');?>">
	</div>
	<div class = "logo3">
	1 window
	</div>
	<div class = "text">
	Various services related to this site<br>
	are added here. In addition to the<br> 
	text itself, you can add pictures or<br>
	even a side.
	</div>  
	<div class = "Button">
	<img src = "<?php bloginfo('template_url'); ?>/assets/images/Слой8.png">
	</div>
  <div class = "Podrobno">
   Подробнее
</div>
</div>

<div id ="block4">
	<div class = "logo_picture3">
		<img src = "<?php the_field('logo_picture3');?>">
	</div>
	<div class = "logo4">
	2 window
	</div>
	<div class = "text2">
	all information about doctors or<br>
	other activities telling for trust
	</div>  
	<div class = "Button2">
	<img src = "<?php bloginfo('template_url'); ?>/assets/images/Слой8.png">
	</div>
  <div class = "Podrobno2">
   Подробнее
</div>
</div>

<div id="block5">
	<div class = "logo_picture4">
		<img src = "<?php the_field('logo_picture4');?>">
	</div>
	<div class = "logo5">
	3 window
	</div>
	<div class = "text3">
	information about living in the<br>
	territory of this sanatorium
	</div>  
	<div class = "Button3">
	<img src = "<?php bloginfo('template_url'); ?>/assets/images/Слой8.png">
	</div>
  <div class = "Podrobno3">
   Подробнее
</div>
</div>

<div class = "text_os">
At the bottom you can add a<br>
lot of different information<br>
about this site
</div>

<div id="block6">
	<div class = "telephone_hot">
		Telephone hotline
	</div>
 <div class = "number">
	+(000)000-00-00
	</div>
  <div class = "text_info"> 
  basic information related to contacts,<br>
  various socal networks can be placed here
  </div>  
<div class = "social_net1">
<a><img src = "<?php bloginfo('template_url'); ?>/assets/images/2.png"></a>
</div>

<div class = "social_net2">
	<a><img src = "<?php bloginfo('template_url'); ?>/assets/images/4.png"></a>
</div>

<div class = "social_net3">
	<a><img src = "<?php bloginfo('template_url'); ?>/assets/images/3.png"></a>
</div>
</div>
<!-- <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- <script src = "/assets/js/jquery.magnific-popup.min.js"></script> -->
<!-- <script src = "/assets/js/main.js"></script> -->
</body>
</HTML>

<?php
get_footer();
0
id433211235
5 месяцев назад

Нет ответов на этот вопрос.

    На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация