Абсолютное позиционирование лишь по вертикали

Vedrys · November 16, 2010

Здравствуйте, форумчане. Нужна Ваша помощь в одном вопросе. Буду очень благодарен за совет...

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

Нужно чтобы меню находилось в пределах колонки таблицы (по горизонтали). А по вертикали - бегало при скролинге...

Вот здесь это хорошо реализовано http://www.samsung.com/ua/consumer/tv-av/t...&returnurl=

Там меню размещено не относительно границы браузера, а относительно границы колонки...

Спасибо большое!

CEBEP · November 17, 2010

Это JS. В html+css такого добиться не удастся даже очень ловкому программисту.

Тем не менее в некотором приближении указанного эффекта можно достичь. Если описать див и отказаться от свойства letf/right то появится он там где появился бы будь он позиционирован стандартно при этом контент не затронет.

Great Rash · November 17, 2010

Ну почему же не удастся... position: fixed; (ездить плавно не будет конечно, но на месте стоять будет)

А чтоб текст не залазил надо минимальную ширину ставить и всего делов.

CEBEP · November 17, 2010

ну моя ерунда как fixed работает...

psywalker · November 17, 2010

Vedrys

Лови дружище

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
		html,
		body {
			height: 100%;
			overflow: hidden;

		}



		#wrap { 
			height: 100%;
			position: relative;
			margin: 0 auto;

			overflow: auto;

		}
		#basis {background: red; width: 700px; margin: 0 auto;}
		.head { height: 100px; background: blue;}
		ul { 
			position: absolute;
			top: 100px;
			left: 50%;
			margin-left: -350px;
			z-index: 1;
			width: 700px;
			list-style: none;

		}
			ul li { 
				width: 30px; 
				height: 30px; 
				background: #0C0;
				margin: 10px 0; 
			}
			p { padding: 10px 50px;}

</style>
</head>

<body>		
<ul id="menu">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
<div id="wrap">
	<div id="basis">	
	<div class="head"></div>

		<p>То, в силу того, что массивы те же объекты, можно сказать, что массивы — это неупорядоченное множество пар ключ-значение с особой обработкой числовых ключей и свойства length. В общем случае невозможно узнать, кофе сколько элементов в массиве, не перебирая их. Но в подавляющем большинстве случаев создаваемые массивы не имеют пропусков, и кофе свойство length у них вручную не изменяется, поэтому length равно количеству элементов в массиве. Но не кофе забывайте, что это всё-таки не многомерный массив,кофе а массив массивов. В чём разница: двумерный массив, кофе как частный случай многомерного, это матрица MxN, т.е., грубо говоря, таблица, из M строк и N столбцов. кофе В каждой строке у неё одинаковое количество элементов, равно как и в каждом столбце. В JavaScript иначе, тут в кофе массиве верхнего уровня лежат ссылки на другие произвольные массивы. Они могут быть одинакового размера, могут быть разного, а могут быть вообще кофе не массивами.  Многомерный массив — это нечто кофе целое, массив массивов — это множество различных массивов, кофе ссылки на которые лежат ещё в одном массиве.
Во вторник, 10 августа, на рынке европейских государственных облигаций продолжилось формирование смешанной динамики. Как и накануне, участники рынка активизировали покупки бондов с дюрацией до семи лет, избавляясь от более долгосрочных долговых обязательств. Характер торговой сессии на Лондонской фондовой бирже формировался под влиянием макроэкономической статистики ведущих европейских стран. В Германии с открытием торговой сессии была обнародована инфляционная статистика. Инфляция в Германии ускоряется на фоне растущих цен на энергоносители. По сообщению федерального статистического бюро в Висбадене, индекс потребительских цен (CPI) в июле текущего года поднялся по сравнению с июнем на 0,3%, что превысило прогноз аналитиков (рост на 0,2%). В годовом выражении индекс CPI поднялся на 1,2% вместо ожидавшихся 1,1%. В то же время, индекс цен потребителей, рассчитанный по стандартам еврозоны (CPI-EU Harmonised), полностью оправдал ожидания. В сравнении с июнем рост индекса CPI-EU Harmonised составил 0,3%, в годовом исчислении - 1,2%. Оптовые цены в июле в сравнении с июнем снизились на 0,3%, хотя в годовом выражении возросли на 5,3%. Во вторник, 10 августа, на рынке европейских государственных облигаций продолжилось формирование смешанной динамики. Как и накануне, участники рынка активизировали покупки бондов с дюрацией до семи лет, избавляясь от более долгосрочных долговых обязательств. Характер торговой сессии на Лондонской фондовой бирже формировался под влиянием макроэкономической статистики ведущих европейских стран. В Германии с открытием торговой сессии была обнародована инфляционная статистика. Инфляция в Германии ускоряется на фоне растущих цен на энергоносители. По сообщению федерального статистического бюро в Висбадене, индекс потребительских цен (CPI) в июле текущего года поднялся по сравнению с июнем на 0,3%, что превысило прогноз аналитиков (рост на 0,2%). В годовом выражении индекс CPI поднялся на 1,2% вместо ожидавшихся 1,1%. В то же время, индекс цен потребителей, рассчитанный по стандартам еврозоны (CPI-EU Harmonised), полностью оправдал ожидания. В сравнении с июнем рост индекса CPI-EU Harmonised составил 0,3%, в годовом исчислении - 1,2%. Оптовые цены в июле в сравнении с июнем снизились на 0,3%, хотя в годовом выражении возросли на 5,3%. Вы когда-нибудь хотели использовать ваши собственные изображения для элементов форм таких как: флажки, переключатели, или списки выбора? Речь пойдёт о сценарии, при помощи которого это можно легко сделать. Этот сценарий JavaScript блокирует нормальные объекты ввода формы и выводит вместо них ваши настроенные элементы. Он работает безупречно в Firefox, Сафари, Internet Explorer 7-8, Опера и других обозревателях. В Internet Explorer, списки выбора не стилизуются, но переключатели, и флажки смотрятся и функционируют красиво (для стилизации списков в IE нужно разрешить А чем помочь-то? Я лично ничего из твоих объяснений не понял. Код, который ты здесь вывалил, вообще ничего не объясняет. Скорее всего, он неполный, потому как переменная $valid = true; была определена в файле function.inc.php, а внутри твоего кода эта переменная должна быть переопределена (или остаться неизменной) в результате проверки. Возможно, эта переменная $valid объявлена как global внутри функций проверки, но не имея кода function.inc.php трудно сказать. У тебя должно выйти что-то вроде этого: ок! согласен, что он неполный, по порядку: выше - это файл reg.php полностью был (и он не полный), прикрепил остальные файлы с этим напару. Смысл работы кода необходим такой: юзер, заходит допустим с индекса сайта на reg.php, там заполняет поля и если они удовлетворяют условиям из system/function.inc.php то генериться соль с криптом пароля и все эти данные по нажатию 'send' летят в таблицу базы, после происходит переход на страницу login.php. Если же юзварь допускает ошибки при вводе (как и понятно) ошибки вылетают на этой же странице, естественно по нажатию 'send' - вылетают, пока юзер не заполнит все поля правильно, при этом об отправке таких данных в таблицу базы и вообще не идёт речь т.е если введенные данные удовлетворяют условиям то только тогда данные прохордят в таблицу базы. Прошу помощи, голова уже съезжает. Нам всем хорошо известна проблема, возникающая при создании многоколоночного макета, в котором колонки должны быть одинаковой высоты. Иногда вёрстка, требуют создания тянущегося макета, с двумя колонками одинаковой высоты, каждая со своим фоновым цветом. Как обычно бывает в подобных ситуациях, невозможно точно сказать, которая из колонок будет длиннее. Решение этой проблемы находится за пределами блока – это границы. Если использовать свойство float, сместить колоночный div за границы основного контента, можно имитировать колонки одинаковой высоты, независимо от того, которая из них длиннее. Двухколоночный макет Подобный метод был представлен Douglas Livingstone, и расширен Holly и John Bergevin в статье Position Is Everything. Если следовать данной теории, метод, </p>
</div>	
</div>

<script type="text/javascript">
	var wrap = document.getElementById('wrap');
	wrap.onscroll = function(){
		var menu = document.getElementById('menu');
		var scrol = wrap.scrollTop;
		if(scrol<=100){menu.style.top = '110px'}
		else {menu.style.top = 0+'px'; }
	}/**/
</script>	
</body>
</html>

Vedrys · January 3, 2011

Лови дружище

Пока ждал ответа, вроде как частично решил задачу... Но вот, спустя 1,5 мес вновь заглянул на форум.

Psywalker, Спасибо Вам огромнейшее. Такого ответа и не ожидал!!! Вы - отличный модератор!

Сейчас вернусь к своему сайту и все переделаю опираясь на Ваш код...

psywalker · January 3, 2011

Пока ждал ответа, вроде как частично решил задачу... Но вот, спустя 1,5 мес вновь заглянул на форум.
Psywalker, Спасибо Вам огромнейшее. Такого ответа и не ожидал!!! Вы - отличный модератор!
Сейчас вернусь к своему сайту и все переделаю опираясь на Ваш код...

Молодец дружище. Рад, что смог помочь

HawkHunter · November 28, 2011

Новый вопрос - новая тема. Не влазьте в чужие топики.

Edited November 28, 2011 by Softlink

Sign In

Абсолютное позиционирование лишь по вертикали

Question

Vedrys

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

CEBEP

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

CEBEP

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Vedrys

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

HawkHunter

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information