[Элоя]

Здравствуйте.
Поскольку игнорятся вопросы в комментах к уже заданным, пришлось создавать новую запись.
Оформляю сообщество "Неки". Вопросов несколько.
1. Аватары. Посмотрела на замечательный пример Рёцке и попробовала записать такое же себе.
Код:
.avatar {border: 1px solid; color: #000080; background: #ffffff; padding: 3px; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:center; width:100px;}
Результат

Волнует исчезновение правой границы. Пробовала с разными padding - одно и то же.

Если есть вопросы касательно разметки body - тут код

body.left { padding-left: 10px !important; padding-left: 220px; }
.left #wrapper {width:700px; margin: 10px !important; padding: 0 !important;}
.left #side {width:170px !important; margin: 0 !important;}
.left #page-c {width:700px !important; padding: 30 !important;}


2. Разделитель между записями сделала картинкой. Все нравится. Жить можно, кроме трех моментов
- Если много комментов и строка "Комментарии Подписаться Добавить в цитатник" от этого растягивается.
- Если хочу закомментировать запись, картинка так же заезжает на слова "U-mail Дневник Профиль" (применимо и к цитатнику)
- В эпиграфе все непонятным образом съезжает

Пробовала решить с помошью отступов - ставлю 10, съезжает вообще все на свете на 10pix кроме картинки |-(
Есть мысли об использовании position, но не знаю с какой стороны подступиться

3. Рамки. Делала как описано тут.
Там же и мой коммент на эту тему, на который очень хочется получить ответ.

4. Картинка в эпиграфе. Как задать margin="0"? Мне пишется, что ничего такго не знают и пользовать не хотят.

Буду очень рада Вашему вниманию.

@темы: отступы, рамки и полоски

Comments

[.выдра]

посмотрела сообщество
1. с рамкой действительно проблема...
2. посмотрела спецально эту запись у меня ничего не съезжает, эпиграф не растягивается.
браузер mozilla firefox 2.0.0.7

кстати красивый дизайн

[Элоя]

.выдра-псих., спасибо. Приятно слышать хорошие отзывы о твоей работе.
Только я еще не все сделала так, как хочу.
У меня firefox 2.0.0.8, +Опера, +IE 6 +IE7. Везде отображается аналогично, так как на картинках. Т.е. заезжает на разделитель. Если сделать саму картинку больше, т.е. увеличить отступы в самой картинке - съезжает диз. =(
Что делать, ума не приложу. =(

[.выдра]

странно...говрю же у меня норм

[Трубчатый Кот]

Элоя

.avatar, .avatarNew
{
float:left;
margin: 10px 0 0px 10px !important;
margin: 10px 0 0px 5px;
padding-left:5px;
}

.avatar img,.avatarNew img {

display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

//Начиная отсюда подгонять отступы

.singleComment .postContent { padding-left:140px; }
.singleComment .postInner { margin-left:-150px; padding-left:150px; }
.commentAuthor .name { margin:0px 0 10px; width:130px; max-width:130px; }
.singleComment .commentAuthor { float:left; width:130px; overflow:visible; margin-left:-140px !important; margin-left:-65px; max-width:130px; }
.commentAuthor .avatar, .commentAuthor .avatarNew { margin:0px 0 10px; width:0auto !important; max-width:140px !important; width:140px; max-width:140px; }

.sign {background-color: #; margin-left: 10px;}
.authorName { float:none ; margin-bottom: 10px; }

[Трубчатый Кот]

Убрать картинку из эпиграфа можно так. Код писать ПОСЛЕ кода которым назначаете фон записям.

#epigraph {background: none !important; background-position:bottom !important;}

замечу что во всех кодах стоит дематериализовать ; перед !important;

[Элоя]

Рёцке, спасибо большое. Ясно в чем проблема. Я вообще ничего толком не прописала... ( Полный код и правда значительно понятней. Все отлично работает.

Картинку из эпиграфа я не хочу убирать. Она как раз там должна быть. И вставила я ее через настройку записи в эпиграфе. Мне нужно что бы она была "пристыкована" к границе таблицы. Для всего этого самый простой, на мой взгляд, способ - задать margin. Но на дайрях он не работает. Есть какая-то альтернатива?

[zolotzzze]

Элоя
а мне кажется, сработать он должен.
если что, почитайте:
wdh.suncloud.ru/css04.htm

[Сабико]

#page-t .bordered{padding-top:0 !important;}

для справки - кроме маргинов, внешних отступов, существуют ещё паддинги, внутренние.

[Элоя]

Zolotzzze=), спс за ссылку.

Сабико, угу. Вот я о них тоже и подумала. Но не помогает.

С двойной полосой сверху разобралась. Проблема просто напросто смешна сама по себе. У меня в стиле была строчка с описаниями #extrabottom {border-color: #000080; border-bottom-style: double; } Да, да, да, можете говорить о невнимательности и прочем. Сама с себя в некотором удивлении пребываю))

Насчет отступов пока не получилось. Буду эксперементировтаь дальше...

[Сабико]

Элоя, код, который я дала, прижимает верхний край рисунка кошки в эпиграфе к верхнему краю page-t, это 100%, я проверила.
Или вы вообще про какие-то другие отступы?

а двойную полосу тогда не заметила>< думала, так и надо^^'

[Элоя]

Сабико, хм... тут вот другая проблемка образовалась... Тот код что убирает отступ - работает. Но вот там в эпиграфе присутствуют строки, спрятанные в more. Когда их разворачиваю, то высота эпиграфа меняется и картинка съезжает в центр. У меня не получилось ее оставить вверху... ужос... уже голова не варит среди ночи. Есть какой-то вариант решения?

[Сабико]

ну попробуйте прописать бэкграунду позицию по высоте "0" или сколько там надо будет..

#epigraph {background: url('static.diary.ru/userdir/1/8/1/3/181347/25553655...') 100% 0 no-repeat;
а bg-positon:right можно вообще убрать.

[Элоя]

Сабико, урррааа! Заработало! Спасибо!