Я полностью новичок в макетах CSS, но я пытаюсь просто начать базовый, который представляет собой просто центральный столбец с фиксированной шириной (всего один div), чтобы стороны были гибкими. Я знаю, что это не реагирует / не реагирует, но я только начинаю.

Итак, я пробовал поискать в Google массу примеров, но не могу найти отправную точку, которая работает как в FF, так и в IE9? Я имею в виду только начало и они разные ??

Вот последний пример простого стиля, который я пробовал:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #f5f5f5;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#content { 
 width: 900px;
 color: #333;
 border: 0px solid #f5f5f5;
 background: white;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 600px;
}

Так что это самое начало, но уже FF показывает, что это выровнено по центру, а IE - нет. Итак, все, что я пробую (например, left: 50% и margin-right: -461px, как я нашел), влияет на них по-разному. Я читал повсюду, что это очень распространенная проблема, но я боюсь, что здесь есть какая-то логическая основа, о которой я не подозреваю?

Любая помощь с этим приветствуется!

РЕДАКТИРОВАТЬ: Спасибо за комментарий! У меня есть следующее, которое снова работает в IE (и в хроме), но не в FF?

Css:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #f5f5f5;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
 margin-left:auto;
 margin-right:auto;

}
#content { 
 width: 900px;
 color: #333;
 border: 2px solid #f5f5f5;
 background: white;
 padding: 10px;
 height: 600px;
 position:absolute;
 left:50%;
 margin-left:-461px;
}

#welcomeBanner{
    text-align:center;
    font-family:"segoe ui light","segoe ui","segoe";
    font-size:18pt;
    padding-top:20px;
    padding-bottom:20px;
    margin-top:0px;
}

Html: буквально только:

    <div id="wrapper">
        <div id="content">
            <div id="welcomeBanner">Attempting to Learn This Stuff<div>
        </div>
    </div>

Поэтому в IE9 и Chrome я получаю заголовок в центре, центр большого поля с фиксированным цветом фона и т. д. В FF ничего. Мне нравится, что к странице вообще не применяется стиль? Я использую тег ссылки в голове, но он явно там и работает для других?

1
Justin 16 Дек 2012 в 23:06
Вы пробовали выравнивание текста: по центру обертки?
 – 
Gurpreet Singh
16 Дек 2012 в 23:18
1
{осталось: 50%; маржа слева: nnnpx; позиция: абсолютная; } следует делать то, что вы просите, я заметил, что вы указали margin-right в своем вопросе, это либо опечатка, либо почему это не сработало, попробуйте это jsfiddle.net/9fbnX
 – 
Dampsquid
16 Дек 2012 в 23:19
Это действительно должно сработать. С чем вы столкнулись? Вы можете показать нам HTML?
 – 
Praveen Kumar Purushothaman
16 Дек 2012 в 23:31
Спасибо ... и вы правы .... это была опечатка.
 – 
Justin
16 Дек 2012 в 23:31

1 ответ

Лучший ответ