Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
LFC
729 / 534 / 416
Регистрация: 17.09.2015
Сообщений: 1,597
1

Граница выступает

27.02.2017, 07:12. Просмотров 209. Ответов 6
Метки нет (Все метки)

Как сделать выступающую часть border-top тега <ul> невидимой? Пробовал добавить в стиль .mainNav
CSS
1
max-width: 72em;
получается хорошо пока не начинаешь сужать экран и последний элемент перемещается в нижний ряд,и тогда граница опять выступает. Думал поможет
CSS
1
overflow: hidden;
но без изменений.
Вот код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Горизонтальная панель навигации</title>
    <link href="main.css" rel="stylesheet">
</head>
<body class="home">
  <ul class='mainNav clearfix'>
    <li><a href="home.html" class="homeLink">Home</a></li>
    <li><a href="features.html" class="featureLink">Features</a></li>
    <li><a href="experts.html" class="expertsLink">Experts</a></li>
    <li><a href="quiz.html" class="quizLink">Quiz</a></li>
    <li><a href="projects.html" class="projectsLink">Projects</a></li>
    <li><a href="horoscopes.html" class="horoscopesLink">Horoscopes</a></li>
  </ul>
  <img src="images\ecological_houses.jpg"></img>
</body>
</html>
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
.mainNav{
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px dashed #999;
    border-left: 1px dashed #999;
    display: block;
    overflow: hidden;
    max-width: 72em;
}
.mainNav li {
    float: left;
    width: 12em;
}
.mainNav a{
    color: #000;
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px dashed #999;
    border-top: none;
    border-left: none;
    padding: 7px 5px 7px 30px;
    display: block;
    background: #e7e7e7 url(images/nav.png) no-repeat 0 2px;
    
}
.mainNav a:hover {
    font-weight: bold;
    background-color: #b2f511;
    background-position: 3px 50%;
}
.feature .featureLink, 
.experts .expertsLink, .quiz .quizLink, 
.projects .projectsLink,.horoscopes .horoscopesLink {
    background-color: #fff;
    background-position: right -72px;
    padding-right: 15px;
    padding-left: 30px;
    font-weight: bold;
}
.home .homeLink {
    background: white url(images/home2.jpg) no-repeat right -1px;
    padding-right: 15px;
    padding-left: 30px;
    font-weight: bold;
}
.homeLink:hover {
    background: #e7e7e7 url(images/nav.png) no-repeat 0 2px;
}
 
.clearfix:after, .clearfix:before {
    content: "";
    display: table;
    clear: both;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
27.02.2017, 07:12
Ответы с готовыми решениями:

Маркированный список выступает за блок <div>.
Маркированный список выступает за блок &lt;div&gt;. Помогите исправить. &lt;!DOCTYPE...

Рамка и внутри рамки картинка которая по краям не выступает
Ребята как сделать чтобы картинка не выступала за рамку, не получается...

Внутренняя граница
Не получается сделать внутренню границу таблицы чтоб она была тонкая,вот кусок...

Граница рамки css
Всем привет. Можно ли как-нибудь рамку у таблицы(&lt;table&gt;) сделать картинками,...

Граница отображается неверно
Помогите пожалуйста выявить ошибку. Практикуюсь в создании сайтов, начинающий....

6
LFC
729 / 534 / 416
Регистрация: 17.09.2015
Сообщений: 1,597
27.02.2017, 07:22  [ТС] 2
...
0
Миниатюры
Граница выступает   Граница выступает  
Fourd
97 / 97 / 46
Регистрация: 21.03.2012
Сообщений: 378
27.02.2017, 08:46 3
почему просто не убрать у .mainNav свойство border-top: 1px dashed #999; и у .mainNav a свойство border-top: none;???
0
LFC
729 / 534 / 416
Регистрация: 17.09.2015
Сообщений: 1,597
27.02.2017, 09:07  [ТС] 4
Fourd, Тогда стык между верхним и нижним рядом(при сужении экрана) получается толстым, 2px

Добавлено через 10 минут
Может есть какая-то возможность динамически задавать width для <ul>,равную совокупной длине нескольких <li> занимающих самый длинный ряд?

Добавлено через 4 минуты
Или не выпендриваться,задать для .mainNav свойство border-bottom вместо border-top и пусть эта черта как-бы отделяет горизонтальную панель от остальной страницы...(Как план Б,если не найду решения)
0
fol
491 / 471 / 153
Регистрация: 08.07.2013
Сообщений: 1,685
Записей в блоге: 1
27.02.2017, 11:03 5
Первое, что хотел бы сказать: bold на шрифте при наведении смотрится ужасно.

Далее, если ширина пунктов меню известна, то мы знаем, при каком размере экрана у нас окажутся внизу последние пункты. Соответственно, можно регулировать медиа-запросами: либо пунктам меню дать уникальные классы (или айдишники), либо использовать псевдокласс nth-child. Поэтому убираем границу у ul, ставим у li и при определенном размере экрана у li, которые переместились вниз, убираем границу сверху.

И да, странноватый дизайн, если нормально не предусмотрено поведение блоков при адаптации. Пункты меню (по опыту) не должны так себя вести, они должны уменьшиться в размерах или выстроиться вертикально (классическое решение).
1
LFC
729 / 534 / 416
Регистрация: 17.09.2015
Сообщений: 1,597
27.02.2017, 12:37  [ТС] 6
fol, Не судите строго,я еще только учусь верстать,по букварю
До медиа-запросов еще не дошел,если не трудно,приведите простой пример относительно моего кода.
Цитата Сообщение от fol Посмотреть сообщение
или выстроиться вертикально (классическое решение).
после смещения первого же элемента все остальные сразу тоже должны сместиться в вертикаль?
0
fol
491 / 471 / 153
Регистрация: 08.07.2013
Сообщений: 1,685
Записей в блоге: 1
27.02.2017, 12:45 7
Тут и тут почитать про медиа-запросы.
Пример:
CSS
1
2
3
4
5
6
@media (max-width: 767px){
  ul li{
    display:block;
    background-color: #ccc;
  }
}
Это значит, что описанные правила применятся только для экранов с максимальной шириной 767px.
Вся адаптивная верстка основана на таких медиа-запросах. А поведение блоков должно быть отображено в макете.
1
27.02.2017, 12:45
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.02.2017, 12:45

Нижняя граница ячейки
Здравствуйте. Мне нужно убрать рамки с некоторых сторон ячеек и получить...

Граница на углах кнопки
Каким образом можно сделать такую кнопку? Спасибо за помощь.

Граница блока (css)
Добрый день. Как можно расположить границу внутри блока? Что-то вроде...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru