"боковая панель", кажется, прикреплена к "основной", но я не уверен, как / как отменить - PullRequest
Новая
       10

"боковая панель", кажется, прикреплена к "основной", но я не уверен, как / как отменить

0 голосов
/ 08 марта 2012

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

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

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

<body>
    <header>
        <logo>
            <a href="#"><img src="img/logo.png" alt="whskytngfxtrt logo" height="139" width="158" /></a>
        </logo><!-- end logo -->
        <nav>
            <ul>
                <li id="blog"><a href="#">BLOG</a></li>
                <li id="work"><a href="#">WORK</a></li>
                <li id="about"><a href="#">ABOUT</a></li>
                <li id="contact"><a href="#">CONTACT</a></li>
            </ul>
        </nav><!-- end nav -->
    </header><!-- end header -->

    <work>
        <category>
            <ul>
                <h1>Web</h1>

                <h1>Print</h1>

                <h1>Identity</h1>
            </ul>

    <sidebar>
        <dictionary>
            <h3><b>hwis-kee tang-goh foks-trot</b></h3>
            <h4><p><i>noun</i> 1. the best damn creative studio there ever was</p></h4>
        </dictionary><!-- end dictionary -->

        <twitter>
            <h3>@whskytngfxtrt</h3>
            <h4><ul>
                <li><a href="#">sometimes i just really love the internet</a></li>
                <li><a href="#">sometimes i just really love the internet</a></li>
                <li><a href="#">sometimes i just really love the internet</a></li>
            </ul></h4>
        </twitter><!-- end twitter -->

header {
    background: none;
    float: left;
    margin-top: 123px;
    margin-left: 22px;
    position: fixed;
    width: 158px; 
}
main {
    float: left;
    margin-left: 300px;
    margin-top: 310px;
}
work {
    float: left;
    margin-left: 300px;
    margin-top: 310px;  
}
sidebar {
    border-top: 1px solid #202020;
    padding-top: 25px;
    float: right;
    margin-left: 153px;
    margin-top: 295px;
    position: fixed;
    width: 158px;
}
sidebar dictionary {
    position: fixed;
}

sidebar twitter {
    list-style-type: none;
    position: fixed;
}

1 Ответ

0 голосов
/ 08 марта 2012

Похоже, что вам нужно немного left:?px.

т.е. #sidebar {слева: 800px;}

Что касаетсячто является причиной того, что, если я правильно понимаю проблему, все, что происходит, это то, что position:fixed убирает боковую панель из потока документов, и, поскольку она находится вне потока документов, она позиционирует себя напротив окна браузера, илиследующий position:fixed элемент.Это нормальная функция position:fixed, исправленная с помощью left, right, top, bottom,, а если ничего не помогает, margin and padding.

Редактировать

Попробуйте этот код, заменяя вашу боковую панельстили: 

sidebar {
border-top: 1px solid #202020;
height: 100%;
margin-left: 153px;
margin-top: 295px;
padding-top: 25px;
position: fixed;
width: 158px;

Поплавки не работают с position:fixed.Это исправило это для меня ... Но я все еще не вижу логотип.Судя по вашему URL, похоже, что img находится в файле на вашем компьютере и недоступен для реальной сети.

Помогает ли это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...