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



 

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

Открыть тему
Тема закрыта
> Верстка Дивами
Furin
Furin
Topic Starter сообщение 24.10.2010, 23:48; Ответить: Furin
Сообщение #1


Бог
*****

Группа: Active User
Сообщений: 833
Регистрация: 19.5.2010
Из: Волгоград/Москва/Лондон
Поблагодарили: 213 раз
Репутация:   42  


Всем привет! Вот решил научится. Подскажите, как сделать, чтобы 4 колонки позиционировались по центру.
у меня такой код:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Harry Potter 2010</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #999;
}
</style>
</head>

<body>
<div id="container">Здесь располагается содержимое  id "container"</div>
<div id="header">Здесь располагается содержимое  id "header"</div>
<div id="clear1"></div>
<div id="photo1">Здесь располагается содержимое  id "photo1"</div>
<div id="photo2">Здесь располагается содержимое  id "photo2"</div>
<div id="photo3">Здесь располагается содержимое  id "photo3"</div>
<div id="photo4">Здесь располагается содержимое  id "photo4"</div>
<div id="clear2"></div>
<div id="text1">Здесь располагается содержимое  id "text1"</div>
<div id="text2">Здесь располагается содержимое  id "text2"</div>
<div id="text3">Здесь располагается содержимое  id "text3"</div>
<div id="text4">Здесь располагается содержимое  id "text4"</div>
<div id="clear3"></div>
<div id="foot1">Здесь располагается содержимое  id "foot1"</div>
<div id="foot2">Здесь располагается содержимое  id "foot2"</div>
<div id="foot3">Здесь располагается содержимое  id "foot3"</div>
<div id="foot4">Здесь располагается содержимое  id "foot4"</div>
</body>
</html>


style.css
body, html {
    margin:0px;
    padding:0px;
}
#container {
    width:1260px;
    margin:0 auto;
}
#header {
    width:1260px;
    margin:0 auto;
    background-color: #ffffff;
}
#clear1 {
    width:15px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    height: 1px;
}
#photo1 {
    width:315px;
    margin:0 auto;
    background:#FFF;
    float:left;
}
#photo2 {
    width:315px;
    margin:0 auto;
    background:#FFF;
    margin-left:318px;
}
#photo3 {
    width:315px;
    background:#FFF;
    float:left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
#photo4 {
    width:315px;
    margin:0 auto;
    background:#FFF;
    margin-right:318px;
}
#clear2 {
    width:3px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    height: 1px;
}
#text1 {
    width:1260px;
    margin:0 auto;
    background:#FFF;
}
#text2 {
    width:1260px;
    margin:0 auto;
    background:#FFF;
}
#text3 {
    width:1260px;
    margin:0 auto;
    background:#FFF;
}
#text4 {
    width:1260px;
    margin:0 auto;
    background:#FFF;
}
#clear3 {
    width:3px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    height: 1px;
}
#foot1 {
    width:1260px;
    margin:0 auto;
    background:#FFF;
}
#foot2 {
    width:1260px;
    margin:0 auto;
    background:#FFF;
}
#foot3 {
    width:1260px;
    margin:0 auto;
    background:#FFF;
}
#foot4 {
    width:1260px;
    margin:0 auto;
    background:#FFF;
}



Мне нужно, чтобы колонки photo1/2/3/4/ были по центру самого сайта, но получается, что когда я photo1 Прижимаю к левому углу, а photo2 заставляю обтекать по правому краю, все получается, но они не по центру. Что сделать, чтобы они были по центру и также, рядом с ними photo3 и photo4.
Объясните пожалуйста...
2
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kharikein
kharikein
сообщение 24.10.2010, 23:52; Ответить: kharikein
Сообщение #2


Прошлый ник: azatkh
*****

Группа: Active User
Сообщений: 570
Регистрация: 20.1.2008
Из: KZ
Поблагодарили: 81 раз
Репутация:   28  


всем фото задаешь в стилях:
float:left;
display:block;

тогда они должны идти подряд в одну линию.

Для того, чтобы они были по центру сделай див со стилем
margin: 0 auto; //0 - сверху,снизу, авто по бокам

и посади все фото в этот див.

удачи wink.gif

АПД:
забыл сказать, для дива задай еще ширину... например 800 пикселей, тогда за счет маргин авто он не зависимо от моника будет стоять по середке

Сообщение отредактировал kharikein - 24.10.2010, 23:58


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Furin
Furin
Topic Starter сообщение 25.10.2010, 1:08; Ответить: Furin
Сообщение #3


Бог
*****

Группа: Active User
Сообщений: 833
Регистрация: 19.5.2010
Из: Волгоград/Москва/Лондон
Поблагодарили: 213 раз
Репутация:   42  


(kharikein @ 24.10.2010, 23:52) *
всем фото задаешь в стилях:
float:left;
display:block;

тогда они должны идти подряд в одну линию.

Для того, чтобы они были по центру сделай див со стилем
margin: 0 auto; //0 - сверху,снизу, авто по бокам

и посади все фото в этот див.

удачи wink.gif

АПД:
забыл сказать, для дива задай еще ширину... например 800 пикселей, тогда за счет маргин авто он не зависимо от моника будет стоять по середке

все так сделал, они теперь в рядок, но туда привязался text1 smile.gif

проблему с text1 решил
clear:both;
    height:0px;
    font-size:1px;
    line-height:0px;

но они выравниваются по левому краю.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
neSkywalker
neSkywalker
сообщение 25.10.2010, 1:11; Ответить: neSkywalker
Сообщение #4


Новичок
*

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


<div id="clear2"></div>

В CSS допиши:
#clear2 {clear:both}

Вообще не понятно - у дива название clear2, а он ничего не очищает и вообще его назначение в данном случае для меня загадка smile.gif

И вообще если #clear1, #clear2 и #clear3 делают одно и тоже (а без clear:both - ничего), то надо бы их заменить на .clear и удалить лишнии стили из CSS )

Сообщение отредактировал neSkywalker - 25.10.2010, 1:14


--------------------
Фото знаменитостей www.populars.ru и новости шоу-бизнеса.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Furin
Furin
Topic Starter сообщение 25.10.2010, 1:15; Ответить: Furin
Сообщение #5


Бог
*****

Группа: Active User
Сообщений: 833
Регистрация: 19.5.2010
Из: Волгоград/Москва/Лондон
Поблагодарили: 213 раз
Репутация:   42  


(neSkywalker @ 25.10.2010, 1:11) *
<div id="clear2"></div>

В CSS допиши:
#clear2 {clear:both}

Вообще не понятно - у дива название clear2, а он ничего не очищает и вообще его назначение в данном случае для меня загадка smile.gif

уже до вас решил))) название такое было дано када макет на бумаге рисовал smile.gif

(neSkywalker @ 25.10.2010, 1:11) *
<div id="clear2"></div>

В CSS допиши:
#clear2 {clear:both}

Вообще не понятно - у дива название clear2, а он ничего не очищает и вообще его назначение в данном случае для меня загадка smile.gif

И вообще если #clear1, #clear2 и #clear3 делают одно и тоже (а без clear:both - ничего), то надо бы их заменить на .clear и удалить лишнии стили из CSS )

дуракам мысли приходят сразу smile.gif не в обиду) не поверите, сижу смотрю код и тоже об этом подумал.. Но пока трогать не буду smile.gif
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gr3y
gr3y
сообщение 25.10.2010, 12:25; Ответить: gr3y
Сообщение #6


Участник
***

Группа: User
Сообщений: 104
Регистрация: 30.6.2010
Из: Хабаровск
Поблагодарили: 31 раз
Репутация:   5  


Ох ты ж боже. Советую почитать какую-нибудь хорошую книгу по CSS. Хотя бы основы.
#photo1 {
    width:315px;
    margin:0 auto;
    background:#FFF;
    float:left;
}
#photo2 {
    width:315px;
    margin:0 auto;
    background:#FFF;
    margin-left:318px;
}
#photo3 {
    width:315px;
    background:#FFF;
    float:left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
#photo4 {
    width:315px;
    margin:0 auto;
    background:#FFF;
    margin-right:318px;
}

зачем это? o_O
Можно же:
#photo1, #photo2, #photo3, #photo4 {
    width:315px;    
    margin:0 auto;
    background:#FFF;
}

#photo1, #photo3 { float:left; }
#photo2, #photo4 { margin-left:318px; }


Это я просто пример привёл. На самом деле там всё в таком духе написано. Извиняюсь за оффтоп.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Furin
Furin
Topic Starter сообщение 26.10.2010, 0:02; Ответить: Furin
Сообщение #7


Бог
*****

Группа: Active User
Сообщений: 833
Регистрация: 19.5.2010
Из: Волгоград/Москва/Лондон
Поблагодарили: 213 раз
Репутация:   42  


(gr3y @ 25.10.2010, 12:25) *
Ох ты ж боже. Советую почитать какую-нибудь хорошую книгу по CSS. Хотя бы основы.
#photo1 {
    width:315px;
    margin:0 auto;
    background:#FFF;
    float:left;
}
#photo2 {
    width:315px;
    margin:0 auto;
    background:#FFF;
    margin-left:318px;
}
#photo3 {
    width:315px;
    background:#FFF;
    float:left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
#photo4 {
    width:315px;
    margin:0 auto;
    background:#FFF;
    margin-right:318px;
}

зачем это? o_O
Можно же:
#photo1, #photo2, #photo3, #photo4 {
    width:315px;    
    margin:0 auto;
    background:#FFF;
}

#photo1, #photo3 { float:left; }
#photo2, #photo4 { margin-left:318px; }


Это я просто пример привёл. На самом деле там всё в таком духе написано. Извиняюсь за оффтоп.

Ниче smile.gif Эт мы поняли из предыдущего поста smile.gif

Решил сам проблему с выравниванием. Переставил див контейнера smile.gif Всем спасибо, собственно!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) PSD2HTML верстка и не только
Верстка макетов Photoshop / Avocode / с картинки
8 Smile3D 353 10.12.2017, 17:52
автор: Smile3D
Открытая тема (нет новых ответов) php скрипты любой сложности / диз+верстка (адаптивно)
любые задачи на php - автоматизация, парсинг, работа с БД
1 affrodita 496 8.12.2017, 17:40
автор: affrodita
Открытая тема (нет новых ответов) Адаптация сайтов под мобильные устройства, качественная кроссбраузерная верстка, работа с Wordpress
PSD to HTML, натяжка макетов на Wordpress, адаптивная верстка
28 anton_ber 5176 6.12.2017, 13:39
автор: anton_ber
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыПрофессиональная разработка сайтов, верстка, программирование. Работа с любыми движками и фреймворками. Опыт более 5-лет.
Создание Сайтов Любых CMS
299 woodzy 98421 29.11.2017, 16:06
автор: Stom
Горячая тема (нет новых ответов) Студия «Омега» — создание сайтов, дизайн, верстка.
70 Delpix 28850 27.11.2017, 12:34
автор: Delpix


 



RSS Текстовая версия Сейчас: 13.12.2017, 20:59
Дизайн