CSS или jQuery для этого макета в стиле таблицы - PullRequest
Новая
       3

CSS или jQuery для этого макета в стиле таблицы

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

Вот код, который я придумал для разметки моей страницы.Проблема в том, что все это статически определено.Я хотел бы, чтобы это было динамическим, то есть изменял размеры в зависимости от размера браузера, используемого для просмотра.Я уверен, что все div можно фиксировать по размеру для определенного размера страницы.Панели «Меню» и «Содержимое» должны соответствовать элементам div.Div содержимого будет прокручиваться по мере необходимости.

Могу ли я сделать это с помощью CSS или потребуется jQuery - или вообще есть лучший подход? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html, body  
        {
            margin: 0;
            padding: 0;
        }

        #container
        {
        }

        #toolbar
        {
            background-color: Gray;
            width: 100%;
        }

        #PageDescription
        {
            position: absolute;
            background-color: Purple;
            width: 100%;
            text-align: center;
        }
        #RestOfPage
        {
            position: absolute;    
            background-color: White;
            top: 82px;
            height: 905px;
            width: 1800px;
        }
        #Footer
        {
            position: absolute;
            top: 987px;
            left: 0;
            background-color: Yellow;
            width: 100%;
            height: 30px;
        }
        #LeftPane
        {
            position: inherit;
            width: 120px;
            background-color: Lime;
            height: 100%;
        }
        #RightPane
        {
            position: inherit;
            width: 100%;
            background-color: Silver;
            left: 120px;        
            height: 100%;
        }
    </style>
</head>
<body>
        <div id="toolbar">
            <label for="Category">Category: </label><select id="Category"></select>
        </div>
        <div id="Footer"></div>
        <div id="PageDescription">
            <h1>Page Description</h1>
        </div>
        <div id="RestOfPage">
            <div id="LeftPane">Menu</div>
            <div id="RightPane">Content Content Content</div>
        </div>
</body>
</html>

Ответы [ 2 ]

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

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

#LeftPane {
    position: relative;
    float: left;
    width: 13%;
    background-color: Lime;
    /* You should avoid using named colors, try 
     * #98ED00 or another hex value*/
    height: 100%;
}
#RightPane {
    position: relative;
    float: left;
    margin-left: 2%;
    width: 85%;
    background-color: Silver;
    height: 100%;
}

С этим CSS, страница должна хорошо масштабироваться.И для дальнейшего использования избегайте absolute.Он негибкий, его трудно перемещать, и каждый элемент размещает свой контент прямо над или под этим стилизованным элементом, если явно не указано НЕ делать этого.Короче говоря, он будет хорошо смотреться только на вашем компьютере.

Кроме того, это решение может быть полностью реализовано в CSS.JQuery не требуется.

Вот некоторые соответствующие ссылки, на которые вы можете сослаться в будущем, благодаря W3C Schools.

Позиционирование CSS , CSS Floating , CSS Box Model

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

Вы также можете использовать процентную ширину и высоту с #RestOfPage. Изучите использование min-height / max-height в дополнение к процентному макету. Это остановит неожиданную перестройку.

...