VPF::Как установить min ширину элемента для след.

php5

Дата 16.9.2008, 16:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 272
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

Как установить min ширину центрального элемента для след. верстки:

Код


<!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" xml:lang="en">

<head>
<title>Example 5: Negative Margins</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
.header {
    border: 1px solid #b5b98e;
    background: #e4e6cf;
}
#outer_wrapper {
    background: #fff url(background_2.gif) repeat-y left;
}
#wrapper {
    background: url(background_3.gif) repeat-y right;
}

#container {
    width: 100%;
    float: left;
    margin-right: -200px;
    background: url(background_3.gif) repeat-y right;
}
#content {
    margin-right: 200px;
    background: url(background_2.gif) repeat-y left;
}
#main {
    margin-left: 150px;
}
.left {
    width: 150px;
    float: left;
}
.menubar {
    width: 200px;
    float: right;
}
#footer {
  height: auto;
    border: 1px solid #b5b98e;
    background: #e4e6cf;
    text-align: center;
}
h1 {
    margin-top: 0;
}
.last {
    margin-bottom: 0;
}
.clearing {
    height: 0;
    clear: both;
}
/*]]>*/
</style>
</head>

<body>

<div class="header">header</div>

<div id="outer_wrapper">

    <div id="wrapper">
        <div id="container">
            <div id="content">
            
                <div class="left">
                    
            <h1>sidebar</h1>
            <p>Here be your sidebar. Add whatever content you may desire.</p>                    
                    
                </div>
                
                <div id="main">
                    <h1>content</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
                    <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>

                </div>

                
            </div>
        </div>
        
        <div class="menubar">
        <h1>navbar</h1>
<ul>
<li>link one</li>
<li>link two</li>
<li>link three</li>
<li>link four</li>
<li>link five</li>
<li>link six</li>
<li>link seven</li>
<li>link eight</li>
<li>link nine</li>
<li>link ten</li>
</ul>
<ul>
<li>link one</li>
<li>link two</li>
<li>link three</li>
<li>link four</li>
<li>link five</li>
<li>link six</li>
<li>link seven</li>
<li>link eight</li>
<li>link nine</li>
<li>link ten</li>
</ul>

<ul>
<li>link one</li>
<li>link two</li>
<li>link three</li>
<li>link four</li>
<li>link five</li>
<li>link six</li>
<li>link seven</li>
<li>link eight</li>
<li>link nine</li>
<li>link ten</li>
</ul>

</div>

        
        <div class="clearing">&nbsp;</div>
    </div>

</div>

<div id="footer">
footer&nbsp;footer&nbsp;footer
</div>

</body>
</html>

что бы при этом правая колонка при уменьшении ширины окна браузера не залазила на центральный и левый блок smile

K1ng

Дата 20.9.2008, 18:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 7.8.2008
Где: Украина -> Хар ьков

Репутация: нет
Всего: нет

#outer_wrapper { min-width: 700px; }
.header { min-width: 700px; }

Добавь эти два правила в самый конец блока правил CSS! Только буть осторожет, IE вплоть ДО версии 7 не поддерживает min-width.

php5

Дата 22.9.2008, 09:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 272
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

OK,Спасибо

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »