Orbos_2000
-
Posts
4 -
Joined
-
Last visited
Orbos_2000's Achievements
Explorer (1/14)
0
Reputation
-
С переносом текста удалось решить проблему уменьшением шрифта, но появилась новая проблема, при сужении окна браузера, меню просто исчезает, что можно сделать (кроме бочки)? Пример Да, и еще вопрос, возможно ли засунуть это меню в отдельный модуль или файл, чтобы каждый раз не повторять его в коде каждой html странички?
-
Спасибо за ответ Дa, точно так. Я убрал кусок кода, который вы показали, но все по-прежнему, как на первом рисунке. На другом мониторе, с более низким разрешением все нормально...
-
Вот, собственно весь код <!doctype html><html><head><meta charset="utf-8"><title>юридическая компания</title><style> body{ background-color: #663300; margin-left: 0px; } #main{ width: 960px; margin-top: 30px; margin-right: auto; margin-left: auto; margin-bottom: 30px; background-color: #e5bc6b; border-radius: 10px; border-color: #663300; } .textmain{ margin-left: 15px; margin-top: 15px; margin-right: 15px; margin-bottom: 15px; font-family: Calibri; color: #663300; line-height: 120%; } p.textmain{ margin-left: 15px; margin-top: 15px; margin-right: 15px; margin-bottom: 15px; font-family: Calibri; color: #663300; line-height: 120%; } h1.textmain { font-style: italic; font-size: 250%; text-align: center; font-family: Calibri; color: #663300; } .ornopen{ text-align: center; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; } #logo{ margin-right: auto; margin-left: auto; text-align: center; padding-top: 30px; padding-bottom: 30px; } #soderg{ width: 750px; margin: 20px auto; padding: 10px; border-collapse: collapse; border: thin dashed #000000; border-spacing: 10px 10px; } #footer { width: 700px; margin: 0px auto; text-align: center; line-height: 0pt; padding-bottom: 25px; padding-top: 0px; } #footer p { width: 700px; margin: 0px auto; padding: 0px; line-height: 10px; }/* Начало стили для таблицы с 3-мя колонками*/ .nTable { width: 700px; border-spacing: 12px 10px; /*расстояние*/ border-collapse: separate; text-align: center; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px; } .nTable tr, td { padding: 0px; /* Поля вокруг текста */ border: 2px solid #663300; /* Рамка вокруг ячеек */ margin-top: 1px; margin-right: 1px; margin-bottom: 1px; } .nTable td { text-align: center; width: 233px; margin: 0 auto; } .nTable p { margin-left: 15px; margin-top: 15px; margin-right: 15px; margin-bottom: 15px; text-align: center; text-indent: 0px; font-family: Calibri; line-height: 110%; font-size: 90%; color: #663300; font-weight: bold; } .nTable .pict { margin-left: 2px; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; }/* Конец стили для таблицы с 3-мя колонками*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);#divmainmenu { width: 822px; /* Ширина слоя в пикселах */ margin: 0 auto; /* Отступ слева и справа */ background-color: #FF0004; height: 51px; background-image:url(pic/menupodl.gif) } #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button { margin: 0 auto; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}#cssmenu:after,#cssmenu > ul:after { content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}#cssmenu #menu-button { display: none;}#cssmenu { width: 770px; font-family: 'Open Sans', Helvetica, sans-serif; background: #663300; background: -moz-linear-gradient(top, #854200 0%, #3d1f00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #854200), color-stop(100%, #3d1f00)); background: -webkit-linear-gradient(top, #854200 0%, #3d1f00 100%); background: -o-linear-gradient(top, #854200 0%, #3d1f00 100%); background: -ms-linear-gradient(top, #854200 0%, #3d1f00 100%); background: linear-gradient(to bottom, #854200 0%, #3d1f00 100%);}#cssmenu > ul { background: url('pic/bg.png'); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);}#cssmenu > ul > li { float: left;}#cssmenu > ul > li > a { padding: 18px 25px 21px 25px; border-right: 1px solid rgba(80, 80, 80, 0.12); text-decoration: none; font-size: 12px; font-weight: 700; color: #fabe55; text-transform: uppercase; letter-spacing: 1px;}#cssmenu > ul > li:hover > a,#cssmenu > ul > li > a:hover,#cssmenu > ul > li.active > a { color: #ffe7c9; background: #572b00; background: rgba(0, 0, 0, 0.1);}#cssmenu > ul > li.has-sub > a { padding-right: 45px;}#cssmenu > ul > li.has-sub > a::after { content: ''; position: absolute; width: 0; height: 0; border: 6px solid transparent; border-top-color: #fabe55; right: 17px; top: 21.5px;}#cssmenu > ul > li.has-sub.active > a::after,#cssmenu > ul > li.has-sub:hover > a { border-top-color: #ffe7c9;}#cssmenu ul ul { position: absolute; left: -9999px; top: 60px; padding-top: 6px; font-size: 13px; opacity: 0; -webkit-transition: top 0.2s ease, opacity 0.2s ease-in; -moz-transition: top 0.2s ease, opacity 0.2s ease-in; -ms-transition: top 0.2s ease, opacity 0.2s ease-in; -o-transition: top 0.2s ease, opacity 0.2s ease-in; transition: top 0.2s ease, opacity 0.2s ease-in;}#cssmenu > ul > li > ul::after { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-bottom-color: #663300; top: -4px; left: 20px;}#cssmenu ul ul ul::after { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-right-color: #663300; top: 11px; left: -4px;}#cssmenu > ul > li > ul { top: 120px;}#cssmenu > ul > li:hover > ul { top: 51px; left: 0; opacity: 1;}#cssmenu ul ul ul { padding-top: 0; padding-left: 6px;}#cssmenu ul ul > li:hover > ul { left: 180px; top: 0; opacity: 1;}#cssmenu ul ul li a { text-decoration: none; font-weight: 400; padding: 11px 25px; width: 180px; color: #fabe55; background: #663300; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);}#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a { color: #ffe7c9;}#cssmenu ul ul li:first-child > a { border-top-left-radius: 3px; border-top-right-radius: 3px;}#cssmenu ul ul li:last-child > a { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}#cssmenu > ul > li > ul::after { position: absolute; display: block;}#cssmenu ul ul li.has-sub > a::after { content: ''; position: absolute; width: 0; height: 0; border: 4px solid transparent; border-left-color: #fabe55; right: 17px; top: 14px;}#cssmenu ul ul li.has-sub.active > a::after,#cssmenu ul ul li.has-sub:hover > a::after { border-left-color: #ffe7c9;}@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { #cssmenu { background: #663300; } #cssmenu > ul { display: none; } #cssmenu > ul.open { display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); } #cssmenu > ul > li { float: none; } #cssmenu > ul > li > a { padding: 18px 25px 18px 25px; border-right: 0; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a { background: rgba(0, 0, 0, 0.1); ; } #cssmenu #menu-button { display: block; text-decoration: none; font-size: 13px; font-weight: 700; color: #fabe55; padding: 18px 25px 18px 25px; text-transform: uppercase; letter-spacing: 1px; background: url('bg.png'); cursor: pointer; } #cssmenu ul ul, #cssmenu ul li:hover > ul, #cssmenu > ul > li > ul, #cssmenu ul ul ul, #cssmenu ul ul li:hover > ul { left: 0; top: auto; opacity: 1; width: 100%; padding: 0; position: relative; } #cssmenu ul ul li { width: 100%; } #cssmenu ul ul li a { width: 100%; box-shadow: none; padding-left: 35px; } #cssmenu ul ul ul li a { padding-left: 45px; } #cssmenu ul ul li:first-child > a, #cssmenu ul ul li:last-child > a { border-radius: 0; } #cssmenu #menu-button::after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #fabe55; border-bottom: 2px solid #fabe55; right: 25px; top: 18px; } #cssmenu #menu-button::before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #fabe55; right: 25px; top: 28px; } #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul li.has-sub > a::after { display: none; }}$('#cssmenu').prepend('<div id="menu-button">Menu</div>'); $('#cssmenu #menu-button').on('click', function(){ var menu = $(this).next('ul'); if (menu.hasClass('open')) { menu.removeClass('open'); } else { menu.addClass('open'); } }); </style></head> <body><div id="main"><div id="logo"> <img src="pic/LogoNew.png" width="567" height="145" alt=""/> </div> <div id='divmainmenu'><div id='cssmenu'> <ul> <li><a href='#'><span>О нас</span></a></li> <li class='has-sub'><a href='#'><span>Гражданам</span></a> <ul> <li><a href='#'><span>Уголовное дела</span></a></li> <li><a href='#'><span>Семейные споры</span></a></li> <li><a href='#'><span>Трудовые споры</span></a></li> <li><a href='#'><span>Наследование</span></a></li> <li><a href='#'><span>Расторжение брака</span></a></li> <li><a href='#'><span>Получение гражданства</span></a></li> <li><a href='#'><span>Защита прав потребителей</span></a></li> <li class='last'><a href='#'><span>Освобождение от прохождения военной службы</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Юридическим лицам</span></a> <ul> <li><a href='#'><span>Арбитражные споры</span></a></li> <li><a href='#'><span>Арбитражные споры в административной сфере</span></a></li> <li class='last'><a href='#'><span>Споры по результатам государственных закупок</span></a></li> </ul> </li> <li class='active has-sub'><a href='index.html'><span>Регистрация</span></a> <ul> <li><a href='#'><span>ООО</span></a></li> <li><a href='#'><span>ОАО</span></a></li> <li><a href='#'><span>ЗАО</span></a></li> <li><a href='#'><span>ИП</span></a></li> <li><a href='#'><span>Некоммерческих организаций</span></a></li> <li><a href='#'><span>ТСЖ</span></a></li> <li class='last'><a href='#'><span>Внесение изменений в устав</span></a></li> </ul> </li> <li class='last'><a href='#'><span>Контакты</span></a></li></ul></div></div> <div id=soderg><p class="ornopen"> <img src="Ornament/YzOpen.png" width="400" height="50" alt=""/></p> <p class="ornopen"> <img src="Ornament/YzClose.png" width="400" height="50" alt=""/> </p></div></div> </body></html>
-
Здравствуйте, сделал меню, но оно переносится на следующую строку после сужения экрана, как на снимке. Меню делал в генераторе. Что добавить? white-space: nowrap; не помогает. Забыл прикрепить. В нормальном состоянии должно выглядеть вот-так. После манипуляций с масштабами страницы. @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); #divmainmenu { width: 822px; /* Ширина слоя в пикселах */ margin: 0 auto; /* Отступ слева и справа */ background-color: #FF0004; height: 51px; background-image: url(pic/menupodl.gif); min-width: 822px; } #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button { margin: 0 auto; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}#cssmenu:after,#cssmenu > ul:after { content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}#cssmenu #menu-button { display: none;}#cssmenu { width: 770px; font-family: 'Open Sans', Helvetica, sans-serif; background: #663300; background: -moz-linear-gradient(top, #854200 0%, #3d1f00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #854200), color-stop(100%, #3d1f00)); background: -webkit-linear-gradient(top, #854200 0%, #3d1f00 100%); background: -o-linear-gradient(top, #854200 0%, #3d1f00 100%); background: -ms-linear-gradient(top, #854200 0%, #3d1f00 100%); background: linear-gradient(to bottom, #854200 0%, #3d1f00 100%);}#cssmenu > ul { background: url('pic/bg.png'); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);}#cssmenu > ul > li { float: left;}#cssmenu > ul > li > a { padding: 18px 25px 21px 25px; border-right: 1px solid rgba(80, 80, 80, 0.12); text-decoration: none; font-size: 12px; font-weight: 700; color: #fabe55; text-transform: uppercase; letter-spacing: 1px;}#cssmenu > ul > li:hover > a,#cssmenu > ul > li > a:hover,#cssmenu > ul > li.active > a { color: #ffe7c9; background: #572b00; background: rgba(0, 0, 0, 0.1);}#cssmenu > ul > li.has-sub > a { padding-right: 45px;}#cssmenu > ul > li.has-sub > a::after { content: ''; position: absolute; width: 0; height: 0; border: 6px solid transparent; border-top-color: #fabe55; right: 17px; top: 21.5px;}#cssmenu > ul > li.has-sub.active > a::after,#cssmenu > ul > li.has-sub:hover > a { border-top-color: #ffe7c9;}#cssmenu ul ul { position: absolute; left: -9999px; top: 60px; padding-top: 6px; font-size: 13px; opacity: 0; -webkit-transition: top 0.2s ease, opacity 0.2s ease-in; -moz-transition: top 0.2s ease, opacity 0.2s ease-in; -ms-transition: top 0.2s ease, opacity 0.2s ease-in; -o-transition: top 0.2s ease, opacity 0.2s ease-in; transition: top 0.2s ease, opacity 0.2s ease-in;}#cssmenu > ul > li > ul::after { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-bottom-color: #663300; top: -4px; left: 20px;}#cssmenu ul ul ul::after { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-right-color: #663300; top: 11px; left: -4px;}#cssmenu > ul > li > ul { top: 120px;}#cssmenu > ul > li:hover > ul { top: 51px; left: 0; opacity: 1;}#cssmenu ul ul ul { padding-top: 0; padding-left: 6px;}#cssmenu ul ul > li:hover > ul { left: 180px; top: 0; opacity: 1;}#cssmenu ul ul li a { text-decoration: none; font-weight: 400; padding: 11px 25px; width: 180px; color: #fabe55; background: #663300; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);}#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a { color: #ffe7c9;}#cssmenu ul ul li:first-child > a { border-top-left-radius: 3px; border-top-right-radius: 3px;}#cssmenu ul ul li:last-child > a { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}#cssmenu > ul > li > ul::after { position: absolute; display: block;}#cssmenu ul ul li.has-sub > a::after { content: ''; position: absolute; width: 0; height: 0; border: 4px solid transparent; border-left-color: #fabe55; right: 17px; top: 14px;}#cssmenu ul ul li.has-sub.active > a::after,#cssmenu ul ul li.has-sub:hover > a::after { border-left-color: #ffe7c9;}@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { #cssmenu { background: #663300; } #cssmenu > ul { display: none; } #cssmenu > ul.open { display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); } #cssmenu > ul > li { float: none; } #cssmenu > ul > li > a { padding: 18px 25px 18px 25px; border-right: 0; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a { background: rgba(0, 0, 0, 0.1); ; } #cssmenu #menu-button { display: block; text-decoration: none; font-size: 13px; font-weight: 700; color: #fabe55; padding: 18px 25px 18px 25px; text-transform: uppercase; letter-spacing: 1px; background: url('bg.png'); cursor: pointer; } #cssmenu ul ul, #cssmenu ul li:hover > ul, #cssmenu > ul > li > ul, #cssmenu ul ul ul, #cssmenu ul ul li:hover > ul { left: 0; top: auto; opacity: 1; width: 100%; padding: 0; position: relative; } #cssmenu ul ul li { width: 100%; } #cssmenu ul ul li a { width: 100%; box-shadow: none; padding-left: 35px; } #cssmenu ul ul ul li a { padding-left: 45px; } #cssmenu ul ul li:first-child > a, #cssmenu ul ul li:last-child > a { border-radius: 0; } #cssmenu #menu-button::after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #fabe55; border-bottom: 2px solid #fabe55; right: 25px; top: 18px; } #cssmenu #menu-button::before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #fabe55; right: 25px; top: 28px; } #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul li.has-sub > a::after { display: none; }} $('#cssmenu').prepend('<div id="menu-button">Menu</div>'); $('#cssmenu #menu-button').on('click', function(){ var menu = $(this).next('ul'); if (menu.hasClass('open')) { menu.removeClass('open'); } else { menu.addClass('open'); } });