При выставлении паддинга движется слой.

skygazer · January 13, 2012

Слой размещен через position:absolute, по идее двигаться не должен. Но когда я выставляю паддинг, смещается не текст, а фоновая картинка, за счет чего получается отступ с одной стороны. Отступ с другой стороны игнорируется, там вообще текст вылазит за рамки фона, и слоя, соответственно :huh:

Gaspode · January 13, 2012

Код в студию.

skygazer · January 14, 2012

#col1{
width:271px;
height:296px;
color:#9ea19d;
font-size:90%;
background:url(images/column_19.gif) no-repeat;
text-decoration:underline;
position:absolute;
top:637px;
right:24px;
padding:14px 17px 0 20px;
line-height:20px;}

Gaspode · January 14, 2012

Блин. Вы бы ещё просто одну строчку с паддингом написали тут. Давайте код целиком.

skygazer · January 16, 2012

Я просто боялся что стена кода всех распугает, и я не дождусь ответа :unsure:


<!DOCTYPE html>
<html>
<head>
<title>we be environmental</title>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="wrapper">
<div id="header">
	<div id="logo"></div>
	<div id="headtxt">Help line 24/7 Support 1800 3246 345</div>
	<ul>
	<li><a class="about" href="#">About Us</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Products</a></li>
	<li><a href="#">Solutions</a></li>
	<li><a href="#">Price List</a></li>
	<li><a href="#">Contact</a></li>
	<li style="padding-right:25px;"><a href="#">FAQ</a></li>
</div>

<div id="content">
	<div id="head1">“Suspendisse felis. Aenean pulvinar vulputate
	nunc. Pellentesque ultrices elit vitae justo.”</div>
	<div id="plant"></div>
	<div id="img1"></div>
	<div id="indent1">
	<h1>Pellentesque vestibulum erat.</h1>
	<div id="txt1">Duis nisl. Cras a quam non leo placerat laticia. Proin in nulla. Sed a ligula at quam vulputate auctor. Vivamus mi lacus, feugiat eget, porta ut, fermentum
	nec, nisi. Maecenas vel orci eu nunc accumsan scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
	himenaeos. Duis luctus sapien eu leo. Etiam hendrerit leo eu metus. Morbi sagittis. Nulla lacinia justo quis lorem.</div></div>

	<div id="col1">
	Maecenas suscipit
	Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiai sed, aliquet facilisis, pulvinar ac, mauris. In feugiat sagittis
	nunc. Maecenas vehicula venenatis arcu. Aenean viverra consectetur neque. Aliquam blandit bibendum lacus. In non nisi.
	</div>

	<div id="txt2">
	<p><h2>Nullam vitae leo vel pede sollicitudin suscipit</h2>
	<p>Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiat sed, aliquet facilisis, pulvinar ac, mauris. In feugiat sagittis nunc.
	Maecenas vehicula venenatis arcu. Aenean viverra consectetur neque. Aliquam blandit bibendum lacus. In non nisi. Fusce facilisis pulvinar tellus. Ut vitae
	purus ac odio fringilla pulvinar. Quisque consectetur, urna sit amet fringilla tempus, neque nunc consequat eros, ac dignissim quam elit vel
	turpis. Donec sollicitudin mauris at purus suscipit sodales. Nunc rutrum ornare lacus. Maecenas accumsan turpis sit amet arcu. Nulla neque.

	<p><h2 style="color:#a5bc79">Nullam vitae leo vel pede sollicitudin suscipit</h2></p>
	<p style="color:#a8ad98">Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiat sed, aliquet facilisis, pulvinar ac, mauris. In feugiat sagittis nunc.
	Maecenas vehicula venenatis arcu. Aenean viverra consectetur neque. Aliquam blandit bibendum lacus. In non nisi. Fusce facilisis pulvinar tellus. Ut vitae
	purus ac odio fringilla pulvinar. Quisque consectetur, urna sit amet fringilla tempus, neque nunc consequat eros, ac dignissim quam elit vel
	turpis. Donec sollicitudin mauris at purus suscipit sodales. Nunc rutrum ornare lacus. Maecenas accumsan turpis sit amet arcu. Nulla neque.</p></div>
	<div id="txt3">Posted: 11-2-2009 11:45am by: Matthew Doyle</div>


</div>

<div id="footer">Copyright © Environmental.com. All Rights Reserved</div>

</div>
</body>
</html>


body{
font-family:arial;
background:#000;
margin:0;
padding:0;}

#wrapper
{width:1024px;
min-height:1167px;
height:100%;
margin:auto;
position:relative;}

#header
{width:100%;
height:167px;
background:#353a33;
position:relative;
overflow:hidden;}

#logo{
background:url(images/logo_03.png);
width:392px;
height:66px;
position:absolute;
top:24px;
left:36px;}

#headtxt{
position:absolute;
left:755px;
top:50px;
font-size:80%;
color:#fff;}

ul{
list-style:none;
background:url(images/menubg_06.gif) repeat-x;
width:1024px;
height:64px;
margin:103px 0 0 0;}

li a{
color:#fff;
text-decoration:none;
font-size:121%;
float:left;
padding:5px;
padding-top:20px;
padding-left:70px;}

li a:hover{
color:#505150;}
a.about{
padding-left:0px;}

#content{
width:100%;
height:950px;
background:url(images/contbg_09.gif) top left no-repeat #d6dbbf;
overflow:hidden;}

#head1{
width:513px;
height:174px;
color:#fff;
font-size:242%;
margin:40px 0 0 27px;}

#plant{
position:absolute;
background:url(images/plant_10.png);
top:245px;
right:28px;
height:339px;
width:248px;}

#img1{
margin:100px 0 30px 15px;
float:left;
background:url(images/img1_13.gif);
width:195px;
height:148px;}

#indent1{
float:left;
width:482px;
margin:115px 0 0 0;
padding-left:10px;}

h1{
color:#868a7b;
font-size:126%;}
h2{
font-size:116%;}

#txt1{
font-size:81%;
color:#769a39;
margin:22px 0 20px 0;}

#txt2{
clear:both;
font-size:81%;
color:#000;
margin:0 0 0 15px;
width:665px;}
p{
margin-top:20px;}

#txt3{
margin:30px 0 0px 0;
padding-left:163px;
color:#000;
font-size:75%;}

#col1{
width:271px;
height:296px;
color:#9ea19d;
font-size:90%;
background:url(images/column_19.gif) no-repeat;
text-decoration:underline;
position:absolute;
top:637px;
right:24px;
padding:14px 17px 0 20px;
line-height:20px;}

#footer{
height:50px;
width:100%;
background:#353a33;
color:#fff;
font-size:81%;
text-align:center;
padding-top:21px;}

Edited January 16, 2012 by skygazer

Nekromancer · January 16, 2012

background:url(images/column_19.gif) no-repeat;

Выравнивание задавать не пробовали? По умолчанию в разных браузерах может быть разное положение картинки.

skygazer · January 16, 2012

Так?

background:url(images/column_19.gif) no-repeat top left;

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

Паддинг как бы добавляется к уже заданной высоте и ширине слоя, а не создается внутри него. То есть я увеличиваю паддинг-слой растет. :mellow:

Edited January 16, 2012 by skygazer

Nekromancer · January 16, 2012

Так?
background:url(images/column_19.gif) no-repeat top left;
Ничего не изменилось к сожалению. Размер фонового изображения такой же как размер слоя, потому и не выравнивал.
Паддинг как бы добавляется к уже заданной высоте и ширине слоя, а не создается внутри него. То есть я увеличиваю паддинг-слой растет.

Ну да, так и должно быть.

skygazer · January 16, 2012

Edited January 17, 2012 by skygazer

Sign In

При выставлении паддинга движется слой.

Question

skygazer

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

skygazer

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

skygazer

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

skygazer

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

skygazer

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information