[Nicole S.]

Добрый вечер!

В CSS разбираюсь ужасно, собираю буквально по кусочкам. Вроде всё ТТТ получилось, кроме одной проблемы:

картинка

1. как убрать этот ужасно большой отступ? Как сделать чтобы Запись заходила немного на экстработтом? Т.е. чтобы блок записи заканчивался за 30px до конца экстработтома, к примеру?

Методом проб выяснила, что ошибка где-то тут -

#postsArea, #commentsArea, #newCommentsArea, #addCommentArea { position: relative; top: -420px; width: 500px; left:120px; }

когда убираю position: relative то текст записи достает до экстработтома. но съезжает влево =(

код:

body{margin:0; padding:0px;}</div><div> #extratop { background: url('/userdir/2/9/0/0/2900456/73030400.jpg';) no-repeat; width: 1000px; height: 876px; margin-top:0px !important;}</div><div> #page-t {margin: 0 !important;}</div><div> #page-t{background: url('/userdir/2/9/0/0/2900456/73030402.jpg';) repeat-y; width: 1000px !important;padding:0 !important;padding:0 !important;}</div><div> #extrabottom { background: url('/userdir/2/9/0/0/2900456/73030403.jpg';) no-repeat; width: 1000px; height: 343px; margin-top:0px !important;}</div><div> #wrapper{min-width:1000px !important; width:1000px; margin:0 auto !important; padding:0 !important;}</div><div> {----------------------МЕНЮ------------------------}</div><div> #side {position: relative; top: -410px !important; right: 100px !important;}</div><div> #side {font-size:14px !important; text-transform: lowercase;}</div><div> #side li:hover {color: #af3f27 !important; }</div><div> #myDiaryLinks ul, #rssLink, #globalLinks ul, #thisDiaryLinks ul, #thisDiaryOwner ul , #all_links {padding: 0px 0 4px 0px !important; list-style: none !important;}</div><div> .menuSection_title {display: block; padding: 0px 0 px 0px !important; margin: 0 0 6px !important; }</div><div> #side {width: 220px; }</div><div> #authorName {display:none}</div><div> .menuSection{ text-align:center; }</div><div> #thisDiaryPhoto {display:none}</div><div> #side h1 {display:none }</div><div> {----------------------ЗАПИСЬ------------------------}</div><div> #postsArea, #commentsArea, #newCommentsArea, #addCommentArea { position: relative; top: -420px; width: 500px; left:120px;}</div><div> .postTitle, .postTitle span, .postDate { top: -10px; width: 500px; text-align: center; text-transform: lowercase; color:#4b6a7d!important;}</div><div> .postLinksBackg {text-align:right; margin: 0 !important; text-transform: uppercase; dashed #4f4f4f; width: 500px !important; font: bold 12px !important;}</div><div> .postLinks a, .authorName a {color: #5a7a77;}</div><div> a:link,a:visited{text-decoration:none !important;}</div><div> a:hover{cursor: pointer;}</div><div> #TagsList{ solid #baafaf;padding: 3px 0 0 0 !important; width:500px !important; }</div><div> .atTag span, .atMusic span {font-size: 13px; font-weight:bold; text-transform:lowercase; }</div><div> .atTag a, .atMusic {font-size: 13px; color:#704e33; text-transform:lowercase; }</div><div> .quote_text {-moz-border-radius: 0px; border-radius: 0px; background-color: #4f4f4f; text-decoration: none !important;}</div><div> #mainpageLink A{ font-weight:bold}</div><div> a:hover {text-decoration: none; color:#bfd7b6!important }</div><div> .pageBar { font-weight:bold; font-family: !important;}</div><div> .singleComment .header span { float:left; font: 15px !important; color: #353535 !important; margin: 0px 0px 0px 0px !important; background: none; padding: 0 !important; text-shadow: none;}</div><div> .singlePost {background: url('/userdir/2/9/0/0/2900456/73032554.png';) no-repeat; background-position:bottom; !important; padding-bottom: 70px !important;}</div><div> {----------------------------------------------}</div><div> #thisDiaryOwner_title, #thisDiaryLinks_title, #thisDiaryOwner, #myDiaryLinks_title, #globalLinks_title, #authorName, #side h1, #topNav, #communityCatalogueLink, #unsubscribeEmail, #diarySpiritLink, #diarySupportLink, #randomDiaryLink, .urlLink, #upInChart, #favListLink, #faqLink,#YaSearch, #pchListLink, .order_button, #subscribeEmail, #thisDiaryPhoto, .atMood {display:none}</div><div> {------------------------------------------------------}</div><div> #JournalComments .avatar img { width: 100px; height: 100px; }</div><div> #JournalFavorite .avatar img, #JournalQuote .avatar img { width: 100px; height: 100px; }</div><div> .header h2 {margin: 0px 0px 0px 0px !important; font: bold 12px !important; display: block !important; line-height: 15px !important; overflow: hidden !important; height: 16px !important;}</div><div> .editPostLink, #sortOrder, #bottomNavLinks {display: inline; }

UPD: Отступ убрала исправив строку с Экстработтомом - margin-top:-50px дописала

запись создана: 07.01.2012 в 18:49

@темы: diaryCSS, основные блоки

Comments

#postsArea, #commentsArea, #newCommentsArea, #addCommentArea { position: relative; top: -420px; width: 500px; left:120px; }

Если вместо 420 поставить 0, то что получается?

[Nicole S.]

vykos, блок записей уезжает вниз, но заканчивается ровно перед началом экстработтома =(

а мне нужно чтобы блок записей заезжал на экстратоп (это как раз и получается с -420) и экстработтом =(

Попробуйте прописать position: relative для wrapper, а в данной строке заменить на position: absolute и отредактировать значения top и left.
Пустое место остаётся потому, что при перемещении за счёт relative пространство, которое занимал блок, остаётся неизменным.
Или же уберите позиционирование в этой строке полностью и сделайте margin-top: -420px и margin-left: 120px соответственно.

[Nicole S.]

vykos, Попробуйте прописать position: relative для wrapper, а в данной строке заменить на position: absolute и отредактировать значения top и left.

сделала. все хорошо, только экстработтом теперь где-то в середине экрана оказалася =) а картинка для середины вообще нигде не отображается.

Или же уберите позиционирование в этой строке полностью и сделайте margin-top: -420px и margin-left: 120px соответственно.
тогда запись просто приближается к экстработтому, а мне бы хотелось, чтоб она еще немного на нем была =)

[Nicole S.]

vykos, а если я прописываю еще и margin-bottom, то запись заходит на экстработтом, но вместе с картинкой центра - т.е. получается фигня =(

ох, не стоило выделывать с этой ведьмочкой в экстработтоме. тогда он бы был не высокий и проблемы бы не было =(

margin-bottom

для page-t?

[Nicole S.]

vykos, нет для этой строчки - #postsArea, #commentsArea, #newCommentsArea, #addCommentArea { margin-top: -420px ; margin-left: 120px; margin-bottom: -250px; width: 500px; }

хотя для page-t получается тоже самое - попрбовала.

#page-t{background: url('/userdir/2/9/0/0/2900456/73030402.jpg') repeat-y; width: 1000px !important;padding:0 !important;padding:0 !important;}

А если фон прописать для page-c, а отступ для page-t?

[Nicole S.]

ах да. еще из-за Или же уберите позиционирование в этой строке полностью и сделайте margin-top: -420px и margin-left: 120px соответственно.
нашла косяк - меню же у меня на экстработтоме, поэтому с таким кодом оно перекрывается картинкой центра =(

Меню на экстратопе... если у меня не галлюцинации.

[Nicole S.]

vykos,
А если фон прописать для page-c, а отступ для page-t?
вот так?

#page-с {background: url('/userdir/2/9/0/0/2900456/73030402.jpg') repeat-y; width: 1000px !important;padding:0 !important;padding:0 !important;}

а с page-t тогад что делать? просто написать

#page-t{width: 1000px !important;padding:0 !important;padding:0 !important;}

или вовсе убрать?

[Nicole S.]

vykos, ну да, потому что я опять поменяла код на исходный =)

попробовала сейчас добавить строчку #page-с {background: url('/userdir/2/9/0/0/2900456/73030402.jpg') repeat-y; width: 1000px !important;padding:0 !important;padding:0 !important;}
у меня вообще тогда не отображается этот бэкграунд =(

У меня ломается мозг оО

[Nicole S.]

vykos, хДДД у меня тем более))))

может стоит как-то вообще кардинально поменять весь код?
у меня есть три картинки - топ, центр и боттом.
нужно чтобы меню было на топе, а текст заходил на топ и боттом. это вообще реально?

Короче. Вот так.

body{margin:0; padding:0px;}
 #extratop { background: url('/userdir/2/9/0/0/2900456/73030400.jpg') no-repeat; width: 1000px; height: 876px; margin-top:0px !important;}
 #page-t {margin: 0 !important; }
 #page-t {width: 1000px !important;padding:0 !important;padding:0 !important; margin-bottom: -500px !important;}
 #extrabottom { background: url('/userdir/2/9/0/0/2900456/73030403.jpg') no-repeat; width: 1000px; height: 343px; margin-top:-10px !important;}
 #wrapper {min-width:1000px !important; width:1000px; margin:0 auto !important; padding:0 !important; background: url('/userdir/2/9/0/0/2900456/73030402.jpg') repeat-y; }
 {----------------------МЕНЮ------------------------}
 #side {position: relative; top: -410px !important; right: 100px !important;}
 #side {font-size:14px !important; text-transform: lowercase;}
 #side li:hover {color: #af3f27 !important; }
 #myDiaryLinks ul, #rssLink, #globalLinks ul, #thisDiaryLinks ul, #thisDiaryOwner ul , #all_links {padding: 0px 0 4px 0px !important; list-style: none !important;}
 .menuSection_title {display: block; padding: 0px 0 px 0px !important; margin: 0 0 6px !important; }
 #side {width: 220px; }
 #authorName {display:none}
 .menuSection{ text-align:center; }
 #thisDiaryPhoto {display:none}
 #side h1 {display:none }
 {----------------------ЗАПИСЬ------------------------}
 #postsArea, #commentsArea, #newCommentsArea, #addCommentArea { margin-top: -420px; width: 500px; margin-left: 120px;}
 .postTitle, .postTitle span, .postDate { top: -10px; width: 500px; text-align: center; text-transform: lowercase; color:#4b6a7d!important;}
 .postLinksBackg {text-align:right; margin: 0 !important; text-transform: uppercase; dashed #4f4f4f; width: 500px !important; font: bold 12px !important;}
 .postLinks a, .authorName a {color: #5a7a77;}
 a:link,a:visited{text-decoration:none !important;}
 a:hover{cursor: pointer;}
 #TagsList{ solid #baafaf;padding: 3px 0 0 0 !important; width:500px !important; }
 .atTag span, .atMusic span {font-size: 13px; font-weight:bold; text-transform:lowercase; }
 .atTag a, .atMusic {font-size: 13px; color:#704e33; text-transform:lowercase; }
 .quote_text {-moz-border-radius: 0px; border-radius: 0px; background-color: #4f4f4f; text-decoration: none !important;}
 #mainpageLink A{ font-weight:bold}
 a:hover {text-decoration: none; color:#bfd7b6!important }
 .pageBar { font-weight:bold; font-family: !important;}
 .singleComment .header span { float:left; font: 15px !important; color: #353535 !important; margin: 0px 0px 0px 0px !important; background: none; padding: 0 !important; text-shadow: none;}
 .singlePost {background: url('/userdir/2/9/0/0/2900456/73032554.png') no-repeat; background-position:bottom; !important; padding-bottom: 70px !important;}
 {----------------------ЭЛЕМЕНТЫ НЕ------------------------}
 #thisDiaryOwner_title, #thisDiaryLinks_title, #thisDiaryOwner, #myDiaryLinks_title, #globalLinks_title, #authorName, #side h1, #topNav, #communityCatalogueLink, #unsubscribeEmail, #diarySpiritLink, #diarySupportLink, #randomDiaryLink, .urlLink, #upInChart, #favListLink, #faqLink,#YaSearch, #pchListLink, .order_button, #subscribeEmail, #thisDiaryPhoto, .atMood {display:none}
 {------------------------------------------------------}
 #JournalComments .avatar img { width: 100px; height: 100px; }
 #JournalFavorite .avatar img, #JournalQuote .avatar img { width: 100px; height: 100px; }
 .header h2 {margin: 0px 0px 0px 0px !important; font: bold 12px !important; display: block !important; line-height: 15px !important; overflow: hidden !important; height: 16px !important;}
 .editPostLink, #sortOrder, #bottomNavLinks {display: inline; }
 

[Nicole S.]

vykos, последняя запись вылезла за экстработтом. =(

#page-t {width: 1000px !important;padding:0 !important;padding:0 !important; margin-bottom: -500px !important;}

Уменьшить с 500?
Я от фонаря поставил.

[Nicole S.]

vykos, даааааа!!!! спасибищеее!!!!

Ну ладно, раз мы тут уже так приятно беседуем, то у вас меню выползает за рамки отведённого ему места, потому что там есть ссылки, которые не видите вы, как владелец, но видят посетители.
Сделайте #thisDiaryLinks, #lastComments {display: none;}
Последние комментарии у вас отключены в настройках, но отображаются на дневнике у всех, у кого они включены.

[Nicole S.]

vykos, я прям даже не знаю как вас благодарить =) еще раз спасибо!

Не за что.