бэкграунд, границы меню, обрезка картинок :: @CSS — стилизация дневников

Вторник, 18 февраля 2014

09:36

бэкграунд, границы меню, обрезка картинок

все записи пользователя в сообществеSnezhArt

ретроградный оптимист

Здравствуйте!
Начала осваивать css. Сделала макет, написала код, но никуда без багов. >< Я их уже и так, и этак, но не понимаю, как от них избавиться. тт_тт Помогите!! :beg:

Буду очень признательна за помощь!!

1. самая главная ужасная проблема, не знаю откуда только она такая взялась >< , у меня что-то происходит c бэкграундами. то есть:
вместо {background: url ('КАРТИНКА') repeat fixed} после нажатия на кнопочку "сохранить" - никакого фона, никакой картинки, а в коде появляется взамен этот ужос: {background: # repeat fixed}. :horror2:

далее парочка багов в скриншотах

И еще хотелось бы совет получить, кому не жалко дать. :shuffle:

1. это не принципиально для данного диза, но хотелось бы, вдруг кто подскажет? у меня в макете предполагалось, что название днева и ник будут заглавными буквами, вот так:
превью
а получается стандартно (выше в превьюшках багов можно увидеть). а хочется заглавных. что тут можно предпринять? ))

Код прилагается:

 .block_design {background:url('/userdir/2/7/0/2/2702809/80549095.png') 50% 50% fixed;}
 #wrapper {width: 940px !important; padding: 0 !important; overflow: hidden !important; margin-top: 30px !important; margin-bottom: 30px !important;}
 #side {width: 200px !important; background: #ffffff; margin:0 !important; position: fixed !important; border: 1px solid #c8c8c8 !important; padding-top: 15px !important;}
 #page-c {width: 700px !important; background: #ffffff; padding-right: 20px !important; padding-left: 20px !important; padding-top: 15px !important; margin: 0 !important; border: 1px solid #c8c8c8 !important;}
 #page-t {margin:0 !important;}
 .menuSection {border-top: 1px solid #c8c8c8 !important; padding-bottom: 15px !important; padding-top: 25px !important;}
 #side h1 a {font: bold 12px Georgia !important; color: #b6cdc8 !important;}
 #thisDiaryPhoto img {border: 4px solid #b6cdc8 !important; margin-top:-7px !important;}
 #authorName {font: bold 12px Georgia !important; color: #b6cdc8 !important;}
 .menuSection a {font: bold 12px Georgia !important; color: #b6cdc8 !important;}
 .menuSection li {padding-left: 20px !important;}
 #TagsList a {font: 12px Georgia !important; color: #b6cdc8 !important;}
 #tagslistlink ul li {width: auto !important;}
 .tags_ul_all span {font: 12px Georgia !important; color: #c8c8c8 !important;}
 #epigraph {border: none !important; margin-top: -25px !important;}
 #epigraph a {text-decoration: none !important; font: 13px Georgia !important; color: #b6cdc8 !important;}
 #lastComments, #Stats, #pchs, #myLinks, #YaSearch, #myAccountLink, #authorFav, #authorQuot, #authorLiks, #authorAlbum, #subscribeEmail, #unsubscribeEmail, #authorRSS, #albumLink, #rssLink, #myDraftLink, #postsCalendar, #upInChart, #myNotepadLink, #myQuotLink, #myProfileLink, #optionsLink, #photolibLink, #allDiaryLink, #favListLink, #pchListLink, #communityCatalogueLink, #myCommunitiesLink, #myCommunityLink, #randomDiaryLink, #diarySpiritLink, #diarySupportLink, #paySupportLink, #faqLink, #iAmQuit, #mySFavLink, #TagsList span {display: none !important;}
 .Attention, .prevnext, .order_button, .diary, .profile, .umail, .lastLink {display: none !important;}
 .postDate {font: bold 14px Georgia !important; color: #b6cdc8 !important; padding-bottom: 10px !important;}
 .header {padding-bottom: 10px !important;}
 .header span {font: bold 16px Georgia !important; color: #b6cdc8 !important;}
 .header h2 {font: bold 16px Georgia !important; color: #b6cdc8 !important; margin-left: 5px !important;}
 .avatar img {width:100px !important; min-width: 100px !important; max-width: 100px !important; border: 4px solid #b6cdc8 !important;}
 .sign {font: 11px Georgia !important; color: #b6cdc8 !important;}
 .postLinksBackg {font: bold 11px Georgia !important; color: #b6cdc8 !important; padding-top: 15px !important;}
 .atTag span, .atMusic span, .atMood {font: bold 11px Georgia !important; color: #b6cdc8 !important;}
 .atTag a, .atMusic {font: 11px Georgia !important; color: #b6cdc8 !important;}
 .singlePost {border-bottom: 1px solid #c8c8c8 !important; padding-bottom: 15px !important; padding-top: 15px !important;}
 .LinkMore {font:14px Georgia !important; color: #b6cdc8 !important;}
 #pageBar a {font: bold 12px Georgia !important; color: #c8c8c8 !important;}
 #pageBar strong {font: bold 16px Georgia !important; color: #b6cdc8 !important;}

UPD: БАГИ УБРАНЫ, СПАСИБО Min Young-nim и Стражница Поднебесья !!

@темы: фоновые картинки, рамки и полоски, меню

URL

Комментарии

2014-02-18 в 10:57

Стражница

В начале сотворил Бог небо...

{background: url ('КАРТИНКА') repeat fixed}
после url не должно быть пробела. Если код заменяется на #, значит ошибка в написании.

А чтобы сделать текст заглавными буквами используйте свойство {text-transform: uppercase;} для #side h1 и #authorName

По поводу остального не могу подсказать, пока дневник закрыт.

URL

2014-02-18 в 12:06

Min Young-nim

Don't try to be original, just try to be good.

3. как сделать так, чтобы всякие видео и картинки неприличного размера, выкладываемые бессовестными людьми, не знающими что такое превью, обрезались не по границе блока записей, а по границе текста/ссылок/и прочего?
Для картинок на странице избранного должно работать нечто вроде:
#JournalFavorite img {width: Xpx; height: auto;}
Вместо X нужное значение.

URL

2014-02-18 в 12:14

Min Young-nim

Don't try to be original, just try to be good.

На счёт видео... если ни у кого вариантов никаких не будет, то попробуй просто скрыть всё, что выходит за поля записи. Топорно, но что поделать.
.paragraph {overflow: hidden;}

По второму пункту нужно видеть дизайн вживую, в дневнике. Хотя предположу, что это можно убрать таким образом:
#thisDiaryInfo {border: none;}
Если не поможет, попробуй добавить !important.

URL

2014-02-18 в 13:52

SnezhArt

ретроградный оптимист

Стражница Поднебесья,
все оказалось так просто, а я испугалась. а виновата опять моя невнимательность. %)
заглавные буковки получились. спасибо! *_*
дневник открыла. ибо полосочки в меню меня продолжают мучить. ><

Min Young-nim,
я сделала оверфлоу хидден и все стало чудесно. топорно, зато все ровненько обрезано. терпеть не могу, когда вылезает что-то за края. %)
а вот полосочки в меню все остаются.
причем, тут я выложила скриншот - вид с тчк зрения моих пч, когда они ко мне заходят.
я чувствую, что просто натупила где-то в менюсекшин, там бордер-топ, но где именно, не улавливаю. ><

URL

2014-02-18 в 14:32

Min Young-nim

Don't try to be original, just try to be good.

SnezhArt, ну, во-первых, ты убрала все ссылки, относящиеся к #thisDiaryLinks, по отдельности, а не сам этот блок, попробуй сейчас к нему прописать border: none.
А верхняя полоска всё-таки у #thisDiaryInfo :hmm:

URL

2014-02-18 в 14:33

Min Young-nim

Don't try to be original, just try to be good.

SnezhArt, это штоооо? х))
#thisDiaryInfo {border: none; important!}
Вот так должно быть:
#thisDiaryInfo {border: none!important;}

URL

2014-02-18 в 14:41

SnezhArt

ретроградный оптимист

Min Young-nim, черт! прастииии! это конец рабочего дня! не знаю, то ли плакать, то ли смеяться. %))
полосочка над аватаром исчезла, йей! теперь надо уменьшить там отступ. %)

URL

2014-02-18 в 14:47

Min Young-nim

Don't try to be original, just try to be good.

SnezhArt, теперь надо уменьшить там отступ. %)
Над или под?)

URL

2014-02-18 в 14:48

Psychotherapy

ретроградный оптимист

Min Young-nim, все! полосочки меню исчезли! спасибо! :kiss:

будет мне урок на будущее. х))

URL

2014-02-18 в 14:50

SnezhArt

ретроградный оптимист

Min Young-nim, отправила коммент с аккаунта соо. точно сегодня пора завязывать. %)
отступы поправила. сейчас вроде все гуд смотрится. посмотри еще раз, зайди ко мне, просто как со стороны смотрится. плиз. ))

URL

2014-02-18 в 14:53

Min Young-nim

Don't try to be original, just try to be good.

SnezhArt, всё норм х)
Если что, отступы можно было убрать, добавив padding: 0!important; к #thisDiaryInfo.

URL

2014-02-18 в 14:58

SnezhArt

ретроградный оптимист

Min Young-nim, на будущее запомню. ^^ в этом уже пока ничего не буду трогать, я итак навозилась, хотя диз легкий. %)
кстати, а ты как проверяешь вид диза в разных браузерах? а то я разные разрешения посмотрела, все хорошо, а вот в браузерах... загадка пока. ))

URL

2014-02-18 в 15:02

Min Young-nim

Don't try to be original, just try to be good.

SnezhArt, у меня просто стоят последние версии популярных браузеров. Лиса, Опера, Хром, Сафари, ну и IE, конечно. Раньше был специальный сервис, он прекрасно работал и без оплаты услуг, а теперь бесплатный аккаунт ждёт скриншотов вечность.

URL

2014-02-18 в 15:08

SnezhArt

ретроградный оптимист

Min Young-nim, оу. ну я сегодня дома посмотрю в сафари (я пользую его на макбуке), а вот лису и оперу придется видимо устанавливать. но все равно пригодится. ))

URL

2014-02-19 в 11:19

Стражница

В начале сотворил Бог небо...

В мозилле, опере, хроме я багов не обнаружила, так держать =)

URL

2014-02-19 в 11:35

SnezhArt

ретроградный оптимист

Стражница Поднебесья, \^^/

URL

Добавить комментарий

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:


Запомнить