html5 css помощь

Тема в разделе "CSS", создана пользователем kirill.grom, 24 дек 2016.

  1. kirill.grom

    kirill.grom Участник

    Я только начал изучать html5 и css3 не судите строго . Вообщем хотел сделать адаптивный дизайн , но столкнулся с проблемой. Блоки которые располагаются по правой стороне браузера они не уменьшаются ,а блоки левой стороны спокойно реагируют на изменения экрана . Проверял код на валидаторе все написано правильно.Кому не сложно подскажите в чем может быть проблема ??
    HTML:
    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>Мой сайт</title>
        <link rel="stylesheet" href="style.css">
        <link rel="shortcut icon" type="image/x-icon"  href="images/logomin.png" media="all">
    </head>
    <body>
         <div class="header">
             <div class="mid">
                 <header>
                    <div class="topmenu">
                    <aside>
                        <a href="#">Главное</a>
                        <a href="#">Тренинг</a>
                        <a href="#">Шаблоны</a>
                        <a href="#">Контакты</a>
                        <a href="#"></a>
                    </aside>
                    </div>
                     <img src="images/logo.png" alt=" логотип сайта " title="логотип сайта" />
                     <div class="afisha">
                         <img src="images/v5.jpg" alt="Обложка тренинга" title="Обложка тренинга" />
                         <h3>Стань профессиональным верстальщиком    <br/> всего за 2 месяца<br/> и зарабатывай по 30 000 рублей. </h3>
                         <p><a href="#">смотрите здесь</a></p>
                         <div class="clear">
                         </div>
                     </div>
                 </header>
             </div>
         </div>
         <div class="menu">
             <div class="mid">
                 <nav>
                     <ul>
                         <li><a href="#">Как создать сайт самому</a> </li>
                         <li><a href="#">Обучение HTML5 с нуля</a></li>
                         <li><a href="#">Анимация на CSS3</a></li>
                     </ul>
                 </nav>
             </div>
            </div>
          
             <div class="content">
                 <div class="mid">
                     <div class="fon">
                         <div class="block">
                            <a href="#">
                             <div class="anons">
                                 <section>
                                     <img src="images/st2.jpg" alt="Адаптивный дизайн">
                                     <h3>Адаптивный дизайн-как сделать </h3>
                                     <p>Благодоря ему,ваш сайт будет смотрется на всех устройствах </p>
                                 </section>
                             </div>
                             </a>
                         </div>
                         <div class="block">
                            <a href="#">
                             <div class="anons">
                                 <section>
                                     <img src="images/st1.jpg" alt="Анимация в css3">
                                     <h3>Как создать анимацию на сайте</h3>
                                     <p>При помощи css3 вы можете анимировать любой элемент вашего сайта</p>
                                 </section>
                             </div>
                             </a>
                         </div>
                             <div class="clear"></div>
                             <hr class="line">
                             <div class="rek">
                                 <a href="#"><img src="images/v5r.jpg" alt="запись на тренинг верстаем на пять с плюсом "></a>
                             </div>
                         <div class="block">
                            <a href="#">
                             <div class="anons">
                                 <section>
                                     <img src="images/st4.jpg" alt="Быстро научится создовать сайт">
                                     <h3>Как быстро научится создавать сайт?</h3>
                                     <p>Благодоря ему,ваш сайт будет смотрется на всех устройствах </p>
                                 </section>
                             </div>
                             </a>
                         </div>
                            <div class="block">
                            <a href="http://master-css.com/html5/">
                             <div class="anons">
                                 <section>
                                     <img src="images/st3.jpg" alt="Новые техноголии Быстро научится создовать сайт">
                                     <h3>Новые технологии HTML5 CSS3</h3>
                                     <p>Благодоря ему,ваш сайт будет смотрется на всех устройствах </p>
                                 </section>
                             </div>
                             </a>
                         </div>
                         <div class="clear"></div>
                         <hr class="line">
                     </div>
                    
                 </div>
                 </div>
                  
                    <div class="footer">
                     <div class="mid">
                         <span>2014 &copy; master-css</span> <span> Дизайн и Разработка </span>
                        </div>
                     </div>
            
        
    </body>
    </html>



    Код:
    body{  
    background:#efefef url(images/geometry2.png);
        margin: 0px;
        padding: 0px;
        font-family: Arial,Tahoma,sans-serif;
        font-size: 16px;
        color#272727;
      
    }
    a{
        text-decoration: none;
    }
    a:hover{transition: all 0.5s;}
    
    /*Структура сайта */
    .header{ padding-top: 20px;
        background:
    radial-gradient(rgba(255,255,255,0.2),#101417 250px, transparent 250px) 9% -200px no-repeat;
    background-color: #101417;
        background-size: 500px 500px;
    
    
    
    }
    div.mid{
    width: 1000px;  
    margin: 0 auto;
    }
    .footer{
        margin: 20px 0;
        text-align: center;
        text-transform: uppercase;
    }
    
    /*Шапка сайта*/
    .topmenu{
        float: right;
        height: 70px;
        line-height: 70px;
    }
    .topmenu a{
        margin:0 0 0 10px;
        color: #1683a3;
    }
    .topmenu a:hover{
    color: #efefef;
    }
    .afisha{
        padding: 20px 50px 1px 50px;
        margin-top:40px;
        background:url(images/headline.png) repeat-x #f2f2f2 ;
      
    }
    .afisha img{
        float: left;
    }
    .afisha h3{
        font-size: 24px;
        font-weight: normal;
        text-align: center;
        color:#830000;
    }
    .afisha p{
        text-align: center;
    }
    .afisha a{
        font-size: 20px;
        color:#fff;
       font-weight: bold;
        background: #b23600;
        border:1px solid #862900;
        padding: 5px 15px;
        border-radius: 3px;
        box-shadow: 2px 2px 7px -1px #777;
        text-shadow: 0px 0px 3px #752300;
    }
    
    .afisha a:hover{
      background: #068bac;
        border:1px solid #046d88;
        text-shadow: 0px 0px 3px #034e61;
    }
    /*Главное меню */
    
    .menu{
        background: #1683a3;
        border: 1px solid #016c8b;
        border-left: none;
        border-right: none;
      margin: 0px;
    }
    .menu ul{
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }
    .menu ul li{
        display: inline-block;
        margin: 5px 40px;
      
    }
    .menu ul li a{
        color: #fff ;
        text-transform: uppercase;
        text-shadow: 1px 1px 3px #0b4455;
    }
    .menu ul li a:hover{
        color: #a3e1f3;
        text-transform: uppercase;
        text-shadow: 1px 1px 3px #0b4455;
    }
    
    /*Контент сайта*/
    .fon{
        background: #fff;
        border: 1px solid #ccc;
        border-top:none;
        padding: 40px;      
    }
    .fon hr.line {
        border: none;
        border-bottom: 1px dashed #ccc;
        margin: 20px 0;
        height: 0;
    }
    .block{
        width: 440px;
        float: left;
      
    }
    .block:nth-of-type(even){
        width: 440px;
        float: right;
    }
    .block a p{
        color: #272727;
    }
    .anons{
        background: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 20px;
      
    }
    .anons:hover{
        background: #e0eff4;
        border: 1px solid #bfd5dd;
        transition: all 1s;
    }
    .anons img{
         box-shadow: 1px 1px 5px #777;
    }
    .anons h3{
        font-size: 20px;
        margin: 20px 0 10px;
        color: #01617d;
        padding: 0;
        font-weight: normal;
        line-height: 20px;
    }
    .anons p{
       text-shadow: 1px 1px 0  #fff;
    }
    .rek{
        margin: 40px 0;
    }
    .rek img{
        background: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 3px;
      
    }
    /*подвал*/
    
    .footer span{
        margin: 0 20px;
    }
    .clear{clear:both;}
    
    /*Адаптиный дизайн*/
    @media screen and (max-width:999px){
        div.mid{width: 95%;}
        .afiha h3{font-size: 22px;}
        .block{ width:45%;}
        .anons img,.rek img{width: 100%;}
    }
    
     
    Последнее редактирование: 24 дек 2016
  2. Елена Назарова

    Елена Назарова Администратор Команда форума

    Здравствуйте. Для второго блока вы указали ширину с помощью .block:nth-of-type(even) {width: 440px; float: right;}, а в медиазапросе именно для этого селектора вы ничего не прописали, поэтому ширина блока не поменялась. Я бы переписала код следующим образом:
    Код:
    .block {
       width: calc(50% - 20px);
        float: left;
    }
    .block:nth-of-type(even) {
        float: right;
    }
    А медиазапрос так:
    Код:
    @media (max-width: 999px) {
        div.mid {width: 95%;}
        .afisha h3 {font-size: 22px;}
    }
    @media (max-width: 768px){
        .block, .block:nth-of-type(even) {width: 100%; float: none; margin-bottom: 40px;}
    }
    А эту строчку .anons img, .rek img{width: 100%;} добавить к основным стилям.
     
  3. kirill.grom

    kirill.grom Участник

    Спасибо, по пробую так .
     

Поделиться этой страницей