Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Помогите разобраться со слоями

Автор: Medved 12.11.2006, 19:02

Привет!

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

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 соответствовал тому, что нарисовано на макете?

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

Спасибо!

Автор: Wowa 12.11.2006, 19:16

Цитата(МедведЬ @ 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

Спасибо!

Получилось.

Код


<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;
}

Автор: R.M. 13.11.2006, 11:21

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

Автор: Medved 13.11.2006, 21:53

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