Thursday, July 2, 2015

designing page with iframes with html and css



  2. html code


  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <link rel="stylesheet" type="text/css" href="Style.css">
  9. <style>
  10. a:link {
  11.     text-decoration: none;
  12. }

  14. a:visited {
  15.     text-decoration: none;
  16. }

  18. a:hover {
  19.     text-decoration: underline;
  20. }

  22. a:active {
  23.     text-decoration: underline;
  24. }

  26. #nav {
  27.     line-height:30px;
  28.     background-color:#eeeeee;
  29.     height:500px;
  30.     width:100px;
  31.     float:left;
  32.     padding:5px;
  33.  
  34.     text-align:center;
  35.     padding:15px;
  36.     border:1px solid  black ;
  37.     width:100px;
  38.     border-top:0px;
  39.     border-left:0px;
  40.     border-right:thick 1px balck;    
  41. }


  44. </style>
  45. </head>
  46. <body>
  47. <iframe name="iframe_a" align="center" style="border:none" SCROLLING="yes" ></iframe>

  49. <div class="menu-wrap">
  50.     <nav class="menu">
  51.    
  52.         <ul class="clearfix">
  53.             <li>
  54.            
  55.                 <a href="./About*">About <span class="arrow">&#9660;</span></a>

  57.                 <ul class="sub-menu">
  58.                     <li><a href="./About*" target="iframe_a">introduction</a></li>
  59.                     <li><a href="./About*" target="iframe_a">Informatio</a></li>
  60.                     <li><a href="./About*" target="iframe_a">AboutUs</a></li>
  61.                 </ul>
  62.             </li>
  63.              <li>
  64.                 <a href="./Services*" target="iframe_a">Services <span class="arrow">&#9660;</span></a>
  65.                 <ul class="sub-menu">
  66.                     <li><a href="./Services*" target="iframe_a">Business</a></li>
  67.                     <li><a href="./Services*" target="iframe_a">Hooper App</a></li>
  68.                     <li><a href="./Services*" target="iframe_a">Chat App</a></li>
  69.                    
  70.                 </ul>
  71.             </li>
  72.             <li>
  73.                 <a href="./Clients*" target="iframe_a">Clients <span class="arrow">&#9660;</span></a>

  75.                 <ul class="sub-menu">
  76.                     <li><a href="./Clients*" target="iframe_a">Google</a></li>
  77.                     <li><a href="./Clients*" target="iframe_a">Facebook</a></li>
  78.                     <li><a href="./Clients*" target="iframe_a">Tcs</a></li>
  79.                 </ul>
  80.             </li>
  81.             <li>
  82.                 <a href="./ContactUs*" target="iframe_a">ContactUs <span class="arrow">&#9660;</span></a>

  84.                 <ul class="sub-menu">
  85.                     <li><a href="./ContactUs*" target="iframe_a">MainBranch</a></li>
  86.                     <li><a href="./ContactUs*" target="iframe_a">SubBranch</a></li>
  87.                 </ul>
  88.             </li>
  89.         </ul>
  90.     </nav>
  91. </div>
  92. <div id="nav">

  94. <a href="./Login.jsp" target="iframe_a">Login</a><br>

  96. <a href="./registation.html" target="iframe_a" >Sign up</a>
  97. <br>
  98. </div>
  99. </body>
  100. </html>

  102. css code


  105. iframe {
  106. height: 350px;
  107. width: 500px;
  108. position:absolute;
  109. top: 60%;
  110. margin-top: -175px;
  111. left: 20%;
  112. margin-left: 80px;
  113. FRAMEBORDER="0";
  114. SCROLLING="no";
  115. }

  117. .clearfix:after {
  118.     display:blue;
  119.     clear:both;
  120. }
  121. /*----- Menu Outline -----*/
  122. .menu-wrap {
  123.     width:80%;
  124.     box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  125.     background:blue;
  126. }
  127.  
  128. .menu {
  129.    
  130.     margin:0px auto;
  131.     background-color:#eeeeee;
  132.     color:black;
  133.     text-align:right;
  134.     padding:25px;
  135.     border:1px solid  black ;
  136.     width:1150px;
  137.     border-top:0px;
  138.     border-left:0px;
  139.     border-right:0px;
  140. }
  141.  
  142. .menu li {
  143.     margin:0px;
  144.     list-style:none;
  145.     font-family:'Ek Mukta';
  146. }
  147.  
  148. .menu a {
  149.     transition:all linear 0.15s;
  150.     color:blue;
  151. }
  152.  
  153. .menu li:hover > a, .menu .current-item > a {
  154.     text-decoration:none;
  155.     color:blue;
  156. }
  157.  
  158. .menu .arrow {
  159.     font-size:11px;
  160.     line-height:0%;
  161. }
  162.  
  163. /*----- Top Level -----*/
  164. .menu > ul > li {
  165.     float:left;
  166.     display:inline-blue;
  167.     position:relative;
  168.     font-size:19px;
  169. }
  170.  
  171. .menu > ul > li > a {
  172.     padding:10px 35px;
  173.     display:inline-blue;
  174.     text-shadow:0px 1px 0px rgba(0,0,0,0.4);
  175. }
  176.  
  177. .menu > ul > li:hover > a, .menu > ul > .current-item > a {
  178.     background:#eeeeee;
  179. }
  180.  
  181. /*----- Bottom Level -----*/
  182. .menu li:hover .sub-menu {
  183.     z-index:1;
  184.     opacity:1;
  185. }
  186.  
  187. .sub-menu {
  188.     width:100%;
  189.     padding:5px 0px;
  190.     position:absolute;
  191.     top:100%;
  192.     left:0px;
  193.     z-index:-1;
  194.     opacity:0;
  195.     transition:opacity linear 0.15s;
  196.     box-shadow:0px 2px 3px rgba(0,0,0,0.2);
  197.     background:#eeeeee;
  198. }
  199.  
  200. .sub-menu li {
  201.     display:block;
  202.     font-size:16px;
  203. }
  204.  
  205. .sub-menu li a {
  206.     padding:10px 30px;
  207.     display:block;
  208. }
  209.  
  210. .sub-menu li a:hover, .sub-menu .current-item a {
  211.     background:#eeeeee;
  212. }
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)