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
Сообщений: 239
Регистрация: 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;
}

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

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите! Что делать? Упали позиции! Сделать Новый сайт, редизайн главной или изменить структуру?
Как улучшить сайт? Потеря трафика, понижение позиций!
10 Paul01 1509 19.10.2018, 20:52
автор: KM_
Горячая тема (нет новых ответов) HTML-вёрстка по доступной цене
38 graycat777 14940 19.10.2018, 1:57
автор: web-dizz
Открытая тема (нет новых ответов) Глаз замылился. Помогите найти проблемы
5 Bel_Ami 761 16.10.2018, 13:51
автор: n0rv
Открытая тема (нет новых ответов) Помогите подобрать движок
9 StaxBel 1136 28.9.2018, 15:43
автор: Rubitime
Открытая тема (нет новых ответов) Google рекомендует использовать HTML для быстрой индексации контента
11 VinogradOFF 1997 26.9.2018, 15:25
автор: VinogradOFF


 



RSS Текстовая версия Сейчас: 23.10.2018, 11:48
Дизайн