Как закрасить отступы margin ?

viv · December 16, 2010

Доброго времени суток!

Подскажите пожалуйста, как закрасить отступы margin?

есть главный блок, он закрашен фоном. Далее в этом боке создаю еще один и назначаю ему отступ margin-left: 20px; Но при просмотре в опере или ie7(на других пока не смотрел) пропадает часть фона как раз на ширину отступа.

Как уколоть эту ошибку? :facepalmxd:

eVErl@Sting · December 16, 2010

код страницы покажи

deadrash · December 16, 2010

Главному блоку в тех местах где фон пропал задайте padding со значением 1px

viv · December 16, 2010

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

Главному блоку в тех местах где фон пропал задайте padding со значением 1px

Так, попробовал установить для главного блока padding:1px; Но не помогло... Может не так что делаю?

stars · December 16, 2010

Как уколоть эту ошибку?

Уколоть??? Ошибку? Вы много уважаемый, почитали бы мануалы... Все дело в том что margin это css свойство призванное на благо общества, чтобы делать отступы(внешние), что означает имей вы квадрат и задав квадрату margin-left:20px; то ваш квадрат отодвинется от левой стороны на 20 пикселей(видите он отодвинулся а не расширился, как если бы мы использовали padding), работает это с блочными элементами. А уж раскрашивать отступы ну не как нельзя, нету просто напросто такой возможности. Но к вашему счастью есть так называемая смекалка, и вот в чем суть мы один элемент можем поместить в другой и уже от него отступать, а фон у первого сделать каким вздумается.

deadrash · December 16, 2010

кинь сюда html что-ли.

Если я правильно понял то у вас

#wrapper{
background-color:url(kartinka.psd);
}
#content{
margin:0 100px;
}
<div id="wrapper">
   <div id="content">
	   <p>teeeextttttt</p>
   </div>
</div>

Если так то вам нужно для #wrapper добавить padding:0 1px;

Edited December 16, 2010 by deadrash

viv · December 16, 2010

Уколоть??? Ошибку? Вы много уважаемый, почитали бы мануалы... Все дело в том что margin это css свойство призванное на благо общества, чтобы делать отступы(внешние), что означает имей вы квадрат и задав квадрату margin-left:20px; то ваш квадрат отодвинется от левой стороны на 20 пикселей(видите он отодвинулся а не расширился, как если бы мы использовали padding), работает это с блочными элементами. А уж раскрашивать отступы ну не как нельзя, нету просто напросто такой возможности. Но к вашему счастью есть так называемая смекалка, и вот в чем суть мы один элемент можем поместить в другой и уже от него отступать, а фон у первого сделать каким вздумается.

Вот как раз все что Вы описали "Уважаемый" начитавшись мануалов. У меня так и есть!!! Читайте внимательнее!!! Еще раз Вам пишу: Есть бок, у него фон! В этом болоке еще блок с заданным margin-left:20px; По идее все должно быть тип топ, но на практике этот отступ вложенного блока от главного стал белым(бесцветным)

Куда еще проще описывать? Коды к сожалению дома.

stars · December 16, 2010

Вот как раз все что Вы описали "Уважаемый" начитавшись мануалов. У меня так и есть!!! Читайте внимательнее!!! Еще раз Вам пишу: Есть бок, у него фон! В этом болоке еще блок с заданным margin-left:20px; По идее все должно быть тип топ, но на практике этот отступ вложенного блока от главного стал белым(бесцветным)
Куда еще проще описывать? Коды к сожалению дома.

Да не бывает такова... Точней конечно все бывает, но это надо суметь извратиться. Не понятно еще вот, что коды у вас дома, а тестировали вы прям 13 минут назад как?? :facepalmxd:

eVErl@Sting · December 16, 2010

ПРИМЕР

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

viv · December 16, 2010

ПРИМЕР
вот я сделал, все нормально везде отображается, может ты как то не правильно верстаешь, с ошибками там..

Скорее всего! Ладно. Буду дома выложу код. И там уж точно все увидим.

Да не бывает такова... Точней конечно все бывает, но это надо суметь извратиться. Не понятно еще вот, что коды у вас дома, а тестировали вы прям 13 минут назад как??

КАК??? Позвонил домой, брат попробовал и сказал не получается! вот так. :facepalmxd:

А, стоп, сейчас по почте барт пришлет выложу на сайт. Минуту

Edited December 16, 2010 by viv

deadrash · December 16, 2010

Куда еще проще описывать? Коды к сожалению дома.

Проще это когда не используются эпитеты "тот", "этот", "не тот", "другой который".

viv · December 16, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Деловой Партнер</title>
</head>
<body>
<div id="conteiner">
<div id="header"></div>
<div id="name"><a href="index.php"><img src="../delparts/images/name.png" alt="ФПК Деловой Партнер"/></a></div>
<div id="name2"><span class="redcvet">e-mail:</span> delpart@rambler.ru</div>
<div id="name3"><span class="redcvet"><a href="index.php">Обратная связь</a> | <a href="index.php">Сделать заявку</a></span></div>

<div id="tel">
 <span class="redcvet">тел.: 8</span> <span class="codetel">(499)</span> <span class="redcvetbold">255 91 61</span><br>
 <span class="redcvet1">тел.:</span> <span class="redcvet">8</span> <span class="codetel">(499)</span> <span class="redcvetbold">255 91 66</span><br>
 <span class="redcvet1">тел.:</span> <span class="redcvet">8</span> <span class="codetel">(499)</span> <span class="redcvetbold">255 15 63</span><br>
 <span class="redcvet1">тел.:</span> <span class="redcvet">8</span> <span class="codetel">(499)</span> <span class="redcvetbold">255 15 63</span>
</div><!--tel-->


<div id="line">
<!--<div id="fon-line">-->
<div id="block-menu">
<div id="menuusb"><a class="a-menu" href="index.php">новости</a> <img src="images/arr.png" alt="arrow"/></div>
<div id="menukey"><a class="a-menu" href="index.php">компания</a> <img src="images/arr.png" alt="arrow"/></div>
<div id="menuattach"><a class="a-menu" href="index.php">информация</a> <img src="images/arr.png" alt="arrow"/></div>
<div id="menupan"><a class="a-menu" href="index.php">отзывы</a> <img src="images/arr.png" alt="arrow"/></div>
</div><!--block-menu-->
<!--</div><!--fon-line-->
<div id="hand"><img src="images/hand2.jpg" alt="" /></div>

</div><!--line-->

——--css—--

/* CSS Document */
html, body { 
margin:0px; /*Это хорошая практика обнулять поля и отсупы, т.к. различные браузеры их по разному воспринимают. */
padding:0px;
text-align:center;
/*width: 100%;
height: 100%;*/
}
a {
color:#a9242c;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #725947;
}
.a-menu {
color:#947d63; text-decoration: underline;
}
img{
border: none;
}

.redcvet{color:#a9242c;}
.redcvet1 { color:#fcefc2;}
.codetel { color:#4b372d;}
.redcvetbold {color:#a9242c; font-weight:bold;}

#conteiner{
background-color:#fdeec3;
margin:0 auto;  /*выравниваем макет по центру в современных браузерах */
text-align:left;  /*Отменяем tex-align:center заданное в Body. Делаем чтобы весь текст в макете выравнивался по левому краю */
width:1000px; /* ширина нашего макета*/
padding:0 1px;
}
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
#header{
background-image: url(images/book.jpg);
background-repeat:no-repeat;
height:99px;
}
/*————————————Логотип, мыло, телефоны————--*/
#name{
background-color:#fdeec3;
float:left;
margin-left:40px;
margin-top:25px;
width:460px;
display:inline;
}
#name2{
background-color:#fdeec3;
float:left;
font-family:Tahoma; font-size:14px;
padding-left:60px;
display:inline;
}
#name3{
background-color:#fdeec3;
float:left;
font-family:Tahoma; font-size:14px;
padding-left:35px;
margin-left:0px;
display:inline;
}
#tel{
float:left;
width:200px;
margin-left:271px;
margin-top:10px;
font-family:Arial, Helvetica, sans-serif; 
font-size:14px;
text-align:right;
display:inline;
}
/*#fon-line{
background-color:#999999;
width:auto;
}*/
#line{
margin-top:10px;
margin-left:40px;
margin-right:20px;
width:955px;
height:1px;
background-image:url(images/line.gif);
background-repeat:no-repeat;
float:left;
display:inline;
}
/*————————-menu——————--*/
#block-menu{
background-color:#fdeec3;
float:left;
margin-top:1px;
display:inline;
}
#menuusb{
width:142px;
background-image:url(images/usb.png);
background-repeat:no-repeat;
height:35px;
padding-top:70px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
float:left;
padding-left:10px;
}
#menukey{
width:132px;
background-image: url(images/key.jpg);
background-repeat:no-repeat;
height:35px;
padding-top:70px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
float:left;
display:inline;
padding-left:25px;
}
#menuattach{
width:132px;
background-image: url(images/attach.jpg);
background-repeat:no-repeat;
height:35px;
padding-top:70px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
float:left;
display:inline;
padding-left:25px;
}
#menupan{
width:102px;
background-image: url(images/pan.jpg);
background-repeat:no-repeat;
height:35px;
padding-top:70px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
float:left;
display:inline;
padding-left:25px;
}
/*—————————--hand————————*/
#hand{
width:330px;
float: right;
margin-top:20px;
display:inline;
}

stars · December 16, 2010

КАК??? Позвонил домой, брат попробовал и сказал не получается! вот так.

Сурьёзно блин )))) советую вам попробовать освоить брато заменитель "Team Viewer" или "R-admin" или просто настроить удаленный рабочий стол... Даже если вы за NAT'ом сидите можно подключиться google поможет...

deadrash · December 16, 2010

это весь html? хочу больше!

В какой блок картинку вставлять?

viv · December 16, 2010

Сурьёзно блин )))) советую вам попробовать освоить брато заменитель "Team Viewer" или "R-admin" или просто настроить удаленный рабочий стол... Даже если вы за NAT'ом сидите можно подключиться google поможет...

Да это мне все понятно и я знаю эти вещи. А вот сис админ тоже знает! Нет доступа. Да короче чего объяснять, надо по делу. Давайте не будем попусту разговаривать :facepalmxd:

вот весь код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Деловой Партнер</title>
</head>
<body>
<div id="conteiner">
<div id="header"></div>
<div id="name"><a href="index.php"><img src="../delparts/images/name.png" alt="ФПК Деловой Партнер"/></a></div>
<div id="name2"><span class="redcvet">e-mail:</span> delpart@rambler.ru</div>
<div id="name3"><span class="redcvet"><a href="index.php">Обратная связь</a> | <a href="index.php">Сделать заявку</a></span></div>

<div id="tel">
 <span class="redcvet">тел.: 8</span> <span class="codetel">(499)</span> <span class="redcvetbold">255 91 61</span><br>
 <span class="redcvet1">тел.:</span> <span class="redcvet">8</span> <span class="codetel">(499)</span> <span class="redcvetbold">255 91 66</span><br>
 <span class="redcvet1">тел.:</span> <span class="redcvet">8</span> <span class="codetel">(499)</span> <span class="redcvetbold">255 15 63</span><br>
 <span class="redcvet1">тел.:</span> <span class="redcvet">8</span> <span class="codetel">(499)</span> <span class="redcvetbold">255 15 63</span>
</div><!--tel-->


<div id="line">
<!--<div id="fon-line">-->
<div id="block-menu">
<div id="menuusb"><a class="a-menu" href="index.php">новости</a> <img src="images/arr.png" alt="arrow"/></div>
<div id="menukey"><a class="a-menu" href="index.php">компания</a> <img src="images/arr.png" alt="arrow"/></div>
<div id="menuattach"><a class="a-menu" href="index.php">информация</a> <img src="images/arr.png" alt="arrow"/></div>
<div id="menupan"><a class="a-menu" href="index.php">отзывы</a> <img src="images/arr.png" alt="arrow"/></div>
</div><!--block-menu-->
<!--</div><!--fon-line-->
<div id="hand"><img src="images/hand2.jpg" alt="" /></div>

</div><!--line-->



<div id="clear"></div>
</div><!--conteiner-->

</body>
</html>

И стили:

/* CSS Document */
html, body { 
margin:0px; /*Это хорошая практика обнулять поля и отсупы, т.к. различные браузеры их по разному воспринимают. */
padding:0px;
text-align:center;
/*width: 100%;
height: 100%;*/
}
a {
color:#a9242c;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #725947;
}
.a-menu {
color:#947d63; text-decoration: underline;
}
img{
border: none;
}

.redcvet{color:#a9242c;}
.redcvet1 { color:#fcefc2;}
.codetel { color:#4b372d;}
.redcvetbold {color:#a9242c; font-weight:bold;}

#conteiner{
background-color:#fdeec3;
margin:0 auto;  /*выравниваем макет по центру в современных браузерах */
text-align:left;  /*Отменяем tex-align:center заданное в Body. Делаем чтобы весь текст в макете выравнивался по левому краю */
width:1000px; /* ширина нашего макета*/
padding:0 1px;
}
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
#header{
background-image: url(images/book.jpg);
background-repeat:no-repeat;
height:99px;
}
/*————————————Логотип, мыло, телефоны————--*/
#name{
background-color:#fdeec3;
float:left;
margin-left:40px;
margin-top:25px;
width:460px;
display:inline;
}
#name2{
background-color:#fdeec3;
float:left;
font-family:Tahoma; font-size:14px;
padding-left:60px;
display:inline;
}
#name3{
background-color:#fdeec3;
float:left;
font-family:Tahoma; font-size:14px;
padding-left:35px;
margin-left:0px;
display:inline;
}
#tel{
float:left;
width:200px;
margin-left:271px;
margin-top:10px;
font-family:Arial, Helvetica, sans-serif; 
font-size:14px;
text-align:right;
display:inline;
}
/*#fon-line{
background-color:#999999;
width:auto;
}*/
#line{
margin-top:10px;
margin-left:40px;
margin-right:20px;
width:955px;
height:1px;
background-image:url(images/line.gif);
background-repeat:no-repeat;
float:left;
display:inline;
}
/*————————-menu——————--*/
#block-menu{
background-color:#fdeec3;
float:left;
margin-top:1px;
display:inline;
}
#menuusb{
width:142px;
background-image:url(images/usb.png);
background-repeat:no-repeat;
height:35px;
padding-top:70px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
float:left;
padding-left:10px;
}
#menukey{
width:132px;
background-image: url(images/key.jpg);
background-repeat:no-repeat;
height:35px;
padding-top:70px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
float:left;
display:inline;
padding-left:25px;
}
#menuattach{
width:132px;
background-image: url(images/attach.jpg);
background-repeat:no-repeat;
height:35px;
padding-top:70px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
float:left;
display:inline;
padding-left:25px;
}
#menupan{
width:102px;
background-image: url(images/pan.jpg);
background-repeat:no-repeat;
height:35px;
padding-top:70px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
float:left;
display:inline;
padding-left:25px;
}
/*—————————--hand————————*/
#hand{
width:330px;
float: right;
margin-top:20px;
display:inline;
}

Edited December 16, 2010 by viv

deadrash · December 16, 2010

Дак, картинку-то куда вставлять?

viv · December 16, 2010

Дак, картинку-то куда вставлять?

Какую картинку? Главный блок #conteiner, в нем блок #line с margin-left:40px; У блока #conteiner фон (не картинка, просто цвет). В блоке #line фоном каринка. Так вот эти 40px (тступ margin) стали белыми (Соответственно фоном тега body(фон для него не определен)).

Может Вам ссылку скинуть для наглядности?

stars · December 16, 2010

ну что и требовалось доказать... уберите строчку height:1px; из #line

надпись "/* CSS Document */" шедевральна )))

Edited December 16, 2010 by stars

deadrash · December 16, 2010

После блока #hand добавь элемент с свойством clear:both если элемент строчный задай ему блочную модель, например

<span style="clear: both; display: block;"> </span>

Только свойства соответственно в цсс.

p.s. Это ещё один пример того что без всего кода проблему не решить.

Edited December 16, 2010 by deadrash

viv · December 16, 2010

ну что и требовалось доказать... уберите строчку height:1px; из #line
надпись "/* CSS Document */" шедевральна )))

Надпись создает дримвивер, а я ее не трогаю, пусть будет, мне она нравится))) А Вы можете считать или не считать шедеврами все, что угодно. Мне как то все равно. А вот как сам код? Я конечно первый раз пробую верстать divами и смотрю много всяких подводных камней с отображением в разных браузерах.

Я почему то при верстке этого блока #line вставил height Огромное спасибо за подсказку!!!

После блока #hand добавь элемент с свойством clear:both если элемент строчный задай ему блочную модель, например
<span style="clear: both; display: block;"> </span>
Только свойства соответственно в цсс.
p.s. Это ещё один пример того что без всего кода проблему не решить.

Я вроде весь код выложил. Хм старнно почему он у Вас не отображается. В принципе проблема то заключалась в блоке #line свойство height, его надо было убрать, что я и сделал. :facepalmxd:

Всем спасибо за помощь!!! Не ожидал такой активности, думал попросишь помощи и жди дня 2 когда кто нить ответит. Хорошо, что ошибся

Sign In

Как закрасить отступы margin ?

Question

Link to comment

Share on other sites

19 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

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