Я новичок в веб-дизайне, и у меня проблема со страницей asp.net и использованием CSS. Моя проблема в том, что я хочу, чтобы структура моего сайта была такой.
Заголовок -----------------
NavBar | Содержание
............ | ......
Footer -----------------
И у меня работает общий дизайн, однако, когда у меня длинная страница контента, даже если она находится в плавающем порядке: правый div, если он длиннее моей навигационной панели, появляется под ней. Итак, я получаю что-то вроде
Заголовок -----------------
NavBar | Содержание
...........
| Содержание
| Содержание
| ...
Footer -----------------
Что мне не нужно, я упустил какой-то важный тег / концепцию по этому поводу, ниже приведен мой код для CSS и страницы.
<form id="masterForm" runat="server" >
<div id="container" >
<div id="header"><br />
<h1>Simon & Cats Travel Blog</h1>
</div>
<div id="sidebar">
<asp:SiteMapDataSource ID="web" runat="server" />
<asp:TreeView ID="siteTreeView" runat="server" DataSourceID="web" ImageSet="Arrows" >
</asp:TreeView>
<div >
<asp:LoginView ID="loginView" runat="server">
<AnonymousTemplate>
</AnonymousTemplate>
<LoggedInTemplate >
</asp:LoginView>
</div>
</div>
<div id="content" runat="server" >
<br />
<asp:SiteMapPath ID="siteBreadcrumb" runat="server">
</asp:SiteMapPath>
<br />
<asp:ContentPlaceHolder ID="HeaderSectionContent" runat="server" >
</asp:ContentPlaceHolder>
</div>
<div id="footer" >
</div>
</div>
</form>
body {
background-color: #4a2A00;
font-family: verdana,arial,serif;
font-size: 0.9em;
margin-bottom: 20px;
margin-top: 20px;
text-align: center;
}
container {
width:85%;
color: #000000;
text-align: left;
top: 0px;
left: 0px;
background-color: #F5BF7A ;
}
header{
margin-bottom: 10px;
background: url(banner.jpg) no-repeat;
height: 140px;
width: 100%;
}
sidebar{
float: left;
width: 25%;
margin-left: 1%;
display: inline;
}
content{
float: right;
width: 68%;
margin-left: 3%;
background-color : White ;
}
footer{
clear: both;
color: #000000;
background-color : White ;
text-align: right;
font-size: 0.7em;
}