VPF::Проблемы при верстке div'ов - Форум программистов

Хоббит

Дата 1.8.2006, 18:28 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1263
Регистрация: 6.11.2005

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

Столкнулся с некторыми трудностями.
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 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1263
Регистрация: 6.11.2005

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

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

M
Illuminaty

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

Это сообщение отредактировал(а) Illuminaty - 1.8.2006, 19:00

Хоббит

Дата 2.8.2006, 16:53 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1263
Регистрация: 6.11.2005

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

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

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

!
Illuminaty

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

Это сообщение отредактировал(а) Illuminaty - 2.8.2006, 18:09

Burrr

Дата 2.8.2006, 16:59 (ссылка)

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

Загрузка ...

Опытный

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

Репутация: 5
Всего: 20

Ты б кусок кода, который сверстал, привел в пример.

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

JavaScript на fastcoder, sqlinfo.ru

Хоббит

Дата 2.8.2006, 19:04 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1263
Регистрация: 6.11.2005

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

гляди выше

Illuminaty

Дата 4.8.2006, 13:11 (ссылка)

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

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Код

<!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>

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