Сьезд при уменьшении размера окна

@Linked · Регистрация: 12.12.2010

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

У меня сьезжает меню если я уменьшаю размеры браузера.Вот,так более понятно будет(см. скрины снизу).
Дак вот,что не так может быть?как исправить?вот 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
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
ul#cssmenu {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin-top: 0px;
margin-left: auto; margin-right: auto;
border: 0 none;
padding: 0;
list-style: none;
background: #003366;
height: 30px;
font: bold 12px/28px Verdana, Arial;
border-left:#003366 1px solid;
}
 
ul#cssmenu li {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
height: 30px;
}
 
ul#cssmenu ul {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 30px;
left: 0;
}
 
ul#cssmenu ul:after {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
 
ul#cssmenu ul li {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width: 200px;
float: left;
display: block !important;
display: inline;
}
 
ul#cssmenu a {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border: 0px;
padding: 0 10px;
float: none !important;
float: left;
display: block;
background: #003366;
color: #FFFFFF;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}
 
ul#cssmenu a:hover, ul#cssmenu li:hover a, ul#cssmenu li.iehover a {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
background: #FFFFFF;
color:#003366;
border-top:#003366 1px solid;
}
 
ul#cssmenu li:hover li a, ul#cssmenu li.iehover li a {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-top: 2px solid #FFFFFF;
float: none;
background-color:#003366;
color: #FFF;
}
 
 
ul#cssmenu li:hover li a:hover, ul#cssmenu li:hover li:hover a, ul#cssmenu li.iehover li a:hover, ul#cssmenu li.iehover li.iehover a {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-top: 2px solid #FFFFFF;
background: #fff;
color:#003366;
border:#003366 1px solid;
border-top: 2px solid #FFFFFF;
 
 
 
 
}
 
ul#cssmenu ul ul {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
display: none;
position: absolute;
top: 0;
left: 200px;
background-color:#003366;
}
 
ul#cssmenu li:hover ul ul, ul#cssmenu li.iehover ul ul {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
display: none;
}
 
ul#cssmenu li:hover ul, ul#cssmenu ul li:hover ul, ul#cssmenu li.iehover ul, ul#cssmenu ul li.iehover ul {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
display: block;
}

Да, и при изменении размеров окна - форма справа тоже сьезжает...Как сделать так чтобы при изменении окна изменялись эллементы страницы?

@Rikani · 09.09.2011, 17:55

Может быть выложите целиком HTML и css. Гадать на css без html сложновато.

@Linked · 09.09.2011, 20:08 **[ТС]**

Вот html:

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
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
147
148
149
<?php
session_start();
require_once("config.php");
$sqlquery1 = mysqli_query($dbconnect, "SELECT * FROM news ORDER BY id DESC LIMIT 5");
if(isset($_GET['exit']))
{
session_destroy();
header("location: index.php");
}
?>
<html>
<head>
<title>MGPET</title>
<link rel = "shortcut icon"
href = "../img/favicon.ico">
<link rel = "stylesheet"
type = "text/css"
href = "../styles/style1.css">
<script type="text/javascript" src = "../scripts/jquery.js"></script>
<script type="text/javascript" src = "../scripts/script1.js"></script>
</head>
<body id = "index1">
<div id = "divlogo1">
<center>
<br>
<h id = "black25">МИРНИНСКИЙ ГОСУДАРСТВЕННЫЙ ПРОМЫШЛЕННО-ЭКОНОМИЧЕСКИЙ ТЕХНИКУМ</h>
</center>
</div>
<div id = "divmenu2">
<ul id="cssmenu">
<li><a href="index.php">Главная</a></li>
<li><a href="index.php">Абитуриенту</a></li>
<li><a href="studentu.php">Студенту</a>
<ul>
<li><a href="otdeleniya.php?category=ochnoe">Очного отделения</a>
<ul><li id = "menu3id"><a href = "otdeleniya.php?category=ochnoe&id_category=1">Учебный план</a></li><li id = "menu3id"><a href = "otdeleniya.php?category=ochnoe&id_category=2">Расписание</a></li></ul>
</li>
<li><a href="otdeleniya.php?category=vechernee">Очно-заочного(вечернего)</a>
<ul><li id = "menu3id"><a href = "otdeleniya.php?category=vechernee&id_category=1">Учебный план</a></li><li id = "menu3id"><a href = "otdeleniya.php?category=vechernee&id_category=2">Расписание</a></li></ul>
</li>
<li><a href="otdeleniya.php?category=zaochnoe">Заочного</a>
<ul><li id = "menu3id"><a href = "otdeleniya.php?category=zaochnoe&id_category=1">Учебный план</a></li><li id = "menu3id"><a href = "otdeleniya.php?category=zaochnoe&id_category=2">Расписание</a></li></ul>
</li>
<li><a href="otdeleniya.php?category=npo">Отделения НПО</a>
<ul><li id = "menu3id"><a href = "otdeleniya.php?category=npo&id_category=1">Учебный план</a></li><li id = "menu3id"><a href = "otdeleniya.php?category=npo&id_category=2">Расписание</a></li></ul>
</li>
</ul>
</li>
<li><a href="vipuskniku.php">Выпускнику</a></li>
</li>
<li><a href="prepodovatelu.php">Преподавателю</a></li>
<li><a href="otdeleniya.php">Наши достижения</a>
<ul>
<li><a href="dostigeniya.php?id=1">Спортивные</a></li>
<li><a href="dostigeniya.php?id=2">Культурные</a></li>
<li><a href="dostigeniya.php?id=3">Научные</a></li>
<li><a href="dostigeniya.php?id=4">Образовательные</a></li>
</ul>
</li>
<li><a href="sportivnaya_gizn.php">Спортивная жизнь</a></li>
<li><a href="dosug.php">Наш досуг</a></li>
<li><a href="history_college.php">История техникума</a></li>
<li><a href="zhaloba.php">Разрешите пожаловаться</a></li>
</ul>
</div>
<div id = "divblockleft3">
<div id = "leftnews7">
<center><a href = 'news.php' id = 'white20'>Последние новости</a></center>
<h id = "white16">
<?php
while($sqlquery2 = mysqli_fetch_array($sqlquery1))
{
print "<a href = 'news.php?id=$sqlquery2[id]' id = 'white18'>$sqlquery2[title]</a><br>";
}
?>
</h>
</div>
</div>
 
<div id = "divblockright5">
<center>
<div id = "divformauth6">
<?php
if(isset($_SESSION['auth_user']))
{
print "<h id = 'white16'>Вы вошли как <b>$_SESSION[auth_user]</b></h><br><a href = '?exit' id = 'white18'>Выйти</a>";
}
else {
?><h id = "white20">Форма входа</h>
<?php
if($_POST['step'] == 6)
{
$login = htmlspecialchars(strtolower($_POST['login']), ENT_QUOTES);
$pass = htmlspecialchars(md5(md5(md5($_POST['pass']))), ENT_QUOTES);
$sqlquery1 = mysqli_query($dbconnect, "SELECT * FROM users WHERE litlogin = '$login'");
$sqlquery2 = mysqli_fetch_array($sqlquery1);
$sqlquery3 = $sqlquery2['litlogin'];
$sqlquery4 = $sqlquery2['pass'];
if(($login == $sqlquery3) and ($pass == $sqlquery4))
{
$_SESSION['auth_user'] = $login;
print "<script language = 'javascript'>alert('Авторизация прошла успешно'); location.href = 'index.php';</script>";
}
else {
print "<h id = 'white16'>Неверный логин или пароль</h>";
}
}
?>
<form method = "post"
action = "index.php">
<input type = "text"
name = "login"
value = "Логин"
maxlength = "32"
class = "text1"
onblur="if (this.value == '') {this.value = 'Логин';}"  
onfocus="if (this.value == 'Логин') {this.value = '';}">
<br>
<input type = "password"
name = "pass"
value = "password"
maxlength = "32"
class = "text1"
onblur="if (this.value == '') {this.value = 'password';}"  
onfocus="if (this.value == 'password') {this.value = '';}">
<br>
<input type = "hidden"
name = "step"
value = "6">
<input type = "submit"
value = "Войти"
class = "btn1">
<br>
<input type = "button"
value = "Регистрация"
onclick = "location.href = 'reg.php'"
class = "btn1">
</form>
<?php
}
?>
</div>
<div id = "divblock11">
<?php
//include("calendar.php");
?>
</div>
</center>
</div>

@Rikani · 10.09.2011, 11:16

Вам нужно задать ширину документа. Либо минимальную ширину (min-widht), такую чтобы все пукты меню помещались на странице по горизонтали. Либо задать фиксированную ширину документа(width).

Как вариант, оберните все содержимое <body> в <div> и задайте ширину этому диву.

@Linked · 10.09.2011, 21:37 **[ТС]**

А можете написать как это сделать?

@ProstoMad · 10.09.2011, 22:02

добавь в css

CSS
1
2
3
4
body 
{
width:1000px;
}

если всё равно съезжает, то побольше цифру поставь

Добавлено через 6 минут
или дай ссылку на сайт

@Linked · 15.09.2011, 08:23 **[ТС]**

Я на denwer пишу, сайта пока нет.Да, и width:1000px не помогает, поскольку всё становится широко и ужасно.Какие ещё варианты есть?

@Linked · 19.09.2011, 15:49 **[ТС]**

Нет, не катит такой вариант!Нужно, чтобы при уменьшении размеров окна - меню оставалось неподвижным,просто уезжало за рамки окна,а не переносилось на новую строку.

@ProstoMad · 19.09.2011, 18:20

раз всё большим становится, уменьши число тогда

@Linked · 19.09.2011, 20:21 **[ТС]**

какое число?слушай, не надо чушь писать!я спрашиваю по существу дела.Как сделать при уменьшении размеров окна чтобы меню уходило за рамки, а не сьезжало вниз!Скринов не достаточно?

@ProstoMad · 19.09.2011, 20:56

мда... я чушь и не пишу!
дай ссылку на сайт

@Linked · 20.09.2011, 08:28 **[ТС]**

о боги...прочитай выше)
Цитирую:ссылки на сайт нет, я работаю на денвере...
Все коды я выложил, но по сути - ничего по делу нет.(

@Alorian · 20.09.2011, 09:35

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

Все коды я выложил, но по сути - ничего по делу нет.

Тебе ответили пусть и коряво, но правильно.
Попытаюсь более понятно объяснить.

У каждого пункта меню есть ширина в пикселях + отступы. Если в сумме ширина элементов меню + отступы больше ширины окна браузера, то тут есть несколько вариантов того что можно сделать при использовании float:left. Варианты:
1. Пункты меню переносятся на следующую строчку, так как в текущей им места не хватает.

2. Если указать такую ширину меню чтобы все пункты меню + оступы влазили, то меню уйдет за пределы окна браузера и появится горизонтальная прокрутка, но при этом все пункты меню останутся в одной строке. Как вариант можно указывать не просто width, но min-width, тогда ниже определенного предела ширина не будет уменьшаться и будет увеличиваться если еще есть место. По сути будет то же самое что при использовании просто width:число, но поудобнее.

Нужно просто экспериментальным путем найти ширину при которой переноса не происходит, и в тоже время весь сайт растягивается терпимо.

Это что касается предыдущих ответов.
Добавлю от себя:

3. Если уменьшить шрифт и/или отступы в меню, то все пункты меню будут влазить на одну строку. Мне кажется в этом твоя проблема. На левом скриншоте шрифт визуально поменьше. Если есть картинка из фотошопа, которая подогнана под 1024х768, то посмотри в фотошопе размер шрифта и поставь такой же. И отступы на левом скриншоте поменьше.

Динамически менять размер шрифта/отступов в зависимости от ширины окна браузера можно только с помощью js. В css или в html шрифт определяется браузером один раз при первой отрисовке страницы. В дальнейшем его можно менять только по :hover либо с помощью js.

@Linked · 20.09.2011, 14:42 **[ТС]**

Я видел и такой вариант, когда меню при уменьшении размеров окна уходило за пределы браузера и НЕБЫЛО полосы прокрутки.Вот меня такой и интересует.

@Alorian · 20.09.2011, 16:22

Непонятно зачем нужно меню которое не видно.
В зависимости от разрешения отображать пункты меню мягко говоря плохая идея.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul style="height:22px; overflow:hidden; background:#FF0;">
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<li style="float:left;">adqwdqwdqwdqwdqdqwd</li>
<ul>

Указываешь высоту меню и overflow:hidden для ul. Должно работать. Проверить негде.
Как вариант можно обернуть все это еще в один див c overflow:hidden; а для ul указать ширину огромную и overflow:hidden убрать. Тогда пункт меню не целиком будет пропадать, а обрезаться.

@Linked · 20.09.2011, 17:06 **[ТС]**

Для Alorian:Спасибо!Да,работает,но одно огромнейшее НО!Списки не выпадают( (т.е.не работает выпадающее меню)...Но,зато заезжает,прямо как и просил.Как можно сделать чтобы и меню выпадало и списки показывало?мб id присвоить и как-то через id всё это проделать?

@Alorian · 20.09.2011, 18:42

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

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

CSS
1
2
3
.menu li{position:relative;}
.menu li ul{display:none; position:absolute; left:0; top:100%;}
.menu li:hover ul{display:block;}

HTML5
1
2
3
4
5
6
7
8
9
<ul class="menu">
<li>
<a href="/">asdasdasd</a>
<ul>
<li><a href="/">asdasdasd</a></li>
<li><a href="/">asdasdasd</a></li>
</ul>
<li>
</ul>

Добавлено через 1 час 6 минут
Фигню написал. Не сразу понял в чем проблема. Попробуй с overflow-x, overflow-y поэкспериментировать. Мне сейчас негде проверять.

@Linked · 21.09.2011, 14:28 **[ТС]**

не помогает(

Добавлено через 17 часов 57 минут
что ещё можно сделать?

@Alorian · 26.09.2011, 20:42

По теме.
Скрывать пункты меню в зависимости от разрешения экрана + выпадающее меню, как я уже и говорил, это плохая идея. Я не могу придумать красивой реализации этой идеи. Если устроит любой вариант, то мне в голову приходит только один на html+css.

1. Есть родительский контейнер и внутренний контейнер с меню. Берем внутреннему контейнеру присваиваем большую ширину, а родительскому overflow:hidden; Таким образом мы добъемся того, что элементы не будет переноситься на следующую строчку, но будут вправо уходить в невидимую область.

2. Указываем большую высоту родительскому контейнеру. Высота нужная чтобы несмотря на overflow:hodden; выпадающее меню все равно работало. В пределах этой высоты мы будет видеть выпадающее меню.

3. Чтобы родительский контейнер не раздвигал остальной сайт в высоту, абсолютно позиционируем его на место меню. При этом оставляем с помощью обычных контейнеров пустое место под меню. То есть родительский контейнер будет нависать над этим пустым местом.

---
Вобщем как то так. Ради проверки делать такие конструкции честно говоря лениво, вряд ли оно мне пригодится в будущем, но теоретически все должно работать. Решение корявое, хотя бы потому, что родительский контейнер будет заслонять собой контент над которым он будет висеть. То есть контент будет видно, и даже можно будет выделить, но по ссылкам нажать не получится, если это нормально то такой вариант подойдет. Если совсем поизвращаться с z-index, то возможно получится победить этот недостаток.

Еще один вариант делать меню на js. Вычисляем координаты пунктов меню, и цепляем по этим координатам невидимые выпадающие меню с помощью абсолютного позиционирования. При наведении на пункт меню, делаем соответствующее выпадающее меню видимым.

Вобщем нормальной реализации я так и не смог придумать. Везде есть недостатки.

@Linked · 26.09.2011, 21:02 **[ТС]**

для Alorian:СПАСИБО!По теме, помогло, 2-ой вариант)Все доходчиво и внятно обьяснено.И ещё раз спасибо!благодарю

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Rikani 35 / 35 / 1 Регистрация: 27.07.2011 Сообщений: 85
	09.09.2011, 17:55
	Может быть выложите целиком HTML и css. Гадать на css без html сложновато. 0

@Rikani 35 / 35 / 1 Регистрация: 27.07.2011 Сообщений: 85
	10.09.2011, 11:16
	Вам нужно задать ширину документа. Либо минимальную ширину (min-widht), такую чтобы все пукты меню помещались на странице по горизонтали. Либо задать фиксированную ширину документа(width). Как вариант, оберните все содержимое <body> в <div> и задайте ширину этому диву. 1

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	10.09.2011, 21:37 [ТС]
	А можете написать как это сделать? 0

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	15.09.2011, 08:23 [ТС]
	Я на denwer пишу, сайта пока нет.Да, и width:1000px не помогает, поскольку всё становится широко и ужасно.Какие ещё варианты есть? 0

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	19.09.2011, 15:49 [ТС]
	Нет, не катит такой вариант!Нужно, чтобы при уменьшении размеров окна - меню оставалось неподвижным,просто уезжало за рамки окна,а не переносилось на новую строку. 0

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191
	19.09.2011, 18:20
	раз всё большим становится, уменьши число тогда 0

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	19.09.2011, 20:21 [ТС]
	какое число?слушай, не надо чушь писать!я спрашиваю по существу дела.Как сделать при уменьшении размеров окна чтобы меню уходило за рамки, а не сьезжало вниз!Скринов не достаточно? 0

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191
	19.09.2011, 20:56
	мда... я чушь и не пишу! дай ссылку на сайт 1

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	20.09.2011, 08:28 [ТС]
	о боги...прочитай выше) Цитирую:ссылки на сайт нет, я работаю на денвере... Все коды я выложил, но по сути - ничего по делу нет.( 0

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	20.09.2011, 14:42 [ТС]
	Я видел и такой вариант, когда меню при уменьшении размеров окна уходило за пределы браузера и НЕБЫЛО полосы прокрутки.Вот меня такой и интересует. 0

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	20.09.2011, 17:06 [ТС]
	Для Alorian:Спасибо!Да,работает,но одно огромнейшее НО!Списки не выпадают( (т.е.не работает выпадающее меню)...Но,зато заезжает,прямо как и просил.Как можно сделать чтобы и меню выпадало и списки показывало?мб id присвоить и как-то через id всё это проделать? 0

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	21.09.2011, 14:28 [ТС]
	не помогает( Добавлено через 17 часов 57 минут что ещё можно сделать? 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	26.09.2011, 20:42
	По теме. Скрывать пункты меню в зависимости от разрешения экрана + выпадающее меню, как я уже и говорил, это плохая идея. Я не могу придумать красивой реализации этой идеи. Если устроит любой вариант, то мне в голову приходит только один на html+css. 1. Есть родительский контейнер и внутренний контейнер с меню. Берем внутреннему контейнеру присваиваем большую ширину, а родительскому overflow:hidden; Таким образом мы добъемся того, что элементы не будет переноситься на следующую строчку, но будут вправо уходить в невидимую область. 2. Указываем большую высоту родительскому контейнеру. Высота нужная чтобы несмотря на overflow:hodden; выпадающее меню все равно работало. В пределах этой высоты мы будет видеть выпадающее меню. 3. Чтобы родительский контейнер не раздвигал остальной сайт в высоту, абсолютно позиционируем его на место меню. При этом оставляем с помощью обычных контейнеров пустое место под меню. То есть родительский контейнер будет нависать над этим пустым местом. --- Вобщем как то так. Ради проверки делать такие конструкции честно говоря лениво, вряд ли оно мне пригодится в будущем, но теоретически все должно работать. Решение корявое, хотя бы потому, что родительский контейнер будет заслонять собой контент над которым он будет висеть. То есть контент будет видно, и даже можно будет выделить, но по ссылкам нажать не получится, если это нормально то такой вариант подойдет. Если совсем поизвращаться с z-index, то возможно получится победить этот недостаток. Еще один вариант делать меню на js. Вычисляем координаты пунктов меню, и цепляем по этим координатам невидимые выпадающие меню с помощью абсолютного позиционирования. При наведении на пункт меню, делаем соответствующее выпадающее меню видимым. Вобщем нормальной реализации я так и не смог придумать. Везде есть недостатки. 2

@Linked 21 / 21 / 6 Регистрация: 12.12.2010 Сообщений: 677
	26.09.2011, 21:02 [ТС]
	для Alorian:СПАСИБО!По теме, помогло, 2-ой вариант)Все доходчиво и внятно обьяснено.И ещё раз спасибо!благодарю 0