VPF::Верстка div'ами + JQuery - Форум программистов

Marlik

Дата 6.9.2010, 12:59 (ссылка)

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

Загрузка ...

Бывалый

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

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

Доброго, есть такая проблема, нужен трехколоночный вариант, сверху header снизу footer.

-------------header-------------
sidebar1, content, sidebar2
--------------footer--------------

И самое главное при клике на кнопку нужно что-бы правый saidbar2 убирался вообще а content расширялся на место sidebar2. Так вот проблемма в том что, sidebar1 сужается слишком сильно. Есть index.html

Код


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

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="stylesheet" type="text/css" href="my.css">
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>  
   
</head>
  <body>

<p>
<input type="button" value="Показать" onclick="$('#main2').addClass('use-sidebar');">
<input type="button" value="Скрыть" onclick="$('#main2').removeClass('use-sidebar');">
<input type="button" value="Туда-сюда" onclick="$('#main2').toggleClass('use-sidebar');">
 </p>

<div id="header">header</div>

<div class="use-sidebar sidebar-at-right" id="main2">

    <div id="sidebar1">Sidebar1</div>

    <div id="content">Content</div>
 
    <div id="sidebar2">Sidebar2</div>
 
 <!--   <div id="clear">&nbsp;</div> -->
 
</div>

<div id="footer">footer</div>

</body>
</html>

my.css

Код


#content,#sidebar1,#sidebar2 {
    line-height: 100px;
    text-align: center;
    border: 1px solid;
    margin: 1px 1px 1px 1px;
}

#header,#footer {
background: green;
line-height: 100px;
    text-align: center;
    border: 1px solid;
}

#footer {
clear: both;
}
 
#sidebar1 {
    background-color: #DEF;
    border-color: #BCD;
    display: block;
    float: left;
}

#sidebar2 {
    background-color: #DEF;
    border-color: #BCD;
    display: none;
}

#content {
    background-color: #EFE;
    border-color: #CDC;
    display: block;
}

 
.use-sidebar #content {
width: 49%;
}

.use-sidebar #sidebar1 { 
    position: relative;
  /*  display: block; */
    width: 25%;
    float: left;
}

.use-sidebar #sidebar2 {
    display: block;
    width: 25%;
}
 
.use-sidebar.sidebar-at-left #content,
.use-sidebar.sidebar-at-right #sidebar2 {
float: right;
}

.use-sidebar.sidebar-at-right #content, 
.use-sidebar.sidebar-at-left #sidebar2 {
float: left;
}

Уже весь мозг сломал, перерыл весь гугл. Может кто справлялся с такой проблемой. Спасибо.

ksnk

Дата 6.9.2010, 17:07 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

min-width для sidebar1 не помогает?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Marlik

Дата 6.9.2010, 19:57 (ссылка)

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

Загрузка ...

Бывалый

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

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

Спасибо огромное, заработало!!!!!!!!!! У меня не такие обширные понятия в css. smile

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