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



 

Здравствуйте, гость ( Вход | Регистрация )

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


Завсегдатай
*****

Группа: Active User
Сообщений: 690
Регистрация: 16.12.2010
Из: Екатеринбург
Поблагодарили: 167 раз
Репутация:   30  


Здравствуйте, помогите правильно отцентровать дивы, чтобы в разных разрешениях они всегда находились по центру.
Камнями не кидайтесь, только осваиваю эту тему 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


Верстаю дорого
*****

Группа: Active User
Сообщений: 697
Регистрация: 18.9.2007
Из: Харьков, Украина
Поблагодарили: 325 раз
Репутация:   79  


Зачем для картинок делать отдельные блоки? Настройте нужные стили для родительских блоков, т.е. 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


Новичок
*

Группа: User
Сообщений: 21
Регистрация: 22.5.2011
Поблагодарили: 3 раза
Репутация:   -2  


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


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


Участник
***

Группа: User
Сообщений: 236
Регистрация: 7.2.2010
Из: Челябинск
Поблагодарили: 62 раза
Репутация:   16  


(Мелехин @ 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


Частый гость
**

Группа: User
Сообщений: 99
Регистрация: 21.4.2011
Из: Москва
Поблагодарили: 20 раз
Репутация:   1  


Развернуть/Свернуть
<!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


Завсегдатай
*****

Группа: Active User
Сообщений: 690
Регистрация: 16.12.2010
Из: Екатеринбург
Поблагодарили: 167 раз
Репутация:   30  


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

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


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


Частый гость
**

Группа: User
Сообщений: 99
Регистрация: 21.4.2011
Из: Москва
Поблагодарили: 20 раз
Репутация:   1  


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


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


Завсегдатай
*****

Группа: Active User
Сообщений: 690
Регистрация: 16.12.2010
Из: Екатеринбург
Поблагодарили: 167 раз
Репутация:   30  


(GROB666 @ 15.2.2012, 18:53) *

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

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

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


Частый гость
**

Группа: User
Сообщений: 96
Регистрация: 15.10.2011
Из: Россия-матушка
Поблагодарили: 28 раз
Репутация:   5  


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

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

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


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


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


Новичок
*

Группа: User
Сообщений: 20
Регистрация: 13.2.2012
Поблагодарили: 2 раза
Репутация:   1  


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

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

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

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
11 impak 1352 11.12.2017, 13:11
автор: Mikki
Открытая тема (нет новых ответов) Вёрстка. Per aspera ad html.
С радостью принимаю заказы по вёрстке.
3 ValeryRar 456 1.12.2017, 11:02
автор: ValeryRar
Открытая тема (нет новых ответов) Исправлю HTML ошибки на страницах Вашего сайта
10 guruapps 1207 30.11.2017, 22:59
автор: maxim1249
Открытая тема (нет новых ответов) Помогите найти плагин на WP
Отзывы с профилей соц сетей
1 SEOMR 447 30.11.2017, 7:18
автор: Nell
Открытая тема (нет новых ответов) Помогите найти проблему
Долгий ответ сервера
6 maxim1249 699 29.11.2017, 17:27
автор: genjnat


 



RSS Текстовая версия Сейчас: 17.12.2017, 2:41
Дизайн