Шапка форума слетела

[Mapta]

Не кидате тапками, я новичок.
Искала ответ, но не нашла пока в конкретно своем случае.

После изменения ширины форума шапка слетела. Состоит шапка из 5-ти частей (если я правильно поняла). Вообщем в фотошопе все части слепила в один файл. Попробовала в style.css изменить параметры, удалила куски где прописывались наприм. шапка1, шапка2....но получалось так что средина выше, а боковинки на старом месте. Вернула все назад.
Как сделать, чтобы шапка отображалась правильно и не слетало ничего? http://mamka.info/?

[Mavn]

здесь код приводите чего как правите и чего в результате хотите получить и скрины не помешало бы

[Mapta]

Вообщем разширила форум получилось вот-так



в коде style.css было:

Код Выделить Развернуть

#header {
        position:relative;
        height:329px;
        overflow:hidden;
        background: url(./images/head.png) repeat-x;
}
#head-r {
        height:329px;
        background:url(./images/head-l.png) 0 0 no-repeat;
        position:relative;
}
#head-l {
        height:329px;
        background:url(./images/head-r.png) 100% 0 no-repeat;
        position:relative;


Потом,head-l.png, head-r.png - удалила.
В фотошопе шапку слепила все 3 части в одну картинку
и оставила в коде только + дописала ширину, и повтор запретила:

Код Выделить Развернуть

#header {
  position:no-repeat;
  height:329px;
  width: 1200px;
  overflow:hidden;
  background: url(./images/head.png) repeat-x;

в итоге шапка полетела влево и вверх.



1. шапку надо опустить и подвинуть вправо
2. надо чтобы совпадало с цветочками
3. повтор убрать как-то

Короче, сделать людский вид, чтобы шапка была 1 файлом и стояла на месте.

[Mapta]

шапку опустить получилось, в коде изменила высоту

Код Выделить Развернуть

#header {
        position:no-repeat;
        height:302px;
        width: 1200px;
        overflow:hidden;
        background: url(./images/head.png) repeat-x;


но вот цветочки пока не совпадают, если больше опустить то получиться не красиво

[Mapta]

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

Код Выделить Развернуть

/* The main body of the entire forum. */
body
{
   min-width: 1000px;
   max-width: 1200px;
   background: #eeeeee;
   margin: 0px;
  align: center
}

Код Выделить Развернуть

}
#wrapper {
    width: 1200px;
    min-width: 1100px;
    margin: 0 auto;
}

[0daliska]

background-repeat:no-repeat; - это для того, чтобы не повторялся рисунок,
а то, что вы написали:
position:no-repeat; - это работать не может...
Значения, которые могут быть для position - это absolute, fixed, relative или static...
Прежде чем править, надо синтаксис смотреть...
Плюс в индекс темплейт  идентификаторы (#head-l b и #head-r) у вас остались, а поскольку в css они не определены, то и наследуют родительские стили body...
Опять же вопрос, если вы хотите оставить одну картинку, то как Вы будете при изменении ширины регулировать ширину шапки? Это возможно только в случае, если у Вас будет прописана в бэкграунде картинка не меньше, чем максимально допустимая ширина форума (у Вас же прописывается слой шириной 1200, в который в реале помещается картинка размером 1100... В общем, Вам прежде, чем что-то менять, надо почитать информацию по html и css...
Начните с этого... Вот, к примеру, http://htmlbook.ru/

У меня на разрешении 1280х1024 смотрится еще хуже


пустое место - это как раз дырочка в размере в 10 пикселей - разница между рисунком и шириной отображаемого слоя.


Да, и чтобы форум выровнять, после align: center;     поставьте точку с запятой после center, поскольку без этого параметр не работает!!!!!

[0daliska]

Как сделать:
1. Верните все, как было в css и рисунки все верните на место.
2. Возьмите рисунок (он у Вас называется head.png - не новый, который вы слепили, а старый из темы!!!!)
3. Идите в фотошоп и скопируйте его правую часть, отобразите зеркально и приклейте справа отображенную зеркально часть. Должно получиться так, как на приложенном рисунке (можете взять и его).
4. Полученный удлиненный рисунок сохраните под именем head.png

[0daliska]

Кроме того, замените Вы логотип темы на свой собственный...
Создайте в фотошопе файл с прозрачным фоном размером 297х150
На нем напишите Название Вашего форума тем цветом, которым хотите. Сохраните его в той же папке, что и рисунки под именем logo.gif
Можете взять примерить приложенный файл.
В style.css найдите

Код Выделить Развернуть

#logo {
position: absolute;
top: 0px;
left: 142px;
display: block;
width: 297px;
height: 150px;
cursor: pointer;
background: url('images/logo.png') no-repeat;
}

   

Код Выделить Развернуть

background: url('images/logo.png') no-repeat;

замените на:

Код Выделить Развернуть

background: url('images/logo.gif') no-repeat;

Замена прозрачного png на gif требуется, поскольку в IE 6 прозрачные png не читаются, а следовательно будут проблемы у тех пользователей, которые заходят на форум...

Если буквы будут выдаваться вверх за рамки обрамления форума, то поиграйте с параметром top в стилях идентификатора #logo

Код Выделить Развернуть



top: 0px;


попробуйте поставить значение больше, например,  top: 10px; или 20px; или больше, по необходимости...

Покажите, когда переделаете... Очень хочется посмотреть, поскольку со слоями мало работала, предпочитаю табличную верстку...

[Mapta]

0daliska, низкий вам поклон! Прямо не знаю как вас благодарить!
Но только вот осталось проблема с центровкой форума, поставила после align: center; но это не помогло.

[0daliska]

попробуйте поставить в #ustsol {
поставить
align: center;

Не уверена, но попытка не пытка...

[Mapta]

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

P.S. не получилось

[0daliska]

Вижу, не то... 
Удаляйте...
Да, наверное перезалейте css... рисунки править не придется, а ширину поправить - минутное дело

Я блондинка... 
Моя ошибка:
- для css нет такого параметра align, есть text-align, но он равняет текст, а не объекты 

Можно еще попробовать поправить индекс темплейт пхп...
В нем после тега <body> написать <center> - это строка 172
Будет так:

Код Выделить Развернуть

echo '
</head>
<body><center>
  <div id="wrapper"/>
и в строке 321 поставить закрытие перед тегом </center></body>
Будет так:

Код Выделить Развернуть

echo '
</center></body>
Если это не поможет, я сдаюсь... Мне надо будет долго и упорно думать... А от этого я и брюнеткой заделаться могу... 

[Mapta]

писала-писала и комп вырубился....
всем такими блондинками быть как вы
сейчас я сделаю все что вы написали,а то завис и я не поняла или что-то дало

Что-то вообще не открывется форум, видать хостинг тормозит - не хорошо 

[0daliska]

Mapta, ну что же Вы не написали, что вы тегу боди задали размер сами???
Зачем???
Заметила это только сейчас...

Вы же в Wrapper это уже прописали... Уберите это из боди это:

Код Выделить Развернуть

max-width:1200px;
min-width:1000px;

в #wrapper пропишите так:

Код Выделить Развернуть

max-width:1200px;
min-width:1000px;

и в индекс темплейт пхп Вашей темы впишите, как я в прошлом сообщении указала... Должно более или менее выровняться...

[Mapta]

  стыдно, это мое первое знакомство с пхп-кодами и html... вот и напрписывала целую кучу. Форум так я открыть и не могу, что-то вчера был такой глюк и сегодня вечером....пока жду, когда откроется форум ... (надо з хостингом решать что-то)
УРА, заработал, сейчас буду делать

[0daliska]

А Вы по Ftp слейте, да поправьте и перезалейте... Или даже по ftp не получается???
У меня страничка с Вашим форумом махом открывается.

[Mapta]

ВСЕ!!! УРА! Все по центру и шапка в норме! После изменения в темплейте получилось и в боди правки сделала, короче все, что вы написали все сделала

[0daliska]

Поздравляю!!!
От души рада!!! Изучайте html и все получится!!! Удачи!!! 

[Mapta]

 Новини:
Раді бачити Вас на форумі для батьків!
стали по центру, а были слева, а их как вернуть ?

------------

сделала, теперь точно все ОК!

[0daliska]

У Вас отсутствует определение для #userpanel
для него прописываем в style.css
#userpanel {
text-align: left;
}

[0daliska]

Проверяйте, что еще поехало, а то я спасть пойду 

[Mapta]

я забрала в темплейт после слова боди -  центр и все получилось

Код Выделить Развернуть

echo '
</head>
<body>
  <div id="wrapper"/>

[Mapta]

вроде пока ничего не вылазит, все вроде ок! На этом остановимся. Если что-то найду, завтра напишу. Спокойной ночи Вам!

[0daliska]

Тогда и в конце тоже уберите закрывающий тег...
Так что все оказалось очень просто... С самого начала надо было прописать ширину только в wrapper
Нарастить зеркально рисунок в серединке, чтобы корректно отображалось... И более ничего делать не надо было... Видите, как все просто
А поиск косяков и исправление ошибок гораздо дольше!!! Но на ошибках учатся... Теперь-то Вы точно займетесь изучением html...
Удачи!!!
Спокойной ночи!!!