rinatoff
-
Posts
9 -
Joined
-
Last visited
rinatoff's Achievements
Explorer (1/14)
0
Reputation
-
Как можно растянуть 2ое меню на всю ширину экрана? Сколько пробовал, не выходит. И почему padding-top или margin-top у li или a (2го меню) не выставляется, он заходит за границы 1го меню и ничего не происходит. Может там какой нибудь блок поставить, между ними? Прилагаю фото, что должно получится на выходе, код и ссылку на песочницу(но в песочнице не особо понятно, что происходит). Песочница: https://jsfiddle.net/w4o57kmp/ Фото: https://ibb.co/igORZv Код: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Интернет Магазин</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <div class="container"> <div class="head clearfix"> <a href="#" class= "picture"><img src="img/logo.png" alt="" class="logo"></a> <div class="tel">8 (800) <span class="telColor">555 - 55 - 55</span> <span class = "schedule">Ежедневно с 9 - 00 до 19 - 00</span></div> <div class="shop"> <img src="img/shop.png" alt="" class ="img_shop"> <span class="price basket">Корзина</span> <span class="price">Товаров: 0</span> <span class="price">На сумму:0</span> <span class="price checkout">Оформить заказ</span> </div> </div> <nav> <ul class="menu_list"> <li> <a href="#">Главная</a> </li> <li> <a href="#">Новые поступления</a> </li> <li> <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> </nav> <div class="menu_second"> <ul> <li> <a href="#">очищение</a> </li> <li> <a href="#"><span>для лица</span><br> classic</a> </li> <li> <a href="#"><span>для лица</span><br> premium</a> </li> <li> <a href="#">для тела</a> </li> </ul> </div> </div> </header> <section> <div class="container"> dasd </div> </section> <section> <div class="container"> asdasdas </div> </section> <section> <div class="container"> asdasd </div> </section> <footer> <div class="container"> </div> </footer> </body> </html> *{ box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { width: 100%; height: 100%; max-width: 1000px; margin: 0 auto; } header { height: 340px; background: #DDE6F0; } a { text-decoration: none; } .head { width: 100%; } .logo{ padding-top: 51px; padding-left: 10px; } .picture { float: left; } .tel { float: left; margin-top: 120px; margin-left: 70px; font-size: 25pt; font-weight: bold; position: relative; width: 378px; } .telColor { color: #006AB3; font-size: 30pt; position: absolute; top: -32px; right: 45px; } .schedule { font-size: 11pt; } .shop { float: left; border-left: 1px solid #B8C0C8; padding-left: 26px; width: 144px; margin-top: 64px; position: relative; } .img_shop { position: absolute; top: -15px; right: 4px; } .price { display: block; font-size: 14pt; } .basket { color: #4B88C0; padding-bottom: 20px; } .checkout { color: #4B88C0; padding-top: 16px; } nav { margin-top: 21px; } .menu_list { width: 100%; padding: 0; margin: 0; } .menu_list li { list-style-type: none; display: inline; border-right: 1px solid #2A6C96; width: 100%; background: #2BA3D6; padding: 11px; } .menu_list li:hover { background: #167CBA; width: 100%; } .menu_list li a { color: white; font-size: 16pt; font-weight: bold; } .menu_second { height: 60px; margin-top: 40px; padding: 0; } .menu_second ul { padding: 0; display: inline; } .menu_second li { list-style-type: none; display: inline; background: #106FB1; padding: 23px; border: 1px solid black; padding-top: 37px; text-align: center; padding-bottom: 15px; } .menu_second li a { display: inline-block; font-size: 18pt; font-weight: bold; text-transform: uppercase; color: #DDE6F0; } .menu_second span { font-size: 14pt; text-transform: lowercase; font-weight: normal; } .clearfix:after { content: " "; display: table; clear: both; }
-
спасибо большое, сейчас попробую.
-
Благодарю, сейчас попробую. Т.е лого должно лежать в nav?
-
Спасибо за ответ, а кроме флексбокса можно как-то реализовать? не знаю данную технологию(
-
Друзья встал такой вопрос с реализацией 2ух меню, между которыми находится лого. Менюшки то расходятся, то лого куда то съезжает. Кто может подсказать путь решения данной проблемы? Вот что необходимо получить: Ширина 1410px. Прилагаю свои способы: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <div class="container"> <nav> <ul class="menu menu_left"> <li> <a href="#">Павильон №1</a> </li> <li> <a href="#">Павильон №2</a> </li> <li> <a href="#">Расположение залов</a> </li> </ul> <ul class="menu menu_right"> <li> <a href="#">Фотогаллерея</a> </li> <li> <a href="#">Контакты</a> </li> <li> <a href="#">Карта проезда</a> </li> </ul> </nav> </div> </header> <section> <div class="container">ewfwefew</div> </section> <section> <div class="container">wefwefwef</div> </section> <section> <div class="container">ewfwef</div> </section> <section> <div class="container">wefwe</div> </section> <section> <div class="container">14dwd</div> </section> <section> <div class="container">wqdwq</div> </section> <footer> <div class="container">wqdqw</div> </footer> </body> </html> CSS: body { font-family: Arial, sans-serif; padding: 0; margin: 0; } div { box-sizing: border-box; } header { background: url(../img/sky.jpg) no-repeat center top / cover; height: 600px; } .container { width: 100%; max-width: 1410px; margin: 0 auto; } nav { padding: 115px 80px 0px 80px; } /*.logo { padding-top: 115px; } */ .menu { padding: 0; margin: 0; display: block; background: #D32D43; width: 548px; } .menu_left { float: left; } .menu_right { float: right; } .menu li { display: block; float: left; padding: 40px 17px 40px 17px; } .menu li a { color: #FEF5F6; text-decoration: none; text-transform: uppercase; } .menu li a:hover { padding: 5px; color: #D32D43; background: #FEF5F6; border-radius: 10px; }
-
Вот это
-
хорошо, тогда как решить эту проблему, нужен отступ сверху в 115пх и по 80 сбоку. И еще вопрос, чтобы вы сделали если вам между этими 2умя минюшками по середине нужно прикрутить лого?
-
попробовал, не из за него. в панели разработчика не видно что ul обёрнуты в нав и в див с классом контейнер.
-
Не понятно почему div туда уехал, тег nav вообще потерялся, видно только его пэддинг-топ на месте div'а, Прилагаю скрин и код. Хотя дивом обернуты нав и ул с лишками. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <div class="container"> <nav> <ul class="menu menu_left"> <li> <a href="#">Павильон №1</a> </li> <li> <a href="#">Павильон №2</a> </li> <li> <a href="#">Расположение залов</a> </li> </ul> <ul class="menu menu_right"> <li> <a href="#">Фотогаллерея</a> </li> <li> <a href="#">Контакты</a> </li> <li> <a href="#">Карта проезда</a> </li> </ul> </nav> </div> </header> <section> <div class="container">ewfwefew</div> </section> <section> <div class="container">wefwefwef</div> </section> <section> <div class="container">ewfwef</div> </section> <section> <div class="container">wefwe</div> </section> <section> <div class="container">14dwd</div> </section> <section> <div class="container">wqdwq</div> </section> <footer> <div class="container">wqdqw</div> </footer> </body> </html> body { font-family: Arial, sans-serif; padding: 0; margin: 0; } div { box-sizing: border-box; } header { background: url(../img/sky.jpg) no-repeat center top / cover; height: 600px; } .container { width: 100%; max-width: 1410px; margin: 0 auto; } nav { padding: 115px 80px 0px 80px; } /*.logo { padding-top: 115px; } */ .menu { padding: 0; margin: 0; display: block; background: #D32D43; width: 548px; } .menu_left { float: left; } .menu_right { float: right; } .menu li { display: block; float: left; padding: 40px 17px 40px 17px; } .menu li a { color: #FEF5F6; text-decoration: none; text-transform: uppercase; } .menu li a:hover { padding: 5px; color: #D32D43; background: #FEF5F6; border-radius: 10px; }