Arantir

(сейчас отступ есть небольшой, по крайней мере у меня) Горизонтальные меню, наверное, не стоит делать списком. Список по природе вертикальный. Всякие сдвиги картинок - извращенные попытки браузера показать список. Но если проблема только в отступе: h1 { margin-top: -24px; или (в смысле, не оба сразу): .fixed-layer { margin-top: -29px; А еще отступ слева можно убрать: body { margin: 0px; /* ... */ } .fixed-layer { margin-top: -20px; /* ... */ } <div class="fixed-layer"> *** </div> <div id="content">Текст...</div> #content { padding-top: 51px; /* width: 100%; height: 500px; */ } Лучше меню сразу сделайте div'ами, вместо li { display:block }. Блок ведь останется блоком, а вот непонятных отступов не будет.

Ха, интересная идея... И даже вполне соответствует ожидаемому результату. Спасибо, конечно. Обязательно попробую.

Все наперекосяк делается, очевидно, из-за того, что меню сделано списком... Тоже недавно делал так и на вид было совсем не то, что ожидалось, и, на первый взгляд, непонятно почему. В вашем случае пришел к выводу, что проще всего засунуть меню в отдельный фиксированный слой. .fixed-layer { width: 100%; position: fixed; } <div class="fixed-layer"> <div id="menu"> <ul> <li><a href="#" class="current">Главная</a></li> <li><a href="#">Информация</a></li> <li><a href="#">Фото</a></li> <li><a href="#">Чат</a></li> </ul> <h1>Название</h1> </div> </div> А для проверки: body { height: 1600px; } И покрутить вверх-вниз. Меню всегда вверху страницы при прокрутке и соответствует нужному внешнему виду. По крайней мере у меня все именно так. Устраивает такое решение?

Судя по скринах, проблема не в самом меню, а во вложенных в него блоках (кнопках). Покажите код меню, тогда хоть будет видно, где проблема. А то, наверное, проще с ноля меню такое написать, чем тут на пальцах гадать. Ошибок в коде CSS нет? Может все так криво из-за какой-то небольшой ошибки? Если после изменения какой-то свойства ничего не поменялось, значит браузер его не прочел из-за ошибки или оно было поставлено еще раз где-то ниже по коду.

Есть меню. Расположено всегда вверху страницы, то есть фиксированное. Невысокое и длинное. При узком окне на странице появляется горизонтальный скроллинг, но фиксированные элементы на него никак не реагируют. В итоге некоторые пункты меню оказываются недоступными. Нужно сделать так, чтобы это меню могло горизонтально скроллиться вместе со страницей, не используя скриптов. P.S.: Неудобство с вылазящими элементами меню я решил, путем автопереноса этих элементов на новую строку при недостаточной ширине. Ну так же как переносится текст в блоке при его сужении. Тем не менее это немного искривляет дизайн. Хотелось бы, чтобы меню оставалось ровным в одну строку.

ZFJoury, Что именно вы бы хотели сделать резиновым? Резиновый дизайн - понятие относительное. Из того, что можно было бы растянуть, наверное, только основной блок текста. поставьте для #main свойство width, например, 60% или 70%... Отцентрировать тоже не получится с текущим синеньким вертикальным меню, так как оно визуально прибито к левому краю. Может немного не в тему: Зачем горизонтальное меню вверху и вертикальное сбоку? Хоть пункты разные, но 2 меню - как-то не кошерно...

Ошибка, там где и всегда во все века - в заднице у разработчиков баузеров баузерах. Такие вот системные элементы у всех по разному отображаются и их практически никогда нельзя поменять. Поля для ввода текста, скроллбары и так далее - все это у всех браузеров свое. "Выкрутится" то можно почти всегда... Но эти усилия не стоят результата. В данном случае можно картинку сделать div'ом, где картинка - это background, текст поставить на задний план в такой же по ширине div, а background-color на transparent. Тогда без картинки у всех будет абсолютно одинаково - квадратик с текстом и текст не вылазит никуда. Но, по-моему, легче просто следить, чтобы адрес картинки на вашем сайте был правильным. А если у кого-то из посетителей сайта руки из мягкого места растут, то это не вина веб-мастера =) А вот чтобы такого не случалось, надо правильно верстать... Попробуйте совет с div'oм. Пихать текст на заний план не надо, а вот картинку в виде фонового рисунка div'а сделать вполне можно... div всегда им и останется, даже без картинки структура сайта не нарушится. Верстка слоями называется, когда почти все на div'ах и CSS построено. Вот та же главная страница этого сайта - http://htmlbook.ru . Там нет ни одной таблицы и только логотип тегом img сделан. При этом, если отключить картинки в браузере, то на сайте ничего не поломается им можно будет пользоваться как и раньше. Конечно пропадет половина пиктограмм, которые несут важную информацию пользователю. Так что отключение картинок - это уже проблемы пользователя.

По логике не должно быть никакой разницы, где заданы размеры - в CSS или сразу в тегах. В любом случае стиль указывается еще в head'е, так что браузер будет знать размеры картинок еще до их загрузки.

А почему второй блок имеет ширину всего 500px? Почему бы не 100%? Еще важное значение имеет вложенность элементов. Попробуйте поставить меню где-то в самом верху или в самом низу корневого элемента сайта (ну то есть body или какого-то div'a, которым вы, возможно, заменили функции body). А потом просто вот так: #menu { position: fixed; /* Не скроллится со страницей */ top: 0px; /* Вверху страницы, ну по желанию можно с любой стороны прилепить. */ z-index: 100; /* Поверх всех элеметов */ } По идее на положение меню уже ничего не повлияет и оно всегда будет вверху страницы. Или уточните, что вы имели ввиду под "неправильно и криво". Откровенно скажу, из кода двух блоков проблемы не видно.

Ого, даже не знал о таком 0_О Похоже "данное время" уже давно прошло XD

Насколько я понял, второй скрип устанавливает случайную картинку при загрузке страницы. А вам надо чтобы картинки менялись сами по себе на текущей странице? Ну первый скрипт тут, по-моему, не очень поможет... Он делает немного не то. Попробуйте вот так: var time = 5; // Количество секунд до смены картинки. var sImg = new Array(); sImg[0]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg.gif);'></div>"; sImg[1]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-b.gif);'></div>"; sImg[2]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-e.gif);'></div>"; sImg[3]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-g.gif);'></div>"; sImg[4]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-gb.gif);'></div>"; sImg[5]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-r.gif);'></div>"; sImg[6]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-s.gif);'></div>"; sImg[7]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-g.gif);'></div>"; function showImg() { var el=document.getElementById("showImg"); el.innerHTML=sImg[Math.floor(Math.random()*sImg.length)]; setTimeout(function() {showImg()}, time*1000); } window.onload = function() { showImg() };

Только javascript. CSS анимацией не занимается. По крайней мере в данное время. Приведу простой пример: http://jsfiddle.net/W4RKx/

Evgen8, Вообще-то я имел ввиду хотя бы 2 страницы, чтобы понять из-за чего оно изменило позицию на второй. Но, знаешь... Для начала не мешало бы исправить кучу ошибок. Не удивительно, что сайт отображается не совсем так, как ты хотел... Раз уж ты зарегистрировался на это сайте, то прочти полностью - http://htmlbook.ru/samhtml . Там как раз рассказывается о том, в чем ты допустил ошибки.

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

Черт! Ничего не вышло. Как будто мне просто показалось... Не работает, в общем, вышеописанное решение. Несмотря на то, что body вылазит за пределы окна, полос прокрутки нет по прежнему.

Пример: <html> <head> <style> #menu { border: 1px solid; width: 160px; height: 170px; position: absolute; left: 100px; top: 50px; } </style> </head> <body> <div id="menu"> <ul> <li><a href="http://aboutme2.h16.ru/"><span>Aeaaiay</span> </a></li> <li><a href="minecraf-t.3dn.ru.html"><span>Minecraf-t.3dn.ru</span> </a></li> <li><a href="Eciaiaiey v2.0.html"><span>Eciaiaiey v2.0</span></a></li> <li><a href="Iie aaaec.html"><span>Iie aaaec</span></a></li> <li><a href="Minecraft.html"><span>Minecraft</span></a></li> <li><a href="v1.0.html"><span>v1.0</span></a><li> </ul> </div> </body> </html>

Хм... Проблема решилась... Поставил обрезку overflow-x: hidden, но чтобы прокрутка оставалась, то поставил распорку в виде min-width такой же, как min-width spacer-2, оба параметра на body. Теперь при ширине больше min-width справа все обрезается по границе окна и прокрутки нет, а при ширине меньше min-width body больше не сужается и появляется прокрутка. Вот если бы на форум не написал, наверное не догадался бы. Целых 2 дня экспериментировал с этим и не получалось =)

Evgen8, Попробуйте поместить меню внутрь body и задайте ему "position: absolute;". Тогда на его размещение не должны влиять другие элементы, из-за которых оно, вероятно, и скачет.

Проблема заключается в том, что когда слой (div) выходит за предел окна с правой стороны, то возникает вертикальная прокрутка. При этом такого не случается, если слой вылазит за пределы слева. А его выхода за пределы окна требует дизайн страницы. А точнее на случай разной ширины экрана. Пример: <!DOCTYPE html> <html> <head> <title></title> <style> html, body { width: auto; height: 100%; } body { margin: 0px; } div { border: 1px dotted black; } #spacer-1 { background: red; opacity: 0.7; margin: 0 auto; width: 100%; min-width: 1024px; max-width: 1280px; height: 1600px; } #spacer-2 { background: blue; opacity: 0.7; position: absolute; top: 50px; margin: 0 auto; width: 100%; min-width: 1024px; max-width: 1280px; height: 1500px; } #spacer-3 { background: green; opacity: 0.7; position: absolute; top: 0px; left: -380px; right: -380px; width: auto; height: 100%; } </style> </head> <body> <div id="spacer-1">spacer-1 <div id="spacer-2">spacer-2 <div id="spacer-3">spacer-3</div> <div id="content"></div> </div> </div> </body> </html> Чтобы лучше понять, можете скопировать в файл и открыть в браузере. Я там немного раскрасил, чтобы виднее было. Короче не буду долго и нудно разъяснять, почему все именно так. В кратце скажу, что spacer-3 должен вылазить справа и слева, чтобы при увелечии размера окна в ширину было видно картнки, которые являются его фоном, и в это же время эти картинки немного заходили поверх spacer-2. Как видно из примера, почему-то возникает полоса прокрутки и возможность прокрутить вправо, а этого быть не должно. Как бы убрать прокрутку, но чтобы элемент мог выйти за предел окна справа? Не является решением поставить "overflow-x: hidden" для body, потому, что прокрутки не будет вовсе, а она должна быть при уменьшении размера окна меньше min-width в spacer-2.