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



 

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

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

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


Всем привет! Вот решил научится. Подскажите, как сделать, чтобы 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


всем фото задаешь в стилях:
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


(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


<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


(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


Ох ты ж боже. Советую почитать какую-нибудь хорошую книгу по 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


(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 Всем спасибо, собственно!

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91644 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
26 zaiko 17159 30.1.2024, 18:10
автор: zaiko
Открытая тема (нет новых ответов) Верстка шаблона Битрикс
0 bat 1362 26.9.2023, 6:22
автор: bat
Открытая тема (нет новых ответов) Верстка электронных писем бесплатно
0 Gidemopassan 1499 23.6.2023, 10:12
автор: Gidemopassan
Горячая тема (нет новых ответов) Сайт "под ключ" (дизайн, верстка, CMS)
32 Brans 16445 19.5.2023, 22:01
автор: Brans


 



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