VPF::Помогите разобраться со слоями

Medved

Дата 12.11.2006, 19:02 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 7209
Регистрация: 15.9.2002
Где: Kazakhstan, Astan a

Репутация: нет
Всего: 154

Привет!

Хочу сверстать вот такой макет:

user posted image

Виноградная трость храниться в файле v_logo.png
Надпись "Vingrad Kazakhstan" храниться в файле v_title.png
Навигационное меню выводиться следующим кодом:

Код


<?php mosLoadModules('top', -1); ?>

Форма поиска выводиться так:

Код


<?php mosLoadModules('searchform',-1); ?>

Вот обвертка (index.php):

Код


<div align="center">
  <div id="wrapper">
      <div id="padding">
         </div>
    </div>
</div>

Стили:

Код


#center {
    margin: auto;
}

#wrapper {
  min-width: 750px;
  max-width: 1050px;
  width: expression(document.body.clientWidth > 1050? "1050px": "auto" );
}

#padding {
    float: left;
    padding: 0 15px;
}

Вкладываю новый слой:

Код


<div align="center">
  <div id="wrapper">
      <div id="padding">
               <div id="topheader_logo"></div>
         </div>
    </div>
</div>

Код


#topheader_logo {
    background: url(../images/v_logo.png) no-repeat top left;
}

Но вообще картинку даже не выводит.

Вопрос, как сделать так, чтобы код в index.php соответствовал тому, что нарисовано на макете?

Я ковырял, ковырял, да что-то никак не получается. Вроде бы ничего сложного нет, а целый день на это потратил.

Спасибо!

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

http://extreme.sport-express.ru/
...и неважно сколько падал, важно сколько ты вставал...

Wowa

Дата 12.11.2006, 19:16 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Цитата(МедведЬ @ 12.11.2006, 18:02

)

Но вообще картинку даже не выводит.

Из-за того, что путь не находит? Укажи или
background: url(/v_logo.png) no-repeat top left;

или полный урл: background: url(http://vingrad.kz/images/v_logo.png) no-repeat top left;

Но кажется мне, что причина в другом, у тебя не определены размеры элемента id="padding". Т.е. ширина и высота.

Medved

Дата 13.11.2006, 01:14 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 7209
Регистрация: 15.9.2002
Где: Kazakhstan, Astan a

Репутация: нет
Всего: 154

Спасибо!

Получилось.

Код


<div align="center">
  <div id="wrapper">
      <div id="padding">
 
            <div id="topheader_logo"></div>
            
            <div id="topheader_content">
                <div id="topheader_title"></div>
                <div class="clr"></div>
                <div id="topheader_navbar">
                    <?php mosLoadModules('top', -1); ?>
                </div>
                <div class="clr"></div>
                <div id="topheader_search">
                    <?php mosLoadModules('user4',-1); ?> 
                </div>
            </div>
    
         <div class="clr"></div>
         <div id="topheader"></div>

        </div>
    </div>
</div>

Код


#topheader {
    margin-bottom: 10px;
}

#topheader_logo {
    float: left;
    margin-left: 25%;
    margin-top: 10px;
    width: 120px;
    height: 138px;
    background: url(../images/vingrad_logo.png)  no-repeat;
}

#topheader_content {
    position:relative;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}


#topheader_title {
    float: left;
    width: 233px;
    height: 75px;
    background: url(../images/vingrad_title.png) no-repeat top left;
}

#topheader_navbar {
    float: left;
    white-space: nowrap;
    margin-left: -15px;
    margin-top: 15px;
}

#topheader_navbar ul {
    list-style: none;
}

#topheader_navbar li {
    float: left;
}

#topheader_navbar a {
    margin-right: 20px;
}

#topheader_search {
    float: left;
    margin-top: 5px;
    margin-left: 9px;

}
#topheader_search input {
    width: 400px;
}

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

http://extreme.sport-express.ru/
...и неважно сколько падал, важно сколько ты вставал...

R.M.

Дата 13.11.2006, 11:21 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

А это вообще для чего? И где можно глянуть? smile

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

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

Medved

Дата 13.11.2006, 21:53 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 7209
Регистрация: 15.9.2002
Где: Kazakhstan, Astan a

Репутация: нет
Всего: 154

пока на локальном компе хоститься. это только шапка. как закончу все, выложу обязательно smile

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

http://extreme.sport-express.ru/
...и неважно сколько падал, важно сколько ты вставал...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »