Форум Сайтостроение Веб-строительство

Дилемма с CSS или Как Лучше Извратиться?

M2
На сайте с 11.01.2011
Offline
342
mark2011
544

Всем форумчанам привет!

http://nndevice.ru - код для позиционирования меню: 


.menu_projects

{

	position: absolute;

	margin-top: 55%;

	left: 49.6%;

	z-index: 5;

}

Остальные пункты меню абсолютно аналогично.

Что получается? А получается следующее: при таком позиционировании, количество текста никак не влияет на расположение меню, кнопки вниз не уходят. Но в хроме и в сафари меню оказывается внизу страницы.

Если в CSS вместо margin-top записать просто top, то хром с сафарей всё отлично понимают, но кнопки реагируют на количество текста. Т.е. с увеличением текста кнопки всё больше уходят вниз.

По идее решением был бы какой-нибудь CSS-хак под Safari 5 версии, но я такого не нашёл.

Как ещё можно решить эту проблему?

HTML-разметка контента следующая: 


<!-- основной контент страницы -->

	<div id="content">

		<!-- место для текстового содержания -->

		<div id="text">

		

		

		</div>

	</div>

А кнопки находятся в отдельном диве: 


<div id="sitemenu">

			<span class="menu_about"><a href="#" onClick="load_main(); return false;"><img src="images/about.jpg" alt=""></a></span>

			<span class="menu_services"><a href="#" onClick="load_services(); return false;"><img src="images/services.jpg" alt=""></a></span>

			<span class="menu_material"><a href="#" onClick="load_material(); return false;"><img src="images/material.jpg" alt=""></a></span>

			<span class="menu_projects"><a href="#" onClick="load_projects(); return false;"><img src="images/projects.jpg" alt=""></a></span>

			<span class="menu_nice"><a href="#" onClick="load_nice(); return false;"><img src="images/nice.jpg" alt=""></a></span>

			<span class="menu_contacts"><a href="#" onClick="load_contacts(); return false;"><img src="images/contacts.jpg" alt=""></a></span>

		</div>

На #sitemenu у меня в CSS не записано ничего.

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
P
На сайте с 25.05.2007
Offline
103
pimandr
#1
mark2011:
при таком позиционировании, количество текста никак не влияет на расположение меню, кнопки вниз не уходят

Естественно, вы ж используете абсолютное позиционирование. На то оно и абсолютное, чтоб на него ничто не влияло.

Любопытно, что вы заметили проблемы только в хроме и сафари. В остальных браузерах все тож очень глючно.

mark2011:
По идее решением был бы какой-нибудь CSS-хак под Safari 5 версии, но я такого не нашёл.

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

Вы так извращаетесь ради того, чтоб менюшка была по коду как можно выше? У вас ведь уже есть меню вверху, сделанное сейчас картинкой. Ну так и переверстайте его нормально, с сылками и наложите поверх картинки. Собссно вам для этого и нужно-то всего лишь ваши волшебные "margin-top: 55%" заменить везде на "top: 300px;". И к слову, грамотнее было б сам див id="sitemenu" абсолютно спозиционировать, а не все спаны, которые внутри.

А нижнее меню, если оно вам нужно, расположите после текста, по необходимости закрыв ноиндексом.

coolakov.ru/tools (http://coolakov.ru/tools/): определение конкурентов (http://coolakov.ru/tools/most_promoted/), кластеризация запросов (http://coolakov.ru/tools/razbivka/) и т.д.
M2
На сайте с 11.01.2011
Offline
342
mark2011
#2

pimandr

Спасибо вам за ответ. Вы не очень поняли меня, наверное. Мне нужно, чтобы меню было над текстом, вот как оно сейчас есть. Но, вместе с тем, чтобы объём текста никак не влиял на расположение кнопок меню (чтобы они не прыгали по странице). В плане месторасположения объектов на странице вёрстка именно такая, какая и требуется.

По поводу id="sitemenu" я понял. Переделаю. Но решит ли это описанную проблему "прыганья" меню? И ещё вопрос, если я указываю величины в пикселях а не в процентах, кроме того, что нарушаются принципы "резиновой" вёрстки, (300px они и на 13 дюймах 300 и на широкоформатном тоже 300, а это две большие разницы) что ещё происходит? Браузеры это воспринимают по-другому? Или для них без разницы?

P
На сайте с 25.05.2007
Offline
103
pimandr
#3
mark2011:
Вы не очень поняли меня, наверное. Мне нужно, чтобы меню было над текстом, вот как оно сейчас есть

Ясен фиг не понял, т.к.ни в в мозилле ни в ie8 нормально ничего не отображается.

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

mark2011:
чтобы объём текста никак не влиял на расположение кнопок меню (чтобы они не прыгали по странице)

Для этого нужно указывать жестко в пикселях. Подумайте сами: две строки текста - это, допустим 20 пикселей, тогда сто строк текста - 2000px. А теперь посчитайте ваши 55% от 20 и от 2000px и прочувствуйте разницу. Если прочувствовали, то должны осознать, что в вашем случае использование процентов неуместно.

mark2011:
если я указываю величины в пикселях а не в процентах, кроме того, что нарушаются принципы "резиновой" вёрстки, (300px они и на 13 дюймах 300 и на широкоформатном тоже 300, а это две большие разницы)

Да вы что? А что ж у вас высота шапки и карусельки вашей в пикселях указана?))) Что на 13 дюймах, что на 22 - она 400 с лишним пикселей, или сколько там. Она-то не ресайзится у вас, а ведь это "нарушает принципы резиновой верстки", не так ли ?:)

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

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

На будущее: в процентах - горизонталь, вертикали - в пикселях.

M2
На сайте с 11.01.2011
Offline
342
mark2011
#4

pimandr

Всё исправил, залил на nndevice.ru обратно. Тестировал в IE7, 8, Opera 11, Mozilla 3.6.13, Chrome/Safari поздних версий - везде всё супер отображается. Что у вас не так? Можете мне в личку или куда-нибудь сбросить скрины с указанием соответствующих браузеров?

Между прочим подкорректировал HTML под стандарт доктайпа strict, сейчас документ проходит валидацию на 100% без единой ошибки. Так что я не понимаю, что может быть не так...

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий