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

Осенний Дождь · 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 10, 2010

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

Дело не в утверждениях, а в том, что ты своими постами ясно всем даёшь понять, что дрим для тебя имеет вес в плане просмотра результата вёрстки. Это видно невооружённым глазом дружище, так что советую просто выслушать ответы и сделать правильные выводы.

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

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

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

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

Я не верстальщик и им не собираюсь становится, мне удобнее так, визуально...

\Верстальщикам видимо удобно в блокноте все прописывать пересохранять тысячу раз, и каждые 3 минуты видеть результат, мне так неудобно, и не только мне но и многим другим рядовым пользователям дрима, а не верстальщикам...

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

Хотя, опять же, возвращаясь к "правильному" шаблону, пересмотрел не один десяток сайтов с макетами, блогами, где дают каркас "железный", или описывают как его сделать - везде разные мнения/коды/дивы .. поэтому правильную верстку, или точнее макет ее, можно под сомнение поставить...Следовательно и мой макет, имеет общий вес на равне с другими))

Sign In

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

Question

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

Link to comment

Share on other sites

27 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information