Первый раз делаю верстку сайта. Как исправить данную ситуацию, так, чтобы «icebeaker_main_block» был справа?
Первый раз делаю верстку сайта. Как можно позиционировать блок "header_txt__block", так, чтобы он был слева, а блок "icebeaker_main_block" был справа? Все перепробовал, не получается. Буду рад если посоветуете, что исправить.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="CSSstylesheet.css"> <title>gasIcebreaker</title> </head> <body> <header> <div class="header_title"> <h1 class="header_logo">MA,m</h1> <a href="#" class="header_mail">info@lead-group.ru</a> <a href="" class="header_numder">+7 (495) 123-45-67</a> <a href="#" class="search"><img src="imgsearch.svg" alt="лупа"></a> </div> <hr class="header_line"> <nav> <ul class="header_list"> <li><a href="#" class="header_link">О НАС</a></li> <li><a href="#" class="header_link">ФЛОТ</a></li> <li><a href="#" class="header_link">ИНВЕСТОРАМ</a></li> <li><a href="#" class="header_link">КАРЬЕРА</a></li> <li><a href="#" class="header_link">ПРЕСС-ЦЕНТР</a></li> <li><a href="#" class="header_link">УСТОЙЧИВОЕ РАЗВИТИЕ</a></li> <li><a href="#" class="header_link">КОНТАКТЫ</a></li> </ul> </nav> <div class="header_txt__block"> <h1 class="header_txt__title">Первый в мире ледокольный газовоз</h1> <div class="header_txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure consequuntur debitis maxime, esse dignissimos doloribus natus impedit tenetur nobis dolorem perspiciatis asperiores error nesciunt soluta itaque quos illo eum non! </div> <button>ПОДРОБНЕЕ</button> <div class="arrow-left"><img src="imgarrow-left.svg" alt="Левая стрелка"></div> <div class="arrow-right"><img src="imgarrow-right.svg" alt ="Правая стрелка"></div> </div> <div class="icebeaker_main_block"> <div class="icebeaker_block"> <h2 class="icebeaker_txt">Танкер-газовоз СПГ «КАПИТАН ДАНИЛКИН»</h2> <ul class="icebeaker_list"> <li class="icebeaker_link">Грузовместимость:</li> <li class="icebeaker_link">Ледопроходимость</li> <li class="icebeaker_link">Ледовый класс:</li> <li class="icebeaker_link">Число «Азиподов»:</li> </ul> </div> </div> </header> <main> <section> </section> </main> <footer> </footer> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="CSSstylesheet.css"> <title>gasIcebreaker</title> </head> <body> <header> <div class="header_title"> <h1 class="header_logo">MA,m</h1> <a href="#" class="header_mail">info@lead-group.ru</a> <a href="" class="header_numder">+7 (495) 123-45-67</a> <a href="#" class="search"><img src="imgsearch.svg" alt="лупа"></a> </div> <hr class="header_line"> <nav> <ul class="header_list"> <li><a href="#" class="header_link">О НАС</a></li> <li><a href="#" class="header_link">ФЛОТ</a></li> <li><a href="#" class="header_link">ИНВЕСТОРАМ</a></li> <li><a href="#" class="header_link">КАРЬЕРА</a></li> <li><a href="#" class="header_link">ПРЕСС-ЦЕНТР</a></li> <li><a href="#" class="header_link">УСТОЙЧИВОЕ РАЗВИТИЕ</a></li> <li><a href="#" class="header_link">КОНТАКТЫ</a></li> </ul> </nav> <div class="header_txt__block"> <h1 class="header_txt__title">Первый в мире ледокольный газовоз</h1> <div class="header_txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure consequuntur debitis maxime, esse dignissimos doloribus natus impedit tenetur nobis dolorem perspiciatis asperiores error nesciunt soluta itaque quos illo eum non! </div> <button>ПОДРОБНЕЕ</button> <div class="arrow-left"><img src="imgarrow-left.svg" alt="Левая стрелка"></div> <div class="arrow-right"><img src="imgarrow-right.svg" alt ="Правая стрелка"></div> </div> <div class="icebeaker_main_block"> <div class="icebeaker_block"> <h2 class="icebeaker_txt">Танкер-газовоз СПГ «КАПИТАН ДАНИЛКИН»</h2> <ul class="icebeaker_list"> <li class="icebeaker_link">Грузовместимость:</li> <li class="icebeaker_link">Ледопроходимость</li> <li class="icebeaker_link">Ледовый класс:</li> <li class="icebeaker_link">Число «Азиподов»:</li> </ul> </div> </div> </header> <main> <section> </section> </main> <footer> </footer> </body> </html>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } header { height: 900px; text-align: center; background: url(ice_title.jpg); background-size: cover; } .header_title { padding-top: 25px; margin-bottom: 30px; } .header_logo { display: inline; color: var(--white, #FFF); font-size: 25px; position: absolute; left: 18%; } .header_mail { text-decoration: none; color: var(--white, #FFF); font-size: 12px; margin-right: 3%; } .header_numder { text-decoration: none; color: var(--white, #FFF); font-size: 12px; } .search { position: absolute; right: 18%; } .header_line { width: 64%; margin: 0 auto; margin-bottom: 30px; } nav { display: block; width: 64%; margin: 0 auto; margin-bottom: 120px; } .header_list { list-style-type: none; text-align: center; justify-content: space-between; display: flex; flex-wrap: wrap; } .header_link { display: inline-block; text-decoration: none; color: var(--white, #FFF);; font-size: 14px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: 0.7px; text-transform: uppercase; } .header_link:last-child { margin-left: 0; } .header_link:hover { color: tomato; transition-duration: 1ms; } .header_txt__block { width: 634px; position: absolute; left: 18%; text-align: left; } .header_txt__title { color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 60px; font-style: normal; font-weight: 300; line-height: 140%; padding-bottom: 30px; } .header_txt { color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 14px; font-style: normal; font-weight: 100; line-height: 140%; border-left: 3px solid #FFF; padding-left: 30px; margin-bottom: 50px; } button { display: block; background-color: tomato; color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 16px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: 0.8px; text-transform: uppercase; padding: 15px 30px 14px 30px; margin-bottom: 131px; } .arrow-left { background: #133D8D; display: inline-block; padding: 15px; margin-right: 20px; } .arrow-right { background: #133D8D; display: inline-block; padding: 15px; } .icebeaker_main_block { display:inline-block; background: rgba(51, 51, 51, 0.30); position: absolute; } .icebeaker_txt { color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 14px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: 0.7px; text-transform: uppercase; } .icebeaker_link { list-style-type: none; color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 14px; font-style: normal; font-weight: 300; line-height: 140%; } |
* { margin: 0; padding: 0; box-sizing: border-box; } header { height: 900px; text-align: center; background: url(ice_title.jpg); background-size: cover; } .header_title { padding-top: 25px; margin-bottom: 30px; } .header_logo { display: inline; color: var(--white, #FFF); font-size: 25px; position: absolute; left: 18%; } .header_mail { text-decoration: none; color: var(--white, #FFF); font-size: 12px; margin-right: 3%; } .header_numder { text-decoration: none; color: var(--white, #FFF); font-size: 12px; } .search { position: absolute; right: 18%; } .header_line { width: 64%; margin: 0 auto; margin-bottom: 30px; } nav { display: block; width: 64%; margin: 0 auto; margin-bottom: 120px; } .header_list { list-style-type: none; text-align: center; justify-content: space-between; display: flex; flex-wrap: wrap; } .header_link { display: inline-block; text-decoration: none; color: var(--white, #FFF);; font-size: 14px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: 0.7px; text-transform: uppercase; } .header_link:last-child { margin-left: 0; } .header_link:hover { color: tomato; transition-duration: 1ms; } .header_txt__block { width: 634px; position: absolute; left: 18%; text-align: left; } .header_txt__title { color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 60px; font-style: normal; font-weight: 300; line-height: 140%; padding-bottom: 30px; } .header_txt { color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 14px; font-style: normal; font-weight: 100; line-height: 140%; border-left: 3px solid #FFF; padding-left: 30px; margin-bottom: 50px; } button { display: block; background-color: tomato; color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 16px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: 0.8px; text-transform: uppercase; padding: 15px 30px 14px 30px; margin-bottom: 131px; } .arrow-left { background: #133D8D; display: inline-block; padding: 15px; margin-right: 20px; } .arrow-right { background: #133D8D; display: inline-block; padding: 15px; } .icebeaker_main_block { display:inline-block; background: rgba(51, 51, 51, 0.30); position: absolute; } .icebeaker_txt { color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 14px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: 0.7px; text-transform: uppercase; } .icebeaker_link { list-style-type: none; color: var(--white, #FFF); font-family: HelveticaNeueCyr; font-size: 14px; font-style: normal; font-weight: 300; line-height: 140%; }
Дополнительно:
Покажите, пожалуйста, как должно быть?!
И оформите ваш код в песочнице, для удобства, например тут
Пройдите простенькие игры gridgarden и flexbox froggy.
1-й вариант: использовать float.
.header_txt__block { width: 634px; float: left; text-align: left; } .icebeaker_main_block { background: rgba(51, 51, 51, 0.30); float: right; } |
.header_txt__block { width: 634px; float: left; text-align: left; } .icebeaker_main_block { background: rgba(51, 51, 51, 0.30); float: right; }
2-й вариант: использовать flex.
Оборачиваем оба блока в div с классом "wrapper":
<div class="wrapper"> <div class="header_txt__block">...</div> <div class="icebeaker_main_block">...</div> </div> |
<div class="wrapper"> <div class="header_txt__block">...</div> <div class="icebeaker_main_block">...</div> </div>
и редактируем css:
.wrapper { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; } .header_txt__block { width: 634px; text-align: left; } .icebeaker_main_block { background: rgba(51, 51, 51, 0.30); } |
.wrapper { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; } .header_txt__block { width: 634px; text-align: left; } .icebeaker_main_block { background: rgba(51, 51, 51, 0.30); }
3-й способ: использовать grid.
Оборачиваем оба блока в div с классом "wrapper":
<div class="wrapper"> <div class="header_txt__block">...</div> <div class="icebeaker_main_block">...</div> </div> |
<div class="wrapper"> <div class="header_txt__block">...</div> <div class="icebeaker_main_block">...</div> </div>
и редактируем css:
.wrapper { display: grid; grid-template-areas: "left_block right_block"; } .header_txt__block { width: 634px; text-align: left; grid-area: left_block; } .icebeaker_main_block { background: rgba(51, 51, 51, 0.30); grid-area: right_block; } |
.wrapper { display: grid; grid-template-areas: "left_block right_block"; } .header_txt__block { width: 634px; text-align: left; grid-area: left_block; } .icebeaker_main_block { background: rgba(51, 51, 51, 0.30); grid-area: right_block; }
- спасибо
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы переместить блок «icebeaker_main_block» с левой стороны на правую сторону страницы, вам нужно использовать CSS для изменения стилей элементов. Вот пример кода, который поможет вам достичь желаемого результата:
```html
.icebeaker_main_block {
float: right;
width: 50%; /* задайте ширину блока по вашему усмотрению */
}
```
В данном примере мы использовали CSS свойство `float: right;` для того, чтобы блок выровнялся справа относительно родительского элемента. Также вы можете задать ширину блока с помощью свойства `width` в процентах или пикселях.
Если вам нужно, чтобы блок был на том же уровне, что и другие элементы на странице, убедитесь, что у ваших элементов нет свойства `float: left;` или `clear: both;`, которые могут мешать правильному позиционированию.
Не забудьте также проверить, что у блока «icebeaker_main_block» нет других стилей, которые могут влиять на его позиционирование. Если это не помогло, пожалуйста, предоставьте больше информации о вашем коде и стилях, чтобы мы могли помочь вам более точно.