• Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    ProjectSoft, Спасибо Вам! Извините за потраченное время.
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    ProjectSoft, Вы говорите загадками для незнающего и неразбрирающегося человека в верстки и в программирование в целом. Я знаю как надо работать и решать задачи, однако я задал вопрос тут не просто так, я хотел, чтобы дали четкий код, который исправит ошибки.
    На счет float - он был использован и работал четко, но при попытке вставление вашего кода, прозошел сбой и приходиться понять в чем дело.
    Float еще остался в других местах, вопрос таков: убирать надо везде и заменять flex-ом?
    Вы видели сайт, какими всеми flex-ами надо заполнить сайт, чтобы он работал и не был наизнанку? Будьте добры, ответье четко, либо спасибо вам за помощь, вы помогли мне приблизиться к разгадке.
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    ProjectSoft, 63e82b1080a67858373670.jpeg
    Вот как должно быть. И left помогало в этом, но я сделал код, который вы скинули, и обломалось.
    Как быть то?
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    https://codepen.io/ipgroy/pen/bGjXQrX
    В самой песочнице отображается нормально, но в браузере на моем сайте отображается вот так - 63e81c30c7b41609649401.jpeg63e81c49920e1886730427.jpeg
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    ProjectSoft, Я ни в коем случае никого не обвиняю, я новичок и могу ошибаться.
    Я сделал все как надо, задача остается нерешенной.
    Вот что выходит
    63e8185d87d74750611676.jpeg
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    Ankhena, Я специально дал весь код, может где-то проблема выше
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    Ankhena, Вы не поверите, но в песочнице все работает, а на моем сайте - нет.
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    Ankhena, Я пробовал все, но не получается. Видимо ошибка где-то, не могу найти
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    @import url('https://fonts.googleapis.com/css2?family=Lora&family=Roboto:wght@300&display=swap');
    
    *{
        margin: 0;
        padding: 0;
        outline: none;
    }
    
    body, html {
        width: 100%;
        height: 100%;
    }
    
    body {
        background-color: #fafafa;
        font-family: 'Trebuchet MS', Helvetica;
    }
    
    /* Шапка сайта */
    
    header {
        width: 100%;
        padding: 10px 0.5% 0px 0.5%;
        background: transparent;
        float: left;
        position: fixed;
    }
    
    header #logo{
        color: #fff;
        cursor: pointer;
    }
    
    .logo_simple {
        float: left;
        display: block;
        margin-left: 15px;
        line-height: 35px;
    }
    
    
    header #logo span {
        line-height: 45px;
        font-size: 42px;
        font-weight: 700;
        margin-left: 10px;  
        font-family: 'Lora', serif;
        font-weight: bolder;
    }
    
    @media (min-width: 701px) {
        #logo {
            float: left;
            width: 30%;
            font-size: 1.4em;
        }
    }
    
    #about {
        float: right;
        width: 67%;
     }
    
    
    @media (max-width: 700px) {
        #logo {
            margin-top: 15px;
            width: 100%;
            font-size: 1.1em;
        }
    }
    
    #about {
        float: left;
        width: 70%;
    }
    
    #about {
        text-align: center;
        font-size: 1.1em;
        line-height: 50px;
        margin-bottom: 3px;
        margin-top: 0px;
    }
    
    #about > a {color: #fff}
    
    #about > a:hover {
        color: #b0b0b0;
        text-decoration: underline;
    }
    
    #about > a:not(:last-child) {
        margin-right: 7%;
    }
    
    .fixed {
        z-index: 5000;
        background-color: #fff;
        border-bottom: 1px solid silver;
    }
    
    header.fixed #logo {
        color: #343434
    }
    .fixed #about a {color: #343434}
    .fixed #about a:hover {color: #7c7c7c}
    
    /* Главный блок на сайте */
    
    #top {
        width: 100%;
        height: 1000px;
        background-image: url(https://celes.club/uploads/posts/2022-05/thumbs/1653286061_29-celes-club-p-buddizm-fon-dlya-prezentatsii-krasivie-37.jpg);
        background-blend-mode: multiply;
        background-color: #2e3a44;
        background-size: cover;
        text-align: center;
        color: #fff;
    }   
    
    @media (min-width: 1101px) {
        #top {
            font-size: 3em;
            height: 1000px;
        }
    }
    
    @media (max-width: 1000px) and (min-width: 651px) {
        #top {
            font-size: 2em;
            height: 600px;
        }
    }
    
    @media (max-width: 650px) {
        #top {
            font-size: 1.3em;
            padding-top: 50%;
            height: 500px;
        }
    }
    
    
    #top h1{
        padding-top: 20%;
    }
    
    #top h3{
        color: #ccc
    }
    
    #main{
        padding: 100px 20%;
        width: 60%;
        float: left;
        background-color: #f6f6f6;
        border-top: 2px solid silver;
        color: #484848;
        font-size: 1.3em;
    }
    
    @media (min-width: 1401px) {
        #main {
        padding: 100px 20%;
        width: 60%;
        }
    }
    
    @media (max-width: 1400px) {
        #main {
        padding: 100px 10%;
        width: 80%;
        }
    }
    
    @media (max-width: 700px) {
        #main div {
            width: 98%!important;
            margin-bottom: 20px;
        }
    }
    
    #main div {
        width: 48%;
        margin-right: 2%;
        float: left;
    }
    
    #main h2 {font-size: 3em}
    #main span {color: #a0a0a0}
    
    /* Храмы */
    
    #overview {
        float: left;
        background-image: url(https://media.discordapp.net/attachments/990816877691437086/1073720104447135854/Urutty_buddhist_monk_meditating_on_the_mountain_HD_cd213de8-7ac3-4a1f-b275-31cd5fa346bc.png?width=602&height=602);
        background-blend-mode: multiply;
        background-color: #4f1c75;
        background-size: cover;
        background-attachment: fixed;
    
        padding: 100px 0;
        width: 100%;
        text-align: center;
        color: #fff;
    }
    
    #overview h1 {font-size: 4em}
    
    #overview .img {
        float: left;
        width: 30%;
        margin-right: 5%;
        margin-left: 1%;
        margin-top: 50px;
    }
    
    #overview .img:nth-child(even) {
        margin-left: 18%;
    
    }
    
    #overview img {
        background: hwb(0 31% 12%);
        padding: 5px;
        border: 2px solid rgb(48, 42, 42);
        float: left;
        width: 100%;
        max-width: 500px;
    
    }
    
    #overview span{
        float: right;
        width: 100%;
        font-size: 2em;
        margin-top: 10px;
        margin-right: 2%;
    
    }
    
    @media (max-width: 700px) {
        #overview .img {
            width: 80%!important;
            margin-right: 0!important;
            margin-left: 10%!important;
        }
    }
    
    h1, h2, h3 {
        font-family: 'Brygada1918';
    }
    
    /*Вопросы и ответы*/
    
    #faq {
        background-color: #f6f6f6;
        border-top: 2px dashed #e4e3e3;
        width: 100%;
        float: left;
        padding-top: 70px;
        padding-bottom: 70px;
    }
    
    #faq div {
        width: 25%;
        margin-left: 6%;
        float: left;
    }
    
    @media (min-width: 801px) {
        #faq div {
            width: 25%;
            margin-left: 6%;
            float: left
        }
    }
    
    @media (max-width: 800px) {
        #faq div {
            width: 80%;
            margin-left: 10%;
            float: left;
        }
    }
    
    #faq .heading {
        font-weight: bold;
        color: #7d7d7d;
        display: block;
        margin-bottom: -0.4em;
        font-size: 2em;
    }
    
    #faq p {
        font-family: Arimo, Helvetica, sans-serif;
        color: #4a4a4a;
        font-size: 0,95em;
        margin-bottom: 50px;
    }
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Буддизм</title>
      <link rel="stylesheet" href="css/style.css">
      <link rel="apple-touch-icon" sizes="180x180" href="css/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="css/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="css/favicon-16x16.png">
      <link rel="manifest" href="css/site.webmanifest">
      <link rel="mask-icon" href="css/safari-pinned-tab.svg" color="#5bbad5">
      <link rel="shortcut icon" href="css/favicon.ico">
      <meta name="msapplication-TileColor" content="#2b5797">
      <meta name="msapplication-config" content="css/browserconfig.xml">
      <meta name="theme-color" content="#ffffff">
    </head>
    <body>
      <header>
      <div id="logo" onclick="slowScroll('#top')">
        <img src="css/favicon.ico" class="logo_simple" alt="Lotus">
        <span>Formula Shvidi</span>
      </div>
      <div id="about">
          <a href="#" onclick="slowScroll('#main')" title="Философия">Философия</a>
          <a href="#" onclick="slowScroll('#overview')" title="Храмы">Храмы</a>
          <a href="#" onclick="slowScroll('#faq')" title="Ответы на вопросы">Вопросы/Ответы</a>
        </div>
      </header>
    
    <div id="top">
      <h1>Буддизм</h1>
      <h3>свет во тьме </h3>
    </div>
    
    <div id="main">
      <div class="intro">
        <h2>Что такое буддизм?</h2>
        <span>Краткое изложение философской идеи</span>
      </div>
      <div class="text">
        <span>Буддизм – одно из самых демократичных духовных учений. Это усилия, направленные на обретение личностной свободы и полномерное развитие человеческого разума, речи, тела и духа. Буддийская мораль и этика построены на принципах не совершения вреда и умеренности. При этом в человеке воспитывается и развивается чувство нравственности, сосредоточенности и мудрости. А с помощью медитаций буддисты познают механизмы работы ума и причинно-следственные связи между телесными, духовными и психологическими процессами</span>
      </div>
    </div>
    
    <div id="overview">
      <h1>Храмы</h1>
    
      <div class="img">
        <img src="css/Храм Сэйганто дзи.jpg" alt="Храм Сэйганто дзи">
        <span>Храм Сэйганто дзи</span>
      </div>
      <div class="img">
        <img src="css/Храм Ангкор Ват.jpg" alt="Храм Ангкор Ват">
        <span>Храм Ангкор Ват</span>
      </div>
      <div class="img">
        <img src="css/Храм Дасянго.jpg" alt="Храм Дасянго">
        <span>Храм Дасянго</span>
      </div>
      <div class="img">
        <img src="css/Храм Юаньтун.jpg" alt="Храм Юаньтун">
        <span>Храм Юаньтун</span>
      </div>
      </div>
    
    <div id="faq">
      <div>
        <span class="heading">Буддизм – это религия?</span><br>
        <p>Для многих буддизм – это нечто большее, чем религия, скорее философия или стиль жизни. Это философия в смысле «любви к мудрости»</p>
        <span class="heading">Что такое мудрость?</span><br>
        <p>Буддизм учит, что мудрость должна развиваться вместе с состраданием. Одна возможная крайность – быть добрым дурачком, другая – прийти к знанию, не испытав никаких чувств. Буддизм предпочитает срединный путь развития и того, и другого. Высшая мудрость состоит в том, чтобы понимать, что все видимые вещи являются незавершенными, непостоянными и не имеют неизменной сущности. Настоящая мудрость – не просто верить словам, а самому испытывать и постигать истину и реальность. Мудрость требует открытого, объективного, незашоренного ума. Следование путем буддиста требует мужества и терпения, гибкости и восприимчивости.</p>
        <span class="heading">Как буддизм может помочь мне?</span><br>
        <p>Буддизм объясняет смысл жизни, объясняет кажущуюся несправедливость и неравенство, царящие в мире, а также предлагает кодекс поведения или стиль жизни, который ведет к истинному счастью.</p>
        <span class="heading">Почему буддизм становится популярным?</span><br>
        <p>Буддизм становится популярным в западных странах по ряду причин. Первая важная причина – то, что он способен ответить на многие вопросы современного материалистического общества. Также в буддизме укоренено глубокое понимание человеческого разума и естественных способов его исцеления, которые выдающиеся психологи по всему миру стали признавать прогрессивными и действенными.</p>
      </div>
        <div>
        <span class="heading">Кем был Будда?</span><br>
        <p>Сиддхартха Гаутама родился в царской семье в Лумбини (на территории современного Непала) в 563 году до нашей эры. В возрасте 29 лет он осознал, что богатство и роскошь не могут дать счастья, и, для того чтобы найти ключ к счастью, занялся изучением различных учений, религий и философских школ своего времени. После шести лет поисков и медитаций он нашел «срединный путь» и достиг просветления. Всю свою жизнь после просветления и до самой смерти в возрасте 80 лет Будда посвятил проповеди принципов буддизма – Дхармы, или Истины.</p>
        <span class="heading">Был ли Будда богом?</span><br>
        <p>Нет, и он сам не называл себя так. Он был человеком, который учил, как обрести путь к просветлению, и делал это исходя из собственного опыта.</p>
        <span class="heading">Чему учил Будда?</span><br>
        <p>Будда учил многим вещам, но основополагающие идеи буддизма изложены в учениях о Четырех благородных истинах и Благородном восьмеричном пути.</p>
        <span class="heading">Как мне стать буддистом?</span><br>
        <p>Учение буддизма может понять и испытать каждый. Буддизм учит, что решение наших проблем находится не где-то далеко, а в нас самих. Будда просил всех своих учеников не просто верить ему на слово, а испытывать его учение на себе. Таким образом, каждый принимает для себя решения сам, а также сам отвечает за свои действия и восприятие вещей. Все это делает буддизм не готовым набором истин, который надо принимать целиком, а скорее учением, которое каждый может изучать и осваивать по-своему.</p>
      </div>
      <div>
        <span class="heading">Поклоняются ли буддисты изображениям?</span><br>
        <p>Время от времени буддисты останавливаются у изображений Будды, но не для того, чтобы поклоняться или просить о чем-либо. Статуя Будды с сострадательной улыбкой и сложенными на коленях руками напоминает нам, что нужно прилагать все усилия для того, чтобы достичь мира и любви внутри себя. Кланяясь статуе, мы выражаем благодарность за учение</p>
        <span class="heading">Существуют ли различные виды буддизма?</span><br>
        <p>Существует много различных видов буддизма, т.к. акценты учения могут меняться от страны к стране под влиянием их культуры и традиций. То, что останется неизменным, – это сущность учения: Дхарма, или Истина.</p>
        <span class="heading">Научен ли буддизм?</span><br>
        <p>Наука – это знание, которое может быть организовано в систему, основанное на наблюдении, проверке фактов и постулировании фундаментальных законов природы. Сама суть буддизма соответствует этому определению, потому что "Четыре благородные истины" могут быть проверены и доказаны кем угодно. Собственно, сам Будда просил своих учеников скорее проверить истинность своего учения, чем принять его, поверив на слово. Буддизм связан больше с пониманием, чем с верой.</p>
        <span class="heading">Являются ли другие религии ложными?</span><br>
        <p>Буддизм как система убеждений толерантен к другим убеждениям и религиям. Буддизм соглашается с моральными принципами других религий, но при этом идет дальше, и открывает нам глобальную цель нашего существования через стремление к мудрости и истинному пониманию природы вещей. Настоящий буддизм очень терпим и не концентрируется на ярлыках вроде «христианский», «мусульманский», «индуистский» или «буддистский»; именно поэтому никогда не было войн во имя буддизма. По этой же причине буддисты не проповедуют и не пытаются обратить других в свою веру, а лишь дают разъяснения тем, кто их ищет.</p>
      </div>
    </div>
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
      <script>
        function slowScroll(id) {
          $('html, body').animate({
            scrollTop: $(id).offset().top
          }, 500 );
        }
    
        $(document).on("scroll", function () {
          if($(window).scrollTop() === 0)
            $("header").removeClass("fixed");
          else
            $("header").attr("class", "fixed");
    
        });
      </script>
    </body>
    </html>
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    ProjectSoft, Я так понимаю главное значение в коде там
    display: flex;
      flex-direction: row;
      flex-wrap: wrap;

    Однако к сожалению не работает, оно не видит либо делает все наизнанку
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    Noder SS,

    <div id="faq">
      <div>
        <span class="heading">Буддизм – это религия?</span><br>
        <p>Для многих буддизм – это нечто большее, чем религия, скорее философия или стиль жизни. Это философия в смысле «любви к мудрости»</p>
        <span class="heading">Что такое мудрость?</span><br>
        <p>Буддизм учит, что мудрость должна развиваться вместе с состраданием. Одна возможная крайность – быть добрым дурачком, другая – прийти к знанию, не испытав никаких чувств. Буддизм предпочитает срединный путь развития и того, и другого. Высшая мудрость состоит в том, чтобы понимать, что все видимые вещи являются незавершенными, непостоянными и не имеют неизменной сущности. Настоящая мудрость – не просто верить словам, а самому испытывать и постигать истину и реальность. Мудрость требует открытого, объективного, незашоренного ума. Следование путем буддиста требует мужества и терпения, гибкости и восприимчивости.</p>
        <span class="heading">Как буддизм может помочь мне?</span><br>
        <p>Буддизм объясняет смысл жизни, объясняет кажущуюся несправедливость и неравенство, царящие в мире, а также предлагает кодекс поведения или стиль жизни, который ведет к истинному счастью.</p>
        <span class="heading">Почему буддизм становится популярным?</span><br>
        <p>Буддизм становится популярным в западных странах по ряду причин. Первая важная причина – то, что он способен ответить на многие вопросы современного материалистического общества. Также в буддизме укоренено глубокое понимание человеческого разума и естественных способов его исцеления, которые выдающиеся психологи по всему миру стали признавать прогрессивными и действенными.</p>
      </div>
        <div>
        <span class="heading">Кем был Будда?</span><br>
        <p>Сиддхартха Гаутама родился в царской семье в Лумбини (на территории современного Непала) в 563 году до нашей эры. В возрасте 29 лет он осознал, что богатство и роскошь не могут дать счастья, и, для того чтобы найти ключ к счастью, занялся изучением различных учений, религий и философских школ своего времени. После шести лет поисков и медитаций он нашел «срединный путь» и достиг просветления. Всю свою жизнь после просветления и до самой смерти в возрасте 80 лет Будда посвятил проповеди принципов буддизма – Дхармы, или Истины.</p>
        <span class="heading">Был ли Будда богом?</span><br>
        <p>Нет, и он сам не называл себя так. Он был человеком, который учил, как обрести путь к просветлению, и делал это исходя из собственного опыта.</p>
        <span class="heading">Чему учил Будда?</span><br>
        <p>Будда учил многим вещам, но основополагающие идеи буддизма изложены в учениях о Четырех благородных истинах и Благородном восьмеричном пути.</p>
        <span class="heading">Как мне стать буддистом?</span><br>
        <p>Учение буддизма может понять и испытать каждый. Буддизм учит, что решение наших проблем находится не где-то далеко, а в нас самих. Будда просил всех своих учеников не просто верить ему на слово, а испытывать его учение на себе. Таким образом, каждый принимает для себя решения сам, а также сам отвечает за свои действия и восприятие вещей. Все это делает буддизм не готовым набором истин, который надо принимать целиком, а скорее учением, которое каждый может изучать и осваивать по-своему.</p>
      </div>
      <div>
        <span class="heading">Поклоняются ли буддисты изображениям?</span><br>
        <p>Время от времени буддисты останавливаются у изображений Будды, но не для того, чтобы поклоняться или просить о чем-либо. Статуя Будды с сострадательной улыбкой и сложенными на коленях руками напоминает нам, что нужно прилагать все усилия для того, чтобы достичь мира и любви внутри себя. Кланяясь статуе, мы выражаем благодарность за учение</p>
        <span class="heading">Существуют ли различные виды буддизма?</span><br>
        <p>Существует много различных видов буддизма, т.к. акценты учения могут меняться от страны к стране под влиянием их культуры и традиций. То, что останется неизменным, – это сущность учения: Дхарма, или Истина.</p>
        <span class="heading">Научен ли буддизм?</span><br>
        <p>Наука – это знание, которое может быть организовано в систему, основанное на наблюдении, проверке фактов и постулировании фундаментальных законов природы. Сама суть буддизма соответствует этому определению, потому что "Четыре благородные истины" могут быть проверены и доказаны кем угодно. Собственно, сам Будда просил своих учеников скорее проверить истинность своего учения, чем принять его, поверив на слово. Буддизм связан больше с пониманием, чем с верой.</p>
        <span class="heading">Являются ли другие религии ложными?</span><br>
        <p>Буддизм как система убеждений толерантен к другим убеждениям и религиям. Буддизм соглашается с моральными принципами других религий, но при этом идет дальше, и открывает нам глобальную цель нашего существования через стремление к мудрости и истинному пониманию природы вещей. Настоящий буддизм очень терпим и не концентрируется на ярлыках вроде «христианский», «мусульманский», «индуистский» или «буддистский»; именно поэтому никогда не было войн во имя буддизма. По этой же причине буддисты не проповедуют и не пытаются обратить других в свою веру, а лишь дают разъяснения тем, кто их ищет.</p>
      </div>
    </div>
  • Как выравнить текст и сделать блоки одной высоты?

    ipgroy
    @ipgroy Автор вопроса
    Noder SS,
    #faq {
        display:flex;
        flex-direction: row;
        display: inline-block;
        background-color: #fff;
        border-top: 2px dashed #e4e3e3;
        width: 100%;
        float: left;
        padding-top: 70px;
        padding-bottom: 70px;
    }
    
    #faq div {
        width: 25%;
        margin-left: 6%;
        float: left;
    }
    
    #faq .heading {
        font-weight: bold;
        color: #7d7d7d;
        display: block;
        margin-bottom: -0.4em;
        font-size: 2em;
    }
    
    #faq p {
        font-family: Arimo, Helvetica, sans-serif;
        color: #4a4a4a;
        font-size: 0,95em;
        margin-bottom: 50px;
    }