Не обтекает текст как показано в уроке. Код переписал 2 раза

не выходит так что бы картинка и текс был в одном блоке и отображался как показано в уроке. Все стили применины к тексу и фото правильнр и Float: left; стоит но фото оказываеться снизу а текс по margin-bootom:15%;сверху. притом что код переписан верно как в html что в css
Кто что сталкивался с таким вопросом?
HTML/CSS Урок 8.3. Страница просмотра фильмов. Блок с описанием фильма
Danyil Ilchyshyn
4 years ago
на обеих страницах в одном месте видимо авто-закрытие тега произошло
<div class="content"> </div> - тут лишний </div>
<h1>Интерстеллар</h1>
в css - ошибка в названиях классов
.lables-passre-text{ - здесь passreg нужно
.main, .logo, .menubar, .site_content, .footer { - здесь .site-content нужно через тире
Yuri Smirnov
4 years ago
Проверь, там где-нибудь в одной букве ошибка и не работает уже...
Или код дай посмотреть (и html и css) и скрин как это выглядит у тебя
Роман
4 years ago
<!DOCTYPE html> <!!--index.heml--!!> ( основыной код) 
<html lang="ru">
    <head> 
        <title>Films</title>
        <meta htpp-equiv="Content-type" content="text/html"; charset="UTF-8"/> 
        <meta name="description" content="Киномостр-это портал кино" />
        <meta name="keywords" content="фильмы, фильмы онлай, HD">
        <link rel="stylesheet" href="style.css"/>
        
    </head>
    <body>
        <div class="header">
            <div class="logo">
                <div class="logo-text">
                    <h1><a href="#">КиноМонстр</a></h1>
                    <h2>Кино-наша страсть!</h2>

                </div>
                </div>
                <div class="menubar">
                    <ul class="menu">
                        <li class="selected"><a href="#">Главная</a></li>
                        <li><a href="#">Фильмы</a></li>
                        <li><a href="#">Сериалы</a></li>
                        <li><a href="#">Рейтинг фильмов</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>
                </div>
                </div>
        <div class="site-content">
            <div class="sidebar-container">
                <div class="sidebar">
                    <h2>Поиск</h2>
                    <form method="post" action="#" id="search_form">
                        <input type="search" name="search_field" placeholder="ваш запрос"/>
                        <input type="submit" class="btn" value="найти"/>

                    </form>

                </div>

                <div class="sidebar">
                    <h2>Вход</h2>
                    <form method="post" action="#" id="login">
                        <input type="text" name="login_fild" placeholder="логин"/>
                        <input type="password" name="password_field" placeholder="пароль"/>
                        <input type="submit" class="btn" value="вход"/>

                        <div class="lables-passreg-text">
                            <span><a href="#">Забыли пароль?</a></span> | <span><a href="#"> Регистрация</a></span>

                        </div>

                        
                    </form>
                        </div>
                        <div class="sidebar">
                            <h2>Новости</h2>
                            <span>31.03.2020</span>
                            <p>Мы запустили разширеный посик </p>
                            <a href="#">Читать</a>
                        </div>
                        <div class="sidebar">
                            <h2>Рейтинг фильмов</h2>
                            <ul>
                                <li><a href="#">Интерстеллар</a><span class="rating-sidebar">8.1</span></li>
                                <li><a href="#">Матрица</a><span class="rating-sidebar">8</span></li>
                                <li><a href="#">Безумный Макс</a><span class="rating-sidebar">4,1</span></li>
                                <li><a href="#">Облачнй атала</a><span class="rating-sidebar">6,1</span></li>
                            </ul>
                        </div>
            
                    </div>

            <div class="content"></div>
                    <h1>Новые Фильмы</h1>
                    <div class="films-block">
                     <a href="#"> <img src="..//images/img/matrix.png"></a> 
                     <a href="#"> <img src="../images/img/max.png"></a> 
                     <a href="#"> <img src="..//images/img/inter.png"></a> 
                     <a href="#"> <img src="..//images/img/cloud.png"></a> 
                    </div>
                    <h1>Новые Сериалы</h1>
                    <div class="films-block">
                     <a href="#"> <img src="..//images/img/dead.png"></a> 
                     <a href="#"> <img src="../images/img/silicon.png"></a> 
                     <a href="#"> <img src="..//images/img/breakingbad.png"></a> 
                     <a href="#"> <img src="..//images/img/xfiles.png"></a> 
                    </div>
            
                    <div class="posts">

                        <hr>

                            <h2><a href="#">Как снимали Интерстеллер</a></h2>
                        <div class="posts-content">
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ea quaerat assumenda voluptatum ut odit, aperiam, nesciunt debitis commodi laboriosam expedita, officiis dicta possimus praesentium reprehenderit perferendis! Suscipit, voluptates temporibus! 
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui ea, veritatis quaerat sed harum doloremque odit consectetur saepe ducimus sint quibusdam! In non sint, voluptatibus nulla voluptate molestiae sunt ex?
                            </p>

                        </div>

                        <p><a href="#">Читать</a href=></p>

                        <hr>

                        <h2> <a href="#">Актер Том Хенс поделился вмечетлением о фестивале</a></h2>
                        <div class="posts-content">
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, repudiandae dolorum atque optio ipsum distinctio aut quos facere accusamus quod porro illum laboriosam nihil quaerat possimus saepe eos suscipit. Officiis!
                            </p>
                        </div>
                        <p><a href="#">Читать</a></p>
                    </div>
  
                </div>

              
            </div>

    
    
        <div class="footer">
            <p>
                <a href="#">Главная</a> | 
                <a href="#">Фильмы</a> | 
                <a href="#">Сериалы</a> | 
                <a href="#">Рейтинг фильмов</a> | 
                <a href="#">Контакты</a> 
            </p>
            <p>wh-db.com 2020</p>
        </div>
        
        </body>

</html>


<!DOCTYPE html> <!!--schodow.html--> ( Код создания по переходу на вротую страницу как в уроке) 
<html lang="ru">
    <head> 
        <title>Films</title>
        <meta htpp-equiv="Content-type" content="text/html"; charset="UTF-8"/> 
        <meta name="description" content="Киномостр-это портал кино" />
        <meta name="keywords" content="фильмы, фильмы онлай, HD">
        <link rel="stylesheet" href="style.css"/>
        
    </head>
    <body>
        <div class="header">
            <div class="logo">
                <div class="logo-text">
                    <h1><a href="#">КиноМонстр</a></h1>
                    <h2>Кино-наша страсть!</h2>

                </div>
                </div>
                <div class="menubar">
                    <ul class="menu">
                        <li class="selected"><a href="#">Главная</a></li>
                        <li><a href="#">Фильмы</a></li>
                        <li><a href="#">Сериалы</a></li>
                        <li><a href="#">Рейтинг фильмов</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>
                </div>
                </div>
        <div class="site-content">
            <div class="sidebar-container">
                <div class="sidebar">
                    <h2>Поиск</h2>
                    <form method="post" action="#" id="search_form">
                        <input type="search" name="search_field" placeholder="ваш запрос"/>
                        <input type="submit" class="btn" value="найти"/>

                    </form>

                </div>

                <div class="sidebar">
                    <h2>Вход</h2>
                    <form method="post" action="#" id="login">
                        <input type="text" name="login_fild" placeholder="логин"/>
                        <input type="password" name="password_field" placeholder="пароль"/>
                        <input type="submit" class="btn" value="вход"/>

                        <div class="lables-passreg-text">
                            <span><a href="#">Забыли пароль?</a></span> | <span><a href="#"> Регистрация</a></span>

                        </div>

                        
                    </form>
                        </div>
                        <div class="sidebar">
                            <h2>Новости</h2>
                            <span>31.03.2020</span>
                            <p>Мы запустили разширеный посик </p>
                            <a href="#">Читать</a>
                        </div>
                        <div class="sidebar">
                            <h2>Рейтинг фильмов</h2>
                            <ul>
                                <li><a href="#">Интерстеллар</a><span class="rating-sidebar">8.1</span></li>
                                <li><a href="#">Матрица</a><span class="rating-sidebar">8</span></li>
                                <li><a href="#">Безумный Макс</a><span class="rating-sidebar">4,1</span></li>
                                <li><a href="#">Облачнй атала</a><span class="rating-sidebar">6,1</span></li>
                            </ul>
                        </div>
            
                    </div>

            <div class="content"> </div>
                    <h1>Интерстеллар</h1>
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/6ybBuTETr3U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
               
                    <div class="info-film-page">
                        <span class="label">Рейтинг</span> 
                        <span class="value">:8.1/10</span>
                        <span class="label">Год</span> 
                        <span class="value">:2014</span>
                        <span class="label">Режисер</span> 
                        <span class="value">:Кристофер Новел</span>
                    </div>

                    <hr>

                    <h2>Описание Интерстеллар</h2>
                    <div class="description-film">
                        <img src="..//images/img/inter.png">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, earum, vitae laborum culpa ducimus numquam nesciunt repellendus reprehenderit blanditiis quisquam obcaecati laudantium rem repudiandae cum! Modi aliquam hic obcaecati</p>
                    </div>
                

                

                </div>
            </div>

        
    
        <div class="footer">
            <p>
                <a href="#">Главная</a> | 
                <a href="#">Фильмы</a> | 
                <a href="#">Сериалы</a> | 
                <a href="#">Рейтинг фильмов</a> | 
                <a href="#">Контакты</a> 
            </p>
            <p>wh-db.com 2020</p>
        </div>
        
        </body>

</html>

 CSS
* {
    padding:0;
    margin:0;
    border:0;
    }
    input[type="text"], input[type="password"], input[type="search"] {
        color: #5d5d5d;
        width: 60%;
        padding: 8px;
    }
    input, textarea{
        outline: none;
        border: none;
        border: solid 1px #f2f2f2;
    }
    h1, h2 {
        font: normal 170% 'centry gothic', arial;
        margin: 0 0 15px 0;
        padding: 15px 0 5px 0;
        color: #000;
    }
    h2{
        font-size: 140%;
    }
    a, a:hover{
        outline: none;
        text-decoration: underline;
        color: greenyellow;
    }
    body{
        font-size: 1.2em;
        background-color: #fff;
        color: #555;        
    }
    p{ 
        padding: 0 0 20px 0;
        line-height: 1.7em;
    }
    ul{
        margin: 2px 0 22px 17px;
    }
    ul li{
        margin: 0 0 6px 0;
        padding: 0 0 4px 5px;
        line-height: 1.5em;
    }

    hr{
        border: solid 1px #f3f3f3;
    }
.header{
    background-color: darkslateblue;
    height: 177px;
    font-size: 0.8em;
    margin-left: 0px;
    margin-right: 0px;
    min-width: 900px;
}

.main, .logo, .menubar, .site_content, .footer {
     margin-left: auto;
     margin-right: auto;
}


.logo{
    width: 880px;
    padding-bottom: 40px;
}

.logo h1, .logo h2{
    font: normal 300% 'century gothic', arial, sans-serif;
    margin: 0 0 0 9px;
}

.logo-text h1, .logo-text h1 a, .logo-text h1 a:hover{
    padding: 22px 0 0 0 ;
    color: #fff;
    letter-spacing: 0.1em;
    text-decoration: none;
}

.logo-text h2{
    font-size: 0.9em;
    padding: 4px 0 0 0;
    color: #999;
}

.menubar{
    width: 900px;
    height: 46px;

}

ul.menu{
    float: right; 
}

ul.menu li{
    float: left;
    padding: 0 0 0 9px;
    list-style: none;
    margin: 1px 2px 0 0;
}

ul.menu li a{
    font: normal 100% 'trebuchet ms', sans-srift;
    display: block;
    height: 20px;
    padding: 6px 35px 5px 28px;
    color: #fff;
    text-decoration: none;
}
ul.menu li.selected a{
    color: #aeb002;
}

ul.menu li a:hover{
    color: #f0f807;
}


.site-content{
    width: 950px;
    overflow: hidden;
    margin: 20px auto 0 auto;
    background-color: #fff;
}

.sidebar-container{
    float: right;
    width: 224px;
}
.sidebar{
    float: right;
    width: 222px;
    padding: 5px;
    margin: 0 0 16px 0;
    border: solid 1px #f2f2f2;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.btn{
padding: 8px;
background-color: #fff;
cursor: pointer;
}

.sidebar h2{
    color: #136cb2;
}

.lables-passre-text{
    font-size: 0.7em;
    margin-top: 3%;
    margin-left:2%;
}

.sidebar ul{
    margin: 0;

}
.sidebar ul li{
    list-style-type: none;
    margin: 0 0 0 0;
}
.sidebar .rating-sidebar{
    float: right;
}


.content{
    text-align: left;
    width: 800px;
    padding: 0 0 0 5px;
    float: left;

}

.content a {
    text-decoration: none;
}
.films-block{
margin-bottom: 5%;

}
.films-block img{
    border-radius: 5px;
    border: solid 5px #dad7d5;
    width: 15%;
}

.posts .posts-content  {
    font-size: 0.8em;
    text-decoration: none;
}
.decotarion {
    text-decoration: none;
}


.info-film-page{
    margin-top: 2%;
    margin-bottom: 4%;
}

.info-film-page  .label {
    font-size: 1.2em;

}

.info-film-page .value {
    font-size: 1em;
    color: #49945a;
    margin-right: 3%;
}


.description-film {
    margin-bottom: 15%;
    

}
.description-film img {
    float: left;
    margin-right: 2%;
    border-radius: 5px;
    border: solid 5px #555;
}










.footer{
    width: 100%;
    height: 100px;
    padding: 28px 0 5px 0 ;
    text-align: center;
    background-color: darkslateblue;
    color: #a8aa94;
    margin-left: 0px;
    margin-right: 0px;
    min-width: 900px;
}

.footer a{
    color: #a8aa94;
    text-decoration: none;

}
.footer a:hover{
    color: white;
    text-decoration: none;
}

.footer p{ 
    padding: 0 0 10px 0;
}
Danyil Ilchyshyn
4 years ago
Снимок.PNG
Danyil Ilchyshyn
4 years ago
4 ответов
