точные размеры трехколоночного макета, чтоб не разъезжался

Осенний Дождь · October 9, 2010

нашел я всё-таки макет подходящий, он почти идеален

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

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Three column CSS layout: 100% height with footer | Savio.no</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*
CSS-file for three column layout 2006

Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #222222;
text-align: center; /*** Centers the design in old IE versions ***/
height: 100%;
}
body {
font-size: 70%;
}
p {padding: 7px 0 7px 0;}

a {
color: #06F;
}
a:hover{
color: #0000FF;
text-decoration: none;
}

h1, h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}

.clear { clear: both; }
#mainContainer {
width: 1000px;/*** 760 ***/
margin: 0 auto; /*** Centers the design ***/
min-height: 100%;
background: #ffffff url(/examples/three-column-100-bg.gif) repeat-y; /*** This is our faux columns ***/
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 100%;  /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
background: #000099;
padding: 10px;
background-image:url(img/galaxy.jpg);
height:300px;
}


#menu {
background: #111111;
padding: 3px;
height: 20px;
text-align:center;
margin: 0;
}
#menu a { color:#CCC; text-decoration:none; }
#menu a:hover { color: #EDF; text-decoration: underline; }
/**************************
CONTENT AND COLUMNS
**************************/
.outer {  
padding-left: 165px;  
}
* html .outer {
padding-right: 120px; /* Normally this shouldn't be in this hack, it should be in .outer, but because of IE7 I had to */
}
.inner {
width: 850px; /*** 595 This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
padding-bottom: 30px;
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
width: 770px;
margin-left: -165px; /*** -165 Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: right;
width: 500px;
background: #fff;
}
* html #content {
position: relative;  /*** IE needs this  ***/
}
.contentWrap{
padding: 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
#left {
float: left;
width: 200px;/*** 165***/
padding: 5px;
}
* html #left {
position: relative;  /*** IE needs this  ***/
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
float: right;
width: 200px;
padding: 5px;
}
* html #right {
position: relative;  /*** IE needs this  ***/
margin-right: -120px; /*** IE gets this margin. ***/
}
#right ul {
list-style: none;
padding-bottom: 4px;
}
#right li {
padding-bottom: 2px;
}
/**************************
FOOTER
**************************/
#footer {
width: 1000px;/*** 760 ***/
height: 30px; /*** The drawback with this solution is that the height of the footer can't be flexible. If you add so much content to the footer that it extends 30px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
margin: 0 auto;
margin-top: -30px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
text-align: center;
background-color: yellow;
}




/* Green Box */
.gbox { 
}

.gbox .heading {
	height: 27px;
	padding: 4px 0 0 10px; /*отступ заголовка*/
	background: url(images/m-izumrud.gif) no-repeat;
	letter-spacing: -1px;
	font-size: 1.4em;
	color: #09881C;
	margin:0;/*отступ меж дивами стал 0)*/
}

.gbox .content {
	padding-top:inherit;
	padding: 10px;
	background: url(images/img07.gif) no-repeat;
}

.gbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gbox li {
	padding-left: 15px;
	background: url(images/img08.gif) no-repeat left center;
}

.gbox a {
	color: #09881C;
text-decoration:none;
}

.gbox a:hover {	text-decoration:underline; }



/* —-Orange Box —-*/

.obox {
}

.obox .heading {
	height: 27px;
	padding: 4px 0 0 10px;
	background: url(images/img03.gif) no-repeat;
	letter-spacing: -1px;
	font-size: 1.4em;
	color: #FF6500;
	margin:0;/*отступ меж дивами стал 0)*/
}

.obox .content {
	padding: 10px;
	background: url(images/img04.gif) no-repeat;
}

.obox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.obox li {
	padding-left: 15px;
	background: url(images/img05.gif) no-repeat left center;
}

.obox a {
	color: #FF6500;
}

/*новости*/
.news-zag {
	height: 30px;
	padding: 8px 0 0 10px;
	background: url(images/img09.gif) no-repeat;
	font-size: 1.4em;

}


.note {

background:#DCDCDC none repeat scroll 0 0;
border:1px solid #B4B4B4;
}


.lbl {
	background: #222 url(images/bglbl.gif) repeat-x;
	float:left;
	color: #FFF;
	font: normal 1.4em "Lucida Sans Unicode",sans-serif;
	height: 17px;
	line-height: 20px;
	overflow: hidden;
	text-align: center;
	margin-left: 3px;
	padding: 3px;
	text-align:center;
}

</style>
<!-- DO NOT copy - this is analytics codes for Savio.no! -->
<!-- END - DO NOT copy - this is analytics codes for Savio.no! -->
</head>
<body>
<div id="mainContainer">

<div id="header">
<h1> </h1>
<h2>666</h2>
</div>

<div id="menu">  
<div class="lbl"><a href="#">Главная</a></div>
  
 <div class="lbl"><a href="#">555/a></div>
   
  <div class="lbl"><a href="#">33333 </a></div>
    
  <div class="lbl"><a href="#">Новости</a></div>
   
 <div class="lbl"><a href="#">Форум</a></div>
   
  <div class="lbl"><a href="#">К111</a></div>
   
  <div class="lbl"><a href="#">Интервью</a></div>
    
 <div class="lbl"><a href="#">Конкурсы</a></div>
  
  <div class="lbl"><a href="#">Фишки</a></div>

  <div class="lbl"><a href="#">1</a></div>
</div>

<div class="outer">
<div class="inner">
<div class="float-wrap">
	   <div id="content">
		 <div class="contentWrap">
		   <h2>text text text text text text text text text text text text text text text text text text text text text text text text gfgfg</h2>
		   <h1>fffgdfgfdgd</h1>


	<div class="news-zag">новостч:</div>
	<div class="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</div>




</div>
	   </div>
	   <!-- end centered div -->
	   <div id="left">
		 <h3>Second in source</h3>
		 <ul>

		   <li><a href="#">Left menu 1</a></li>
		   <li><a href="#">Left menu 2</a></li>
		   <li><a href="#">Left menu 3</a></li>
		 </ul>
		 <p>wwwww</p>

		 <!--оранж блок!-->
	<div class="obox">
		<h2 class="heading">Меню сайта</h2>
		<div class="content">
			<ul>
				<li><a href="#">February</a> (7) </li>
				<li><a href="#">January 2007</a> (31)</li>
				<li><a href="#">December 2006</a> (31)</li>
				<li><a href="#">November 2006</a> (30)</li>

			</ul>
		</div>
	</div>



	<!--оранж блок!-->
	<div class="obox">
		<h2 class="heading">Все Статьи о Galaxy:</h2>
		<div class="content">
			<ul>
				<li><a href="#">February</a> (7) </li>
				<li><a href="#">January 2007</a> (31)</li>
				<li><a href="#">December 2006</a> (31)</li>
				<li><a href="#">November 2006</a> (30)</li>

			</ul>
		</div>
	</div>


	<!--оранж блок!-->
	<div class="obox">
		<h2 class="heading">События</h2>
		<div class="content">
			<ul>
				<li><a href="#">February</a> (7) </li>
				<li><a href="#">January 2007</a> (31)</li>
				<li><a href="#">December 2006</a> (31)</li>
				<li><a href="#">November 2006</a> (30)</li>

			</ul>
		</div>
	</div>


	<!--оранж блок!-->
	<div class="obox">
		<h2 class="heading">Archives</h2>
		<div class="content">
			<ul>
				<li><a href="#">February</a> (7) </li>
				<li><a href="#">January 2007</a> (31)</li>
				<li><a href="#">December 2006</a> (31)</li>
				<li><a href="#">November 2006</a> (30)</li>

			</ul>
		</div>
	</div>



	   </div>
<!-- end left div -->
<div class="clear"></div>
</div>

	 <div id="right">
	   <h3>Third in source</h3>




	<!--оранж блок!-->
	<div class="obox">
		<h2 class="heading">Archives</h2>
		<div class="content">
			<ul>
				<li><a href="#">February</a> (7) </li>
				<li><a href="#">January 2007</a> (31)</li>
				<li><a href="#">December 2006</a> (31)</li>
				<li><a href="#">November 2006</a> (30)</li>

			</ul>
		</div>
	</div>



	<!--Гринблок-->
<div class="gbox">
		<h2 class="heading">К555</h2>
		<div class="content">
			<ul>
				<li><a href="#">My Blog</a></li>
				<li><a href="#">My Photos</a></li>
				<li><a href="#">My Favorites</a></li>
				<li><a href="#">About Me</a></li>
				<li><a href="#">Contact Me</a></li>
			</ul>
		</div>
			<h2 class="heading">222h2>
			<div class="content">
			<ul>
				<li><a href="#">My Blog</a></li>
				<li><a href="#">My Photos</a></li>
				<li><a href="#">My Favorites</a></li>
				<li><a href="#">About Me</a></li>
				<li><a href="#">Contact Me</a></li>
			</ul>
		</div>

			  <h2 class="heading">34333</h2>
			<div class="content">
			<ul>
				<li><a href="#">My Blog</a></li>
				<li><a href="#">My Photos</a></li>
				<li><a href="#">My Favorites</a></li>
				<li><a href="#">About Me</a></li>
				<li><a href="#">Contact Me</a></li>
			</ul>
		</div>



			  <h2 class="heading">333</h2>
			<div class="content">
			<ul>
				<li><a href="#">My Blog</a></li>
				<li><a href="#">My Photos</a></li>
				<li><a href="#">My Favorites</a></li>
				<li><a href="#">About Me</a></li>
				<li><a href="#">Contact Me</a></li>
			</ul>
		</div>


			  <h2 class="heading">Кланы</h2>
			<div class="content">
			<ul>
				<li><a href="#">My Blog</a></li>
				<li><a href="#">My Photos</a></li>
				<li><a href="#">My Favorites</a></li>
				<li><a href="#">About Me</a></li>
				<li><a href="#">Contact Me</a></li>
			</ul>
		</div>



			  <h2 class="heading">222</h2>
			<div class="content">
			<ul>
				<li><a href="#">My Blog</a></li>
				<li><a href="#">My Photos</a></li>
				<li><a href="#">My Favorites</a></li>
				<li><a href="#">About Me</a></li>
				<li><a href="#">Contact Me</a></li>
			</ul>
		</div>



	</div>





	 </div>
	 <!-- end right div -->
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer"><p>This is our footer</p>
</div>
</body>
</html>

хотел чтобы центр немного пошире стал, т.к. отступы слева и справа большие получаются...

уже несколько часов firebug туда сюда пробую тестирую, только нормально получается, как в ие 6 всё уезжает блинн

.outer {padding-left: 165px;

.inner {width: 850px;

.float-wrap { width: 770px;

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

#content {width: 500px;

psywalker · October 9, 2010

1) А покажи скришот того, что нужно получить.

2) Тебе нужен трёхколоночный макет, но чтобы контент шёл в коде первым?

Осенний Дождь · October 9, 2010

1) А покажи скришот того, что нужно получить.
2) Тебе нужен трёхколоночный макет, но чтобы контент шёл в коде первым?

1) вот именно с этим возникают сложности:

Когда подгоняю в опере и мозиле норм более менее, а в ие вообще съезжает...

2) ДА! ==>3) И чтобы он в dreamweaver нормально был виден, перебрал несколько десятков шабов, - и этот подошел идеально))

Заранее спасибо!

Kaylang · October 9, 2010

маргины и паддинги по разному отображаются в разных браузерах.

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

psywalker · October 9, 2010

1) вот именно с этим возникают сложности:
Когда подгоняю в опере и мозиле норм более менее, а в ие вообще съезжает...
2) ДА! ==>3) И чтобы он в dreamweaver нормально был виден, перебрал несколько десятков шабов, - и этот подошел идеально))
Заранее спасибо!

Я тебе дал нормальный шаблон. Если ты проверяешь его работу в дриме, это твои проблемы.

Осенний Дождь · October 9, 2010

а причем тут дрим.. это скрин не с дрима - а с браузера же..

спасибо, вроде размеры сам подогнал, всё четко получилось..

окромя верхнего меню, оно в IE7 съезжает немного...

А так в целом, сам каркас Вам как?

(P.S. это макет не дримовский, а взятый с совершенно другого сайта )

Kaylang · October 9, 2010

Имхо, фигня каркас.

Если хотел просто три колонки, то можно сделать значительно проще.

И если хотел трехколоночный с одинаковыми колонками, то тоже есть проще и лучше.

Посмотри хотя бы тут. Там есть куча вариантов.

Edited October 9, 2010 by Kaylang

psywalker · October 9, 2010

А так в целом, сам каркас Вам как?

Мне нравится

Осенний Дождь · October 9, 2010

Имхо, фигня каркас.
Если хотел просто три колонки, то можно сделать значительно проще.
И если хотел трехколоночный с одинаковыми колонками, то тоже есть проще и лучше.
Посмотри хотя бы тут. Там есть куча вариантов.

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

psywalker гуру одобрил, а это главное

psywalker · October 9, 2010

psywalker гуру одобрил, а это главное

Не поверишь, но я ещё ученик, и причём не познавший даже 1/100

Kaylang · October 9, 2010

там нет подходящих, контент не вверху, принцип вроде тот же, особой разницы не увидел...
psywalker гуру одобрил, а это главное

Плохо искал. Есть там и с контентом наверху.

Осенний Дождь · October 9, 2010

Плохо искал. Есть там и с контентом наверху.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
body {
	padding:10px 0 0 0;
	color: #000000;
	background:#fff;
	text-align:center;
}
#wrapper{
	background:#f2f2f2 url(leftcolbg.jpg) repeat-y left top;
	width:auto;
	border:1px solid #000;
	min-width:770px;
	max-width:1024px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}
#outer{
	margin-left:130px;
	margin-right:130px;
	background:silver;
	border-left:1px solid #000;
	border-right:1px solid #000;
	color: #000000;
}
#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:70px;
	line-height:70px;	
	border-bottom:1px solid #000;
	overflow:hidden;
	color: #fff;
	background:#f2f2f2 url(images/blogphoto.jpg) repeat-x left top;
	text-align:center;
	font-size:xx-large
}
#left {
	position:relative;/*ie needs this to show float */
	width:130px;
	float:left;
	margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
	left:-1px
}
* html #left {margin-right:-3px;}/* 3px jog*/
* html #outer{/* 3px jog*/
	margin-left:127px;
	margin-right:127px;
}
p {margin-bottom:1em;padding:0 5px}

#right {
	position:relative;/*ie needs this to show float */
	width:130px;
	float:right;
	margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
	left:1px;
}
* html #right {margin-right:-130px;margin-left:-3px}/* stop float drop in ie + 3px jog */

#footer {
	width:100%;
	clear:both;
	line-height:50px;
	border-top:1px solid #000;
	background-color:#ffffcc;
	color: #000000;
	text-align:center;
	position:relative;
}
#clearheader{height:72px;}/*needed to make room for header*/
#centrecontent {float:right;width:99%;position:relative;}
* html #centercontent{width:100%}

.outerwrap {
float: left;
width: 99%;
}
.clearer{
	height:1px;
	overflow:hidden;
	margin-top:-1px;
	clear:both;
}

</style>
<!--[if lt IE 7]>
<style type="text/css">
body {width:expression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? "770" : "auto") : "770px") : "auto" );}
#wrapper {width:expression( documentElement.clientWidth > 1024 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1024 ? "1024" : "auto") : "1024px") : "auto" );}
* html #outer, * html #wrapper,* html #centrecontent {height:1%}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper"> 
  <div id="outer"> 
	<div id="clearheader"></div>
	<div class="outerwrap"> 
	  <div id="centrecontent"> 
		<h1>Min width of 800px and max width of 1024px</h1>

		<p>centre content goes here centre content goes here : centre content 
		  goes here centre content goes here : centre content goes here centre 
		  content goes here : centre content goes here centre content goes here 
		  : centre content goes here centre content goes here : centre content 
		  goes here centre content goes here : centre content goes here centre 
		  content goes here : centre content goes here centre content goes here 
		  : centre content goes here centre content goes here : centre content 
		  goes here centre content goes here : centre content goes here centre 
		  content goes here : centre content goes here centre content goes here 
		  : centre content goes here centre content goes here : centre content 
		  goes here centre content goes here : centre content goes here centre 
		  content goes here : centre content goes here centre content goes here 
		  : centre content goes here centre content goes here : centre content 
		  goes here centre content goes here : centre content goes here centre 
		  content goes here : centre content goes here content goes here : </p>
	  </div>
	  <div id="left"> 
		<p>Left content goes here : Left content goes here : Left content goes 
		  here : Left content goes here : Left content goes here : Left content 
		  goes goes here : Left content goes here : </p>
	  </div>
	  <div class="clearer"></div>
	</div>
	<!--end outer wrap -->

	<div id="right"> 
	  <p>Start Right content goes here : Right content goes here : Right content 
		goes here : Right content goes here : Right content goes here : Right 
		content goes here : Right content goes here : Right content goes here 
		: Right content goes here : </p>
	</div>
	<div class="clearer"></div>
  </div>
  <div id="footer"><a href="3colfixedtest_4.htm">Back to main Demo</a></div>
  <div id="header">Header </div>
</div>

</body>
</html>

ага вижу, ну , этот макет по-твоему лучше? такая же вложнность, куча кода.. плюс еще с "position:.;" которая в некоторых браузерах подглючивает

Edited October 9, 2010 by Осенний Дождь

Kaylang · October 10, 2010

ага вижу, ну , этот макет по-твоему лучше? такая же вложнность, куча кода.. плюс еще с "position:.;" которая в некоторых браузерах подглючивает

Ты спросил мнение про твой макет, я тебе ответил.

Этот макет лучше твоего. Вложенность меньше, чем в твоем.

Про "position:.;" не понял.

Осенний Дождь · October 10, 2010

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

перед контентом - 5 дивов

в моём - тоже 5 ( +1 майнконтейнер общий)

чем лучше, тем что на 1 див меньше?

Kaylang · October 10, 2010

перед контентом - 5 дивов
в моём - тоже 5 ( +1 майнконтейнер общий)
чем лучше, тем что на 1 див меньше?

Вложенность меньше? На 1, но меньше. Значит проще. Тем самым и лучше.

Осенний Дождь · October 10, 2010

)) как бы это не смешно звучало, тот макет, опять-таки в дриме разъезжается)))

а с моим всё ок))))

sigma77 · October 10, 2010

Осенний Дождь,

Блин, как ты не поймёшь, что дрим - совсем не показатель.

psywalker · October 10, 2010

Осенний Дождь,
Блин, как ты не поймёшь, что дрим - совсем не показатель.

Причём далеко НЕпоказатель.

Осенний Дождь · October 10, 2010

Осенний Дождь,
Блин, как ты не поймёшь, что дрим - совсем не показатель.

не показатель чего, простите?

psywalker · October 10, 2010

не показатель чего, простите?

Непоказатель вёрстки. Работу нужно проверять в браузерах.

Осенний Дождь · October 10, 2010

Непоказатель вёрстки. Работу нужно проверять в браузерах.

я разве утверждал где-то обратное?

psywalker · October 10, 2010

я разве утверждал где-то обратное?

Было дело, например

2) ДА! ==>3) И чтобы он в dreamweaver нормально был виден, перебрал несколько десятков шабов, - и этот подошел идеально))

Kaylang · October 10, 2010

)) как бы это не смешно звучало, тот макет, опять-таки в дриме разъезжается)))
а с моим всё ок))))

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

Осенний Дождь · October 10, 2010

Было дело, например

и где тут утверждение, что дрим показатель верстки?))

это редактор, удобный редактор, не более того...

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

непонятно к чему это было написано вообще..про отображение речь не шла))

помимо отличный в 1 див, есть еще преимущества у макета?))

Kaylang · October 10, 2010

непонятно к чему это было написано вообще..про отображение речь не шла))

К тому, что совершенно не важно, как макет выглядит в Дримвивере.

помимо отличный в 1 див, есть еще преимущества у макета?))

Достаточно 1 дива.

sigma77 · October 10, 2010

и где тут утверждение, что дрим показатель верстки?))
это редактор, удобный редактор, не более того...

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

Вообще проверять вёрстку можно только в браузере, ни на какие редакторы тут полагаться нельзя. Бывает страница просто отлично выглядит в редакторе, а на деле в браузере разъезжается так, что страшно становится. Бывает и наоборот. Страница хорошо отображается в браузере, но в редакторе верстка едет. Всё потому что редактор - не браузер и что там за движок для отображения кода никому не известно. Как правильно тут заметили, посетители смотрят сайт через браузер, а не редактор.

Sign In

точные размеры трехколоночного макета, чтоб не разъезжался

Question

Link to comment

Share on other sites

27 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