TMGLUK

Как и обещал, выкладываю ссылку на сайт: http://ra-atm.ru/reklamnye_uslugi/kopirajting

Chrome Fix

CSS:

.chrome .main {
position:absolute;
top:0;
left:0;
}

JS:

if($.browser.webkit){
$('html').addClass('chrome');
var $window = $(window), $elem = $('.text>.main');
$window.scroll(function() {
$elem.css('top', $window.scrollTop() + 'px');
});

Примерно так. Chrome как всегда лажает - функция срабатывает с задержкой.

http://jsfiddle.net/62vmY/

Там ничего нет - пустые поля.

Вы только обязательно выложите, что получится.

Да, я уже сделал на js эмуляцию для chrome. Чуть позже выложу работающий пример. А когда сайт сделаем, дам ссылку на сайт.

не пойму для чего это нужно

а сразу сделать .text{position:fixed}

да и чтобы горизонтального бегунка не было сделал бы размеры боковых элементов поменьше с overflow:hidden;

а так вообще не понятно, что из этого правильного способа должно получиться

Если фиксировать отдельные элементы, то будет гораздо сложней с анимацией, а она должна быть согласована и плавная (css transition). Тем более предполагается больше элементов по бокам. Легче менять позицию у одного, чем у шестерых элементов.

Горизонтальный бегунок естественно убирается. Это только пример. В реальном проекте куча css и js.

Раз никто помочь не может, а это естественно - проблема нигде не встречалась, то я буду использовать position:absolute, и эмулировать position:fixed на js.

Добавь display:block к ссылкам.

Вот пожалуйста пример: http://jsbin.com/UWENEzE/1/edit?output (в хроме естественно не работает). Попробуйте прокручивать страницу и нажимать на края.

При прокрутке центрального блока, боковые должны оставаться на месте, т.е. находится в position:fixed.

То есть проблема в том, что хром эти фиксированные элементы, которые по краям, отображает не относительно окна браузера (как должно быть), а по какой-то странной логике. Всё из-за смещённого элемента с position relative. (см. примеры в первом посте).

Я вижу решение только в эмуляции position:fixed через absolute на js, но мне очень не хотелось бы это делать.

Те способы не подходят. Мой способ правильный.

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

Посмотрите второй пример. Там показано, что я пытаюсь достичь — горизонтального переключения контента с помощью изменения позиции .wrapper. (Если поставить left: -2560px; то по центру окажется правая часть страницы).

Добрый день!

Есть такая проблема: если поставить фиксированно позиционированный элемент (без значений позиции, авто) внутрь элемента, который лежит внутри относительно позиционированного элемента, то такой элемент в Chrome отображается на неверной позиции. Во всех других браузерах этот элемент отображается на нужной позиции: той, в которой бы он появился, если бы был статическим)

Вот пример простой: http://cssdesk.com/Gvpvg

Вот пример практический: http://cssdesk.com/mnMxs

Если кто сталкивался или знает, как это решить без применения js-костылей, то помогите пожалуйста. Судя по гуглу, с такой проблемой ещё никто не сталкивался.

Выход то мне подсказал один уважаемый участник форума, жми Ins.

Insert меняет вид курсора, но ввод текста всё равно не работает.

ST2

Selection>Single Selection>Escape переводит курсор в лежачее положение, А как выйти из этого??

Подскажите плз кто знает.

Самого это бесит. Постоянно срабатывает при выходе из поиска. Приходится перезапускать редактор.

Используй проверенный шаблон для этого: http://www.cssstickyfooter.com/

<div id="wrap">
  <div id="main">
  </div>
</div>
<div id="footer">
</div>

html, body {height: 100%;}

#wrap {min-height: 100%;}
#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */
#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

Лучше другой шрифт выбрать.

В общем я нашёл: https://mozillalabs.com/chromeless/

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

Вот та страница: http://e-dotu.ru/2011/05/razreshenie-problem-natsionalnyih-vzaimootnosheniy-v-rusle-kontseptsii-obshhestvennoy-bezopasnosti-3-1/

Что же может вызвать такое поведение?

Кто сталкивался с таким?

И работать это в IE6 не будет.

Что бы работало в IE7, нужно div заменить на span (или другой строковый элемент):

<div style="text-align:center;>
   <span style="display:inline-block;">блок автоматического размера по центру</span>
</div>

Вот тут другие способы для любых браузеров: http://habrahabr.ru/blogs/css/117109/

<div style="width:100%;text-align:center;>
   <div style="display:inline-block;">блок автоматического размера по центру</div>
</div>

<div style="width:100%;>
   <div style="display:inline-block;">блок автоматического размера слева</div>
</div>

<div style="width:100%;>
   <div style="display:inline-block;">блок автоматического размера слева</div>
   <div style="display:inline-block;">ещё один блок справа от предыдущего</div>
</div>

А еще, в конце основного блока (у тебя это wrapper) не мешало бы добавить пустой блок (распорку) с заданной высотой. Иначе футер, при уменьшении окна, будет наезжать на основной контент.

У меня отступы у .content и aside заданы. С ними нормально работает. Не люблю я дополнительную разметку. Ещё от этого враппера отказаться бы, да никак....

Вот теперь работает во всех современных браузерах: http://григорий-аникин.рф/test/e-dotu/1/

Решил вот так:

<html style="height:100%;">
<body style="height:100%;">

<div class="wrapper" style="min-height:100%;">
   <header />
   <div class="content" />
   <aside />
</div> (/wrapper)

<footer style="height:40px;clear:both;margin-top:-40px;"/>

</body>
</html>

Спасибо. Действительно что-то не то я делал. Буду пробовать по другому.

Я пробовал все. Те, которые с позиционированием футера не меняют его расположение при увеличении контента (похоже что элемент html или body не увеличивается в высоту, хотя фоновый цвет работает на всю область). Те, которые без позиционирования просто не привязывают его к низу при недостаточном контенте.

Я думаю, что дело в доктайпе HTML5.

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

<html>
<body>
<header />
<div.content />
<aside />
<footer />
</body>
</html>

http://григорий-аникин.рф/test/e-dotu/

http://григорий-аникин.рф/test/e-dotu/styles.css

Вот это в Firefox работает, но в остальных браузерах нет:

<html style="position:relative;min-height:100%;">
<body>
<header />
<div.content />
<aside />
<footer style="height:40px;position:absolute;bottom:0;"/>
</body>
</html>

Предлагаемые решения не работают:

<html style="height:100%;">
<body style="min-height:100%;position:relative;">
<header />
<div.content />
<aside />
<footer style="height:40px;clear:both;margin-top:-40px;"/>
</body>
</html>

Ещё можно сделать так:

<a href="#"><span>link</span></a>

a>span {
position:relative;
top:-2px;
}

Но почему-то работает не везде.

Если ставить id важным блокам, а после стилизовать внутренние элементы в них ("#header > #menu a"), то потом перебить эти стили для каких-то нужных элементов оказывается непросто. Приходится переписывать весь каскад заново для каждого правила или ставить импортанты, которые потом перебивать ещё сложней.

Классы же перебивать - меньше кода нужно. Например селектор ".content ul"(любые списки внутри страницы) хорошо перебивается селектором "ul.comments"(список комментариев).

H3 как заголовки вкладок, а списки, кроме одного (который активный), скрыты (display:none). Если не разберёшься, то я потом сделаю.