VPF::margin: 0 auto; - Форум программистов

noface

Дата 16.10.2010, 14:17 (ссылка)

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

Загрузка ...

Новичок

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

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

Версткой занялся совсем недавно, возникает проблемма контейнер div упорно не хочет вставать по центру с пом. margin: 0 auto; уже свосем запутался. Подскажите, что не так делаю?

Код


<head>
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <div id="container">
        <span class="buttonText" id="btnleft"><a href="index.html"></a></span>
        <span class="buttonText" id="btnmiddle"><a href="tests.html"></a></span>
        <span class="buttonText" id="btnmiddle"><a href="faq.html"></a></span>
        <span class="buttonText" id="btnright"><a href="help.html"></a></span>
         <div id="mainhead"></div>
         <div id="smenu">
              <div id="menuhead"></div>
             <div id="menuitem">
                    <ul>
                  <li><a href="lab1.html">#1:</a></li>
                    <li><a href="lab2.html">#2:</a></li>
                  <li><a href="lab3.html">#3: </a></li>
                  <li><a href="lab4.html">#4: </a></li>
                  <li><a href="lab5.html">#5: </a></li>
                    <li><a href="lab6.html">#6:</a></li>
                  <li><a href="lab7.html">#7: </a></li>
                  <li><a href="lab8.html">#8: </a></li>
                  <li><a href="lab9.html">#9: </a></li>
                    <li><a href="lab10.html">#10: </a></li>
                    </ul>
              </div>
         </div>
         <div id="txtframe">
              <div id="headertext1">Àííîòàöèÿ.</div> 
              <p></p>
        </div>
        <div id="cright"><i></i></div>
    </div>
</body>

CSSка:

Код


body
{    
    position: absolute;
    font-size: 12px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    background: url(images/bggrnd.jpg); repeat-x;
}

#container
{    
    margin: 15px auto;
    padding: 9 10;
    border: 1px inset #000000;
    background: #F6F7F9;
    width: 850;
}

#btnleft
{
    width: 208;
    height: 42;
    float: left;    
    background: url(images/btnleft.gif) no-repeat;
}

#btnright
{
    width: 208;
    height: 42;
    float: left;    
    background: url(images/btnright.gif) no-repeat;
}

#btnmiddle
{
    width: 208;
    height: 42;
    float: left;    
    background: url(images/btnmiddle.gif) no-repeat;
}


.buttonText 
{
    text-align: center;
    padding-top: 11px;
    font-size: 14px;
    font-weight: bold;
}

a 
{
    text-decoration: none;
    color: #11155C;
}

a:hover 
{
    text-decoration: underline;
    color: #000000;
}

#mainhead
{
    width: 830px;
    border: 1px inset #11155C;    
    height: 160px;
    background: url('images/mainhead.jpg') no-repeat;
}

#htmlhead
{
    width: 830px;
    border: 1px inset #11155C;    
    height: 160px;
    background: url('images/htmlhead.jpg') no-repeat;
}

#smenu
{     
    margin-top: 10;
    width: 830px;
    height: auto;
    border: 1px solid #11155C;    
    float: left;
    clear: both;
}

#menuhead
{
    width: auto;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom : 1px solid #FFFFFF;
    border-left: 5px solid #FFFFFF;
    border-right: 5px solid #FFFFFF;
    background-color: #426FCC;
}

#menuitem
{
    width: auto;
    font-size: 11px;

}

#menuitem ul 
{    
    margin: 0;
    padding: 0;
    list-style: none;
}

#menuitem li
{    
    border-bottom: 1px solid #FFFFFF;
    margin: 0;
    width: auto;
}

#menuitem li a
{
    display: block;
    padding: 3px 0px 2px 0.5em;
    border-left: 5px solid #11155C;
    border-right: 5px solid #11155C;
    color: #11155C;
    background-color:#DCDFE8;
}

#menuitem li a:hover 

{
    border-left: 5px solid #FFFFFF;
    border-right: 5px solid #FFFFFF;
    color: #DCDFE8;
    background-color: #11155C;
    font-weight: bold;
    text-decoration: none;
}

#headertext1 
{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

#headertext2
{
    font-size: 14px;
    font-weight: bold;
}


#footer 
{
    background-color: #3B71BE;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    height: 20px;
    padding-top: 5px;
    clear: both;
    width: auto;
}

#txtframe
{
    margin-top: 10;
    padding: 10px;
    width: 830;
    border: 1px solid #11155C;
}

#note
{
    background: #DCDFE8;
    width: 800;
     hight: auto;
    padding: 5px;
    border: 1px solid #9F9F9F;
    color: 11155C;
    margin: 7px 0px 7px 0px;
}
#noteQuest
{
    background: #DCDFE8;
    width: 735;
    hight: auto;
    padding: 5px;
    border: 2px solid #11155C;
    color: #000;
    margin: 5px 0px 5px 0px;
}

#cright
{    
    margin-top: 20px;
    font-size: 10px;
    width: 832;
    border-top: 1px solid #11155C;
    display: block;
    text-align: center;
    padding: 10px 0px 10px 0px;
    color: #11155C;
    background-color:#F6F7F9;
}

Shogun

Дата 16.10.2010, 15:18 (ссылка)

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

Загрузка ...

сёгун-сан

Профиль
Группа: Участник
Сообщений: 290
Регистрация: 8.6.2006
Где: Кишинёв

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

noface, у body text-align:center попробуйте и у #container position:relative

Это сообщение отредактировал(а) Shogun - 16.10.2010, 15:29

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

2b || !2b

ayax2005

Дата 16.10.2010, 16:11 (ссылка)

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

Загрузка ...

echo $smile

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

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

Поиграйте со свойством дисплей самого контейнера и родителя.

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

все вопросы - из-за неверной формулировки задачи

noface

Дата 16.10.2010, 16:15 (ссылка)

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

Загрузка ...

Новичок

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

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

с text-align: center; выравнивание идет, но вообще говоря это дублирует margin, мне интересно почему именно это свойство не хочет работать.

Это сообщение отредактировал(а) noface - 16.10.2010, 16:26

Rayled

Дата 17.10.2010, 12:59 (ссылка)

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

Загрузка ...

Шустрый

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

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

noface, Доктайп укажите и все заработает, например такой:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

И вообще у вас ошибок туча в CSS: лишние точки с запятой, не везде указаны единицы измерения и т.д.
Пользуйтесь валидаторами: HTML - http://validator.w3.org/ CSS - http://jigsaw.w3.org/css-validator/
И еще, все-таки элемент HTML лучше тоже указывать тоже.

noface

Дата 17.10.2010, 16:10 (ссылка)

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

Загрузка ...

Новичок

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

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

Ммм...да, помогло, спасибо за советы, учту в будущем.

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