Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Apr 25th, 2012  |  syntax: None  |  size: 5.25 KB  |  hits: 15  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. will design be affected in browsers?
  2. <div id="SRForm">  
  3.         <h1>Room Reservation</h1>
  4.  
  5.  
  6.             <div id="SRLeft">
  7.                 <ul>
  8.                             <li>Check Availability</li>
  9.                             <li class="status">Select Room</li>
  10.                             <li>Enter Details </li>
  11.                             <li>Review Reservation & Confirm</li>
  12.                 </ul>
  13.  
  14.             </div>
  15.  
  16.            <div id="RoomType">
  17.  
  18.             <div id="Room1">
  19.                <div class="imgdetails">
  20.                     <img  class="SRimg" src="images/rooms/regular-room.jpg"/>
  21.                </div>
  22.                <div class="roomdetails">
  23.                     <h3>Regular Room</h3>
  24.                     <asp:Label runat="server" id="lblroom1" class="lblroom">Available:</asp:Label>
  25.                     <asp:Label runat="server" id="lblroom2" class="lblroom">no of rooms</asp:Label>
  26.                     <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p>
  27.                     <asp:CheckBox ID="CheckBox1" runat="server" />
  28.                     <asp:DropDownList ID="cboroom1" class="cboroom" runat="server">
  29.                         <asp:ListItem>1</asp:ListItem>
  30.                         <asp:ListItem>2</asp:ListItem>
  31.                         <asp:ListItem>3</asp:ListItem>
  32.                     </asp:DropDownList>
  33.                 </div>
  34.                 <div >
  35.                 </div>
  36.            </div>
  37.  
  38.            <div id="Room2">
  39.                <div class="imgdetails">
  40.                     <img  class="SRimg" src="images/rooms/regular-room.jpg"/>
  41.                 </div>
  42.                 <div class="roomdetails">
  43.                     <h3>Delux Room</h3>
  44.                     <asp:Label ID="lblroom3" runat="server" class="lblroom">Available:</asp:Label>
  45.                     <asp:Label ID="lblroom4" runat="server" class="lblroom">no of rooms</asp:Label>
  46.  
  47.                     <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p>
  48.                     <asp:CheckBox ID="CheckBox2" runat="server" />
  49.                     <asp:DropDownList ID="DropDownList2" class="cboroom" runat="server">
  50.                         <asp:ListItem>1</asp:ListItem>
  51.                         <asp:ListItem>2</asp:ListItem>
  52.                         <asp:ListItem>3</asp:ListItem>
  53.                     </asp:DropDownList>
  54.  
  55.                 </div>
  56.                 <div class="rate">
  57.                 <p class="proom">Charge Per Night:</p>
  58.                 <asp:label runat="server" class="lblrate">3000INR</asp:label>
  59.                 </div>
  60.            </div>
  61.  
  62.            <div id="Room3">
  63.                <div class="imgdetails">
  64.                     <img  class="SRimg" src="images/rooms/regular-room.jpg"/>
  65.                 </div>
  66.                 <div class="roomdetails">
  67.                     <h3>Super-Delux Room</h3>
  68.                     <asp:Label ID="lblroom5" runat="server" class="lblroom">Available:</asp:Label>
  69.                     <asp:Label ID="lblroom6" runat="server" class="lblroom">no of rooms</asp:Label>
  70.  
  71.                     <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p>
  72.                     <asp:CheckBox ID="CheckBox3" runat="server" />
  73.                     <asp:DropDownList ID="DropDownList3" class="cboroom" runat="server">
  74.                         <asp:ListItem>1</asp:ListItem>
  75.                         <asp:ListItem>2</asp:ListItem>
  76.                         <asp:ListItem>3</asp:ListItem>
  77.                     </asp:DropDownList>
  78.                 </div>
  79.                 <div  >
  80.                 </div>
  81.            </div>
  82.          </div>    
  83.        </div>
  84.  
  85.  
  86. here is css
  87.  
  88. #SRForm { margin:0; padding:0; width:900px; height:700px;}
  89. #SRForm h1 { text-align:center; font-size:20px; margin: 20px 0; font-weight:bold;}
  90.  
  91.     #SRLeft      { width:200px; float:left; padding:10px 10px; margin-right:10px; }
  92.     #SRLeft ul   { list-style:none; margin:0; padding:0; height: 160px;}    
  93.     #SRLeft li   {  margin:0; padding:0; list-style:none; float:right;
  94.                         position:relative; padding:5px 5px 5px 5px; font-weight:bold;
  95.                         width:180px;}
  96.     #SRLeft li a { text-align:center; display:block; width:180px; float:right;}
  97.  
  98.     #RoomType    { width: 650px; float:left; height:700px;
  99.                     }
  100.  
  101.     #Room1 {float:left; width:630px; margin-bottom:10px; height:230px; border:2px solid #FFF; }
  102.     #Room2 {float:left; width:630px; margin-bottom:10px; height:230px;  border:2px solid #FFF;}
  103.  
  104.     #Room3 {float:left; width:630px; margin-bottom:10px; height:230px;  border:2px solid #FFF;}
  105.  
  106.  
  107.     .roompara{ width:380px;font-size:14px;}
  108.     .imgdetails { width:240px; margin:2px 2px 2px 2px;}
  109.     .roomdetails { width:380px; float:left;}
  110.     .roomdetails h3 { font-weight:bold; text-align:center; width:380px; margin-top:5px;}
  111.     .lblroom        { margin-top:2px; padding:3px;}
  112.     .cboroom        { width:100px;}
  113.     .rate           { width:630px; margin-left:5px; float:left; height:50px;}
  114.     .SRbtn          { float:right; margin-bottom:10px;}
  115.     .proom          { font-weight:bold;}
  116.     .lblrate        { float:left; position:absolute; margin-left:100px;}
  117.  
  118.  
  119. /*----images in Rooms---*/
  120. .SRimg { border:4px solid #eee; margin:5px 5px 5px 5px; width:200px; float:left;
  121.     height: 150px;
  122. }