Доброго, есть такая проблема, нужен трехколоночный вариант, сверху 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"> </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;
}
|
Уже весь мозг сломал, перерыл весь гугл. Может кто справлялся с такой проблемой. Спасибо.
|
