css: проблемы с плавающей боковой панелью - PullRequest
0 голосов
/ 12 января 2011

Эй, ребята, я не могу заставить его работать.

У меня есть div.post с #comments и формой #respond.div.post содержит #comments и форму #respond.я просто хочу разместить боковую панель справа от всего div.post, и я не могу заставить его работать.

вот пример.Любая идея, как это решить - это, вероятно, довольно просто.:)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>layout</title>

    <style type="text/css">

    body {
        margin:0;
        padding:0;
    }

    #main {
        background:#cfcfcf;
    }

    .inner {
        margin: 0 auto;
        padding: 96px 72px 0;
        width: 1068px;
        border-color: #000;
        border-style: solid;
        border-width: 0 1px;
        color: #3C3C3C;
    }

    .post {
        width: 705px;
        background:#999;
    }

    #comments, #respond {
        width: 705px;
        background:#999;
    }

    #sidebar {
        width:338px;
        background:#777;
        margin-left:730px;
    }

    </style>
</head>
<body>

    <div id="main">

        <div class="inner">

        <div id="post" class="post">

            <h2>Lorem Ipsum Test Page</h2>

            <div class="entry">

                <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

            </div> <!-- entry -->

            <div id="comments">

                <h2>One Response</h2>

                <ol class="commentlist">
                    <li id="comment" class="comment">
                        <div class="comment-body">
                            <div class="comment-author vcard">
                                Tom says:
                            </div>

                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea found. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                        </div>
                    </li>
                </ol>
            </div> <!-- comments -->

            <div id="respond">

                <h2>Leave a Reply</h2>

                <form id="commentform" method="post" action="">

                    <input type="text" aria-required="true" tabindex="1" size="22" value="" id="author" name="author" gtbfieldid="230"> <label for="author">Name (required)</label>

                    <input type="text" aria-required="true" tabindex="2" size="22" value="" id="email" name="email" gtbfieldid="231"> <label for="email">Mail (will not be published) (required)</label>

                    <input type="text" tabindex="3" size="22" value="" id="url" name="url" gtbfieldid="232"> <label for="url">Website</label> </div>

                    <textarea tabindex="4" rows="10" cols="58" id="comment" name="comment"></textarea>

                    <input type="submit" value="Submit Comment" tabindex="5" id="submit" name="submit">
                    <input type="hidden" id="comment_post_ID" value="36" name="comment_post_ID">
                    <input type="hidden" value="0" id="comment_parent" name="comment_parent">

                </form>

            </div> <!-- respond -->

        </div> <!-- post -->

        <div id="sidebar">

            <h2>Meta</h2>
                <ul>
                    <li>Login</li>
                    <li>Anything</li>
                </ul>

            <h2>Subscribe</h2>
                <ul>
                    <li>Entries (RSS)</li>
                    <li>Comments (RSS)</li>
                </ul>

        </div> <!-- sidebar -->

        </div> <!-- inner -->

    </div> <!-- main -->

</body>
</html>

edit: можете ли вы увидеть какие-либо ошибки в моем HTML.firebug говорит, что div боковой панели на самом деле находится вне .inner div.Однако, если я посмотрю на код внутри.

Ответы [ 2 ]

0 голосов
/ 12 января 2011

Есть несколько способов справиться с этим. Однако вы не установили свойство float для div#sidebar или div.inner. Попробуйте добавить float: left; к обоим и удалить свойство margin-left из div#sidebar.

Вероятно, вам придется настроить ширину.

0 голосов
/ 12 января 2011

браузер добавляет значения для

.post width, 
#sidebar width 

И

#sidebar #margin-left.  

Уберите поле слева на боковой панели и поместите его вправо.

1009 ** * Редактировать 1010 ** * 1011 Я просто вставил это в скрипку и подумал, что мой экран взорвался. У вас есть ряд проблем с вашим CSS, которые выходят за рамки простого исправления выше. В частности:

  1. div по умолчанию имеет ширину 100%, если вы не используете их.
  2. когда вы устанавливаете поля для элемента, это добавляется к ширине элемента (как и заполнение). Если вы хотите указать фиксированную ширину, убедитесь, что ваша ширина + отступ + поле (+ все, что рядом с ним) меньше ширины экрана.

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

Хорошо, я нашел вашу проблему с рендерингом боковой панели за пределами .inner div. Проверьте строку: <input type="text" tabindex="3" size="22" value="" id="url" name="url" gtbfieldid="232"> <label for="url">Website</label> </div> Удалите дополнительные 1010 *.

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