Помогите с в?рсткой (99% - не найдут ответа)

zetaap · February 19, 2008

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

<body>
<div id="page-all">
<div id="top">
<div id="panelm"><div id="panel"><div id="panel2"></div>
</div></div>
<div id="logo"><div align="center"><img src="images/logo.gif" width="323" height="99"/></div>
</div>
<div id="boy"><img src="images/boy.gif" width="244" height="280" /></div>
</div>
<div id="bgleftcol"><div id="leftcol"><div id="leftcolbor"><div id="leftcolbor2"><div id="leftcolbor3"><div id="lefttext"><div id="title1"><div id="title1-text">Навигация</div></div>44









<div id="title1">
  <div id="title2-text">Краткие новости </div>
</div>
</div>
</div></div></div></div></div>
<div id="container"> 
<div id="bgrightcol"><div id="rightcol"><div id="rightcolbor"><div id="rightcolbor2"><div id="rightcolbor3">
  <div id="righttext"><div id="title3"><div id="title3-text">Навигация</div></div>
















</div></div></div></div></div></div>
<div id="content"><div id="leftcenter"><div id="centercolbor2"><div id="rightcenter"><div id="centercolbor"><div id="centercolbor3"><div id="centercolbor4">
<div id="contenttext">
основной текст</div>
</div></div></div></div></div></div>
</div></div>
</div>
<div id="page-empty"></div>
<div id="bottom">низ</div>
</body>

Вот style.css

/* CSS style */
html {
  height:100%;
}
body {
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height:100%;
}
img {margin:0; padding:0; border-width:0;}
#page-all {min-height: 100%;}
* html #page-all {height: 100%;}
#container {
margin-left: 210px;
border-right: 200px;
min-width: 740px;
width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 740? "740px": "auto");
}
/* Шапка */
#top {
background-image:url(images/bg1.jpg);
background-repeat:no-repeat;
background-position:left top;
pading: 15px 0px 15px 10px;
font-size: 16px;
color:#000000;
height: 387px;
min-width: 740px;
width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 740? "740px": "auto");
}
#panelm {
margin-left: 145px;
margin-right: 145px;
background-image:url(images/panelbg.jpg);
min-width: 660px;
width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 660? "660px": "auto");
}
#panel {
background: url(images/panelleft.jpg) left top no-repeat;
}
#panel2 {
background: url(images/panelright.jpg) right top no-repeat;
}
#panelm, #panel, #panel2 { height: 71px; }
#logo {
margin-left: 330px;
margin-top: 75px;
margin-bottom: 75px;
margin-right: 360px;
}
#boy {
float: right;
margin-right: 50px;
margin-top: -270px;
margin-left: 630px;
}
/* Левая колонка */
#bgleftcol, #leftcol, #leftcolbor, #leftcolbor2, #leftcolbor3, #lefttext { width: 200px; float: left; }
#bgleftcol {
margin-top: -60px;
background: url(images/cborbg.jpg) repeat-x top #FFFFFF;
}
* html #bgleftcol {
  margin-top: -75px;
}
#leftcol {
background: url(images/cborl.jpg) right repeat-y;
}
#leftcolbor {
background: url(images/cborleft.jpg) left top no-repeat;
}
#leftcolbor2 {
background: url(images/cborright.jpg) right top no-repeat;
}
#leftcolbor3 {
background: url(images/cborl2.jpg) right bottom no-repeat;
}
/* Текст в левой колонке (меню) */
#lefttext {
padding-top: 30px;
padding-left: 9px;
padding-right: 13px;
}
* html #lefttext {
width: 178px;
}
/* Навигация */
#title1 {
width: 178px;
height: 40px;
background: url(images/line1.gif) bottom repeat-x;
}
#title1-text {
width: 178px;
height: 40px;
padding-left: 45px;
background: url(images/menu.jpg) left bottom no-repeat;
}
* html #title1-text {
width: 133px;
}
#title2-text {
width: 178px;
height: 40px;
padding-top: 3px;
padding-left: 45px;
background: url(images/shortnews.jpg) left top no-repeat;
}
* html #title2-text {
width: 133px;
}
/* Центральная колонка (контент) */
#content, #contenttext, #leftcenter, #rightcenter, #centercolbor, #centercolbor2, #centercolbor3, #centercolbor4 {
min-height:350px; 
height: expression((document.documentElement.clientheight || document.body.clientheight) < 350? "350px": "auto");
} 
#content {
margin-top: -50px;
margin-right: 210px;
background: url(images/cborbg.jpg) repeat-x top #FFFFFF;
min-width: 460px;
width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 460? "460px": "auto");
}
* html #content {
  margin-top: -65px;
}
#contenttext {
padding: 20px;
height: 50%;
}
#leftcenter {
background: url(images/cborl.jpg) right repeat-y;
}
#rightcenter {
background: url(images/cborr.jpg) left repeat-y;
}
#centercolbor {
background: url(images/cborleft3.jpg) left top no-repeat;
}
#centercolbor2 {
background: url(images/cborright.jpg) right top no-repeat;
}
#centercolbor3 {
background: url(images/cborl3.jpg) left bottom no-repeat;
}
#centercolbor4 {
background: url(images/cborr3.jpg) right bottom no-repeat;
}
/* Правая колонка */
#bgrightcol, #rightcol, #rightcolbor, #rightcolbor2, #rightcolbor3 { width: 200px; float: right; }
#bgrightcol {
margin-top: -60px;
background: url(images/cborbg.jpg) repeat-x top #FFFFFF;
}
* html #bgrightcol {
  margin-top: -75px;
}
#rightcol {
background: url(images/cborr.jpg) left repeat-y;
}
#rightcolbor {
background: url(images/cborleft2.jpg) left top no-repeat;
}
#rightcolbor2 {
background: url(images/cborright2.jpg) right top no-repeat;
}
#rightcolbor3 {
background: url(images/cborr2.jpg) left bottom no-repeat;
}
/* Текст в правой колонке колонке (меню) */
#righttext {
padding-top: 30px;
padding-left: 9px;
padding-right: 13px;
width: 200px;
}
* html #righttext {
width: 178px;
}
#title3 {
width: 178px;
height: 40px;
background: url(images/line1.gif) bottom repeat-x;
}
#title3-text {
width: 178px;
height: 40px;
padding-left: 45px;
background: url(images/login.jpg) left bottom no-repeat;
}
* html #title3-text {
width: 138px;
}
/* Подвал */
#page-empty {clear: both;}
#bottom {
padding: 5px;
height: 58px;
background: url(images/bottom.jpg) top repeat-x;
min-width: 740px;
}

Проблема в том что когда в правую колонку вставляешь слой

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

Можно это как нить поправить? Помогите пожалуйста...

P.S в IE 6 норм, в FireFox и Opera проблема....

maddogrts · February 19, 2008

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

zetaap · February 19, 2008

http://zetaap.by.ru/school.html сюда залил...

И ещ? в догонку , почему то в опере и в файр фокс высота 100% не пашет (центральный слой) .

maddogrts · February 19, 2008

значит так, коли я вас попросил то я вам отвечу.

Ваша верстка просто ужасна. Из за этого все проблемы.

Давайте опробуем сверстать вместе? Это единственное что может помочь. Так как детально разбиратся в вашем макете не у кого времени нету.

http://flack.ru/2008/02/01/semantic-coding-howto-4/

Сделайте только шапку с помощью этого макета , выложите на сайт и отпишитесь

zetaap · February 20, 2008

Так... Сделал шапку http://www.zetaap.by.ru

Вот код:

<body>
<div id="header">
<div id="panelm"><div id="panel"><div id="panel2"></div></div></div>
<div id="logo"><div align="center"><img src="images/logo.gif" width="323" height="99"/></div></div>
<div id="boy"></div>
</div>
<div id="container">
<div id="nav">
Левая колонка
</div>
<div id="content">
Контент
</div>
</div>
<div id="sidebar">
Правая колонка
</div>
<div id="footer">
Футер
</div>
</body>

И CSS

body {
	margin: 0px;
	background:#FFFFFF;
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
	}
/* Шапка сайта */
#header {
	background-image:url(images/bg1.jpg);
	background-repeat:no-repeat;
	background-position:left top;
	pading: 15px 0px 15px 10px;
	font-size: 16px;
	color:#000000;
	height: 387px;
	min-width: 740px;
	}
/* Верхняя панелька */
#panelm {
margin-left: 145px;
margin-right: 145px;
background-image:url(images/panelbg.jpg);
min-width: 660px;
}
#panel {
background: url(images/panelleft.jpg) left top no-repeat;
}
#panel2 {
background: url(images/panelright.jpg) right top no-repeat;
}
#panelm, #panel, #panel2 { height: 71px; }
#logo {
   margin: 75px 330px 75px 360px;
 }
#boy {
   margin: -257px 50px 0px 650px;
   height: 277px;
   width: 244px;
   background: url(images/boy.gif);
   float: right;
 }
/* Контент */
#container {
	float:left;
	width:100%;
	margin:10px -220px 10px 0;
	}
#nav {
	float:left;
	width:200px;
	}
* HTML #nav {
	width:200px;
	width:200px;
	}
#content {
	margin:0 210px 0 210px;
	}
#sidebar {
	float:right;
	width:200px;
	margin-top:10px;
	}
* HTML #sidebar {
	width:200px;
	width:200px;
	}
#footer {
	clear:both;
	height:1%;
	}

Vlad · February 21, 2008

Картинок нет, хотя в стиле они указаны и текст висит по середине страницы.

Sign In

Помогите с в?рсткой (99% - не найдут ответа)

Question

zetaap

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

maddogrts

Link to comment

Share on other sites

zetaap

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

zetaap

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information