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

2015-09-18 в 11:34

Не так страшен чёрт, как его трезубец в заднем проходе.

По сути у вас сейчас параметры #wrapper, переводя на русский, ширина: 888px и не менее: 1000px. Мб поэтому крыша и едет. Приведите к общему значению, в данном случае попробуйте совсем убрать параметр min-width, либо задайте тоже 888

URL

2015-09-18 в 11:38

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

Вообще странно задавать бэкграунд растяжке, как я понимаю, за область поста отвечают page-t и postArea
Растяжка это контейнер, задающий положение содержимого на странице
Не взлетит с шириной - задайте фон для page-t или postArea

URL

2015-09-18 в 11:52

Маркоша

Мне говорили - похожа на мандаринку

Aista, когда трогаю параметр min-width (и убирала и ставила тоже 888) сразу едет крыша.

Второе предложение попробую как буду дома. Я правильно понимаю, враппер вообще убрать, а фон задать page-t или postArea?

URL

2015-09-18 в 11:59

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

нет, враппер оставьте, это полезная бифидобактерия)) фон с него уберите, да, задайте для page-t или postArea

URL

2015-09-18 в 13:22

Маркоша

Мне говорили - похожа на мандаринку

Aista, пожалуйста подскажите как это правильно прописать, мой ~~косолапый~~ код не принимает:

.postArea {width:888px; height: 54px; background:url('/userdir/5/9/2/1/592173/83356697.jpg') left top no-repeat;}

и этот тоже

.page-t {width:888px; height: 54px; background:url('/userdir/5/9/2/1/592173/83356697.jpg') left top no-repeat;}

Выглядит так yadi.sk/i/EhVXKywUjAcbC

Это то что осталось от враппера (1000 по прежнему тронуть не дает, сразу расползается все).

 #wrapper {width: 888px; min-width: 1000px !important;}

URL

2015-09-18 в 22:38

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

Ссыль не открывется, вангую что так
.postArea {width:888px; min-height: 100%; background:url('/userdir/5/9/2/1/592173/83356697.jpg') left top repeat-y;}
или, соответственно

.page-t {width:888px; min-height: 100%; background:url('/userdir/5/9/2/1/592173/83356697.jpg') left top repeat-y;}

URL

2015-09-18 в 22:40

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

Стоп, в коде это айдишники, вместо точки решетка, #postArea или #page-t

URL

2015-09-18 в 22:50

Маркоша

Мне говорили - похожа на мандаринку

Aista, не помогает, либо так читать дальше

Либо еще страшнее разъзжается.

А от враппера я не пойму, что надо оставить?

URL

2015-09-18 в 23:21

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

1. Вам что нужно получить? чтобы был единый фон для всех постов? чтобы он захватывал меню?
2. Честно говоря, без кода и по картинкам это все гадание на кофейной гуще
3. При каком варианте не помогает? При каком "так"? "Еще страшнее" это как? куда?

URL

2015-09-18 в 23:25

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

Можно попробовать еще прописать #page-c {width:888px; min-height: 100%; background:url('/userdir/5/9/2/1/592173/83356697.jpg') left top repeat-y;}

URL

2015-09-18 в 23:26

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

Либо #wrapper {width: 888px; min-width: 888px !important; background:url('/userdir/5/9/2/1/592173/83356697.jpg') right top repeat-y;}

URL

2015-09-19 в 07:56

Маркоша

Мне говорили - похожа на мандаринку

1. Вам что нужно получить? чтобы был единый фон для всех постов? чтобы он захватывал меню? 2. Честно говоря, без кода и по картинкам это все гадание на кофейной гуще 3. При каком варианте не помогает? При каком "так"? "Еще страшнее" это как? куда?
1. Да И меню, и под экстратопом вверх. Не знаю как объяснить, на скринах наверное понятно будет
2. Первоначально:

#YaSearchForm { visibility: visible !important; display: block !important;}
 #YaSearch_title b {display: none;}
 #YaSearch A {font-size:14px; color:#c4875a;}
 #YaSearchForm input.text {border: 1px solid #fff;}
 body {padding:0 !important; background-color:#8b8c73;color:#5a3215;padding:0px;margin:0px; background:url('/userdir/5/9/2/1/592173/83356666.jpg');}
 a {color:#ac5a23;text-decoration:none !important;}
 a:hover {color:#391c12;text-decoration:none;}
 .menuSection a {color:#f5dbba;text-decoration:none;}
 .menuSection a:hover {color:#000; text-decoration:none;}
 #extratop{margin-left: 81px; margin-right: 0px; width:888px; height: 832px; background:url('/userdir/5/9/2/1/592173/83358968.jpg') left top no-repeat; }
 #page-c {margin-top: -500px; width: 820px !important; margin-left: 150px; margin-right: 150px;}
 #side {margin-top: -1020px; width: 180px; margin-left: 20px; font-family: andate mono;}
 #wrapper {width:888px !important; background:url('/userdir/5/9/2/1/592173/83357955.jpg') repeat-y;}
 #extrabottom {background:url('/userdir/5/9/2/1/592173/83356877.jpg') top no-repeat; width:888px;height:100px; margin-left: 0px;}
 .singlePost .postTitle {height: 25px; line-height: 4% !important; padding-left: 5px; padding-top: 20px; width:700px;background:url('/userdir/5/9/2/1/592173/83356811.png') no-repeat; color: #fff; font-size: 16pt;}
 .singlePost {font-family: "Georgia", "Times New Roman", "AGCenturion"; font-size:16px;}
 .singlePost {padding-top: 40px !important;}
 #post0 .postTitle {display:none;}
 #epigraph {margin-top: -70px !important; border-bottom: 1px #81783f dashed !important; }
 #epigraph {margin-top:-26px !important; margin-right: -2px;}
 .postActionLinks {margin-top: -36px;}
 .singlePost .postDate {position: absolute; margin-top: -40px !important; font-weight: bold !important; padding-left: 5px; color: #000; text-shadow:1px 2px 3px #999;}
 .singlePost .postTitle span {position: absolute; font-size: 12pt; color: #000; margin-top: -35px; text-shadow:1px 2px 3px #999;}
 .menuSection_title {display: block; font-weight: bold !important; font-size: 14pt; color: #000 !important; width:160px; padding:0px 0 0 36px; background:url('/userdir/5/9/2/1/592173/73849691.png') no-repeat; margin:0 0 5px 0; !important;}
 #side li {background: url("/userdir/5/9/2/1/592173/73822852.gif") no-repeat scroll 0 7px transparent;}
 #side h1 {position: relative !important; top: -220px; left: 20px; text-align: left; font-size: 28px !important; width: 400px;}
 #side h1 a {display:block; width:312px; height:104px; line-height:800px; overflow:hidden; background: url('/userdir/5/9/2/1/592173/83356757.png') 2px 4px no-repeat; position:relative !important; top: 430px !important; left: 380px !important;}
 #authorName {display:block; width:247px; height:72px; line-height:800px; overflow:hidden; background: url('/userdir/5/9/2/1/592173/83356841.png') 2px 4px no-repeat; position:relative !important; top: 205px !important; left: 430px !important;}
 .menuSection li {font-weight:normal;padding-left: 10px !important; font-size:16px; color:#e9cca8;}
 .postLinksBackg {font-style: italic; font-size: 10pt; border-bottom: 1px #999 dashed; padding: 5px 5px 5px 5px !important; border-left: 1px #999 dashed; border-right: 1px #999 dashed; font-family: verdana;}
 .quote_text {font: italic 14px Verdana; display: block; margin: 0px; padding: 7px; border-top: 1px dashed #81783f; border-right: 1px dashed #81783f; border-bottom: 1px dashed #81783f; border-left: 5px solid #ac5a23;}
 .paragraph div:first-letter { font-size: 50px; float: left !important; float: none; font-weight: bold; font-family: "Mistral", "Times New Roman"; margin-right: 3px; color: #ac5a23; line-height:100% !important; line-height:140%; }
 .paragraph div div:first-letter { font-size: 100%; font-family:Arial, Helvetica, sans-seif; float: none !important; margin: 0px; line-height:130%; color: #000;}
 #lastComments ul li {width: auto !important;}

выглядит это так
читать дальше

3. Что происходит после:
#postArea {width:888px; min-height: 100%; background:url('/userdir/5/9/2/1/592173/83356697.jpg') left top repeat-y;}
вместе с #wrapper {width:888px !important;}
читать дальше

или,
#page-t {width:888px; min-height: 100%; background:url('/userdir/5/9/2/1/592173/83356697.jpg') left top repeat-y;}
вместе с #wrapper {width:888px !important;}
становится так (кстати, это и было "еще страшнее")
читать дальше

После:
#page-c {width:888px; min-height: 100%; background:url('/userdir/5/9/2/1/592173/83356697.jpg') left top repeat-y;}
вместе с #wrapper {width:888px !important;}
читать дальше

После (и это - "еще страшнее"):
#wrapper {width: 888px; min-width: 888px !important; background:url('/userdir/5/9/2/1/592173/83356697.jpg') right top repeat-y;}
читать дальше

Чтобы я не делала, результат не подходит, это видно на скринах. Проблема видимо в том, что раньше БИ принимала изображения 1000 пикс., был отработанный дизайн, который идеально садился на картинках 1000 пикс. вот такой.
читать дальше
Сейчас я решила его видоизменить, но ничего не выходит. Очень нужна помощь, я не справлюсь сама. Буду признательна, если Вы меня не бросите на полпути. :white:

Доступ на просмотр дневника сделала.

URL

2015-09-19 в 08:20

Маркоша

Мне говорили - похожа на мандаринку

1. Вам что нужно получить? чтобы был единый фон для всех постов? чтобы он захватывал меню? 2. Честно говоря, без кода и по картинкам это все гадание на кофейной гуще 3. При каком варианте не помогает? При каком "так"? "Еще страшнее" это как? куда?
Скорректировала ответ на 1 пункт:
читать дальше

URL

2015-09-19 в 10:13

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

Сейчас у вас задано
#wrapper {width: 888px; min-width: 888px !important; background:url('/userdir/5/9/2/1/592173/83356697.jpg') right top repeat-y;}
Фон на скриншоте задан верно, у вас съехал extratop.
У меня ваш дневник корректно отображается в хроме и файрфоксе.
Кстати, куда делось меню на предпоследнем скрине?
вот тут
После (и это - "еще страшнее"):

URL

2015-09-19 в 10:20

Маркоша

Мне говорили - похожа на мандаринку

Aista, оно исчезло (про меню).

Корректно отображается, потому что я уже вродебы (ттт) все поправила. Методом научного тыка. И с вашей помощью. right помог, только пришлось потрогать всякие отступы в других элементах.

URL

2015-09-19 в 10:23

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

кстати, пользуйтесь инструментами разработчика. В Файрфоксе в область страницы кликните правой кнопкой и выберите "Исследовать элемент". Вывалится дерево DOM с удобной подсветкой элементов на странице, там же, в этой утилите, можно "на лету" вносить правки и видеть результат, а потом уже переносить их в код

URL

2015-09-19 в 10:23

Маркоша

Мне говорили - похожа на мандаринку

Aista, спасибо огромное! Да, все решено. :white:

URL

2015-09-19 в 10:25

Aista

Не так страшен чёрт, как его трезубец в заднем проходе.

Кошмаринка, не за что

URL

2015-09-19 в 10:25

Маркоша

Мне говорили - похожа на мандаринку

кстати, пользуйтесь инструментами разработчика. В Файрфоксе в область страницы кликните правой кнопкой и выберите "Исследовать элемент". Вывалится дерево DOM с удобной подсветкой элементов на странице, там же, в этой утилите, можно "на лету" вносить правки и видеть результат, а потом уже переносить их в код
Спасибо за совет. Я вообще плохо шарю во всем этом, дизайн раз в два года меняю примерно. Но нравится, да. еще раз спасибо!

URL


Запомнить