Форум Сайтостроение Веб-строительство

Проблема с отступами

Apach47
На сайте с 28.10.2008
Offline
74
Apach47
417

Доброго времени суток уважаемые форумчане.

Сложилась у меня такая проблема - один из трех банеров(центральный) считает отступ задаваемый свойством margin-top не от дива в который вложен, а от нижней границе предыдущего элемента.

Дабы Вам была более понятна сложившаяся ситуация , ниже привожу код, работающий у меня некорректно

В css 


body, html {

margin:0px; 

padding:0px;

text-align:center; 

background:#CC99FF;

height:1000px; 

}



#container{

margin:0 auto;  

text-align:left;  

height:150px;

min-width:550px;  

background:#CCCCCC;

}



#left {

background-image:url(img/host.png);

background-repeat:no-repeat;

height:102px;

width:328px;

margin: 15px auto;

float:left;

}



#right {

background-image:url(img/domain.png);

background-repeat:no-repeat;

height:102px;

width:328px;

margin: 15px auto;

float:right;

}



#center {

background-image:url(img/vds.png);

background-repeat:no-repeat;

height:102px;

width:328px;

margin:0px auto;

}

В html 


<body>

<div id="container">



<div id="left"></div>

<div id="right"></div>

<div id="center"></div>



</div>

</body>

В html-файле находится только этот код.

Вообще нужно сделать одинаковые отступы каждого из трех банеров от верхней и нижней границы дива container

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

P.S.: первый раз верстаю на дивах))

И опыт - сын ошибок трудных... И гений - парадоксов труд... И случай бог изобретатель... (А.С.Пушкин)
O
На сайте с 15.10.2009
Offline
43
opqx
#1

Уважаемый ваша проблема кроется в простой невнимательности.🍿 




body, html {

margin:0px; 

padding:0px;

text-align:center; 

background:#CC99FF;

height:1000px; 

}



#container{

margin:0 auto;  

text-align:left;  

height:150px;

min-width:550px;  

background:#CCCCCC;

border:2px solid  #0F0;

}



#left {

background-image:url(img/host.png);

background-repeat:no-repeat;

height:102px;

width:328px;

margin: 15px auto;

float:left;

border:2px solid #000;

}



#right {

background-image:url(img/domain.png);

background-repeat:no-repeat;

height:102px;

width:328px;

margin: 15px auto;

float:right;

border:2px solid #000;

}



#center {

background-image:url(img/vds.png);

background-repeat:no-repeat;

height:102px;

width:328px;

margin:15px auto;

border:2px solid #000;

}

Вы просто не задали маржин 15 px, а оставили его 0

#center {

background-image:url(img/vds.png);

background-repeat:no-repeat;

height:102px;

width:328px;

margin:15px auto;

border:2px solid #000;

}

Введите код и заметите разницу.☝

Программирую на python !!!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий