VPF::Как правильно расположить картинки?

Ilfirin

Дата 3.8.2009, 22:13 (ссылка)

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

Загрузка ...

Strider

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

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

Здравствуйте. Я пока еще не очень хорошо разбираюсь в CSS. У меня есть стандартная страница.
Заголовок(#header) + тело документа(#main) + подвал(#footer).
Все фиксированой ширины (900px).

Так вот в теле документа нужно разместить 8 изображений ссылок размером 250x200:

В 3 ряда. Левые 3 изображения выровнены по левому краю. Правые 3 - по правому. Средние 2 - по середине.

Долго мучился, но ничего не получается. Картинки, то не хотят выравниваться в центре, то вообще съезжают вниз. В opera по-одному, в IE по-другому... Cобственно, шаблон вроде бы такой.

Код


<div id="main">
<p> /* 1 строка */
    <div class="left"><a href="#"><img src="test.jpg"/></a></div>
    <div class="center"><a href="#"><img src="test.jpg"/></a></div>
    <div class="right"><a href="#"><img src="test.jpg"/></a></div>
</p> <p>  /* 2 строка */
    <div class="left"><a href="#"><img src="test.jpg"/></a></div>
    <div class="right"><a href="#"><img src="test.jpg"/></a></div>
</p> <p>  /* 3 строка */
    <div class="left"><a href="#"><img src="test.jpg"/></a></div>
    <div class="center"><a href="#"><img src="test.jpg"/></a></div>
    <div class="right"><a href="#"><img src="test.jpg"/></a></div>
</p>
</div>

А вот как настроить в CSS эти p left right center, чтобы работало как надо? я не знаю... Подскажите, пожалуйста.

Это сообщение отредактировал(а) Ilfirin - 3.8.2009, 22:21

olegti

Дата 3.8.2009, 23:20 (ссылка)

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

Загрузка ...

Шустрый

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

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

в css есть такое свойство "float" с параметрами "left,right, none b inherit",с помощью которого можно задавать выравнивание элемента!, в твоём случаи можно сделать по разному, к примеру вот так

Код



        <div id="main">
<p> /* 1 строка */
    <div style="float:left;width:260px"><a href="#"><img src="test.jpg"/></a></div>
    <div style="float:left;width:260px"><a href="#"><img src="test.jpg"/></a></div>
    <div style="float:right;width:260px"><a href="#"><img src="test.jpg"/></a></div>
</p> 
</div>

Ilfirin

Дата 3.8.2009, 23:54 (ссылка)

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

Загрузка ...

Strider

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

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

А по центру как выровнять?

Ilfirin

Дата 4.8.2009, 00:24 (ссылка)

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

Загрузка ...

Strider

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

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

Ок. Cделал так.

Код



       <div style="float:left;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
       <div style="float:right;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
       <div style="margin-left: auto; margin-right: auto; width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
       
      <div style="float:left;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
       <div style="float:right;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>

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

Код


Первая
       <div style="float:left;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
       <div style="float:right;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
       <div style="margin-left: auto; margin-right: auto; width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
 Вторая      
      <div style="float:left;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
       <div style="float:right;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>

Третья
       <div style="float:left;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
       <div style="float:right;width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>
       <div style="margin-left: auto; margin-right: auto; width:250px"><a href="#"><img src="img/menu_null.jpg"/></a></div>

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

blah

Дата 4.8.2009, 00:43 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Код


<div class="holder">
            <ul>
                <li><img src="images/img.jpg" alt=""/></li>
                <li><img src="images/img.jpg" alt=""/></li>
                <li><img src="images/img.jpg" alt=""/></li>
                <li><img src="images/img.jpg" alt=""/></li>
                <li>&nbsp;</li>
                <li><img src="images/img.jpg" alt=""/></li>
                <li><img src="images/img.jpg" alt=""/></li>
                <li><img src="images/img.jpg" alt=""/></li>
                <li><img src="images/img.jpg" alt=""/></li>
            </ul>
        </div>

Код


.holder{
    width:900px;
    overflow:hidden;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
    width:978px;
    overflow:hidden;
}
ul li{
    width:250px;
    height:200px;
    float:left;
    margin:0 76px 0 0;
}

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