Помогите с отображением списка

Статус
Закрыто для дальнейших ответов.

master10

New Member
Регистрация
12.11.2010
Сообщения
7
Здравствуйте.
Занимаюсь сейчас по просьбе знакомых редактированием их сайта. Понадобилось сделать подробное описание для каждого врача. Столкнулся с такой проблемой, что при создании списка его маркеры налезают на фотографию, а сам текст идет вровень с остальными абзацами.
Сайт на Битриксе. Придание списку (и его строкам) свойства margin ничего не меняет; с padding текст отодвигается от маркера, но сам маркер остается на месте; если каждому <li> присвоить list-style-position: inside, то маркер сдвигается куда надо, однако если ставить outside или сделать отдельно класс в css - ничего не меняется.
Куда копать?
Вот страница (она пока "неактивная" - никак кроме прямой ссылки на нее не попадешь):
http://smile-denta.ru/specialists/specialists/hilevich.php
Думаю с помощью "Просмотра кода страницы" и приведенного ниже css можно определить характер проблемы. Если что-то нужно будет еще - предоставлю.
Код:
@charset "UTF-8";

body{margin:0;padding:0;color:#000;font-family:Arial;font-size:12px;background:#ffffff url("./images/bg_line.jpg") repeat-y;background-size:contain;}
div{margin:0;padding:0;color:#fff;font-family:Arial;font-size:12px;}
h1{margin:0;padding:0 0 20px;font-size:30px;color:#fff;font-family:Arial; font-style:italic;}
h2{margin:0;padding:0;font-size:20px;color:#fff;font-family:Arial;}
p{margin:0;padding:0;color:#fff;font-family:Arial;font-size:14px;line-height:18px;}
a:link, a:active, a:visited{color:#fff;font-family:Arial;text-decoration:underline;outline:none;}
a:hover{color:#fff;}
p a:link, p a:active, p a:visited{font-size:12px;}
p a:hover{}
table{border-collapse:collapse;}
div.rf{clear:both;}
textarea{resize:none;}
a img {border:none;}

div#panel {position:fixed; top:0; width:100%;}

div#wrapper {width:1100px; overflow:hidden; margin:0 auto;}
	.sector {position:absolute; width:1100px; left:50%; margin:0 0 0 -550px; z-index:1;}
	.bg-layer {position:absolute; z-index:2;}
	div#top-sector {position:fixed; z-index:-9; width:1920px; height:210px; top:0%; left:50%; margin:0 0 0 -50%; background:url("./images/bg_top_sector.png") center top no-repeat;}
	div#left-sector {position:fixed; z-index:-10; height:100%; width:1630px; left:0; background:fixed url("./images/Smile_left.png") left top no-repeat;}
	div#right-sector {position:fixed; z-index:-10; height:100%; width:1630px; right:0; background:fixed url("./images/Smile_right.png") right top no-repeat;}
	div#center-sector {height:1px; margin:210px 0 0 -550px; background:url("./images/bg_center_sector.png") repeat-y;}
	div#content-bg {width:930px; height:50px; left:50%; top:210px; margin:0 0 0 -471px; background:url("./images/bg_content.png");}
	div#content-wrapper {min-height:700px; position:relative; z-index:3;}
		/*div#header {height:211px;}*/
		div#header {height:171px; overflow:hidden;}
			.header-block {float:left;}
			div#logo {width:450px; margin:-10px 0 0 15px;}
			div#smile {width:370px; margin:0 0 0 -40px; background:fixed url("./images/smile.png") no-repeat;}
			div#contacts {width:400px; text-align:right; padding:30px 0 0 155px; margin:0px 0 0 -330px;}
				div#contacts p {text-shadow:0px 0px 20px #ffffff; color:#0074b5; font-size:12px; font-weight:600; line-height:21px;}
					div#contacts p a {color:#000;}
				div#contacts p.phone {font-size:30px; line-height:30px;}
		div#menu {z-index:5; width:938px; height:46px; margin:-5px 0 -20px 75px; background:url("./images/bg_menu.png") repeat-x; text-align:center;}
			div#menu>ul {display:inline-block; margin:0; padding:0; list-style:none;}
				div#menu>ul>li {margin:0; padding:0; display:inline-block;}
					div#menu>ul>li>a {display:inline-block; height:30px; padding:16px 17px 0; border-bottom:3px solid transparent; color:#3c64a2; font-family:Arial; font-size:14px; font-weight:bold; text-decoration:none; text-shadow:0px 0px 3px rgba(120, 120, 120, 0.7); background:url("./images/menu_separator.png") no-repeat right 6px;}
					div#menu>ul>li.last>a {background:none;}
					div#menu>ul>li:hover>a {background:#fff; border-bottom:3px solid #a9d8f5; -webkit-box-shadow:5px 3px 3px 0px rgba(0, 0, 0, 0.3); box-shadow:5px 3px 3px 0px rgba(0, 0, 0, 0.3); text-shadow:0px 0px 3px rgba(120, 120, 120, 0.6);}
					div#menu>ul>li.active>a {background:#fff; border-bottom:3px solid #a9d8f5; -webkit-box-shadow:5px 3px 3px 0px rgba(0, 0, 0, 0.3); box-shadow:5px 3px 3px 0px rgba(0, 0, 0, 0.3); text-shadow:0px 0px 3px rgba(120, 120, 120, 0.6);}
					div#menu>ul>li>ul {display:none; position:absolute; min-width:130px; margin:0; padding:3px 0; list-style:none; text-align:left; background:#fff; -webkit-box-shadow:5px 3px 3px 0px rgba(0, 0, 0, 0.3); box-shadow:5px 3px 3px 0px rgba(0, 0, 0, 0.3);}
						div#menu>ul>li>ul>li {padding:3px 0;}
							div#menu>ul>li>ul>li>a {display:inline-block; min-width:120px; height:20px; padding:6px 15px 0; border-bottom:3px solid transparent; color:#3c64a2; font-family:Arial; font-size:14px; font-weight:bold; text-decoration:none; text-shadow:0px 0px 3px rgba(120, 120, 120, 0.6);}
							div#menu>ul>li>ul>li:hover {background:#a9d8f5;}
					div#menu>ul>li:hover>ul {display:block;}
		div#slider {width:928px; height:378px; margin:0 0 0 75px; border:5px solid #2b3643; -webkit-box-shadow:5px 3px 3px 0px rgba(0, 0, 0, 0.3); box-shadow:5px 3px 3px 0px rgba(0, 0, 0, 0.3);}
			div#slider-navigation {position:absolute; z-index:4; width:928px; margin:-20px 0 0; text-align:center;}
				div#slider-navigation ul {margin:0; padding:0; list-style:none;}
					div#slider-navigation ul li {display:inline-block; margin:0 5px; padding:0; width:14px; height:14px; background:url("./images/slider_button.png") no-repeat; cursor:pointer;}
					div#slider-navigation ul li.active {background:url("./images/slider_button_active.png") no-repeat;}
		div#slider-line {width:910px; border-top:2px solid #b2b9c1; margin:6px 0 6px 90px;}
		div#sidebar {width:270px; float:left;}
			div.sidebar-block {min-height:60px; margin:0 0 15px; background:url("./images/sidebar_block_title.png") no-repeat 25px 0;}
				div.sidebar-block-title {height:42px; padding:11px 0 0 60px; font-family:"Myriad Pro", Arial; font-size:18px; text-transform:uppercase; font-weight:bold; text-shadow:1px -2px 2px #777777;}
				div.sidebar-block-content {margin:5px 0 0; padding:0 0 0 79px;}
					div.sidebar-block-content p {font-family:"Myriad Pro", Arial; font-size:12px; font-weight:500; padding:2px 0 2px 10px;}
					ul.menu {background:rgba(68, 104, 145, 0.7); margin:0; padding:0; list-style:none;}
						ul.menu li {}
							ul.menu li a {display:inline-block; width:160px; padding:9px 5px 9px 25px; font-family:"Myriad Pro", Arial; font-size:16px; text-decoration:none; font-weight:500; border-top:1px solid #4a76a8; border-bottom:1px solid #395d86; background:url("./images/dot.png") no-repeat 10px 15px;}
							ul.menu li a:hover {color:#4574a8; background:#fff url("./images/dot_active.png") no-repeat 10px 15px;}
				div.sidebar-block-content div.spec {margin:10px 0 0 10px; text-align:center;}
					div.sidebar-block-content div.spec>a {font-family:"Myriad Pro", Arial; font-size:14px; text-decoration:none; font-weight:bold; text-transform:uppercase; padding:0 0 5px;}
					div.sidebar-block-content div.spec>div {color:#b7de34; font-size:12px; font-weight:500;}
		div#content {width:700px; float:left; padding:0 20px 0 30px;}
			div#content p {text-indent:15px; text-align:justify; color:#fff; font-family:Arial; font-size:14px; line-height:18px; text-shadow:0px 0px 2px rgba(120, 120, 120, 0.7);}
			div#content p.ttl {padding:20px 0 15px; text-indent:0; text-align:center;}
			div#content li {text-align:justify; color:#fff; font-family:Arial; font-size:14px; line-height:18px; list-style-position: outside}
			div#content table, div#content table td, div#content table th {border-color:white; border-collapse:separate;}
			div#content table th {background:#ddd;color:black;}
			div#content h3 {font-size:130%;}
			div.line {width:700px; border-top:2px solid #b2b9c1; margin:20px 0;}
			img.title {margin:0 10px 0 0;border:0; float: left;}
			div.news-list p {font-family:Arial; font-size:12px; color:red;}
				span.news-date-time {text-indent: -15px; text-align:justify; color:DeepSkyBlue; font-family:Arial; font-size:16px; font-weight:bold; line-height:18px; text-shadow:1px 0px 0px DodgerBlue;}
				p.news-item a {text-indent: 15px; text-align:justify; color:LightSkyBlue; font-family:Times; font-size:17px; font-style: italic; text-decoration:none; line-height:18px; text-shadow:1px 0px 0px DodgerBlue;}
				p.news-item a:hover {text-decoration:underline;}
				p.news-item {margin-bottom: 15px; text-align:justify; color:red; font-family:Arial; font-size:17px; line-height:18px;}
			div.content-blocks {}
				div.content-block {float:left; text-align:center;}
					div.content-block>a {font-family:Arial; font-size:14px; text-decoration:none; font-weight:bold; text-transform:uppercase; padding:5px 0; color:#b7de34;}
					div.content-block>div {font-family:Arial; font-size:14px; color:#fff; font-weight:500;}
				div.content-block.first {width:220px; margin:0 30px 0 0;}
				div.content-block.second {width:180px; margin:0 30px 0 0;}
				div.content-block.third {width:240px;}
			div.gallery-image {float:left; width:200px; margin:5px 0; text-align:center;}
		div#additional {width:970px; height:123px; margin:30px 0 0 55px; background:url("./images/bg_additional.png") repeat-x; border:2px solid #fff; border-bottom:0px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius:10px; border-top-right-radius:10px;}
			div.additional-block {float:left;}
			div.additional-block.question {width:250px; padding:15px 0 0 30px;}
				div.additional-block.question a {width:115px; height:28px; padding:57px 0 0 105px; display:inline-block; background:url("./images/button_question.png") no-repeat; color:#707070; font-family:Arial; font-size:10px; text-decoration:none; font-weight:bold;}
			div.additional-block.center {width:400px; text-align:center;}
				div#subscribe {padding:20px 0 0px;}
					div#subscribe div.fields {}
						div#subscribe div.fields input[type=text] {width:150px; background:#44576c; border:2px solid #fff; color:#fff; padding:3px 35px 3px 15px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; font-family:Arial; font-size:12px; font-weight:bold;}
						div#subscribe div.fields input[type=submit] {width:140px; background:url("./images/bg_subscription_button.png") repeat-x; border:2px solid #fff; color:#fff; padding:3px 20px 3px 35px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;font-family:Arial; font-size:12px; font-weight:bold;}
					div#subscribe div.letter {width:48px; height:40px; position:absolute; margin:-32px 0 0 210px; background:url("./images/letter.png") no-repeat;}
					div#subscribe div.error {color:#555; padding:10px 0 0; height:15px;}
				div#social {}
					div#social a {display:inline-block; width:42px; height:41px;}
					div#social a.fb {background:url("./images/fb.png") no-repeat;}
					div#social a.twitter {background:url("./images/twitter.png") no-repeat;}
			div.additional-block.online {width:260px; text-align:right; padding:10px 20px 0 0;}
				div.additional-block.online a {width:195px; height:49px; padding:56px 0 0 20px; display:inline-block; background:url("./images/button_online.png") no-repeat; color:#707070; font-family:Arial; font-size:10px; text-decoration:none; font-weight:bold; text-align:left;}
	div#bottom-sector {height:124px; margin:-404px 0 0 -550px; background:url("./images/bg_bottom_sector.png") no-repeat center top;}
div#footer-wrapper {width:970px; height:104px; position:absolute; z-index:200; left:50%; ; background:url("./images/bg_footer.png") repeat-x; border-top:2px solid #fff; border-left:2px solid #fff; border-right:2px solid #fff; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
	div#footer {width:930px; margin:0 auto;}
		div.footer-block {float:left; padding:30px 0 0;}
			div.footer-block p {font-size:10px; line-height:12px; padding:0 0 10px;}
				div.footer-block p a {font-size:10px;}
			div#developer {}
				div#developer a {font-size:10px;}
				div#developer a:hover {text-shadow:0px 0px 3px rgba(255, 255, 255, 0.7);}
		div.footer-block.copyright {width:270px; margin:0 60px 0 0;}
		div.footer-block.address {width:150px; margin:0 180px 0 0;}
			div.footer-block.address a {color:#8ecdf6;}
			div.footer-block.address a:hover {color:#fff;}
		div.footer-block.phone {width:270px; text-align:right;}
			div.footer-block.phone p {font-size:25px; line-height:25px; text-shadow:0px 0px 20px #ffffff; color:#fff;}

img.border {border:4px solid #dee5eb;}

ul.jcarousel-skin-main {list-style:none;margin:0;padding:0;width:928px;height:378px;overflow:hidden;}
.jcarousel-skin-main .jcarousel-container-horizontal {width:928px;height:378px;overflow:hidden;padding:0;}
.jcarousel-skin-main .jcarousel-clip {overflow: hidden;}
.jcarousel-skin-main .jcarousel-clip-horizontal {width:928px;}
.jcarousel-skin-main .jcarousel-item {width:928px;height:378px;overflow:hidden;display:inline;}

.fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp{padding:0; margin:0; border:0; outline:none; vertical-align:top;}
.fancybox-wrap {position:absolute; top:0; left:0; z-index:8020;}
.fancybox-skin {position:relative; background:#f9f9f9; color:#444; text-shadow:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.fancybox-opened {z-index:8030;}
.fancybox-opened .fancybox-skin {-webkit-box-shadow:0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 10px 25px rgba(0, 0, 0, 0.5); box-shadow:0 10px 25px rgba(0, 0, 0, 0.5);}
.fancybox-outer, .fancybox-inner {position:relative;}
.fancybox-inner {overflow:hidden;}
.fancybox-type-iframe .fancybox-inner {-webkit-overflow-scrolling:touch;}
.fancybox-error {color:#444; font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin:0; padding:15px; white-space:nowrap;}
.fancybox-image, .fancybox-iframe {display:block; width:100%; height:100%;}
.fancybox-image {max-width:100%; max-height:100%;}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {background-image:url('./images/fancybox_sprite.png');}
#fancybox-loading {position:fixed; top:50%; left:50%; margin-top:-22px; ; background-position:0 -108px; opacity:0.8; 	cursor:pointer; z-index:8060;}
#fancybox-loading div {width: 44px; height:44px; background:url('./images/fancybox_loading.gif') center center no-repeat;}
.fancybox-close {position:absolute; top:-18px; right:-18px; width:36px; height:36px; cursor:pointer; z-index:8040;}
.fancybox-nav {position:absolute; top:0; width:40%; height:100%; cursor:pointer; text-decoration:none; background:transparent url('./images/blank.gif'); -webkit-tap-highlight-color:rgba(0,0,0,0); z-index:8040;}
.fancybox-prev {left:0;}
.fancybox-next {right:0;}
.fancybox-nav span {position:absolute; top:50%; width:36px; height:34px; margin-top:-18px; cursor:pointer; z-index:8040; visibility:hidden;}
.fancybox-prev span {left:10px; background-position:0 -36px;}
.fancybox-next span {right: 10px; background-position:0 -72px;}
.fancybox-nav:hover span {visibility:visible;}
.fancybox-tmp {position:absolute; top:-9999px; left:-9999px; visibility:hidden;}
.fancybox-lock {overflow:hidden;}
.fancybox-overlay {position:absolute; top:0; left:0; overflow:hidden; display:none; z-index:8010; background:url('./images/fancybox_overlay.png');}
.fancybox-overlay-fixed {position:fixed; bottom:0; right:0;}
.fancybox-lock .fancybox-overlay {overflow:auto; overflow-y:scroll;}
.fancybox-title {visibility:hidden; font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position:relative; text-shadow:none; z-index:8050;}
.fancybox-opened .fancybox-title {visibility:visible;}
.fancybox-title-float-wrap {position:absolute; bottom:0; right:50%; margin-bottom:-35px; z-index:8050; text-align:center;}
.fancybox-title-float-wrap .child {display:inline-block; margin-right:-100%; padding:2px 20px; background:transparent; background:rgba(0, 0, 0, 0.8); -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; text-shadow:0 1px 2px #222; color:#FFF; font-weight:bold; line-height:24px; white-space:nowrap;}
.fancybox-title-outside-wrap {position:relative; margin-top:10px; color:#fff;}
.fancybox-title-inside-wrap {padding-top:10px;}
.fancybox-title-over-wrap {position:absolute; bottom:0; left:0; color:#fff; padding:10px; background:#000; background:rgba(0, 0, 0, .8);}
 

master10

New Member
Регистрация
12.11.2010
Сообщения
7
BaNru сказал(а):
увеличить margin-left у картинки
Картинка тупо сдвигается от края страницы вправо. Если увеличить margin-right, то сдвигаются все текстовые элементы, а маркеры так и остаются выдвинуты слева


BaNru сказал(а):
сделать свои маркеры для списка через псевдоэлемент ::before
неужели проще никак? может тогда есть вариант как по другому оформить картинку? это что, общеизвестный баг? неужели за столько лет этого никто не исправил?
 

Volly

Well-Known Member
Регистрация
21.03.2012
Сообщения
833
А чем не устраивает list-style-position: inside?
 

master10

New Member
Регистрация
12.11.2010
Сообщения
7
Volly сказал(а):
А чем не устраивает list-style-position: inside?
Некрасиво. Плюс работает почему-то только если ставить конкретно каждому <li>-элементу. Если прописать в css - ничего не происходит

BaNru сказал(а):
сделать свои маркеры для списка через псевдоэлемент ::before
Попробовал через него - получается как при использовании list-style-position: inside. Прописал в css следующие строчки:

div#content li {text-align:justify; color:#fff; font-family:Arial; font-size:14px; line-height:18px; list-style-position: outside; list-style-type: none;}
div#content li:before {content: "• ";}

Получилось так:
1.jpg
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
master10 сказал(а):
Картинка тупо сдвигается от края страницы вправо. Если увеличить margin-right, то сдвигаются все текстовые элементы, а маркеры так и остаются выдвинуты слева
Ой, разумеется margin-right я хотел сказать.
Да, сдвигаются все элементы.

div#content li:before {content: "• ";}
Добавить display:inline-block и выставить ему паддинги, маргины или ширину. Что больше по душе или скомбинировать.
 

master10

New Member
Регистрация
12.11.2010
Сообщения
7
BaNru сказал(а):
Добавить display:inline-block и выставить ему паддинги, маргины или ширину. Что больше по душе или скомбинировать.
Дело не в том, что мне нравится/не нравится отступ от точки до текста. Дело в том, что мне нужно, чтобы точки были слева от текста в одну колонку. Короче, как при list-style-position: outside. А при добавлении ваших параметров этого не происходит. И список ведет себя как при list-style-position: inside, что меня не устраивает.
 

master10

New Member
Регистрация
12.11.2010
Сообщения
7
Во! Теперь все как надо! Спасибо :)
 
Статус
Закрыто для дальнейших ответов.
Верх Низ