Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
1 из 5 1 2345 »
 
Рейтинг 4.63/19: Рейтинг темы: голосов - 19, средняя оценка - 4.63
Заблокирован
1

Разделители не прилегают к краю

19.12.2015, 03:57. Показов 3389. Ответов 96
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Разделители не прилегают к краю
разделители не прилегают к краю в чем причина?
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

#menu/*стили для меню*/
    {
        clear: both;/*Отменяет обтекание элемента одновременно с правого и левого края.*/ 
        float:left;/*выравниваем по левому краю*/
        background-color:#330033;
        width:1200px;/*ширина меню*/
        height:50px; /*высота меню*/  
        display:table;
        list-style:none;/*отменяет маркеры для списка*/     
    }
        #menu li/* стили для пунктов меню*/
        {
            
            float: left; /*делаем меню горизонтальным*/
            list-style:none;/*отменяет маркеры для списка*/
            height: 50px;
            display: inline-block; 
            margin-left: 90px; /* делаем отступы чтобы растянуть меню */
            border-left: 1px solid white;/*левая граница для пунктов меню */
            padding-top:10px;
        
        }
            #menu li a /* стили для ссылок в меню*/
            {
                text-decoration: none;
                display: block;
                padding: 0 1rem;
                color: white;/*меняем цвет текста ссылок в меню*/
            }
        #menu li ul 
        {
            display: none;  /*скрываем вложенные пункты*/
        }
            /*Выпадающее меню*/
            #menu li:hover /*Действия при наведении курсора на пункт меню*/
            {
                position: relative;/*Положение элемента устанавливается относительно его исходного места*/
                
            }
            #menu li:hover > ul {
                border-top: 1px solid white;
                display: block;
                position: absolute;/*Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет.*/
                top: 30px; /*первый уровень меню раскрывается вниз(именно такое значение не менять)*/
                left: 0;
                
            }
                /*Второй и последующие уровни вложенности*/
                #menu li ul li{
                border-bottom: 1px solid white;
                height: auto;
                width: 150px;
                }
                #menu li:hover ul li ul{
                    position: absolute;/*Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет(для того чтобы  надпись  на логотипе отображалась поверх )*/
                    top: 0;
                    left: 150px; /*второй и последующие уровни расскрываются вправо*/
                }   
                    #menu li:first-child /*псевдокласс отвечающий за первый элемент в списке*/
                    {
                        border-left:none;/*убираем левую границу*/
                    }
                    #menu li:last-child /*псевдокласс отвечающий за последний элемент в списке*/
                    {
                        border-right:none;/*убираем левую границу*/
                    }
0
Лучшие ответы (1)
Сообщение: #8520573
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 19.12.2015, 03:57
Ответы с готовыми решениями:

Цифры в ячейках вплотную прилегают к границам
Всем привет. Такая вот беда. При переустановке винды бывает все налаживается. При следующей...

Дан файл с абзацем, выровненым по левому краю, надо отформатировать по правому краю
есть задание дан файл с абзацем выровненым по левому краю , надо отформатировать по правому краю!!

В текстовом файле - текст, выровненный по левому краю. Выровнять текст по правому краю
Дан текстовый файл, содержащий текст, выровненный по левому краю. Выровнять текст по правому краю,...

Разделители
Доброго времени суток! У меня следующий вопрос. есть код: echo "<ul class=\"cat\">"; ...

96
53 / 53 / 26
Регистрация: 05.02.2013
Сообщений: 288
19.12.2015, 08:04 2
flyp, Ну полагаю что нужно сбросить отступы у ul
CSS
1
2
3

#menu ul {
            margin: 0;
        }
0
Заблокирован
19.12.2015, 18:59  [ТС] 3
не помогло
0
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
19.12.2015, 19:03 4
flyp, а где html?
0
53 / 53 / 26
Регистрация: 05.02.2013
Сообщений: 288
19.12.2015, 22:13 5
flyp, Как же не помогло сам проверил создав файл html применив ваш стиль, и как только я сбросил у ul margin на 0 все отобразилось как надо.
0
3 / 3 / 2
Регистрация: 18.12.2015
Сообщений: 189
19.12.2015, 22:38 6
flyp, Покажите html и решим проблему
0
Заблокирован
20.12.2015, 06:32  [ТС] 7
у них нет базы данных потому такое разделение варварское
меню
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

  <ul>
            <li><a href="index.php">Главная</a></li>
            <li><a href="#">О школе</a>
                <ul>
                  <li><a href="histotysc.php">История</a></li>
                  <li><a href="tradiz.php">Традиции</a></li>
                  <li><a href="admin.php">Администрация</a></li>
                  <li><a href="uchitelya.php">Учителя</a></li>
                  <li><a href="vipusknik.php">Выпускники</a></li>
                  <li><a href="medalisti.php">Выпускники медалисты</a></li>
                  </ul>
            </li>
            <li><a href="#">Филиалы</a>
                <ul>
                  <li><a href="larixa.php">Ларихинская ООШ</a></li>
                  <li><a href="klepikovo.php">Клепиковская ООШ</a></li>
                  <li><a href="novot.php">Н-Травнинская ООШ</a></li>
                  <li><a href="sins.php">Синицинская ООШ</a></li>
                  <li><a href="vankovka.php">Ваньковская ООШ</a></li>
                  <li><a href="gagarinssad.php">Гагаринский детский сад</a></li>
                  <li><a href="larixasad.php">Ларихинский детский сад</a></li>
                </ul>
            </li>
            <li><a href="#">Документы</a>
            <ul>
            <li><a href="ustav.php">Устав</a></li>
            <li><a href="polojeniya.php">Локальные нормативные акты</a></li>    
            <li><a href="#">Образование</a>
            <ul>
            <li><a href="programmu.php">Программы</a></li>
            <li><a href="uchebniplan.php">Учебный план</a></li>
            </ul>
            <li><a href="metod.php">Методическая работа</a></li>
            <li><a href="vnekrab.php">Внеклассная работа</a></li>
            <li><a href="svedeniy.php">План ФХД</a></li>
            <li><a href="prilogeniy.php">Приложения</a></li>
            <li><a href="material.php">МТО</a></li>
            </ul></li>
            <li><a href="profsouz.php">Наш профсоюз</a></li>
            <li><a href="muzey.php">Музей</a></li> 
            </ul>
индекс
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

  <ul>
            <li><a href="index.php">Главная</a></li>
            <li><a href="#">О школе</a>
                <ul>
                  <li><a href="histotysc.php">История</a></li>
                  <li><a href="tradiz.php">Традиции</a></li>
                  <li><a href="admin.php">Администрация</a></li>
                  <li><a href="uchitelya.php">Учителя</a></li>
                  <li><a href="vipusknik.php">Выпускники</a></li>
                  <li><a href="medalisti.php">Выпускники медалисты</a></li>
                  </ul>
            </li>
            <li><a href="#">Филиалы</a>
                <ul>
                  <li><a href="larixa.php">Ларихинская ООШ</a></li>
                  <li><a href="klepikovo.php">Клепиковская ООШ</a></li>
                  <li><a href="novot.php">Н-Травнинская ООШ</a></li>
                  <li><a href="sins.php">Синицинская ООШ</a></li>
                  <li><a href="vankovka.php">Ваньковская ООШ</a></li>
                  <li><a href="gagarinssad.php">Гагаринский детский сад</a></li>
                  <li><a href="larixasad.php">Ларихинский детский сад</a></li>
                </ul>
            </li>
            <li><a href="#">Документы</a>
            <ul>
            <li><a href="ustav.php">Устав</a></li>
            <li><a href="polojeniya.php">Локальные нормативные акты</a></li>    
            <li><a href="#">Образование</a>
            <ul>
            <li><a href="programmu.php">Программы</a></li>
            <li><a href="uchebniplan.php">Учебный план</a></li>
            </ul>
            <li><a href="metod.php">Методическая работа</a></li>
            <li><a href="vnekrab.php">Внеклассная работа</a></li>
            <li><a href="svedeniy.php">План ФХД</a></li>
            <li><a href="prilogeniy.php">Приложения</a></li>
            <li><a href="material.php">МТО</a></li>
            </ul></li>
            <li><a href="profsouz.php">Наш профсоюз</a></li>
            <li><a href="muzey.php">Музей</a></li> 
            </ul>
0
53 / 53 / 26
Регистрация: 05.02.2013
Сообщений: 288
20.12.2015, 06:57 8
flyp, Не знаю почему у вас нечего по вашим словам не работает, но у меня пр использовании кода css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

body {
    margin: 0;
    padding: 0;
}
#menu/*стили для меню*/{
    clear: both;/*Отменяет обтекание элемента одновременно с правого и левого края.*/ 
    float:left;/*выравниваем по левому краю*/
    background-color:#330033;
    width:1200px;/*ширина меню*/
    height:50px; /*высота меню*/    
    display:table;
    list-style:none;/*отменяет маркеры для списка*/     
}
#menu li/* стили для пунктов меню*/{
    float: left; /*делаем меню горизонтальным*/
    list-style:none;/*отменяет маркеры для списка*/
    height: 50px;
    display: inline-block; 
    margin-left: 90px; /* делаем отступы чтобы растянуть меню */
    border-left: 1px solid white;/*левая граница для пунктов меню */
    padding-top:20px;
}
#menu li a /* стили для ссылок в меню*/{
    text-decoration: none;
    display: block;
    padding: 5px 1rem;
    color: white;/*меняем цвет текста ссылок в меню*/
}
#menu li ul {
    display: none;  /*скрываем вложенные пункты*/
}
#menu ul {
    margin: 0;
}
/*Выпадающее меню*/
#menu li:hover /*Действия при наведении курсора на пункт меню*/{
    position: relative;/*Положение элемента устанавливается относительно его исходного места*/
}
#menu li:hover > ul {
    border-top: 1px solid white;
    display: block;
    position: absolute;/*Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет.*/
    top: 30px; /*первый уровень меню раскрывается вниз(именно такое значение не менять)*/
    left: 0;
}
/*Второй и последующие уровни вложенности*/
#menu li ul li {
    border-bottom: 1px solid white;
    height: auto;
    width: 150px;
}
#menu li:hover ul li ul{
    position: absolute;/*Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет(для того чтобы  надпись  на логотипе отображалась поверх )*/
    top: 0;
    left: 150px; /*второй и последующие уровни расскрываются вправо*/
}   
#menu li:first-child /*псевдокласс отвечающий за первый элемент в списке*/{
    border-left:none;/*убираем левую границу*/
}
#menu li:last-child /*псевдокласс отвечающий за последний элемент в списке*/{
    border-right:none;/*убираем левую границу*/
}
получился как показано на картинке
Миниатюры
Разделители не прилегают к краю  
1
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
20.12.2015, 11:08 9
flyp, можно костыль добавить, как вариант для #menu{margin:0 !important}
1
Заблокирован
20.12.2015, 14:27  [ТС] 10
сейчас попытаюсь

Добавлено через 6 минут
ваши методы работают если бы страница цельная была а не кусками как у меня я проверил на цельной странице все идеально в связи с тем что тут куски кода подключаются не стыковка выходит((

Добавлено через 1 минуту
сейчас индекс покажу я вчера с бодуна 2 раза меню отправил
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>главная страница</title>
        <link href="style.css" rel="stylesheet" type="text/css"><!--подключаем файл стилей--> 
    </head>
    <body>
    
        <div id='main'>  <!-- блок  включающий в себя все содержимое страницы целиком-->
            <div id='header'> <!--блок включающий в себя всю полностью шапку-->                     
            </div>
            <div  id='menu'><!--основное, горизонтальное меню сайта  ul в данном случае является самостоятельным блоком поэтому  оборачивать в <div> не нужно-->
            <?php
            include('menu.php');
            ?>
            </div>
            
            <div id = 'left-bar' > <!-- блок включающий в себя левую колонку-->
            <?php
            include('left-bar.php');
            ?>  
            </div>          
            <div id = 'content' ><!-- блок включающий в себя центральную область-->
                content 
            </div>
            <div id = 'right-bar'><!-- блок включающий в себя правую колонку-->
            <?php
            include('right-bar.php');
            ?>  
            </div>
            <?php
            include('footer.php');
            ?>          
    </div>  
    </body>
 </html>
0
53 / 53 / 26
Регистрация: 05.02.2013
Сообщений: 288
20.12.2015, 15:09 11
flyp, Никакой разницы нет, попробуйте через Firebug узнать и за чего данный отступ появляется в вашем проекте. И если это не получится то показывайте весь проект.
1
Заблокирован
20.12.2015, 16:42  [ТС] 12
del
0
53 / 53 / 26
Регистрация: 05.02.2013
Сообщений: 288
20.12.2015, 16:44 13
flyp, Телепатическими навыками не владею по подробнее если нужна помощь.
1
Заблокирован
20.12.2015, 18:18  [ТС] 14
gsohrazr.ru.zip проект(
0
53 / 53 / 26
Регистрация: 05.02.2013
Сообщений: 288
20.12.2015, 18:48 15
flyp, Странная у вас верста, попробуйте просмотреть то что я поправил. У меня работает на ура.
Вложения
Тип файла: rar www.rar (173.0 Кб, 2 просмотров)
1
Заблокирован
20.12.2015, 21:27  [ТС] 16
у вас все хорошо единственный нюанс это правая колонка оторвалась я потому и решил делать так как делал тоже самое было те колонки отрывались (у меня в частности меню отходило)
0
Заблокирован
20.12.2015, 21:30  [ТС] 17
Разделители не прилегают к краю
0
Заблокирован
20.12.2015, 22:03  [ТС] 18
ах не уточнил хром браузер
0
53 / 53 / 26
Регистрация: 05.02.2013
Сообщений: 288
20.12.2015, 23:10 19
flyp,

Не по теме:

Завтра решим вашу проблемку, а в других браузерах пробовали? и каков результат тот же или дргой

0
Заблокирован
20.12.2015, 23:30  [ТС] 20
в мозиле аналогично в ie отступ от верхнего края те меню отпало от шапки
0
20.12.2015, 23:30
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 20.12.2015, 23:30
Помогаю со студенческими работами здесь

Разделители
Число в таком виде Нужно переделать в такой вид $result =...

Разделители PHP
Здравствуйте, необходимо найти в массиве первое слово типа #23e2e2(то есть # и какие то символы) и...

символы-разделители
Здравствуйте. Хотел бы узнать как можно реализовать данное условие: ввести строку...

Разделители в сортировке
Добрый день! имеется функция разделения строки на подстроки (части): //разбиваем строку на части...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
1 из 5 1 2345 »
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru