требуется CSS-макет с 3 столбцами

ProgramBox

требуется CSS-макет с 3 столбцами

Post author:admin
Запись опубликована:19 апреля, 2023
Post category:Вопросы по программированию

#css #seo #stylesheet

#css #seo #таблица стилей

Вопрос:

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

Может ли кто-нибудь порекомендовать способ исправить это или другой макет, который удовлетворяет этому требованию?

Еще одна вещь, которую следует помнить при этом, — это порядок отображения содержимого в коде — 1) 2) 3), и как показано на странице. Любой из столбцов должен иметь возможность перемещать нижний колонтитул вниз, и я хотел бы, чтобы были определены еще две области: то, что в настоящее время является заголовком, должно отображаться как 4) в коде, и 5) быть небольшой панелью содержимого над 4)

Короче говоря, области содержимого страницы будут отображаться следующим образом на странице (упорядоченные сверху вниз, начиная с 1) в коде):

 7) top menu
5) header
4) contentbar
2) 1) 3)
6) (footer)

Спасибо.

Обновить

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Holygrail1</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* { 
    margin:0; padding:0 
}
body { 
    font:76% Arial, Helvetica, sans-serif 
}
p { 
    margin:0 10px 10px 
}
a {
    display:block; color:#981793; padding:10px 
}

#container 
{
    margin-top:104px; min-height:400px;
    min-width:700px;
    top:20px;
}
#wrapper { 
    float:left; width:100% 
}
#content { 
    margin: 0 200px 0 200px
}
#content p {    
    line-height:1.4 
}
#leftbar { 
    background:#b9caff; float:left; width:200px; margin-left:-100% 
}
#rightbar { 
    position: absolute;
    background:#ff8539; 
    right:0px;
    width:200px; 
}
#header { 
    position:absolute; top:0; width:100%; height:266px;
}
#header h1 { 
    line-height:80px; padding-left:10px; background:#eee; color:#79b30b 
}
#contentbar { 
    position:absolute; top:80px; width:100%; z-index:1 
}

#footer, #contentbar { 
    background:#333; color:#fff 
}
#footer p, #contentbar p { 
    margin:0; padding:5px 10px; line-height:14px 
}
#footer { 
    clear:left; width:100% 
}

#topbar { 
    position:absolute; top:0px; width:100%; z-index:1;
    height: 20px;
    background-color:red;
}

</style>
</head>
<body>
    <div id="container">
        <div id="wrapper">
            <div id="content">
                <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
            </div>
        </div>
        <div id="leftbar">
            <p><strong>2) leftbar here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler</p>
        </div>
        <div id="rightbar">
            <p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very</p>
                <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column</p>
                <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very</p>
                <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very</p>
        </div>
    </div>
    <div id="contentbar"><p>4) Content bar here.</p></div>
    <div id="header"><h1>5) Header</h1></div>
    <div id="footer"><p>6) Here it goes the footer</p></div>
    <div id="topbar"><p>7) Top Bar </p></div>
</body>
</html>

Ответ №1:

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

Возможно, это глупый вопрос, но у вас это не работает?

 body {
  min-width: 600px;
}

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

2. Я имею в виду применить CSS ко всему <body> тегу (не к основной части контента), который охватывает весь веб-сайт. У меня это работает.

3. Но я не совсем уверен, что вы имеете в виду под min-width . Вы говорите о минимальной ширине всего веб-сайта или о минимальной ширине центральной колонки ?

Ответ №2:

Вот ваш проверенный макет.Порядок такой, какой вы хотели, я должен был использовать position:absolute для заголовка и «панели содержимого».

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout 19</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
* { margin:0; padding:0 }
body { font:76% Arial, Helvetica, sans-serif; min-width:600px }
a { display:block; color:#981793; padding:10px }
#navigation, #extra, #header, #contentbar { position:absolute; top:0 }
#container { margin-top:104px; position:relative }
#container p { margin:0 10px 10px }
#content { margin:0 200px }
#content p { line-height:1.4 }
#navigation { background:#b9caff; width:200px }
#extra { background:#ff8539; width:200px; right:0 }
#header { width:100% }
#header h1 { line-height:80px; padding-left:10px; background:#eee; color:#79b30b }
#contentbar { margin-top:80px; width:100% }
#footer, #contentbar { background:#333; color:#fff }
#footer p, #contentbar p { padding:5px 10px; line-height:14px }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
            <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column</p>
            <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very</p>
            <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very</p>
        </div>
       <div id="navigation">
            <p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler</p>
        </div>
        <div id="extra">
            <p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very</p>
        </div>
    </div>
    <div id="contentbar"><p>4) Content bar here.</p></div>
    <div id="header"><h1>5) Header</h1></div>
    <div id="footer"><p>6) Here it goes the footer</p></div>
</body>
</html>

1. Спасибо, Мидас. Это в значительной степени работает. Я установил минимальную ширину контейнера, «4) панель содержимого» идеально подходит, но я хочу иметь возможность перемещать всю страницу вниз, скажем, на 20 пикселей, чтобы иметь дополнительное верхнее меню «7) верхнее меню)», без необходимости добавлять вертикальное расположение к остальным элементам.

2. @ElHaix: Настройте top для вашего заголовка и панели содержимого, а также margin-top для #container . Затем добавьте меню и разместите его с абсолютным позиционированием, таким как заголовок и панель содержимого.

3. Спасибо, Мидас. И последнее. Как я могу исправить правильную ширину столбца и прикрепить ее к RHS — no%?

4. @Midas: ознакомьтесь с моим обновлением выше. Я немного изменил ваш макет, но все еще сохраняются некоторые проблемы. Смотрите выше.

5. @ElHaix: Черт. Я пробовал все, и кажется, что вы не можете этого сделать, не изменив порядок на 5) 4) 1) 3) 2) 6) . Смотрите здесь.

Ответ №3:

Этот пример может быть установлен на постоянное значение width:600px либо в <body> теге, либо вокруг самого внешнего <div> тега (ов).

Более подробное объяснение этого макета можно найти в Отдельном списке — Holy Grail