Это очень странный дизайн, и я действительно видел некоторые странные проекты.
- Вы помещаете все в элемент
<form> и под всем, я имею в виду все, включая заголовок, div #masterContent и footer. - Чем вы используете таблицы, и я понятия не имею, почему.Все, что вы сделали с таблицами, может быть сделано с помощью divs.
- Вы предоставляете вам div.masterContent позицию: фиксированную с верхом: 178px и низом: 42px.Вы знакомы с концепциями позиционирования в CSS?Когда вы назначаете любому элементу фиксированную позицию, этот элемент остается на экране независимо от того, прокручиваете ли вы вниз.Это то, что вы хотите, и если вы это сделаете, я не могу себе представить, какой это будет страница.
- Вы присваиваете своей div.linksPanel абсолютную позицию с вершиной: 0, снизу: 0и слева: 10 пикселейКак я уже сказал, это не имеет никакого смысла.Как это может быть 0 сверху, а также 0 снизу.Эти свойства смещения устанавливаются с помощью верхнего левого, верхнего правого или нижнего левого, нижнего правого.
- У вашего div.mainPanel есть те же проблемы.
Я думаю,либо вы совершенно не поняли CSS Positioning and Layouts, либо я совершенно не понял этого.Может быть, это то, что вы ищете.
<!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" lang="en" xml:lang="en" dir="ltr">
<head runat="server">
<title>Document Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="basic.css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<p>Header Stuff Here</p>
<p>More Header Stuff Here</p>
</div>
<div id="content">
<div id="links_panel">
<p><a href="error.aspx">Link1</a></p>
<p><a href="error.aspx">Link2</a></p>
<p><a href="error.aspx">Link3</a></p>
<p><a href="error.aspx">Link4</a></p>
<p><a href="error.aspx">Link5</a></p>
<p><a href="error.aspx">Link6</a></p>
<p><a href="error.aspx">Link7</a></p>
<p><a href="error.aspx">Link8</a></p>
<p><a href="error.aspx">Link9</a></p>
<p><a href="error.aspx">Link10</a></p>
<p><a href="error.aspx">Link11</a></p>
<p><a href="error.aspx">Link12</a></p>
<p><a href="error.aspx">Link1</a></p>
<p><a href="error.aspx">Link2</a></p>
<p><a href="error.aspx">Link3</a></p>
<p><a href="error.aspx">Link4</a></p>
<p><a href="error.aspx">Link5</a></p>
<p><a href="error.aspx">Link6</a></p>
<p><a href="error.aspx">Link7</a></p>
<p><a href="error.aspx">Link8</a></p>
<p><a href="error.aspx">Link9</a></p>
<p><a href="error.aspx">Link10</a></p>
<p><a href="error.aspx">Link11</a></p>
<p><a href="error.aspx">Link12</a></p>
</div>
<div id="main_panel">
<p>test content</p>
<p>test more content</p>
<p>test</p>
<p>test</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem
</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<br />
</div>
<div id="footer_panel">
<p>Footer stuff here.</p>
</div>
</form>
</div>
Со следующим CSS
/* START - BASIC CSS */
/* START - CSS Reset */
*
{
margin: 0;
padding: 0;
}
p
{
line-height: 20px;
margin: 20px 0;
}
/* END - CSS Reset */
/* START - div wrapper */
div#wrapper
{
margin: 0 auto;
width: 960px;
border: 1px solid black;
}
/* END - div wrapper */
/* START - hack for "margin: auto" for IE6*/
body
{
text-align: center;
}
div#wrapper
{
text-align: left;
}
/* END - hack for "margin: auto" for IE6*/
/* START - form form1 */
form#form1
{
}
/* END - form form1 */
/* START - div header */
div#header
{
border: 1px solid black;
}
/* END - div header */
/* START - div content */
div#content
{
border: 1px solid black;
height: 500px;
}
/* END - div content */
/* START - div links_panel */
div#links_panel
{
width: 250px;
float: left;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div links_panel */
/* START - div main_panel */
div#main_panel
{
width: 704px;
float: right;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div main_panel */
/* START - div footer_panel */
div#footer_panel
{
clear: both;
border: 1px solid black;
}
/* END - div main_panel */
/* END - BASIC CSS */
В основном вам нужен заголовок, за которым следует панель ссылок слевакоторый должен иметь полосу прокрутки, за которой следует mainPanel, которая также должна иметь полосу прокрутки, и она должна быть справа от linksPanle, и, наконец, после него должен стоять подстрочный знак.