Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
xSPiRiTx
6 / 6 / 1
Регистрация: 25.01.2012
Сообщений: 102
1

Из-за размеров экрана появляется либо отсутствует пустота в меню

22.08.2012, 16:12. Просмотров 993. Ответов 9
Метки нет (Все метки)

_http://karelin.tk
наворотил на широком мониторе ноута 17.3 все ништяк. начал работать на другом ноутбуке 15 диагональю и выплыло это же пустое место.
пробовал как говорилось выше задать padding в процентах - у меня вообще все расплывает при любых значениях пункты...либо же совсем руки кривые
если фон выставить не для всего меню, а только для li, то пустотка уходит, но это только "зрительно"...по факту все же есть...вот скрин:
http://storage3.static.itmages.ru/i/...fd6adb2d5e.png
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.08.2012, 16:12
Ответы с готовыми решениями:

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

Под изображением в низу в Опере и IE появляется пустота.Как это избежать?
Под изображением (под ногами у женщины) белое поле в Опере и IE смотрится...

При сдвиге появляется "осязаемая" пустота! Как убрать?
Приветствую. У магазина при щелчке мыши на корзине открывается средствами...

При разрешении 800х600 на сайте появляется горизонтальная полоса прокрутки, а при разрешении 1152х864 на странице справа пустота.
На главной странице моего сайта http://www.univer-comp.ru при разрешении...

При изменении размеров окна браузера, появляется белый отступ справа
Привет! Собственно столкнулся с такой проблемой- При изменении размеров окна...

9
and_y87
Web-Разработчик
408 / 356 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
22.08.2012, 17:20 2
xSPiRiTx, Вас неустрайвает воздух образующийся после последнего LI ?
0
xSPiRiTx
6 / 6 / 1
Регистрация: 25.01.2012
Сообщений: 102
22.08.2012, 19:43  [ТС] 3
да! вот на karelin.tk лежит изначальный вид меню. при наведении на последний пункт остается прежний фон всего меню. если фон всего меню прикрутить только для всех li, то все ок...но по факту воздух этот остается и он невидим ибо у него я фон забрал (а если его обратно вернуть, то будет видно эту пустоту при наведении).
при условии, что фон будет только у li, а остальные несколько пикселов из ширины меню без фона и их тупо не видно это сказывается по сравнению с контентом сайта...на скринах видно.

(я думаю я понятно объясняю)
0
and_y87
Web-Разработчик
408 / 356 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
22.08.2012, 22:16 4
xSPiRiTx, Вам поможет эта статья: _http://backnet.ru/2012/03/30/tyanushheesya-menya-na-css-ul-li-c-vyiravnivaniem-po-shirine/
1
xSPiRiTx
6 / 6 / 1
Регистрация: 25.01.2012
Сообщений: 102
23.08.2012, 04:11  [ТС] 5
мне hover белый все портит. и ширина без процентов фиксированная.

либо как будет время тыкните пожалуйста куда добавить из статьи и что удалить в код моего исходного меню
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
@font-face { 
   font-family: "ABook"; 
   src: url([url]http://localhost/argamak/sites/all/themes/pixture_reloaded/fonts/BKANT.TTF);[/url] 
} 
body {background-color: #000;}
 
#amenu, #amenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
#amenu {
        background: #eee;
    width: 896px;
    height: 30px;
    margin: 0 auto;
    margin-bottom: 15px;
    margin-top: 15px;
    }
    
    #amenu:before,
    #amenu:after {
    content: "";
    display: table;
    }
#amenu:after {
    clear: both;
    }
#amenu {
    zoom:1;
    }
    #amenu li {
    float: left;
    border-right: 2px solid #cfb581; 
    position: relative;
    }
    #amenu li.hover,
    #amenu li:hover {
     background-color: #fff;
    }
    #amenu a {
        color: #b96842;
        display: block;
        font: 12px ABook, sans-serif;
        padding: 7px 22px;
        text-transform: uppercase;
    text-decoration: none;
}
#amenu > li:last-child {
    border:none;
    box-shadow:0 0;
}
#amenu li:hover > a {
text-decoration: none;  
    }
*html #amenu li a:hover { /* Только для IE6 */
    color: #fafafa;
    }
#amenu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*Только для IE6*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 32px;
    left: 0;
    z-index: 9999;
    background: #f7efe1;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
#amenu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
    }
#amenu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*Только для IE6*/
    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    box-shadow: -1px 0 0 rgba(255,255,255,.3);
    }
#amenu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*Только для IE6*/
    }
#amenu ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
#amenu ul a {
    padding: 7px;
    width: 180px;
    _height: 10px; /*Только для IE6*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }
#amenu ul a:hover {
    background: #fff;
    }
#amenu ul li:first-child > a {
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    }
#amenu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
    }
#amenu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
    }
#amenu ul li:first-child a:hover:after {
    border-bottom-color: #1ca8f7;
    }
#amenu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;
    }
#amenu ul li:last-child > a {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    }
0
and_y87
Web-Разработчик
408 / 356 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
23.08.2012, 09:38 6
Вам нужно в класе «аменю юл» прописать для дисплея свойство: табл, а для «аменю юл ли» для дисплея табл–целл...
Если до моего прихода на работу не справитесь, выложу вам код

Добавлено через 59 минут
xSPiRiTx, для достижения эффекта из статьи вам достаточно по идее всего лишь допилить вашь CSS этими свойствами:
CSS
1
2
display:table; 
display:table-cell;
Ваши стили должны стать такими:
Это для вашего сайта: _http://karelin.tk
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#amenu {/* строка №12 файла amenu.css - and_y87comment */
    background: #EEE;
    width: 896px;
    height: 30px;
    margin: 0 auto;
    margin-bottom: 15px;
    margin-top: 15px;
    display: table; /* Тут вставили table  - and_y87comment */
}
#amenu li { /* строка №32 файла amenu.css - and_y87comment */
    /* float: left; - это удаляем (закаментил что бы показать что удалить надо) - and_y87comment */
    border-right: 2px solid #CFB581;
    position: relative;
    display: table-cell; /* Сделали тут table-cell (колоночка таблицы) - and_y87comment */
}
Это растягивает меню
1
xSPiRiTx
6 / 6 / 1
Регистрация: 25.01.2012
Сообщений: 102
23.08.2012, 21:07  [ТС] 7
о! вроде есть! потестить нужно для уверенности еще, а то уже боюсь этого меню =)

все делал так, только на float:left не обращал внимания, он мне и мешал!

большое спасибо за помощь!
0
and_y87
Web-Разработчик
408 / 356 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
23.08.2012, 21:36 8
xSPiRiTx, На будующее если будите вдруг использовать на таких ссылках при наведении картинку заднего фона: устанавливайте ссылкам
CSS
1
min-width: px;
1
xSPiRiTx
6 / 6 / 1
Регистрация: 25.01.2012
Сообщений: 102
25.08.2012, 23:59  [ТС] 9
karelin.tk
в Firefox у меня одного так уплывают выпадающие списки?

Добавлено через 7 часов 58 минут
выяснил, что мозилла не поддерживает position:relative у таблиц. а в меню у меня в css пункты представляются этими опциями дабы их растянуть по всей длинне
display:table;
display:table-cell;

решения пока не нашел.
0
xSPiRiTx
6 / 6 / 1
Регистрация: 25.01.2012
Сообщений: 102
30.08.2012, 16:34  [ТС] 10
верстальщик из меня хреновый очень!
Вот на друпале использую модуль меню superfish. Внешне темизировал под себя....а раскатать пункты по всей ширине опять не в силах.


_http://soundhedge.com/argamak

меню тянет эти стили:
_http://soundhedge.com/argamak/sites/all/themes/pixture_reloaded/css/pixture_reloaded.css

_http://soundhedge.com/argamak/sites/all/libraries/superfish/css/superfish.css

_http://soundhedge.com/argamak/sites/all/libraries/superfish/style/white.css

куда именно добавить опции display: inline-block и text-align: center (либо justify) подскажите пожалуйста.
0
30.08.2012, 16:34
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
30.08.2012, 16:34

Контекстное меню, пустота
Всем привет, не первый раз сталкиваюсь с этой проблемой. Не представляю каким...

Как изменить фон экрана рабочего стола либо экрана блокировки?
Как изменить фон экрана рабочего стола либо экрана блокировки? Выбрав фотку из...

Частично отсутствует звук, либо запаздывает
Доброго времени суток! Данная проблема произошла недавно, после отката системы,...


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

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

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