Левая колонка скрывается без скролла

htmlkin · March 7, 2010

При увеличении масштаба или изменении разрешения (например, 1024 х 768) наблюдаю удручающую картинку во всех браузерах: левая колонка "уходит" за край окна браузера без скролла. Возможно это вызвано комбинацией резиновой и фиксированной составляющей верстки (звучит наверно глупо, но больше мыслей по этому поводу нет )

Тестовый адрес пациента: _http://alex.hhos.ru/test/

Помогите решить задачку

P.S. Заказчик страдает seo - паранойей, поэтому не удивляйтесь что блоки расположены, мягко говоря, не на своих местах

P.S.S. Буду благодарен за любую обоснованную критику стиля верстки

Спасибо!

Alastor · March 7, 2010

При увеличении масштаба или изменении разрешения (например, 1024 х 768) наблюдаю удручающую картинку во всех браузерах: левая колонка "уходит" за край окна браузера без скролла. Возможно это вызвано комбинацией резиновой и фиксированной составляющей верстки (звучит наверно глупо, но больше мыслей по этому поводу нет )
Тестовый адрес пациента: _http://alex.hhos.ru/test/
Помогите решить задачку
P.S. Заказчик страдает seo - паранойей, поэтому не удивляйтесь что блоки расположены, мягко говоря, не на своих местах
P.S.S. Буду благодарен за любую обоснованную критику стиля верстки
Спасибо!

От ссылки на страницу толку никакого и никто не будет искать лист стилей.

Но даже и без него понятно, что левая колонка (если это она конечно - <div id="left">) не входит в основной контейнер.

<body>
			  <div id="left">

		<div id="container">

P.S.

1. SEO не существует. Все SEOшники - дебилы и тунеядцы.

2. Всех дармоедов, кто занимается якобы таким важным делом как SEO-оптимизация, надо либо расстрелять (что предпочтительней) либо отправить в колонию-поселение (что слишком мягкое наказыание).

Edited March 7, 2010 by Alastor

htmlkin · March 7, 2010

Но даже и без него понятно, что левая колонка (если это она конечно - <div id="left">) не входит в основной контейнер.

Нет, не верно. Конструктивно шаблон построен следующим образом:

<body>
	<div id="left">
		<div id="container">
			<div id="rightcol">Контент</div>
			<div id="leftcol">Левый сайдбар</div>
		</div>
		<div id="header">Шапка</div>
	</div>

	<div id="right">
		<div id="sidebar">Правый сайдбар</div>
		<div id="footer">Подвал</div>
	</div>
</body>

Файл стилей:

body {
	margin:0;
	color:#333333;
	font:80% Tahoma, sans-serif;
	background:url(i/fon.gif) 65% 0 repeat-y;
	}

h1 {font-size:110%}
h2 {font-size:100%}
h3 {font-size:90%}

a {color:#9a0000; text-decoration:underline;}
a:hover {color:#9a0000; text-decoration:none;}

#left, #right {padding:14px 0}

#left {
	float:left;
	width:65%;
	position:relative;
	}

#header {
	position:absolute;
	background:url(i/header.jpg) no-repeat right top;
	top:14px;
	right:0;
	height:163px;
	width:670px;
	}

#header ul {
	margin-right:502px;
	list-style:none;
	margin:0;
	padding:0;
	}

#header ul a {
	color:#246da7;
	font:140% Geneva, Arial, Helvetica, sans-serif;
	line-height:28px;
	text-decoration:none;
	}

#header ul a:hover {border-bottom:1px dashed #246da7}

.info {
	float:right;
	position:relative;
	width:502px;
	height:177px
	}

.description {
	position:absolute;
	bottom:21px;
	left:16px;
	padding:3px;
	border:1px solid #a5aba4;
	background:#f8fbda;
	font:120% Geneva, Arial, Helvetica, sans-serif
	}

.adress {
	position:absolute;
	top:41px;
	right:80px;
	font:100% Geneva, Arial, Helvetica, sans-serif;
	line-height:19px
	}

.adress span {font-weight:bold}

#container {
	width:670px;
	float:right;
	position:relative;
	top:177px
}

/*Левая колонка*/

#leftcol {
	float:left;
	width:158px;
	}
#leftcol div {margin-bottom:10px;}

#leftcol table {
	border:1px solid #50694f;
	border-collapse:collapse;
	color:#50694f;
	}

#leftcol th, td {
	font-size:75%; 
	padding:2px; 
	text-align:left; 
	border:1px solid #50694f
	}

#leftcol h4 {margin:6px 0; font:bold 150% Arial, Helvetica, sans-serif}

.articles {font-size:70%}

.articles p {margin:2px 0}

.more-link {text-decoration:none}

/*Контент*/

#rightcol {
	float:right;
	width:470px;
	padding:0 21px;
	}

#rightcol p {
	margin:0;
	margin-bottom:5px;
	line-height:18px
	}

#rightcol li {list-style:square}

#right {
	float:right;
	width:35%;
	}

#sidebar {
	width:250px;
	}

#service {margin-left:40px}

#service a {color:#aadfa8; font-weight:bold}

#service h4 {
	color:#fff;
	font:140% Geneva, Arial, Helvetica, sans-serif;
	margin:35px 0 5px 0
	}

#service div {
	padding:5px;
	color:#fff;
	font-size:90%;
	border:1px solid #6c6a6a;
	margin:10px 0
	}

#service div:hover {
	background:#425641
	}

#service p {margin:3px 0;}

#footer {
	width:300px;
	margin-left:40px
	}

#footer div {margin:8px 0}

.copyright {
	color:#999999;
	font-size:80%
	}

.counter img {margin-right:10px}

Alastor · March 7, 2010

Посмотрел.

Если ТАКАЯ верстка заточена под SEO (которого не существует), то тот кто верстал... Ладно, промолчу, а то опять забанят.

Все то же самое верстается без геморроя за 10 минут и в 3 основных блока без такого уебланства (это не мат в чей то адрес, просто по другому не назовешь) как сейчас.

Но если это будут использовать в целях "оптимизации", то даже не буду пример приводить, из принципа.

htmlkin · March 7, 2010

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

Alastor · March 7, 2010

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

Неа, не буду, а то для вашего заказчика главное SEO.

Так что не по феншую будет.

Alastor · March 7, 2010

Ладно, вот:

Удалено по причине SEOшной тупоголовости автора темы.

Дальше думаю сам разберешься.

Edited March 7, 2010 by Alastor

htmlkin · March 7, 2010

Ладно, вот:

Омг.. ) Постарайся в этой ветке больше не писать - ок? Я такой бред вижу первый раз. Если в вопросе не компетентен - не флуди.

Alastor · March 7, 2010

Омг.. ) Постарайся в этой ветке больше не писать - ок? Я такой бред вижу первый раз. Если в вопросе не компетентен - не флуди.

Вообще-то тему ты открыл.

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

Естественно я не стал все подгонять как тебе надо. Если нужна фиксированная ширина блоков, то просто поменяй % на пиксели и все.

P.S.

В очередной раз убедился, что SEO делает из человека идиота.

Edited March 7, 2010 by Alastor

Mot · March 7, 2010

	float:right;
	position:relative;

Смысл указывать position если уже задан float?

2Alastor

Вроде бы тут просят о помощи, а не о настановлении на путь истиный

У вас, в вашем примере, разобраться намного трудней чем в примере ТС.

Alastor · March 7, 2010

	float:right;
	position:relative;
Смысл указывать position если уже задан float?
2Alastor
Вроде бы тут просят о помощи, а не о настановлении на путь истиный
У вас, в вашем примере, разобраться намного трудней чем в примере ТС.

Ага, сорри, увлекся. Тут только бейсбольная бита поможет, по другому не получится.

Примера уже нет, причину объяснил выше.

htmlkin · March 7, 2010

	float:right;
	position:relative;
Смысл указывать position если уже задан float?

Если вы об этом

#container {
width:670px;
float:right;
position:relative;
top:177px
}

То для того, чтобы шапку сайта (<div id="header">) спозиционировать - хотя наверно, можно было ограничиться и margin'ом

Больше всего меня интересует вопрос - почему левая колонка уходит за форточку браузера и не образуется скролл.

Ага, сорри, увлекся. Тут только бейсбольная бита поможет, по другому не получится.

Может Вам лучше к священнику сходить? М? А то я смотрю столько всего на душе накипело

Alastor · March 7, 2010

Может Вам лучше к священнику сходить? М? А то я смотрю столько всего на душе накипело

Сам кого хочешь исповедую и грехи отпущу.

Mot · March 7, 2010

#footer {
	width:330px;
	margin-left:40px
	}

Попробуйте

Если я правильно понял то:

скрол появится только тогда когда левый(container) и правый(footer - потому что это самый большой блок в right) блок будут больше чем их родители (left + right)

Edited March 7, 2010 by Mot

htmlkin · March 7, 2010

#footer {
	width:330px;
	margin-left:40px
	}

Попробуйте

Увеличить ширину подвала на 30px? Нет, к сожалению, это не работает.

Mot · March 7, 2010

Увеличить ширину подвала на 30px? Нет, к сожалению, это не работает.

У меня в ИЕ 7 и ФФ 3.5 скрол появляется до того как перекроется левая колонка

фф

ие

Edited March 7, 2010 by Mot

htmlkin · March 7, 2010

У меня в ИЕ 7 и ФФ 3.5 скрол появляется до того как перекроется левая колонка

А вы до упора Ctrl++ прощелкайте

Mot · March 7, 2010

А вы до упора Ctrl++ прощелкайте

Хорошо. Объясню по другому.

У вас в правой части много свободного места, намного больше чем в левой, по этому оно перекрывается дольше чем левое и поетому когда левое уже перекрылось правое еще нет (Это причина не отображения скрола).

Вывод - уменшить левую часть по ширине

Edited March 7, 2010 by Mot

htmlkin · March 7, 2010

Хорошо. Объясню по другому.
У вас в правой части много свободного места, намного больше чем в левой, по этому оно перекрывается дольше чем левое и поетому когда левое уже перекрылось правое еще нет (Это причина не отображения скрола).
Вывод - уменшить левую часть по ширине

Огромное спасибо - кратко и понятно.

А вообще, на Ваш взгляд, шаблон сверстан нормально или есть какие-то огрехи, замечания?

Edited March 7, 2010 by htmlkin

Mot · March 7, 2010

Пардон, уменьшить правую

ЗЫ: очепятка

htmlkin · March 7, 2010

Пардон, уменьшить правую
ЗЫ: очепятка

Эм... так левая 65%, а правая 35%. Если я правую ещё больше уменьшу, то мне кажется, левая ещё сильнее скроется.

Mot · March 7, 2010

Эм... так левая 65%, а правая 35%. Если я правую ещё больше уменьшу, то мне кажется, левая ещё сильнее скроется.

Вам кажется, или вы попробовали?

Попробуйте и покажите результат.

Edited March 7, 2010 by Mot

htmlkin · March 8, 2010

Вам кажется, или вы попробовали?
Попробуйте и покажите результат.

Причина кроется в явно заданной ширине для дочернего контейнера левой колонки:

#container {
	width:670px;
	float:right;
	position:relative;
	top:177px
}

Осталось найти способ как-то это поправить

Edited March 8, 2010 by htmlkin

Mot · March 8, 2010

Попробуйте и покажите результат.

htmlkin · March 9, 2010

Проблема, как я уже и говорил кроется в дочернем контейнере <div id="container"> - параметр width:670px

Лечится это дело установкой свойства min-width больше 1000px для селектора body. Но так как на машинках с разрешением 1024px и меньше будет появляться горизонтальная полоса прокрутки, естественно такое лечение не годится. Уменьшение свойства width для дочернего контейнера также не выход, т.к. там 2 колонки вложенных и визуально будем выглядеть "тонко".

Не могу понять почему так происходит, ведь ширина контейнера и сайдбара в скупе дает всего 920px...

Mot · March 9, 2010

Проблема, как я уже и говорил кроется в дочернем контейнере <div id="container"> - параметр width:670px

Так если вы знаете в чем проблема так решайте

Не могу понять почему так происходит, ведь ширина контейнера и сайдбара в скупе дает всего 920px...

Так делайте что говорят.

Причину я вам описал давно, но вы же уперлись на своем.

Реально бесит, я вам 2 раза написал "Попробуйте и покажите" результат - ноль. Думаете после такого отношения хочется помогать дальше?

Sign In

Левая колонка скрывается без скролла

Question

Link to comment

Share on other sites

29 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information