In html or in css I have a problem with the code
Question
Good day or night. I have a problem maybe in the code html or css. I do not know. Namely, I created a video tag after it wrote the div tag and wrote a comment in the h2 tag, but the text is not from the bottom, but from the side.
The highlighted text should be at the bottom of the video
Code css:
* { margin: 0; padding: 0; } body { margin: 0; font-size: 1.2em; background-color: #fff; color: #555; } p { padding: 0 0 20px 0; line-height: 1.7em; } 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% 'century 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: green; } ul { margin: 2px 0 22px 17px; } ul li { margin: 0 0 6px 0; padding: 0 0 4px 5px; line-height: #000; } .header { background-color: darkslateblue; height: 177px; font-size: 0.8em; margin-right: 0px; margin-left: 0px; min-width: auto; } .mine, .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, h1 a, 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: 950px; 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-serif; display: block; height: 20px; padding: 6px 35px 6px 28px; color: #fff; text-decoration: none; } ul.menu li.selected a { color: #aeb002; } ul.menu li a:hover { color: #e4ec04; } hr { border: solid 2px black; } .site_content { width: 880px; overflow: hidden; margin: 20px auto 0 auto; background-color: white; } .sidebar_containter { float: right; width: 224px; } .sidebar { float: right; widows: 222px; padding: 5%; margin: 0 0 16px 0; border: solid 1px #f2f2f2; border-radius: 5px; background-color: #f9f9f9; } .btn { padding: 8px; background-color: white; cursor: pointer; } .sidebar h2 { color: #136cb2; } .lables_passreg_text { font-size: 0.7em; margin-top: 3%; margin-left: 2%; } .sitebar ul { margin: 0; } .sitebar ul li { list-style-type: none; margin: 0 0 0 0; } .sitebar .rating_sidebar { float: right; } .content { text-align: left; width: 620px; padding: 0 0 0 5px; float: left; } .content a { text-decoration: none; } .film_block { margin-bottom: 5%; } .films_block img { border-radius: 1px; border: solid 1px black; } .posts .posts_content { font-size: 0.8em; } .info_film_page { margin-top: 1%; margin-bottom: 3%; } .info_film_page .label { font-synthesis: 1.2em; } .info_film_page .value { font-size: 1em; color: black; } .information { color: black; } .hr_2 {} .reviews_h { border-bottom: 100%; border-top: 100%; } .reviews { margin-top: 50%; font-size: 1em; } .reviews .review_name { bottom: 800px; background-color: #7258ad; color: white; padding: 1%; } footer { text-align: center; background-color: darkslateblue; width: 100%; height: 100px; padding: 28px 0 5px 0; color: white; margin-left: 0px; margin-right: 0px; min-width: 900px; } footer a { color: #0fff; text-decoration: none; } footer a:hover { color: white; text-decoration: none; } footer p { padding: 0 0 10px 0; }
<!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="description" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="asset/css/style.css"> <title>KS-DxD</title> </head> <body> <div class="main"> <div class="header"> <div class="logo"> <div class="logo_text"> <h1><a href="/">KinoStar</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_containter"> <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_field" placeholder="логин" /> <input type="password" name="password_field" placeholder="пароль" /> <input type="submit" class="btn" value="вход" /> <div class="lables_passreg_text"> <span></span><a href="#">забыл пароль?</a><span></span>|<span></span><a href="#">регистрация</a><span></span> </div> </form> </div> <div class="sidebar"> <h2>Новости</h2> <span>31.10.2020</span> <p>Запуск сайта на тестовом хостинге.</p> <a href="#">Читать</a> </div> <div class="sidebar"> <h2>Рейтинг фильмов</h2> <ul> <li><a href="#">Наруто</a><span class="rating_sidebar"> 10</span></li> <li><a href="#">Dxd</a><span class="rating_sidebar"> 9.9</span></li> <li><a href="#">Убица гоблинов</a><span class="rating_sidebar"> 9.9</span></li> <li><a href="#">Моя геройская академия</a><span class="rating_sidebar"> 9.9</span></li> <li><a href="#">Шаман Кинг</a><span class="rating_sidebar"> 9.9</span></li> </ul> </div> </div> <div class="content"> <h1>Демоны старшей школы/High School'DxD'</h1> <img src="asset/img/DxD.jpg" width="300" height="400"> <div class="info_film_page"> <h4><span class="label">Рейтин: </span><span class="value">9.9/10</span></h4> <h4><span class="label">Год: </span><span class="value">Весна 2018</span></h4> <h4><span class="label">Автор: </span><span class="value">Ісібумі Ітіей</span></h4><br> <h5> <spanc class="information">Иссэй Хёдо – довольной глупый и крайне озабоченный ученик старшего класса, который захотел оказаться в Академии Кудо, где основной контингент учащихся – девчонки. Но зря наивный юноша надеялся, что представительницы прекрасного пола станут бросаться ему на шею. Школьницы вообще не замечали парнишку. Но главный герой не сдавался, и вскоре удача ему улыбнулась, подарив свидание с юной красавицей – Юмой Амано. Разве мог мальчишка догадаться, что его ожидает не заветная романтика, а беспощадная расправа. Только неожиданно подоспевшая красотка из учебного заведения, являющаяся демоницей по имени Риас Гремори, избавляет шокированного паренька от смерти. Но теперь Хёдо приходится не только перевоплотиться в аналогичного демона, но еще и верного слугу спасительницы.Персонаж вступает в специальный клуб, где знакомится с прочими существами. Обретя необычные способности, старшеклассник наконец-то имеет возможность реализовать жизненную мечту и сформировать настоящий гарем. Впереди мечтательного султана ждет масса увлекательных приключений.</span> </h5> </div> <video class="video" width="600" height="400" controls> <source src="asset/video/DxD triler.mp4" type="video/mp4" poster="asset/img/DxD.jpg"> </video> </div> <hr> <h2>Отзывы</h2> <div class="reviews"> <div class="review_name"> name </div> <div class="review_text"> отзыв 12345. </div> </div> </div> </div> <footer> <p class="a_link"> <a class="menubar" href="#">Главная</a> | <a href="#">Фильмы</a> | <a href="#">Сериалы</a> | <a href="#">Рейтинг</a> | <a href="#">Контакты</a> </p> <p>kn-st.com 2020</p> </footer> </body> </html>
Namely, the problem begins here:
</div>
<video class="video" width="600" height="400" controls>
<source src="asset/video/DxD triler.mp4" type="video/mp4"
poster="asset/img/DxD.jpg">
</video>
</div >
<hr>
<h2>Отзывы</h2>
<div class="reviews">
<div class="review_name">
name
</div>
<div class="review_text">
отзыв 12345.
</div>
1 answers
solution1
0 ACCPTED 2020-10-01 07:17:38
* { margin: 0; padding: 0; } body { margin: 0; font-size: 1.2em; background-color: #fff; color: #555; } p { padding: 0 0 20px 0; line-height: 1.7em; } 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% 'century 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: green; } ul { margin: 2px 0 22px 17px; } ul li { margin: 0 0 6px 0; padding: 0 0 4px 5px; line-height: #000; } .header { background-color: darkslateblue; height: 177px; font-size: 0.8em; margin-right: 0px; margin-left: 0px; min-width: auto; } .mine, .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, h1 a, 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: 950px; 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-serif; display: block; height: 20px; padding: 6px 35px 6px 28px; color: #fff; text-decoration: none; } ul.menu li.selected a { color: #aeb002; } ul.menu li a:hover { color: #e4ec04; } hr { border: solid 2px black; } .site_content { width: 880px; overflow: hidden; margin: 20px auto 0 auto; background-color: white; } .sidebar_containter { float: right; width: 224px; } .sidebar { float: right; widows: 222px; padding: 5%; margin: 0 0 16px 0; border: solid 1px #f2f2f2; border-radius: 5px; background-color: #f9f9f9; } .btn { padding: 8px; background-color: white; cursor: pointer; } .sidebar h2 { color: #136cb2; } .lables_passreg_text { font-size: 0.7em; margin-top: 3%; margin-left: 2%; } .sitebar ul { margin: 0; } .sitebar ul li { list-style-type: none; margin: 0 0 0 0; } .sitebar .rating_sidebar { float: right; } .content { text-align: left; width: 620px; padding: 0 0 0 5px; float: left; } .content a { text-decoration: none; } .film_block { margin-bottom: 5%; } .films_block img { border-radius: 1px; border: solid 1px black; } .posts .posts_content { font-size: 0.8em; } .info_film_page { margin-top: 1%; margin-bottom: 3%; } .info_film_page .label { font-synthesis: 1.2em; } .info_film_page .value { font-size: 1em; color: black; } .information { color: black; } .hr_2 {} .reviews_h { border-bottom: 100%; border-top: 100%; } .reviews { margin-top: ; font-size: 1em; } .reviews .review_name { bottom: 800px; background-color: #7258ad; color: white; padding: 1%; } footer { text-align: center; background-color: darkslateblue; width: 100%; height: 100px; padding: 28px 0 5px 0; color: white; margin-left: 0px; margin-right: 0px; min-width: 900px; } footer a { color: #0fff; text-decoration: none; } footer a:hover { color: white; text-decoration: none; } footer p { padding: 0 0 10px 0; }
<!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="description" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="asset/css/style.css"> <title>KS-DxD</title> </head> <body> <div class="main"> <div class="header"> <div class="logo"> <div class="logo_text"> <h1><a href="/">KinoStar</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_containter"> <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_field" placeholder="логин" /> <input type="password" name="password_field" placeholder="пароль" /> <input type="submit" class="btn" value="вход" /> <div class="lables_passreg_text"> <span></span><a href="#">забыл пароль?</a><span></span>|<span></span><a href="#">регистрация</a><span></span> </div> </form> </div> <div class="sidebar"> <h2>Новости</h2> <span>31.10.2020</span> <p>Запуск сайта на тестовом хостинге.</p> <a href="#">Читать</a> </div> <div class="sidebar"> <h2>Рейтинг фильмов</h2> <ul> <li><a href="#">Наруто</a><span class="rating_sidebar"> 10</span></li> <li><a href="#">Dxd</a><span class="rating_sidebar"> 9.9</span></li> <li><a href="#">Убица гоблинов</a><span class="rating_sidebar"> 9.9</span></li> <li><a href="#">Моя геройская академия</a><span class="rating_sidebar"> 9.9</span></li> <li><a href="#">Шаман Кинг</a><span class="rating_sidebar"> 9.9</span></li> </ul> </div> </div> <div class="content"> <h1>Демоны старшей школы/High School'DxD'</h1> <img src="asset/img/DxD.jpg" width="300" height="400"> <div class="info_film_page"> <h4><span class="label">Рейтин: </span><span class="value">9.9/10</span></h4> <h4><span class="label">Год: </span><span class="value">Весна 2018</span></h4> <h4><span class="label">Автор: </span><span class="value">Ісібумі Ітіей</span></h4><br> <h5> <spanc class="information">Иссэй Хёдо – довольной глупый и крайне озабоченный ученик старшего класса, который захотел оказаться в Академии Кудо, где основной контингент учащихся – девчонки. Но зря наивный юноша надеялся, что представительницы прекрасного пола станут бросаться ему на шею. Школьницы вообще не замечали парнишку. Но главный герой не сдавался, и вскоре удача ему улыбнулась, подарив свидание с юной красавицей – Юмой Амано. Разве мог мальчишка догадаться, что его ожидает не заветная романтика, а беспощадная расправа. Только неожиданно подоспевшая красотка из учебного заведения, являющаяся демоницей по имени Риас Гремори, избавляет шокированного паренька от смерти. Но теперь Хёдо приходится не только перевоплотиться в аналогичного демона, но еще и верного слугу спасительницы.Персонаж вступает в специальный клуб, где знакомится с прочими существами. Обретя необычные способности, старшеклассник наконец-то имеет возможность реализовать жизненную мечту и сформировать настоящий гарем. Впереди мечтательного султана ждет масса увлекательных приключений.</span> </h5> </div> <video class="video" width="600" height="400" controls> <source src="asset/video/DxD triler.mp4" type="video/mp4" poster="asset/img/DxD.jpg"> </video> <hr> <h2>Отзывы</h2> <div class="reviews"> <div class="review_name"> name </div> <div class="review_text"> отзыв 12345. </div> </div> </div> <!-- close this div tag here --> </div> </div> <footer> <p class="a_link"> <a class="menubar" href="#">Главная</a> | <a href="#">Фильмы</a> | <a href="#">Сериалы</a> | <a href="#">Рейтинг</a> | <a href="#">Контакты</a> </p> <p>kn-st.com 2020</p> </footer> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
I have a problem whith HTML and CSS div height
I have a problem in styling my HTML table with external CSS file
I have a problem with my JavaScript code and how HTML displays it
I have problem with VS Code auto complete class names in html
i have error in my css html code how fix
What is the problem in this HTML5+CSS+JavaScript Code?
i have html code with JS in it, i have a problem that the submit button not giving me an alert window, can you correct my code?
How do I have this code adjusted using js, html and css to have a default collapsed view?
I have a php script with html div content. need to fetch php with html code including css
The HTML & CSS code is not showing the same output in my actual project, that I have fixed in another separate html file
Related Tags