Nieuw lid |
|
Wat gaat er fout bij me styling
Het volgende resultaat heb ik nu EN MOET ZO BLIJVEN in een masterpage, waarbij alleen het mainContent zal veranderen op moment dat er op een menulink geklikt wordt.
Header
Left Contentplaceholder
Id=main Right
Css script voor de contents:
#content{
float:left;
width:100%;
min-height: 100%;
padding: 0px;
top: 0px;
}
#leftContent{
float: left;
width: 200px;
}
#rightContent{
float:right;
width: 200px;
height: 611px;
}
#mainContent{
height: 611px;
width: 368px;
background-color: #FFFFFF;
}
#content{ float:left; width:100%; min-height: 100%; padding: 0px; top: 0px; } #leftContent{ float: left; width: 200px; } #rightContent{ float:right; width: 200px; height: 611px; } #mainContent{ height: 611px; width: 368px; background-color: #FFFFFF; }
Maar wanneer ik me contentpages laadt in me masterpage krijg ik het volgende resultaat:
header
left Als ik hier iets plaats dan loopt het op deze manier door en springt me rechtercontent naar benden.
right
Me rechterContent springt naar beneden en is niet vast aan me maincontent, zonder spatie ertussen.
MASTERPAGE:
<div>
<div>
<div id="header">
<div id="logo"><img src="images/logo.png" alt="" height="60px" width="135px" /></div>
<div id="hrHeader" />
</div>
</div>
<div id="topMenuBar">
<span><img src="images/menuBar_Button.jpg" alt="" id="headerLeftMenu" /></span><a href="Default.aspx" class="txtLinkMenuTop">link1</a>
<span><img src="images/menuBar_Button.jpg" alt="" class="menuButtonsTop" /></span><a href="Default.aspx" class="txtLinkMenuTop">link2</a>
</div>
<div id="content">
<div id="leftContent">
<div id="leftMenu_Back">
<div class="leftMenu_LinkBack"><a href="Default.aspx"><img src="images/menuLeft_Pijl.png" alt="" class="leftMenu_Pijl" /><span class="txtMenuLink">leftlink1</span></a></div>
<div class="leftMenu_LinkBack"><a href="Default.aspx"><img src="images/menuLeft_Pijl.png" alt="" class="leftMenu_Pijl" /><span class="txtMenuLink">leftlink2</span></a></div>
<div class="leftMenu_LinkBack"><a href="Default.aspx"><img src="images/menuLeft_Pijl.png" alt="" class="leftMenu_Pijl" /><span class="txtMenuLink">leftlink3</span></a></div>
</div>
</div>
<div id="mainContent">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="rightContent">
<div id="rightMenu_Back">
<div class="barsRight">
<span><img src="images/menuRight_Pijl.png" alt="" class="rightMenu_Pijl" /></span><span class="txtMenuRight">kopright1</span>
</div>
<div id="loginBack">
</div>
<div class="barsRight">
<span><img src="images/menuRight_Pijl.png" alt="" class="rightMenu_Pijl" /></span><span class="txtMenuRight">kopright2</span>
</div>
<div id="promoBack"> tekst enz</div>
<div class="barsRight">
<span><img src="images/menuRight_Pijl.png" alt="" class="rightMenu_Pijl" /></span><span class="txtMenuRight">kopright3</span>
</div>
<div id="serviceBack">
<span id="imgService"><img src="images/contactService.jpg" alt="" /></span>
<span id="infoService">
<label>tekst1</label>
<label>tekst2</label>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="logo"><img src="images/logo.png" alt="" height="60px" width="135px" /></div> <span><img src="images/menuBar_Button.jpg" alt="" id="headerLeftMenu" /></span><a href="Default.aspx" class="txtLinkMenuTop">link1 </a> <span><img src="images/menuBar_Button.jpg" alt="" class="menuButtonsTop" /></span><a href="Default.aspx" class="txtLinkMenuTop">link2 </a> <div class="leftMenu_LinkBack"><a href="Default.aspx"><img src="images/menuLeft_Pijl.png" alt="" class="leftMenu_Pijl" /><span class="txtMenuLink">leftlink1 </span></a></div> <div class="leftMenu_LinkBack"><a href="Default.aspx"><img src="images/menuLeft_Pijl.png" alt="" class="leftMenu_Pijl" /><span class="txtMenuLink">leftlink2 </span></a></div> <div class="leftMenu_LinkBack"><a href="Default.aspx"><img src="images/menuLeft_Pijl.png" alt="" class="leftMenu_Pijl" /><span class="txtMenuLink">leftlink3 </span></a></div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> <div id="rightMenu_Back"> <span><img src="images/menuRight_Pijl.png" alt="" class="rightMenu_Pijl" /></span><span class="txtMenuRight">kopright1 </span> <span><img src="images/menuRight_Pijl.png" alt="" class="rightMenu_Pijl" /></span><span class="txtMenuRight">kopright2 </span> <div id="promoBack"> tekst enz </div> <span><img src="images/menuRight_Pijl.png" alt="" class="rightMenu_Pijl" /></span><span class="txtMenuRight">kopright3 </span> <span id="imgService"><img src="images/contactService.jpg" alt="" /></span>
DEFAULT.aspx:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<img src="images/introbanner.jpg" alt="" />
</div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <img src="images/introbanner.jpg" alt="" /> </asp:Content>
|