X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите с кодом в html, отцентровка div'ов.
Мелехин
Мелехин
Topic Starter сообщение 15.2.2012, 10:59; Ответить: Мелехин
Сообщение #1


Здравствуйте, помогите правильно отцентровать дивы, чтобы в разных разрешениях они всегда находились по центру.
Камнями не кидайтесь, только осваиваю эту тему smile.gif
Развернуть/Свернуть
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
  <title>Группа компаний "Ренессанс Элит"</title>
  <style type="text/css">
   .layout {
    overflow: hidden; /* Отмена обтекания */
   }
   .col1, .col2, .col3, .col4, .col5 {
    width: 250px; /* Ширина колонок */
    float: left; /* Создаем колонки */
   }
   .layout div div {
    margin: 0 5px; /* Отступы */
    padding: 0px; /* Поля */
    height: 250px; /* Высота колонок */
    background: #000000; /* Цвет фона */
    color: #f5e8d0; /* Цвет текста */
    overflow: auto;
   }
  </style>
</head>
<body bgcolor="#000">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
  <div class="layout">
   <div class="col1">
    <div>
    <a href="http://vk.com"><img

src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
   <div class="col2">
    <div>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
   <div class="col3">
    <div>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
   <div class="col4">
    <div>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
   <div class="col5">
    <div>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
  </div>
<font color="#FFFAFA"><center><strong>С нами ВЫГОДНО делать ДОРОГО</strong></center></font>
</body>
</html>


DIV'ы - эти картинки.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mr4q
mr4q
сообщение 15.2.2012, 11:29; Ответить: mr4q
Сообщение #2


Зачем для картинок делать отдельные блоки? Настройте нужные стили для родительских блоков, т.е. col1, col2, col3, .., а для картинок стили пишутся так
.layout img {width: ***px; margin: 0 auto (центрирование);}


Ну или для родительского блока задать центрирование содержания
.col1, col2, col3 (и так далее) {text-align:center}


Сообщение отредактировал mr4q - 15.2.2012, 11:41


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Adwokat
Adwokat
сообщение 15.2.2012, 11:31; Ответить: Adwokat
Сообщение #3


Сделайте через class и вставте в <div>
<div class="layout">
<div class="col1">
<div>


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Vladimir-AWM
Vladimir-AWM
сообщение 15.2.2012, 11:41; Ответить: Vladimir-AWM
Сообщение #4


(Мелехин @ 15.2.2012, 9:59) *
Здравствуйте, помогите правильно отцентровать дивы, чтобы в разных разрешениях они всегда находились по центру.
Камнями не кидайтесь, только осваиваю эту тему smile.gif
Развернуть/Свернуть
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
  <title>Группа компаний "Ренессанс Элит"</title>
  <style type="text/css">
   .layout {
    overflow: hidden; /* Отмена обтекания */
   }
   .col1, .col2, .col3, .col4, .col5 {
    width: 250px; /* Ширина колонок */
    float: left; /* Создаем колонки */
   }
   .layout div div {
    margin: 0 5px; /* Отступы */
    padding: 0px; /* Поля */
    height: 250px; /* Высота колонок */
    background: #000000; /* Цвет фона */
    color: #f5e8d0; /* Цвет текста */
    overflow: auto;
   }
  </style>
</head>
<body bgcolor="#000">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
  <div class="layout">
   <div class="col1">
    <div>
    <a href="http://vk.com"><img

src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
   <div class="col2">
    <div>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
   <div class="col3">
    <div>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
   <div class="col4">
    <div>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
   <div class="col5">
    <div>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
    </div>
   </div>
  </div>
<font color="#FFFAFA"><center><strong>С нами ВЫГОДНО делать ДОРОГО</strong></center></font>
</body>
</html>


DIV'ы - эти картинки.


В поисковый системах можно легко найти ответ на этот вопрос. Вот например тут описаны способы webmasterprof.ru/stati/css-stati/vyravnivaem-div-po-centru-stranicy.html


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
GROB666
GROB666
сообщение 15.2.2012, 11:51; Ответить: GROB666
Сообщение #5


Развернуть/Свернуть
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
  <title>Группа компаний "Ренессанс Элит"</title>
  <style type="text/css">
   .layout {
    overflow: hidden; /* Отмена обтекания */
   }
   .col1 {
    width: 250px; /* Ширина колонок */
    display:block;
    margin:15px auto 25px;
   }
  </style>
</head>
<body bgcolor="#000">
  <div class="layout">
   <div class="col1">
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
     <a href="http://vk.com"><img src="http://www.mobile-ent.biz/cimages/91db058966c8942d27b05c25a6354999.jpg"></a>
   </div>
  </div>
<font color="#FFFAFA"><center><strong>С нами ВЫГОДНО делать ДОРОГО</strong></center></font>
</body>
</html>

Держи...


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Мелехин
Мелехин
Topic Starter сообщение 15.2.2012, 16:23; Ответить: Мелехин
Сообщение #6


(GROB666 @ 15.2.2012, 13:51) *
Держи...

это не совсем то. Надо, чтобы в одну строчку было


Грубо говоря - надо сделать вот так, во всех разрешениях одинаково. А у меня получается на моем разрешении (1280х1024) - так, а увеличиваю или уменьшаю - все сбивается.
Объясните по-проще, пожалуйста, ибо нуб пока что совсем.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
GROB666
GROB666
сообщение 15.2.2012, 16:53; Ответить: GROB666
Сообщение #7


Статические картинки не будут изменять свой размер. Либо будут съезжать на следующую строчку, либо за границу экрана выезжать...


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Мелехин
Мелехин
Topic Starter сообщение 15.2.2012, 23:20; Ответить: Мелехин
Сообщение #8


(GROB666 @ 15.2.2012, 18:53) *

это понял, спасибо.
А как зафиксировать их по центру в одну строчку? Увеличиваю разрешение и они получается к левому краю прижатые. А справа пустое место

Ребята, не оставляйте без внимания топик, очень нужна информационная помощь

Сообщение отредактировал Мелехин - 15.2.2012, 23:22
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gloveer
Gloveer
сообщение 16.2.2012, 1:41; Ответить: Gloveer
Сообщение #9


К классу приписываем:

.layout {
overflow: hidden; /* Отмена обтекания */
text-align: center;
}

И на закуску, вот сервис проверки вида сайта на разных мониторах http://viewlike.us (вставлять доменное имя!!!)


--------------------
И всё таки жизнь прекрасна!


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
reekroo
reekroo
сообщение 17.2.2012, 18:00; Ответить: reekroo
Сообщение #10


можно отцентрировать вбив в стиль

.d-carousel {
overflow: hidden;
text-align: center;
}

(если вам такой вариант подойдет)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


Сообщение отредактировал reekroo - 17.2.2012, 18:01
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Вёрстка HTML-писем
30 Vampler 28832 Вчера, 12:41
автор: Vampler
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 692 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3328 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3289 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Залить html страницу на 20 доменов
6 TABAK 1681 22.5.2023, 16:24
автор: KORUP


 



RSS Текстовая версия Сейчас: 28.3.2024, 16:10
Дизайн