2012-02-27 7 views
0

divsとcssを使用してasp.net3.5でWebフォームをデザインしているときに、フォームが正しく整列しているように見える(すべてのコントロールがevrywerに分散されています)。これはどうですか?とにかく今後も影響を及ぼしますか?ここ はまた率が一泊ラベル料と合わせるれていないフォームコードの1はブラウザで影響を受けますか?

<div id="SRForm"> 
     <h1>Room Reservation</h1> 


      <div id="SRLeft"> 
       <ul> 
          <li>Check Availability</li> 
          <li class="status">Select Room</li> 
          <li>Enter Details </li> 
          <li>Review Reservation & Confirm</li> 
       </ul> 

      </div> 

      <div id="RoomType"> 

      <div id="Room1"> 
       <div class="imgdetails"> 
        <img class="SRimg" src="images/rooms/regular-room.jpg"/> 
       </div> 
       <div class="roomdetails"> 
        <h3>Regular Room</h3> 
        <asp:Label runat="server" id="lblroom1" class="lblroom">Available:</asp:Label> 
        <asp:Label runat="server" id="lblroom2" class="lblroom">no of rooms</asp:Label> 
        <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p> 
        <asp:CheckBox ID="CheckBox1" runat="server" /> 
        <asp:DropDownList ID="cboroom1" class="cboroom" runat="server"> 
         <asp:ListItem>1</asp:ListItem> 
         <asp:ListItem>2</asp:ListItem> 
         <asp:ListItem>3</asp:ListItem> 
        </asp:DropDownList> 
       </div> 
       <div > 
       </div> 
      </div> 

      <div id="Room2"> 
       <div class="imgdetails"> 
        <img class="SRimg" src="images/rooms/regular-room.jpg"/> 
       </div> 
       <div class="roomdetails"> 
        <h3>Delux Room</h3> 
        <asp:Label ID="lblroom3" runat="server" class="lblroom">Available:</asp:Label> 
        <asp:Label ID="lblroom4" runat="server" class="lblroom">no of rooms</asp:Label> 

        <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p> 
        <asp:CheckBox ID="CheckBox2" runat="server" /> 
        <asp:DropDownList ID="DropDownList2" class="cboroom" runat="server"> 
         <asp:ListItem>1</asp:ListItem> 
         <asp:ListItem>2</asp:ListItem> 
         <asp:ListItem>3</asp:ListItem> 
        </asp:DropDownList> 

       </div> 
       <div class="rate"> 
       <p class="proom">Charge Per Night:</p> 
       <asp:label runat="server" class="lblrate">3000INR</asp:label> 
       </div> 
      </div> 

      <div id="Room3"> 
       <div class="imgdetails"> 
        <img class="SRimg" src="images/rooms/regular-room.jpg"/> 
       </div> 
       <div class="roomdetails"> 
        <h3>Super-Delux Room</h3> 
        <asp:Label ID="lblroom5" runat="server" class="lblroom">Available:</asp:Label> 
        <asp:Label ID="lblroom6" runat="server" class="lblroom">no of rooms</asp:Label> 

        <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p> 
        <asp:CheckBox ID="CheckBox3" runat="server" /> 
        <asp:DropDownList ID="DropDownList3" class="cboroom" runat="server"> 
         <asp:ListItem>1</asp:ListItem> 
         <asp:ListItem>2</asp:ListItem> 
         <asp:ListItem>3</asp:ListItem> 
        </asp:DropDownList> 
       </div> 
       <div > 
       </div> 
      </div> 
     </div>  
     </div> 


here is css 

#SRForm { margin:0; padding:0; width:900px; height:700px;} 
#SRForm h1 { text-align:center; font-size:20px; margin: 20px 0; font-weight:bold;} 

    #SRLeft  { width:200px; float:left; padding:10px 10px; margin-right:10px; } 
    #SRLeft ul { list-style:none; margin:0; padding:0; height: 160px;}  
    #SRLeft li { margin:0; padding:0; list-style:none; float:right; 
         position:relative; padding:5px 5px 5px 5px; font-weight:bold; 
         width:180px;} 
    #SRLeft li a { text-align:center; display:block; width:180px; float:right;} 

    #RoomType { width: 650px; float:left; height:700px; 
        } 

    #Room1 {float:left; width:630px; margin-bottom:10px; height:230px; border:2px solid #FFF; } 
    #Room2 {float:left; width:630px; margin-bottom:10px; height:230px; border:2px solid #FFF;} 

    #Room3 {float:left; width:630px; margin-bottom:10px; height:230px; border:2px solid #FFF;} 


    .roompara{ width:380px;font-size:14px;} 
    .imgdetails { width:240px; margin:2px 2px 2px 2px;} 
    .roomdetails { width:380px; float:left;} 
    .roomdetails h3 { font-weight:bold; text-align:center; width:380px; margin-top:5px;} 
    .lblroom  { margin-top:2px; padding:3px;} 
    .cboroom  { width:100px;} 
    .rate   { width:630px; margin-left:5px; float:left; height:50px;} 
    .SRbtn   { float:right; margin-bottom:10px;} 
    .proom   { font-weight:bold;} 
    .lblrate  { float:left; position:absolute; margin-left:100px;} 


/*----images in Rooms---*/ 
.SRimg { border:4px solid #eee; margin:5px 5px 5px 5px; width:200px; float:left; 
    height: 150px; 
} 

..です いただきました間違いを教えてください。

+0

デザイナービューは、最終的に得られるものの近似値に過ぎません。また、異なるブラウザでは異なる結果が表示されることもあります(幸いにも、これは標準化の進展に伴い改善されますが、それにもかかわらず)。 – Lucero

+0

Dreamweaverなどの「ライブデザインビュー」を使ってデザインを見ていますか? – Kyle

+0

@KyleSevenoaksはDreamweaverを使用していないので、デザインビューではなくコーディングを通じてデザインします。しかし、私はデザインビューでそのすべての混乱を参照してください –

答えて

-2

間違いを教えてください。

あなたの間違いはasp.netを使用しています...それは頬の応答の舌で私を撃たないでください。

私はあなたに何らかのデザインビューを使用していると仮定していますか?あなたが最初から正しいことをしなければ、レイアウトの問題が発生します。ここで見つけたようなリセットスタイルシートを使用する傾向があります。http://meyerweb.com/eric/tools/css/reset/

+0

といくつかの傾けて冗談を取る... – Alex

関連する問題