Сделать рамку для вертикального меню

@MIcov15 · Регистрация: 16.08.2014

Author24 — интернет-сервис помощи студентам

Есть вертикальное меню ,написанное на css ,нужно сделать рамку ,чтоб меню было посередине рамки ,что бы при добавлении новых пунктов в меню рамка расширялась и чтоб можно было менять толщину ,цвет рамки ,если возможно то тень сделать

Добавлено через 1 час 26 минут
Вот ссылка на меню ,нужно просто добавить рамку
P.s как сделать чтоб фон сайта не просвечивался через рамку?

@andrey1994 · 18.06.2015, 09:13

CSS

/* Убираем отступы */
/* Убираем отступы */
*{
    margin:0;
    padding:0;
}
/* Задаем ширину меню */
#menu{
    width:210px;
    margin:15px;
    border: 3px solid red; /*добавил рамку*/
    background:#abc;   /* добавил фоновый цвет блоку меню*/
 
}
/* Стили для наших пунктов меню */
#menu ul{
    list-style:none;
}
#menu li{
    list-style:none;
    display:block;
    line-height:32px;
    height:32px;
    margin:7px 0;
    width:206px;
}
#menu li a{
    display:block;
    height:33px;
    text-transform:uppercase;
    font-size:16px;
    font-weight:bold;
    line-height:32px;
    padding:0 0 0 25px;
    text-decoration:none;
    color:#006A35;
    background: #95DF8E;
    border:solid 1px #006A35;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
 
/* Подсветка наведденого пункта */
#menu li a:hover{
    background: #35C835;
    color:#fff;
}

Тень - свойство box-shadow

@~~AVPman~~ · 18.06.2015, 11:54

Просто добавить border, можно еще радиус ему дописать и задать цвет (предпочтительно черный) и все... Просвечиваться не будет.

@MIcov15 · 18.06.2015, 13:41 **[ТС]**

а как можно прикрутить это меню к этой рамке?:

HTML5

1
2
3

<div class="lifted">
        <p>Содержимое</p>
</div>

CSS

.lifted p {
        font-size:16px;
        font-weight:bold;
}
 
.lifted {
        position:relative;
        width:40%;
        padding:1em;
        margin:2em 10px 4em;
        background:#fff;
        border-radius:4px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-border-radius:4px;
 
}
 
.lifted:before,
.lifted:after {
        content:"";
        position:absolute;
        z-index:-2;
        bottom:15px;
        left:10px;
        width:50%;
        height:20%;
        max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
 
.lifted:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}

только можно сделать чтобы меню было точно посередине рамки

@andrey1994 · 18.06.2015, 15:52

CSS

        .lifted {
            width:250px;
            padding:1em;
            margin:2em 10px 4em;
            background:#fff;
            border-radius:4px;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-border-radius:4px;
 
        }
        
        /* Убираем отступы */
        /* Убираем отступы */
        *{
            margin:0;
            padding:0;
        }
        /* Задаем ширину меню */
        #menu{
 
            margin:15px;
        }
        /* Стили для наших пунктов меню */
        #menu ul{
            list-style:none;
        }
        #menu li{
            list-style:none;
            display:block;
            line-height:32px;
            height:32px;
            margin:7px 0;
            width:206px;
        }
        #menu li a{
            display:block;
            height:33px;
            text-transform:uppercase;
            font-size:16px;
            font-weight:bold;
            line-height:32px;
            padding:0 0 0 25px;
            text-decoration:none;
            color:#006A35;
            background: #95DF8E;
            border:solid 1px #006A35;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            border-radius:10px;
        }
 
        /* Подсветка наведденого пункта */
        #menu li a:hover{
            background: #35C835;
            color:#fff;
        }

PHP/HTML

div class="lifted">
    <div id="menu">
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#"> Видео курс </a></li>
        </ul>
    </div>
</div>

@MIcov15 · 18.06.2015, 16:07 **[ТС]**

спс ,а как можно сделать чтоб меню внутри автоматически выравнивалось посередине рамки?

Добавлено через 20 секунд
чтоб от всех краев рамки до меню было одинаковое растояние

@andrey1994 · 18.06.2015, 16:08

Добавьте

PHP/HTML

1	text-align: center;

в #menu li a , чтобы сделать текст по центру.

@MIcov15 · 18.06.2015, 16:18 **[ТС]**

не ,вы не поняли .Нужно чтобы само меню

CSS

 }
        
        /* Убираем отступы */
        /* Убираем отступы */
        *{
            margin:0;
            padding:0;
        }
        /* Задаем ширину меню */
        #menu{
 
            margin:15px;
        }
        /* Стили для наших пунктов меню */
        #menu ul{
            list-style:none;
        }
        #menu li{
            list-style:none;
            display:block;
            line-height:32px;
            height:32px;
            margin:7px 0;
            width:206px;
        }
        #menu li a{
            display:block;
            height:33px;
            text-transform:uppercase;
            font-size:16px;
            font-weight:bold;
            line-height:32px;
            padding:0 0 0 25px;
            text-decoration:none;
            color:#006A35;
            background: #95DF8E;
            border:solid 1px #006A35;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            border-radius:10px;
        }
 
        /* Подсветка наведденого пункта */
        #menu li a:hover{
            background: #35C835;
            color:#fff;
        }

было в центре рамки

CSS

.lifted {
            width:250px;
            padding:1em;
            margin:2em 10px 4em;
            background:#fff;
            border-radius:4px;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-border-radius:4px;
 
        }

Добавлено через 1 минуту
чтоб расстояние от всех сторон рамки до меню было одинаковым

@andrey1994 · 18.06.2015, 16:21

CSS

.lifted {
            display: inline-block;/*поменял на inline-block
            padding:1em; /* делаем внутренние отступы одинаковыми*/
            margin:2em 10px 4em;
            background:#fff;
            border-radius:4px;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-border-radius:4px;
        }

Добавлено через 1 минуту

CSS

.lifted {
            display: inline-block;
            padding:1em;
            margin:2em 10px 4em;
            background:#fff;
            border-radius:4px;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-border-radius:4px;
        }
 
        /* Убираем отступы */
        /* Убираем отступы */
        *{
            margin:0;
            padding:0;
        }
        /* Задаем ширину меню */
        #menu{
 
        }
        /* Стили для наших пунктов меню */
        #menu ul{
            list-style:none;
        }
        #menu li{
            list-style:none;
            display:block;
            line-height:32px;
            height:32px;
            margin:7px 0;
            width:206px;
        }
        #menu li a{
            display:block;
            height:33px;
            text-transform:uppercase;
            font-size:16px;
            font-weight:bold;
            line-height:32px;
            padding:0 20px;
            text-decoration:none;
            color:#006A35;
            background: #95DF8E;
            border:solid 1px #006A35;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            border-radius:10px;
 
        }
 
        /* Подсветка наведденого пункта */
        #menu li a:hover{
            background: #35C835;
            color:#fff;
        }

Получилось так.

@MIcov15 · 18.06.2015, 16:35 **[ТС]**

а как тогда изменить размер рамки?

@andrey1994 · 18.06.2015, 16:36

CSS

1	padding:1em;

Писать сюда свои значения.

@MIcov15 · 19.06.2015, 11:36 **[ТС]**

Сообщение от andrey1994

1em

вместо этого можно писать px да?

Добавлено через 18 часов 40 минут
почему то не работает ,когда проверяю просто в браузере все работает ,когда вставляют в wordpress ,то меню не выравнивается в рамке ,пробовал и другой способ ,в браузере все норм ,в wordpress не работает ,как можно исправить?

@MIcov15 13 / 12 / 5 Регистрация: 16.08.2014 Сообщений: 150
	19.06.2015, 11:36 [ТС]	12
	Сообщение от andrey1994 1em вместо этого можно писать px да? Добавлено через 18 часов 40 минут почему то не работает ,когда проверяю просто в браузере все работает ,когда вставляют в wordpress ,то меню не выравнивается в рамке ,пробовал и другой способ ,в браузере все норм ,в wordpress не работает ,как можно исправить? 1

Новые блоги и статьи
Как проверить, что файл НЕ существует с помощью Bash bytestream 25.01.2025 В системном администрировании проверка существования файлов является фундаментальной операцией, особенно при написании скриптов на Bash. Правильная обработка ситуаций, когда файл отсутствует,. . .	Как проверить, что строка пустая, неопределена или null в JavaScript bytestream 25.01.2025 При разработке веб-приложений на JavaScript разработчики регулярно сталкиваются с необходимостью проверки строковых значений на различные состояния. Валидация данных является критически важным. . .	Как проверить существование ключа в объекте или массиве в JavaScript bytestream 25.01.2025 При разработке веб-приложений на JavaScript программисты постоянно сталкиваются с необходимостью работать с объектами и массивами. Эти структуры данных являются фундаментальными элементами языка и. . .	Как создать ArrayList из массива (array) в Java bytestream 25.01.2025 При разработке программного обеспечения на языке Java программисты часто сталкиваются с необходимостью эффективного управления наборами данных. Массивы и ArrayList являются двумя фундаментальными. . .	Как сгенерировать случайные целые числа (int) в указанном диапазоне в Java bytestream 25.01.2025 В программировании генерация случайных чисел является важнейшим инструментом для решения множества практических задач. От создания игровых механик до реализации алгоритмов машинного обучения, от. . .	Как сделать, чтобы grep выводил строки до и после найденной hw_wired 25.01.2025 Утилита grep стала незаменимым инструментом для поиска и фильтрации информации в Unix-подобных операционных системах. Эта командная утилита позволяет осуществлять поиск строк, соответствующих. . .
Как клонировать определенную ветку в Git bytestream 24.01.2025 Одной из ключевых функций Git является возможность клонирования веток, что позволяет создавать локальные копии удаленных репозиториев и работать с определенными версиями проекта. Этот механизм. . .	Как в цикле обойти строки DataFrame в Pandas Python bytestream 24.01.2025 DataFrame представляет собой одну из основных структур данных в библиотеке Python Pandas, которая организует информацию в виде двумерной таблицы с строками и столбцами. Эта структура данных особенно. . .	Как получить имя текущей ветки в Git bytestream 24.01.2025 При работе с Git часто возникает необходимость определить имя текущей ветки, в которой ведется разработка. Знание текущей ветки является критически важным аспектом для эффективного управления. . .	Как отсортировать массив объектов по значению поля объекта в JavaScript bytestream 24.01.2025 При разработке веб-приложений на JavaScript разработчики часто сталкиваются с необходимостью работать с массивами объектов. Эти структуры данных представляют собой упорядоченные наборы элементов, где. . .	Ошибка "src refspec master does not match any" при пуше коммита в Git bytestream 24.01.2025 При работе с системой контроля версий Git разработчики нередко сталкиваются с различными ошибками, одной из которых является сообщение "src refspec master does not match any". Эта ошибка возникает. . .	Как округлить не более двух цифр после запятой в JavaScript bytestream 24.01.2025 При работе с числами в JavaScript разработчики часто сталкиваются с необходимостью округления десятичных значений до определенного количества знаков после запятой. Это особенно важно при работе с. . .

Сделать рамку для вертикального меню

Решение

Решение

Решение

Решение

Решение

@MIcov15 13 / 12 / 5 Регистрация: 16.08.2014 Сообщений: 150
		1
	Сделать рамку для вертикального меню 17.06.2015, 22:45. Показов 7297. Ответов 11 Метки нет (Все метки) Есть вертикальное меню ,написанное на css ,нужно сделать рамку ,чтоб меню было посередине рамки ,что бы при добавлении новых пунктов в меню рамка расширялась и чтоб можно было менять толщину ,цвет рамки ,если возможно то тень сделать Добавлено через 1 час 26 минут Вот ссылка на меню ,нужно просто добавить рамку P.s как сделать чтоб фон сайта не просвечивался через рамку? 0

@~~AVPman~~ Заблокирован
	18.06.2015, 11:54	3
	Просто добавить border, можно еще радиус ему дописать и задать цвет (предпочтительно черный) и все... Просвечиваться не будет. 0

@MIcov15 13 / 12 / 5 Регистрация: 16.08.2014 Сообщений: 150
	18.06.2015, 16:07 [ТС]	6
	спс ,а как можно сделать чтоб меню внутри автоматически выравнивалось посередине рамки? Добавлено через 20 секунд чтоб от всех краев рамки до меню было одинаковое растояние 0

@MIcov15 13 / 12 / 5 Регистрация: 16.08.2014 Сообщений: 150
	18.06.2015, 16:35 [ТС]	10
	а как тогда изменить размер рамки? 0