Question

Здравствуйте, есть сайт baza-sobolek.ru
не могу сделать нормальный логотип сайта, то есть, не могу подогнать размеры, в css стилях не пойму, что нужно изменить/дописать чтобы белый фон не прерывался под логотипом.
Можете подсказать где какие значения исправить
 

 

Таблица стилей (CSS)

/* General Style */
body {background: url('/.s/t/819/1.jpg'); margin:0px; padding:0px; text-align: center;}
.wrap {width: 900px; margin-left: auto; margin-right: auto; text-align: left;}
.header {/*height: 150px;*/ background: url('/.s/t/819/2.png') no-repeat 0px 44px; position: relative;}
 .header-bottom {height: 22px; background: url('/.s/t/819/3.gif') no-repeat;}
 .forum-header-bottom {height: 22px; background: #fff;}
table.main-table {border: 0px; padding: 0px; border-collapse: collapse; width: 900px; border-spacing: 0px; margin-left: auto; margin-right: auto;}
td.content-block {vertical-align: top; padding: 0px 20px 0px 20px; background: #fff;}
td.side-block {vertical-align: top; width: 250px; padding: 0;}
td.forum-block {vertical-align: top; padding: 0px 20px 0px 20px; background: #fff;}
 .content-bottom {height: 17px; background: url('/.s/t/819/4.gif') no-repeat;}
 .forum-content-bottom {height: 17px; background: url('/.s/t/819/5.gif') no-repeat;}
.side-bottom {background: url('/.s/t/819/6.gif') no-repeat; height: 25px;}

img {vertical-align: top;}

.header h1 {color: #005040; font-size: 28pt; font-weight: normal; /*position: absolute;*/ margin: 0; padding: 0; /*bottom: 27px; left: 50px; width: 500px;*/ }
.date {position: absolute; top: 15px; right: 0; background: #58504b; padding: 2px 5px; color: #d7c3b7;}
.user-bar {position: absolute; right: 20px; top: 52px; font-size: 8pt;}
.navigation {position: absolute; top: 16px; left: 0;}
 .navigation a {padding: 0 5px; margin-right: 10px;}
 .navigation a:link {text-decoration:none; color:#000;background: #aee939;}
 .navigation a:active {text-decoration:none; color:#000;background: #aee939;}
 .navigation a:visited {text-decoration:none; color:#000;background: #aee939;}
 .navigation a:hover {text-decoration:none; color:#aee939;background: #000;}

.footer {text-align: center; padding: 10px;color:#f9e8d9; font-weight: bold;}
.footer a {padding: 0 3px;}
.footer a:link {text-decoration:none; color:#000;background: #aee939;}
.footer a:active {text-decoration:none; color:#000;background: #aee939;}
.footer a:visited {text-decoration:none; color:#000;background: #aee939;}
.footer a:hover {text-decoration:none; color:#aee939;background: #000;}

.popup-table {background: #fff;border: 0px; padding: 0px; border-collapse: collapse; width: 100%; border-spacing: 0px; }
.popup-header {background: url('/.s/t/819/1.jpg') #857c74;padding:5px 15px;text-align:left;color:#f9e8d9;font-size:12pt;}
.popup-body {background: #fff; padding: 15px;}
.block {background: url('/.s/t/819/6.gif') no-repeat;}
.block-title {background: url('/.s/t/819/7.gif') bottom no-repeat; padding: 16px 10px 30px 0; font-size: 11pt; font-weight: bold;}
.block-title b {background: #aee939; padding: 3px 15px 3px 20px; color: #000; font-weight: normal;}
.block-content {background: url('/.s/t/819/8.gif') bottom no-repeat; padding: 0 10px 15px 10px;}
.block-content table {width: 90%;}

a:link {text-decoration:none; color:#5C9F00;}
a:active {text-decoration:none; color:#5C9F00;}
a:visited {text-decoration:none; color:#5C9F00;}
a:hover {text-decoration:underline; color:#000000;}

td, body {font-family: Trebuchet MS, sans-serif; font-size:10pt;}
form {padding:0px;margin:0px;}
input,textarea,select {vertical-align:middle; font-size:10pt; }
.copy {font-size:9pt;}

a.noun:link {text-decoration:none; color:#2B3414}
a.noun:active {text-decoration:none; color:#2B3414}
a.noun:visited {text-decoration:none; color:#2B3414}
a.noun:hover {text-decoration:none; color:#708525}

h1 {color: #6b6d5e; font-size: 18pt; font-weight: normal;}

hr {color:#D6E37D;height:1px;border:0;background-color:#D6E37D;}
label {cursor:pointer;cursor:hand}

.blocktitle {color:#787878;font-size:12pt;}

a.menu1:link {text-decoration:underline; color:#ecf6f2}
a.menu1:active {text-decoration:underline; color:#ecf6f2}
a.menu1:visited {text-decoration:underline; color:#ecf6f2}
a.menu1:hover {text-decoration:underline; color:#DBDCBE}
.menuTd {padding-left:12px;padding-right:10px; background: url('/.s/t/819/9.gif') no-repeat 0px 3px;}

.mframe {border-left:1px solid #E5E7EA; border-right:1px solid #E5E7EA;}
.colgray {border-right:1px solid #E5E7EA;}
.colwhite {border-right:1px solid #ecf6f2;}
.msep {border-top:1px solid #ecf6f2;}
/* ------------- */

 

Верхняя часть сайта

<div class="header">
 <div class="date">$WDAY$, $DATE$</div>
 <div class="user-bar"><?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!--<s3167>-->Группа<!--</s>--> "<u>$USER_GROUP$</u>"<?else?><!--<s5212>-->Приветствую Вас<!--</s>--> <b>$USERNAME$</b><?endif?> </div>
 <div class="header-placeholder"></div>
 <div id="uncheader" class="$UHEADER_CLASS$">
 <div id="uCozHeaderMain" style="height: 250px; background: url('/uCozHeader.png') no-repeat 50% 50%; width: 860px; margin: 0px auto;">
 <h1 id="uCozHeaderText" style="$UHEADER_STYLE$">$SITE_LOGO$</h1>
 </div>
 </div>
 <div class="navigation"><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a> <?if($USER_LOGGED_IN$)?><a href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a><?else?> <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a><?endif?> <?if($USER_LOGGED_IN$)?> <a href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a><?else?> <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a><?endif?></div>
 </div>

 

Answer 1

Можно сделать следующее, в верхней части сайта найдите код:

<div id="uCozHeaderMain" style="height: 210px; background: url('/uCozHeader.png') no-repeat 50% 50%; width: 860px; margin: 0px auto;">

замени на:

<div id="uCozHeaderMain" style="height: 250px; background: url('/uCozHeader.png') no-repeat 50% 50%; width: 895px; margin: 0;position: relative;top: -23px;background-size: 100%;border-radius: 10px;">

Далее в таблице стилей CSS строка номер 386, найдите стили:

#uncheader { padding-top: 0px; background:url('/.s/t/819/17.png') no-repeat 50% 0px; margin: 0px auto; width: 860px; }
 
замените на:
#uncheader { padding-top: 0px; margin: 0px auto; }

После в строке номер 387 найдите стили:

.AppendUHeader { background:url('/uCozHeader.png') !important; }

Замените на:

.AppendUHeader { height: 210px;}

Сохраните изменения, обновите главную страницу, будет выглядеть вот так:

Вроде лучше чем было, либо как вам советовали выше, работает с фотошопом.

Comments

Странно, изменил все как вы сказали, логотип стал больше, то что нужно, потом решил загрузить немного больше фотографию.

Теперь снова логотип узкий. И когда лазил в стилях что-то изменил появилась черта под надписью [Добавить новость]. как ее убрать, не подскажите?

---

чтобы убрать эту черту, в стилях строка номер 117 находим стили:

.eBlock {background: url('/.s/t/819/12.jpg') top no-repeat;}

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

---

Спасибо!
А как сделать, чтобы данное изображение приняло вид, как на этом изображении?
После того как поменял логотип, он снова стал маленьким

---

так вы поставили фото меньших размеров, вот и имеете соответствующий результат, замените на фото размеров по больше как на скриншоте выше, после можно будет думать как вам помочь

---

Эм, наоборот, я поставил фото размером 900х260, до этого изображение было меньше.

Answer 2

Высоту самой картинки в любом графическом редакторе уменьшите до 210 px и все станет нормально, когда перельете её

Comments

Хотелось бы ширину больше 210px, хотя бы 300-350, чтобы картинка не была сжатой такой

---

И еще проблема, в фотошопе делаю высоту картинки 210 пикселей, когда через конструктор загружаю ее, то она съезжает.Что-то не так делаю?