CSS-граница, охватывающая другой раздел - PullRequest
Новая
       2

CSS-граница, охватывающая другой раздел

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

Проблема в том, что граница div # content также появляется в div # navigation ? 

<html>
    <head>
        <title>WUI</title>

        <style type="text/css">
            div#header {
            }

            div#navigation {
                float: left;
                padding-right: 20pt;
            }

            div#content {
                border: 5px groove;
            }
        </style>
    </head>

    <body>
        <div id="header">
            <h1>WUI</h1>
        </div>
        <br />
        <div id="navigation">
            <ul>
                <li>Home</li>
                <li>Login</li>
            </ul>
        </div>
        <div id="content">
            <p>I like when you ride with that booty on me!</p>
        </div>
    </body>
</html>

РЕДАКТИРОВАТЬ: Я хочу, чтобы левая сторона (навигация) отображалась в виде боковой панели слева, а содержимое после нее (справа). Я применяю границу к контенту, но эта граница также появляется в div из navigation . Надеюсь, теперь все ясно.

Ответы [ 7 ]

4 голосов
/ 17 января 2011

Вам нужно overflow: auto; для вашего div#content. Это волшебно, поэтому никакого объяснения не будет дано: 

        div#content {
            border: 5px groove;
            overflow: auto;
        }

Ну, после твоего редактирования я вижу, что твоя граница - не проблема. Я обычно делаю это: 

html
{
  background-color: white;
}

body
{
  padding-left: 200px;
  background-color: green;
}

#navigation
{
  position: fixed;
  width: 200px;
  left: 0px;
  top: 0px;
}

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

Вот наполовину актуальная вещь, которую я сделал некоторое время назад. Посмотрите, работает ли он для вас: http://jsfiddle.net/dDZvR/12/

2 голосов
/ 17 января 2011

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

Однако, navigation все еще должен плаватьгде-то, поэтому он занимает пространство внутри content.

Чтобы избежать этого, либо поплавок content, либо оставьте на нем левое поле, эквивалентное ширине navigation.

edit: увидев ваше редактирование, я бы сказал, что идея с левым полем определенно будет лучше.

1 голос
/ 17 января 2011

вам нужно дать float для контента, потому что вы даете float для навигации.используйте этот пример: 

    <style type="text/css">
        div#header {
        }

        div#navigation {
            float: left;
            padding-right: 20pt;
        }

        div#content {
            float: left;
            border: 5px groove;
        }
    </style>
0 голосов
/ 17 января 2011

Это может работать:

WUI 

    <style type="text/css">
        div#header {
            display:block;
        }

        div#navigation {
            width:150px;
            float:left;
        }

        div#content {
            border: 5px groove;
            margin-left:160px;
        }
    </style>
</head>

<body>
    <div id="header">
        <h1>WUI</h1>
    </div>


    <div id="navigation">
        <ul>
            <li>Home</li>
            <li>Login</li>
        </ul>
    </div>

    <div id="content">
        <p>I like when you ride with that booty on me!</p>
    </div>

</body>

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

Вы можете добавить 

float: left;

в содержании и установите ширину самостоятельно

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

Это можно исправить, добавив левое поле к содержимому div #Исправленный код здесь - http://jsfiddle.net/sparky/vctcN/

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

Это из-за того, как работают поплавки. Вам нужно будет наложить маржу на #content или что-то в этом роде.

...