Не пойму почему себя ведет слой как-то не так.

metalman · June 23, 2008

Здравствуйте. Проблема слудующая, вот код:

html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title>Test</title>
</head>

<body>

<div id="n1">
<div id="top"><img src="images/logo.jpg" alt="Логотип" id="logopict" /></div>
<div id="topmenu"></div>
<div id="left">Left</div>
<div id="centr">content</div>
<div id="right">Right</div>
<div id="footer"><p id="copyright">Copyright by masyachuises.inc</p></div>
</div>
</body>
</html>

css
/* CSS Document */
*, html {
margin:0;
padding:0;
background-color:#6ABBF2;
}


#n1 {
background-color:white;
width:1000px;
margin:0 auto;
}
#top {
background-color:white;
/*width:780px;*/
width:100%;
height:133px;
background:url(images/23inner_back_r1_c2.jpg) right top no-repeat;
}
#topmenu {
background:url(images/23inner_back_r2_c1.jpg);
/*width:780px;*/
width:100%;
height:26px;
}
#left {
/*width:187px;*/
width:150px;
border-right:#0000FF solid 1px;
float:left;
background-color:white;
}
#centr {
/*width:405px;*/
width:698px;
float:left;
border-right:#0000FF solid 1px;
background-color:#F1F6FA;
padding-right:50px;
}
#right {
/*width:188px;*/
width:150px;
float:left;
background-color:white;
}

#footer {
/*width:780px;*/
width:100%;
height:60px;
clear:both;
background-color:white;
border-top:1px solid #6ABBF2;
border:#000000 solid 1px;
}

#logopict {
widows:200px;
height:133px;
}
#copyright {
display:block;
margin-top:10px;
background-color:#FFFFFF;
}

так вот, если я для centr ставлю padding-left: 25px; то колонка right уезжает вниз, т.е. длина колонки centr увеличивается. Вообще почему это происходит.

спасибо

klierik · June 23, 2008

поместите, пожалуйста, код в соответствующий тег

metalman · June 23, 2008

а как? не подскажите? в

klierik · June 23, 2008

в |code|

посмотрите на пенеле сверху..

metalman · June 23, 2008

Здравствуйте. Проблема слудующая, вот код:

html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title>Test</title>
</head>

<body>

<div id="n1">
<div id="top"><img src="images/logo.jpg" alt="Логотип" id="logopict" /></div>
<div id="topmenu"></div>
<div id="left">Left</div>
<div id="centr">content</div>
<div id="right">Right</div>
<div id="footer"><p id="copyright">Copyright by masyachuises.inc</p></div>
</div>
</body>
</html>

css

/* CSS Document */
*, html {
margin:0;
padding:0;
background-color:#6ABBF2;
}


#n1 {
background-color:white;
width:1000px;
margin:0 auto;
}
#top {
background-color:white;
/*width:780px;*/
width:100%;
height:133px;
background:url(images/23inner_back_r1_c2.jpg) right top no-repeat;
}
#topmenu {
background:url(images/23inner_back_r2_c1.jpg);
/*width:780px;*/
width:100%;
height:26px;
}
#left {
/*width:187px;*/
width:150px;
border-right:#0000FF solid 1px;
float:left;
background-color:white;
}
#centr {
/*width:405px;*/
width:698px;
float:left;
border-right:#0000FF solid 1px;
background-color:#F1F6FA;
padding-right:50px;
}
#right {
/*width:188px;*/
width:150px;
float:left;
background-color:white;
}

#footer {
/*width:780px;*/
width:100%;
height:60px;
clear:both;
background-color:white;
border-top:1px solid #6ABBF2;
border:#000000 solid 1px;
}

#logopict {
widows:200px;
height:133px;
}
#copyright {
display:block;
margin-top:10px;
background-color:#FFFFFF;
}

так вот, если я для centr ставлю padding-left: 25px; то колонка right уезжает вниз, т.е. длина колонки centr увеличивается. Вообще почему это происходит.

спасибо

klierik · June 23, 2008

выставляя высоту/ширину элементу - Вы выставляете ее Без(!) учета полей.

добавляя поле, Вы должны это учитывать, и на ширину поля уменьшить ширину элемента.

metalman · June 23, 2008

Понятно. Значит только так можно победить эту ситуацию? Либо внутри Div у тега

ставить оступ. я прав?

klierik · June 23, 2008

ага... именно так ))

metalman · June 23, 2008

спасибо голову пришлось поломать

klierik · June 23, 2008

пожалуйста.

metalman · June 23, 2008

Кстати а вот есть интерессный пример, где padding работает

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Example 5: Negative Margins</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 

<style type="text/css" media="screen">
/*<![CDATA[*/
#header {
 border: 1px solid #cecea5;
 background: #d7dabd;
}
#outer_wrapper {
 background: #fff url(../../background_3.gif) repeat-y left;
}
#wrapper {
 background: url(../../background_2.gif) repeat-y right;
}

#container {
 width: 100%;
 float: left;
 margin-right: -200px;
 background: url(../../background_2.gif) repeat-y right;
}
#content {
 margin-right: 200px;
 background: url(../../background_3.gif) repeat-y left;
}
#main {
 margin-left: 150px;
padding-left: 250px;
}
#left {
 width: 150px;
 float: left;
}
#sidebar {
 width: 200px;
 float: right;
}
#footer {
 border: 1px solid #cecea5;
 background: #d7dabd;
}
h1 {
 margin-top: 0;
}
.last {
 margin-bottom: 0;
}
.clearing {
 height: 0;
 clear: both;
}
/*]]>*/
</style>
</head>

<body>

<div id="header">header</div>

<div id="outer_wrapper">

 <div id="wrapper">
 <div id="container">
 <div id="content">

 <div id="left">
 <h1>navbar</h1>
 <ul>
 <li>link one</li>
 <li>link two</li>

 </ul>
 </div>

 <div id="main">
 <h1>content</h1>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend 

tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litoraggggggggggggggggggg ggggggggggggggggggggggggggggggg 

gggggggggg gggggggggg ggggggggggggg g g g gg g ggggggggg g ggggggggggggg torquent per conubia nostra, per inceptos 

hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
 <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, 

adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed 

aliquet urna diam sed tellus. Etiam semper sagggggggggggg ggggggggggggggggggggg ggggggggggggggggggggggg 

gggggggggggggggggggggg gggggggggggggggg gggggggggggggggggggggg gggggggggg gggggg gggggggggggggggg ggggggggggg 

gggggggggg gggggggggggg ggggggggggpien eget metus.</p>
 </div>


 </div>
 </div>

 <div id="sidebar">
 <h1>sidebar</h1>
 <p>Here be your sidebar. Add whatever content you may desire.</p>
 </div>

 <div class="clearing"> </div>
 </div>

</div>

<div id="footer">footer</div>

</body>
</html>

Или дело в том что тот слой к которому применяется padding находится в другом слое?

klierik · June 23, 2008

если на один и тот же элемент "вешать"

width: Npx;

padding: 0 Npx;

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

допустим

div {width: 100px; padding: 0 25px;}

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

но в случае

div.main {width: 100px; }
 div.main div { padding: 0 25px;}

то в таком случае ширина для main будет именно 100 пикселов.

а вот для дочернего элемента (

) ширина будет тоже 100 пикселов, но уже учитываются отступы

надеюсь так понятно

metalman · June 23, 2008

чайник но пока

спасибо

metalman · June 23, 2008

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

klierik · June 23, 2008

можно сэмулировать.

повесить фон на родительский, относительно 3х вложеных, элемент соответствующий фон )

metalman · June 23, 2008

да...немного отличается от табличной верстки

Sign In

Не пойму почему себя ведет слой как-то не так.

Question

Link to comment

Share on other sites

15 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

Join the conversation

Обсуждения

Important Information