Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Проблемы при верстке div'ов


Автор: Хоббит 1.8.2006, 18:28
Столкнулся с некторыми трудностями.
1. Выравнивание по вертикали содержимого дива. (vertical-align не пашет, помогает line-height) правильно ли это?
2. Надо поставить в ряд 3 дива при чем средний растягиваетсься на всю ширину как может. (все дивы являются ссылками)

делаю так

Код

          <div id = "FotoListControl">            
            
            <a href = "javascript:initMoveBack(\'FotoListBlock\')"><div class = "moveBack"></div></a>
            
            <div class = "navigation">
              <div id = "FotoListNavigation">              
                '.$listingItems.'
              </div>
            </div>

            <a href = "javascript:initMoveForvard(\'FotoListBlock\')"><div class = "moveForvard"></div></a>
            
          </div>


стили пишу так (использую отрицательный margin)

Код

#FotoListControl
{
  clear: both;
  width: 100%;
  height: 30px;
  border-top: 1px solid #DBDBDB;
  margin: 0px;
  padding: 0px;
}

div#FotoListControl .moveBack
{  
  width: 29px;
  height: 20px;
  margin-top: 5px;
  margin-left: 30px;
  background-image: url(/images/scroll/scroll_back_enable.gif);
  float: left;
}

div#FotoListControl .moveBack:hover
{  
  background-image: url(/images/scroll/scroll_back_enable_hover.gif);
}


div#FotoListControl .moveForvard
{
  width: 29px;
  height: 20px;
  margin-top: 5px;
  margin-right: 30px;
  background-image: url(/images/scroll/scroll_forvard_enable.gif);
  float: right;
}

div#FotoListControl .moveForvard:hover
{
  background-image: url(/images/scroll/scroll_forvard_enable_hover.gif);
}

#FotoListControl .navigation
{
  float: left;
  width: 100%;
  margin: 0px -60px;                    // -60 врускает элемент с лева и справа (они становяться в один ряд)
  height: 30px;
}

#FotoListNavigation
{
  list-style: none;
  width: 65px;
  height: 7px;
  padding: 0px;
  margin: 10px auto;
  margin-bottom: 0px;
}

#FotoListNavigation .item
{
  width: 7px;
  height: 7px;
  margin-left: 3px;
  float: left;
  background-image: url(/images/scroll/scroll_item.gif);
}


Так вот теперь правая ссылка работает... а лефая нет

Автор: Хоббит 1.8.2006, 18:29
в разных браузерах все выглядит по разному ...
я мало старался... или мне придется много мучиться?


M
Illuminaty		Соединил темы.
В следующий раз будет предупреждение за дублирование. Тем более в этом посте простой флейм

Автор: Хоббит 2.8.2006, 16:53
Нужно дивами сверстать такую вещь.
в одном контейнере 3 дива .... левый и правый 30 пиксел средний на всю ширину.... в левом и правом диве находиться по картинке, которая должна быть ссылкой ....

Разместить элементы получается, а вот сделать так чтобы ссылки работали (в Explorerе) не получается

 ! 
Illuminaty		Хоббит, вы получайте предупреждение за дублирование тем

Автор: Burrr 2.8.2006, 16:59
Ты б кусок кода, который сверстал, привел в пример.

Автор: Хоббит 2.8.2006, 19:04
гляди выше

Автор: Illuminaty 4.8.2006, 13:11
Код
<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
<title>Проблемы при верстке div'ов</title>
<style type="text/css">
.navigation {
    width: 30px;
    background-color: #339999;
    height: 30px;
}
#left {
    float: left;
}
#right {
    float: right;
}
#center {
    margin: 0px 30px;
    background-color: #FFCC66;
    text-align: center;
    height: 30px;
}
a {
    display: block;
    text-decoration: none;
    color: #000000;
    text-align: center;
}
.navigation img  {
    width: 30px;
    height: 30px;
    border-width: 0px;
}
</style>
</head>
<body> 
<a class="navigation" id="left" href="#"><img alt="<-" src="1.gif" /></a> 
<a class="navigation" id="right" href="#"><img alt="->" src="1.gif" /></a> 
<div id="center">Превед</div> 
</body>
</html>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)