VPF::Как расположить div по центру - Форум программистов

PosiTive

Дата 13.10.2007, 16:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 77
Регистрация: 11.12.2006

Репутация: нет
Всего: нет

Здравствуйте,

Попробовал уже много вариантов от <div align="center">...</div> до margin:0 auto;

А проблема состоит в следующем, есть некий контейнер <div id="container"> в котором содержится вся страница шириной 800px и для нормального отображения при всех разрешениях необходимо разместить её по центру.

Вот на всякий случай css:

Код


body
{
    font-family: sans-serif;
    font-size: small;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

#container
{
    width: 800px;
}

img
{
    border: 0;
}

#menu
{
    background-image: url(img/circle.jpg);
    background-repeat: no-repeat;
    height: 262px;
    width: 500px;
    position:absolute;
    top: 110px;
    left: 46px;
}

#menu_contact
{
    position: absolute;
    top: 132px;
    left: 147px;
}

#menu_send
{
    position: absolute;
    top: 131px;
    left: 194px;    
}

#menu_about
{
    position: absolute;
    top: 128px;
    left: 31px;
}

#menu_price
{
    position: absolute;
    top: 131px;
    left: 93px;
}

#color
{
    position: absolute;
    top: 151px;
    left: 255px;
}

#label
{
    font-family: "Century Gothic","Microsoft Sans Serif";
    font-size: 17pt;
    color: Red;
    position: absolute;
    top: 142px;
    left: 269px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

#combo_box
{
    background-image: url(img/combobox.jpg);
    background-repeat: no-repeat;
    width: 321px;
    height: 262px;
    position: absolute;
    top: 12px;
    left: 630px;
}

#subject
{
    font-family: "Centure Gothic","Microsoft Sans Serif";
    font-size: 13pt;
    color: white;
    position: absolute;
    top: -3px;
    left: 54px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

#arrow
{
    position: absolute;
    top: 4px;
    left: 152px;
}

#text_menu
{
    position: absolute;
    top: 18px;
    left: 7px;
    width: 161px;
    background-color: #fee5d2;
    display: none;
}

#text_menu ul
{
    list-style-image: url(img/ul.jpg);
    margin-left:0px; 
    margin-top:0px;
    padding-top:7px;
    padding-bottom: 8px;
    padding-left:19px;
}

#text_menu li
{
    margin-bottom:7px;
    padding-bottom:7px;
}

#text_menu a
{
    font-family: "Centure Gothic","Microsoft Sans Serif";
    font-size: 13px;
    color: Black;
    text-decoration: none;
}

#text_menu a:hover
{
    text-decoration: underline;
}

#standart_home
{
   position:absolute;
    left:12px;
    top:12px;
}

#standart_search
{
    position:absolute;
    left: 32px;
    top: 14px;
}

#standart_email
{
   position:absolute;
    left: 54px;
    top: 14px;
}

#standart_menu
{
    position:absolute;
    left: 535px;
    top: 0px;
}

и код самой страницы:

Код


<!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>
    <title>3Color - </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container" align="center">
  <div id="menu">
   <a href="about"><img id="menu_about" name="about" src="img/menu_about.jpg" alt="О компании" onmousemove="about_in(this);"       onmouseout="about_out(this);"/></a>
   <a href="price"><img id="menu_price" name="price" src="img/menu_price.jpg" alt="Прайс-лист" onmousemove="price_in(this);"       onmouseout="price_out(this);"/></a>
   <a href="contact"><img id="menu_contact" name="contact" src="img/menu_contact.jpg" alt="Контакты" onmousemove="cont_in(this);"       onmouseout="cont_out(this);"/></a>
   <a href="send"><img id="menu_send" name="send" src="img/menu_send.jpg" alt="Оставить отзыв" onmousemove="send_in(this);"       onmouseout="send_out(this);"/></a>
   <div id="color"><img src="img/color.jpg"></div>
   <p id="label" name="label"></p>
  </div>
  <div id="standart_menu">
    <a href="home"><img src="img/home.jpg" alt="На главную" id="standart_home" /></a>
    <a href="search"><img src="img/search.jpg" alt="Поиск" id="standart_search" /></a>
    <a href="email"><img src="img/e-mail.jpg" alt="Написать письмо" id="standart_email" /></a>
  </div>
  <div id="combo_box">
    <p id="subject">услуги</p>
    <img src="img/arrow_down.jpg" id="arrow" name="arrow" onmousemove="arrow_in(this);" onmouseout="arrow_out(this);" onclick="check_up();" />
    <div id="text_menu" name="text_menu"> 
    <ul>
       <li><a href="price/rizograph">Тиражирование на ризографе</a></li>
       <li><a href="price/A3">Полноцветная печать и копирование на A3</a></li>
       <li><a href="price/A0_A1">Сканирование и копирование форматов А0 и А1</a></li>
       <li><a href="price/another">Дизайн, набор текста, сканирование, редактирование</a></li>
       <li><a href="price/copy_print">Ксерокопирование и черно-белая печать</a></li>
       <li><a href="price/shirokoff">Широкоформатная печать</a></li>
       <li><a href="price/broshuri">Изготовление брошюр, методичек, рефератов, наклеек</a></li>
       <li><a href="price/pereplet">Все виды переплета</a></li>
       <li><a href="price/laminir">Ламинирование любых форматов</a></li>
       <li><a href="price/visitki">Изготовление визиток, открыток, бланков бухучета, календарей</a></li>
    </ul>
    </div>
  </div>
</div>
</body>
</html>

Заранее всем большое спасибо!

webevt

Дата 13.10.2007, 16:42 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 235
Регистрация: 5.5.2005

Репутация: нет
Всего: 3

DIV здесь не причем. Ты что-то с css напутал. Без стилей страница отображается нормально, по центру.

gta4kv

Дата 13.10.2007, 17:19 (ссылка)

(нет голосов)

Загрузка ...

Walking around mad.

Профиль
Группа: Завсегдатай
Сообщений: 1868
Регистрация: 25.7.2006

Репутация: нет
Всего: 91

А если так?

Код


body
{
    font-family: sans-serif;
    font-size: small;
    text-align:center;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

PosiTive

Дата 13.10.2007, 18:29 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 77
Регистрация: 11.12.2006

Репутация: нет
Всего: нет

Цитата

А если так?

Код


body
{
    font-family: sans-serif;
    font-size: small;
    text-align:center;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

ничего к сожалению не изменилось :(

Цитата

DIV здесь не причем. Ты что-то с css напутал. Без стилей страница отображается нормально, по центру.

Возможно, перепроверил весь код, ничего сверхъестественного не нашел. Может потому что я только учусь ? smile

kizune

Дата 14.10.2007, 00:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 10.7.2007

Репутация: 9
Всего: 9

Код


конецформыначалоформы<!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>
<title>3Color - </title>
<style>
конецформыначалоформыbody
{
font-family: sans-serif;
font-size: small;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}

#container
{
width: 800px;
}

img
{
border: 0;
}

#menu
{
background-image: url(img/circle.jpg);
background-repeat: no-repeat;
height: 262px;
width: 500px;

top: 110px;
left: 46px;
}

#menu_contact
{

top: 132px;
left: 147px;
}

#menu_send
{

top: 131px;
left: 194px; 
}

#menu_about
{

top: 128px;
left: 31px;
}

#menu_price
{

top: 131px;
left: 93px;
}

#color
{

top: 151px;
left: 255px;
}

#label
{
font-family: "Century Gothic","Microsoft Sans Serif";
font-size: 17pt;
color: Red;

top: 142px;
left: 269px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}

#combo_box
{
background-image: url(img/combobox.jpg);
background-repeat: no-repeat;
width: 321px;
height: 262px;

top: 12px;
left: 630px;
}

#subject
{
font-family: "Centure Gothic","Microsoft Sans Serif";
font-size: 13pt;
color: white;

top: -3px;
left: 54px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}

#arrow
{

top: 4px;
left: 152px;
}

#text_menu
{

top: 18px;
left: 7px;
width: 161px;
background-color: #fee5d2;
display: none;
}

#text_menu ul
{
list-style-image: url(img/ul.jpg);
margin-left:0px; 
margin-top:0px;
padding-top:7px;
padding-bottom: 8px;
padding-left:19px;
}

#text_menu li
{
margin-bottom:7px;
padding-bottom:7px;
}

#text_menu a
{
font-family: "Centure Gothic","Microsoft Sans Serif";
font-size: 13px;
color: Black;
text-decoration: none;
}

#text_menu a:hover
{
text-decoration: underline;
}

#standart_home
{

left:12px;
top:12px;
}

#standart_search
{

left: 32px;
top: 14px;
}

#standart_email
{

left: 54px;
top: 14px;
}

#standart_menu
{

left: 535px;
top: 0px;
}


</style>
</head>

<body>
<div style="width:100%" align="center">
<div id="container" align="center">
<div id="menu">
<a href="about"><img id="menu_about" name="about" src="img/menu_about.jpg" alt="О компании" onmousemove="about_in(this);" onmouseout="about_out(this);"/></a>
<a href="price"><img id="menu_price" name="price" src="img/menu_price.jpg" alt="Прайс-лист" onmousemove="price_in(this);" onmouseout="price_out(this);"/></a>
<a href="contact"><img id="menu_contact" name="contact" src="img/menu_contact.jpg" alt="Контакты" onmousemove="cont_in(this);" onmouseout="cont_out(this);"/></a>
<a href="send"><img id="menu_send" name="send" src="img/menu_send.jpg" alt="Оставить отзыв" onmousemove="send_in(this);" onmouseout="send_out(this);"/></a>
<div id="color"><img src="img/color.jpg"></div>
<p id="label" name="label"></p>
</div>
<div id="standart_menu">
<a href="home"><img src="img/home.jpg" alt="На главную" id="standart_home" /></a>
<a href="search"><img src="img/search.jpg" alt="Поиск" id="standart_search" /></a>
<a href="email"><img src="img/e-mail.jpg" alt="Написать письмо" id="standart_email" /></a>
</div>
<div id="combo_box">
<p id="subject">услуги</p>
<img src="img/arrow_down.jpg" id="arrow" name="arrow" onmousemove="arrow_in(this);" onmouseout="arrow_out(this);" onclick="check_up();" />
<div id="text_menu" name="text_menu"> 
<ul>
<li><a href="price/rizograph">Тиражирование на ризографе</a></li>
<li><a href="price/A3">Полноцветная печать и копирование на A3</a></li>
<li><a href="price/A0_A1">Сканирование и копирование форматов А0 и А1</a></li>
<li><a href="price/another">Дизайн, набор текста, сканирование, редактирование</a></li>
<li><a href="price/copy_print">Ксерокопирование и черно-белая печать</a></li>
<li><a href="price/shirokoff">Широкоформатная печать</a></li>
<li><a href="price/broshuri">Изготовление брошюр, методичек, рефератов, наклеек</a></li>
<li><a href="price/pereplet">Все виды переплета</a></li>
<li><a href="price/laminir">Ламинирование любых форматов</a></li>
<li><a href="price/visitki">Изготовление визиток, открыток, бланков бухучета, календарей</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

думаю,все дело в position:absolute

PosiTive

Дата 14.10.2007, 07:24 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 77
Регистрация: 11.12.2006

Репутация: нет
Всего: нет

Попробовал smile

убрав position:absolute; мы как в прямом смысле отключаем позиционирование, да все элементы встали по центру smile

, но на указываемые координаты реагировать перестали smile

kizune

Дата 14.10.2007, 12:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 10.7.2007

Репутация: 9
Всего: 9

так определись,по центру ты хочешь видеть указанные элементы или с помощью position:absolute.
попробуй убрать Position:absolute,а нужного расположения элементов можно добиться с помощью отступов margin и padding

PosiTive

Дата 15.10.2007, 15:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 77
Регистрация: 11.12.2006

Репутация: нет
Всего: нет

Упростил код до минимума:

Код



<!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>
    <title>3Color - </title>
    <link href="style2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
  <div id="menu">
   жесть
  </div>
</div>
</body>
</html>

и сделал банальную css:

Код


body
{
    font-family: sans-serif;
    font-size: small;
    text-align: center;
}

img
{
    border: 0;
}

#container
{
 width: 768px;
}

#menu
{
    background-image: url(img/circle.jpg);
    background-repeat: no-repeat;
    height: 262px;
    width: 500px;
}

в IE все отлично, все по центру. В Mozzilla вообще нет реакции на text-align:center; если поставить <div align="center">, он на немножно (30-40 пикселей) сдвинет, но не более.

kizune

Дата 15.10.2007, 15:13 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 10.7.2007

Репутация: 9
Всего: 9

css не меняла,только добавила общий <div style="width:100%" align="center">

Код


<!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>
    <title>3Color - </title>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="width:100%" align="center">
<div id="container">
  <div id="menu">
   жесть
  </div>
</div>
</div>
</body>
</html>

PosiTive

Дата 15.10.2007, 15:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 77
Регистрация: 11.12.2006

Репутация: нет
Всего: нет

уже разобрался, что нужен дополнительный контейнер (на htmlbook.ru), но все равно спасибо!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »