CSS: Центр главной страницы div

0

У меня есть макет для моего сайта: http://imgur.com/RsAFgyz. Проблема в том, что я понятия не имею, как сделать центральную полосу за пределами навигационной панели, оставаться в середине страницы (даже при масштабировании), или даже показать правильный путь. Может ли кто-нибудь направить меня в учебник или сказать мне, как это сделать? Вот мой полный код: http://jsfiddle.net/c7r6g/ (я установил навигационную панель в качестве файлов изображений, если вы этого не заметили) Навигатор .rounded, а div, который я пытаюсь .rounded, - это #centerstrip

Извините, если это немного расплывчато, я любитель в CSS (особенно позиционирование).

Теги:
website

6 ответов

0
Лучший ответ

Сделанные изменения в вашем CSS, это прекрасно работает на вашей скрипке, замените это на вашей скрипке этим.

#centerstrip {
    background-color: #bbbbbb;
    height: 100%;
    width: 50%;
    display: block;
    margin:auto;
    z-index: -1;
}

Таким образом ваш div будет выровнен по центру, и ваш div также будет находиться под навигационной панелью.

Поделиться
  • 0
    Вот что я получаю, когда использую ваш код: imgur.com/54DuhIS Какой браузер вы используете? Это не работает для меня в Firefox или Chrome.
  • 0
    Я просмотрел его в Chrome и внес необходимые изменения, попробуйте сейчас.
Показать ещё 6 комментариев
1

Посмотрите на свойство z-index CSS. С его помощью вы можете определить, какой элемент расположен поверх другого.

Если вы добавите это в свой стиль #centerstrip, он отобразится под панелью навигации.

#centerstrip {
    position: absolute;
    z-index: -1;
    top: 0px;
}
Поделиться
  • 0
    Это намного лучше, спасибо. Однако одна проблема, с которой я столкнулся, заключается в том, что при уменьшении масштаба в браузере он остается того же размера и не остается в центре. Есть ли какое-то исправление, о котором вы знаете?
0

Могу ли я рекомендовать использовать

.property{
   z-index: 10;
}

Где число указывает наивысший элемент в az-подобной позиции.

Кроме того, если вы хотите, чтобы он сохранялся одинаково с различными разрешениями и масштабированиями, попробуйте адаптивный дизайн.

Могу ли я рекомендовать также, если вы собираетесь получить отзывчивый дизайн, взглянув на некоторые действительно хорошие рамки, такие как бутстрап или основа.

Поделиться
0

Просто возитесь немного, вот и вы. Мне удалось отобразить связанное изображение в CSS.

Хотя я использую только divs, концепция одна и та же.

http://jsfiddle.net/jqarz/1/

Код ниже.

Пара концепций для изучения - это ширина, маржа и отступы. Важно отметить, что ширина - это фактически "ширина поля содержимого", а не ширина элемента, как многие сайты плохо описывают его.

Есть много способов сделать это, и это всего лишь одно, оно действительно зависит от того, что вы пытаетесь сделать и с чем.

HTML:

<div id="background">

    <div id="navbar">navbar</div>
    <div id="content"></div>    

</div>

CSS:

#background
{
    z-index: 0;
    padding: 15px 15px;
    width: 600px;
    height: 800px;
    background-color: #CFF;
    border-style: solid;
    border-width: 1px;
}

#content
{
    z-index: 1;
    border-style: solid;
    border-width: 1px;
    margin: 0 auto;
    width: 90%;
    height: 800px;
    background-color: #FFC;
}

#navbar
{ 
    top: 150px;
    position: absolute;
    z-index: 2;
    width: 600px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    height: 100px;
    background-color: #FCF;
    text-align: center;
    font-size: 4em;
}
Поделиться
0

Я обычно обертываю все в тело внутри div, а затем центрирую div. Элемент body, естественно, будет иметь ширину, равную какому-либо окну вашего браузера, поэтому, если вы первый тег внутри вашего тега тела - это div, и вы центрируете его, он будет центрирован по отношению к телу и, следовательно, к окну. Вот пример кода:

<!doctype HTML>
    <html>
        <head>
            <meta lang="en" charset="utf-8" /> 
            <title>Sample</title>
        </head>
        <body>
            <div id="container">
            </div>

            <style>
                body{
                    background-color: red;
                }
                #container{
                    height: 400px;
                    width: 400px;
                    margin-left: auto;
                    margin-right: auto;
                    background-color: blue;
                } 
            </style>

        </body>
    </html>

Хитрость заключается в использовании margin-left: auto; и margin-right: auto; , и быть уверенным, что вы помещаете этот стиль в div. Вы не можете поместить этот стиль в тело, потому что организму нечего ориентировать на центрирование. А div, однако, может центрировать себя по отношению к ширине тела

Поделиться
0

Поскольку ваш навигатор является частью вашего контента, все, что вам нужно сделать, это расширить его внешний вид, что можно сделать, если его ширина будет больше 100%. Это позволит перейти к основному содержимому.

Чтобы сдвинуть его влево, у вас есть два варианта, оба из которых имеют свои достоинства: 1. Сдвиньте навигационную панель влево, используя положение относительного и отрицательного левого значения. 2. Используйте отрицательную границу с левой стороны.

Это позволит вам избежать использования z-индекса, который может оказаться неудачным, поскольку навигатор является частью центральной полосы.

Поделиться
  • 0
    Я не уверен, как именно сделать то, что вы говорите. Должен ли я установить ширину UL больше 100%? Потому что у меня есть информация о пикселях для каждой кнопки на панели навигации. Кроме того, я доволен своей навигационной панелью, но не центральной полосой, которая должна быть за ней. Не могли бы вы уточнить?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню