[attachment=39301:Безымянный.JPG]
Решил вот доделать сайт портфолио. Все шло хорошо, но после того как цвет контента изменил с белого на зеленый проявились непонятные пробелы, показанные красным. Ниже представлен css код странички. Объясните, пожалуйста, откуда эти пробелы и как их убрать? [CSS]@charset "utf-8"; html {
} body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
);
color: #000; }
/* ~~ Селекторы элементов/тегов ~~ */ ul, ol, dl { /* Из-за различий между браузерами рекомендуется обнулять поля в списках. Для согласованности можно указать нужные величины либо здесь, либо в элементах списка (LI, DT, DD), которые они содержат. Помните, что сделанное здесь последовательно включается в список .nav, если только не будет прописан более конкретный селектор. */ padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; /* удаление верхнего поля позволяет обойти проблему выхода полей за границы содержащего их контейнера DIV. Оставшееся нижнее поле отделит его от любых последующих элементов. */ padding-right: 15px; padding-left: 15px; /* добавление боковых полей к элементам внутри контейнеров DIV, а не к самим контейнерам избавляет от необходимости расчетов рамочной модели. В качестве альтернативы можно использовать вложенный контейнер DIV с боковыми полями. */ } a img { /* этот селектор убирает стандартную синюю рамку, которая появляется у изображений в некоторых браузерах, если вокруг изображения есть ссылка */ border: none; } /* ~~ Оформление ссылок на вашем сайте должно оставаться в этом порядке, включая группу селекторов, создающих эффект наведения. ~~ */ a:link { color: #42413C; text-decoration: underline; /* если только ссылки не должны выглядеть исключительно своеобразно, то для быстрого зрительного распознавания рекомендуется использовать подчеркивание */ } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { /* эта группа селекторов обеспечивает пользователю, работающему с клавиатурой, такие же возможности наведения, как и при использовании мыши. */ text-decoration: none; }
/* ~~ этот контейнер фиксированной ширины окружает все остальные DIV ~~ */ .container { width: 954.5px; background: #FFF; margin: 0 auto; /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет */ }
/* ~~ верхнему колонтитулу не задана ширина. Он растянется на всю ширину макета. Он содержит заполнитель для изображения, который должен быть заменен логотипом по ссылке ~~ */ .header { background: #A9DB73 url(images/head.png) no-repeat center center; }
/* ~~ Информация по макету. ~~
1) Поля размещены только вверху и/или внизу DIV. Элементы в этом DIV имеют боковые поля. Это избавляет пользователя от необходимости расчетов рамочной модели. Помните, что при добавлении боковых полей или границы к самому DIV их ширина будет добавлена к задаваемой ширине, что образует "полную" ширину. Кроме того, можно удалить поля элемента в DIV и поместить внутри него второй DIV без ширины и с необходимыми по проекту полями.
*/ #menu{ /* margin:0 auto;*/ width:955px; height:59px; background:url(images/menu_034_bg.jpg) repeat-x; } #menu ul{ list-style:none; margin-left:120px; margin-right:120px; width:955px; } #menu li{ list-style:none; display:block; float:left; height:59px; line-height:59px; } #menu li a{ display:block; float:left; color:#a7a7a7; text-transform:uppercase; font-size:11px; font-weight:bold; line-height:59px; text-decoration:none; padding:0 20px; } #menu li a:hover{ color:#fff; background:url(images/menu_034_h.jpg) no-repeat bottom; } #menu li a.current{ display:block; float:left; background:url(images/menu_034_h.jpg) no-repeat bottom; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; line-height:59px; text-decoration:none; padding:0 20px; } #menu li a:hover.current{ color:#fff; }
.content {
background:#b2cd4c; }
/* ~~ Нижний колонтитул ~~ */ .footer { height:41px; background: url(images/footer.jpg) repeat-x; }
/* ~~ прочие классы float/clear ~~ */ .fltrt { /* этот класс можно использовать для обтекания элемента справа на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */ float: right; margin-left: 8px; } .fltlft { /* этот класс можно использовать для обтекания элемента слева на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */ float: left; margin-right: 8px; } .clearfloat { /* этот класс можно поместить в теге <br /> или в пустом блоке DIV в качестве конечного элемента, следующего за последним обтекаемым DIV (внутри #container), если .#footer удален или извлечен из #container */ clear:both; height:0; font-size: 1px; line-height: 0px; }[/CSS]
|
|