центр div в пределах 100% ширины div - PullRequest
Новая
       8

центр div в пределах 100% ширины div

1 голос
/ 15 июля 2011

Я пробую фреймворк Blueprint CSS, и мне трудно понять, как сделать общий макет.

Кажется, Blueprint (насколько я понял до сих пор) заставляет вас использоватьустановите ширину страницы в 950 пикселей.Я думаю, вы могли бы изменить это с некоторой модификацией, но в любом случае должна быть некоторая ширина, так что это нормально.Проблема в том, что даже если я хочу, чтобы основное содержимое страницы было шириной 950 пикселей, мне нужны верхние и нижние колонтитулы шириной 100%.

Таким образом, я разместил верхний и нижний колонтитулы вне основного div-контейнераэто 950 пикселей в ширину.Я установил заголовок div на 100%.И затем у меня есть div "headerContent" внутри него (содержащий меню, логотип и т. Д.), Который имеет ширину 950 пикселей (span-24 в терминах Blueprint).Но я хочу, чтобы div headerContent центрировался внутри div заголовка.

Я всегда использовал для этого трюк «margin: 0 auto», но по какой-то причине он сейчас вообще не работает.

Вот HTML: 

            <div id="header" class="blueheader">

                <div id="headerContent" class="span-24">

                    <div id="logo" class="span-6">

                        <a href="/">

                            <img src="/images/expertinfo.png" width="230" height="62" />

                            </a>

                    </div>

                    <div id="menucontainer" class="span-14"><ul id="menu"><li>

<a href='/Services/Index'>TJ&#196;NSTER</a></li>

<li>

<a href='/About/References'>KUNDER</a></li>

<li>

<a href='/About'>OM OSS</a></li>

<li>

<a href='/About/Contact'>KONTAKT</a></li>

</ul></div>

                    <div id="logindisplay" class="span-2">

                            <a href="/Account/LogOn">Logga in</a>



                    </div>

                </div>

            </div>

А вот CSS для заголовка и содержания заголовка: 

#headerContent
{
    overflow: auto;
    zoom: 1;
    margin: 0 auto;

}

#header
{

    width: 100%;
    position: relative;
    margin-bottom: 0px;
    color: #000;    
    margin-bottom: 0px;
    overflow: auto;
    zoom: 1;

}

Переполнение и масштабирование - это еще один трюк, которого я прочитал, чтобы избежатьмне пришлось использовать пустые div, чтобы очистить содержащие div, и я попытался без них без удачи, поэтому они не имеют никакого отношения к проблеме.

Есть идеи, что я делаю неправильно?

Ответы [ 2 ]

0 голосов
/ 15 июля 2011

Нашел ответ: вы не должны использовать span-24 для headerContent, очевидно, в рамках Blueprint, а скорее класс контейнера.Вот что сработало: 

        <div id="header" class="blueheader">
            <div id="headerContent" class="container">
                <div id="logo" class="span-6">
                    <a href="@Url.Action("Index", "Home")">
                        <img src="/images/expertinfo.png" width="230" height="62" />
                        </a>
                </div>
                <div id="menucontainer" class="span-14">@Html.Raw(Html.Menu())</div>
                <div id="logindisplay" class="span-2">
                    @Html.Partial("_LogOnPartial")
                </div>
            </div>
        </div>

Не могу сказать, что точно понимаю, почему это не сработало раньше, и меня это беспокоит, потому что я пытаюсь использовать эту среду для упрощения компоновки, но это усложняет понимание.Насколько я мог видеть, он должен был работать и с первым кодом ...

0 голосов
/ 15 июля 2011

Вам нужно установить ширину #headerContent, потому что без нее по умолчанию будет width:100%, если вы поместите ширину 950px в div, у вас все будет хорошо.

...