Скатились блоки и стили за черную рамку
У меня по какой-то причине съезжают некоторые стили(большая проблема особенно с блоками). Все в коде стоит вроде нормально,но все равно не выводит нормально стили. Один блок съехал влево, строки в самом верху за черную панель зашли. Надпись "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();