Квест

ignar · January 31, 2008

Верстаю дизайн с 3 колонками на div' ах.

СSS:
#container {
	width: 100%;
	float: left;
	margin-right: -245px;
}

#content {
	margin-right: 245px;
}

#center {
	margin-left: 270px;
}

#left {
	width: 270px;
	float: left;
}

#right {
	width: 245px;
	float: right;
}

идея:

1) есть шапка которую трогать не надо

2) 3 колонки

HTML:
<div id="container">
 <div id="content">
 <div id="left">
 текст левой колонки
 </div>

 <div id="center">
 текст цента
 </div>
 </div>
</div>

<div id="right">
 текст правой
</div>

3) и футер

Проблема:

1) под ИЕ7 все это дело сползает, ему не нравится

width: 100%;

вольная интерпритация

футер где угодно, в ФФ - справа от всего сразу за шапкой, опера нормально показывает, в ИЕ он гдето за гранью рельности, даже не видно.

2) надо обойтись по возможности без javascript в формировании дизайна. Колонки должны растягиваться до футера.

3) третья: надо сделать так что б, если нет левой или правой колонок дизайн не ехал, точнее:

-если не правой контент с левой занимали свободное место.

-если нет левой было пустое место в одном случае и занимало это место в другом случае.

вся эта беда достигается через php при формировании шаблона, не вопрос, главное что б это было возможно.

Опыт за прохождение квеста

1 бал за ответ не в тему.

5 балов за подсказку

10 балов за рельный кусок

и очень много за линк с подобным сайтом

квест длинный я прохожу уже 2 день

(**** пАмагите ****) :'(

nvgudz · February 5, 2008

третья: надо сделать так что б, если нет левой или правой колонок дизайн не ехал, точнее:
-если не правой контент с левой занимали свободное место.
-если нет левой было пустое место в одном случае и занимало это место в другом случае.
вся эта беда достигается через php при формировании шаблона, не вопрос, главное что б это было возможно.

Можно немного точнее оформить требование? А то мысль по древу растеклась

Иван Шумов · February 5, 2008

а можно линк или ВЕСЬ код вместе?

ignar · February 5, 2008

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

Сформулирую по другому:

надо что б при отсутствии одной из колонок сам макет дизайна позволял обойтись без нее.

-если нет правой, что б центральная занимала все оставшееся место

-если нет ни правой ни левой что б центральная была строго по центру

В общем то все.

а можно линк или ВЕСЬ код вместе?

линка пока нет

и это и есть весь код, там только добавляется текст в колонки.

забыл указать доктайп: HTML 4.01 Transitional

klierik · February 5, 2008

-если нет правой, что б центральная занимала все оставшееся место
-если нет ни правой ни левой что б центральная была строго по центру

да можно. в случае если вы будете выставлять скриптом стили коррекции

в которых будут перезаписаны новый свойства для поведения разметки

nvgudz · February 5, 2008

Ответы 2 шт

1. первый, как писал klierik

обычный и притный на вид

если вы будете выставлять скриптом стили коррекции

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
<style type="text/css">
#container{padding-left:270px; font: 11px Tahoma,sasns-serif;}
#content{margin-right:245px; }
#center{position:relative;width:100%;float:left; margin: 0 -1px; }
#left{width:270px;margin-left:-269px;position:relative;float:left;}
#right{width:245px;margin-right:-244px;position:relative;float:right; text-align: left;  }
/* clear without structural mark-up from PIE website*//* do not change or amalgamate clearfix styles*/
.clear:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear {display:inline-block;}
 /* mac hide */
* html .clear {height: 1%;}
.clear {display: block;}
 /* End hide */
</style>
</head>
<body>
<div id="container">
  <div id="content" class="clear">
	 <div id="left">текст левой колонки</div>
	 <div id="right">текст правой</div>
	 <div id="center">текст центpа</div>
   </div>			
</div>
</body>
</html>

2. Перекареженный, но работающий:

-если нет правой, что б центральная занимала все оставшееся место - (убирается весь правый блок)

-если нет ни правой ни левой что б центральная была строго по центру - (убирается контент левого и правого блока)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title></title>

<style type="text/css">
#container{margin-left:270px; font: 11px Tahoma,sasns-serif;   }
#content{/*margin-right:288px;*/ }
#center{position:relative; }
#left{width:270px;margin-left:-269px;position:relative;left:-1px;float:left;}
#right{width:245px;position:relative;float:right; text-align: left;   }
/* clear without structural mark-up from PIE website*//* do not change or amalgamate clearfix styles*/
.clear:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear {display:inline-block;}
 /* mac hide */
* html .clear {height: 1%;}
.clear {display: block;}
 /* End hide */
</style>
</head>

<body>
<div id="container" class="clear">
			<div id="right">текст правой</div>
	<div id="content" class="clear">
			<div id="left">текст левой колонки</div>
			<div id="center">текст центpа</div>
	</div>
</div> 
</body>
</html>

ignar · February 6, 2008

Все есть

Рассказываю в чем была проблема:

Во время переверстывания сайта оказалось, который к слову был на таблицах при ОДТ

quot;-//W3C//DTD HTML 4.01 Transitional//EN">

что width=100% трактовалось дословно на все 100% ширины, тоесть ширина монитора, вот тут

http://htmlbook.ru/css/width.html

описана эта лажа.

После долгой и упорной борьбы с этой эрундой (разные способы верстки и тд) набрел на вот это

http://xhtml.ru/2005/05/05/doctype_quirks/

и изменил ОТД на

quot;-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

и все заработало, осталось только подправить шрифты.

Верстал по при примеру: http://webmascon.com/topics/coding/13a.asp

Чесно сказать не ожидал от одной строчки такого результата :/

Sign In

Квест

Question

ignar

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

nvgudz

Link to comment

Share on other sites

Иван Шумов

Link to comment

Share on other sites

ignar

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

nvgudz

Link to comment

Share on other sites

ignar

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information