473,564 Members | 2,730 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Big gap between Div. ie text information Using HTML 5 CSS3

nomad
664 Recognized Expert Contributor
Hello Everyone.
I have a problem with a huge gap and can not figure it out.
When I add any info to the left side to the menus (ie vnav) which are done using <ul> <li> the right side information will start making a gap between <div class="slider-wrapper"> and <div class="row no-bottom-margin">

Note if you deleted or add any info to the left side the rights side (the gap) will grow or decrease in size.

Any help would be great and thanks
-damon

Here is my html code
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Untitled Document</title>
  6.  
  7.  
  8.  
  9. <link rel="stylesheet" href="css/main_temp.css" type="text/css" />
  10. <link rel="stylesheet" href="css/styles.css" type="text/css" />
  11. <link rel="stylesheet" href="css/bullet_format.css" type="text/css" />
  12.  
  13.  
  14. <link rel="stylesheet" type="text/css" href="css/products.css">
  15.  
  16.  
  17.  
  18.  
  19.  
  20. <script type="text/javascript" src="js/jquery.js"></script>
  21. <script type="text/javascript" src="js/script.js"></script>
  22.  
  23. <!--javasscript-->
  24. <script type="text/javascript">
  25. function MM_openBrWindow(theURL,winName,features) { //v2.0
  26.   window.open(theURL,winName,features);
  27. }
  28. </script>
  29. <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
  30. <script type="text/javascript" src="js/menu.js"></script>
  31.  
  32. <script type="text/javascript" src="js/mm_menu.js"></script>
  33.  
  34.  
  35. </head>
  36.  
  37. <body>
  38.  
  39. <div id="page-wrap">
  40.  <div class="hrdottop"></div>
  41.   <div id="contentbar">
  42.   <!-- TemplateBeginEditable name="leftMeuns" -->
  43.   <div id="left-sidebar">
  44.     <ul id="vnav">
  45.         <li id="select"><a href="our-firm.htm">Overview</a></li>
  46.         <li><a href="strategy.htm">Strategy</a></li>
  47.         <li><a href="operations.htm">Operation</a></li>        
  48.         <li><a href="our-firm.htm">Overview</a></li>
  49.         <li><a href="strategy.htm">Strategy</a></li>
  50.         <li><a href="operations.htm">Operation</a></li>
  51.         <li><a href="our-firm.htm">Overview</a></li>
  52.         <li><a href="strategy.htm">Strategy</a></li>
  53.         <li><a href="operations.htm">Operation</a></li>        
  54.     </ul>    
  55. <div id="socialmedia">
  56.        <ul>
  57.  
  58.        <li> <a href="http://www.youtube.com/" title=""><img class="align-left" alt="" /></a></li>
  59.        <li><a href="http://www.linkedin.com/company/." title=""><img class="align-left" alt="" /></a> </li>
  60.     </ul>
  61.     </div>
  62. <div id="keypoint">
  63. <h4>Our focus is long term, consistent testing performance.</h4>
  64. </div>
  65. </div>
  66.  
  67.  
  68.  
  69.  
  70. <!-- content-wrap -->
  71. <div class="content-wrap">
  72.  
  73.     <!-- main -->
  74. <section id="main">
  75.       <div class="intro-box">
  76.         <h1> Wevulputate. vulputate.</h1>
  77.         <p class="intro">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
  78.         <p class="intro"> Ut wisi enim ad minim veniam, dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit hendrerit in vulputate velit esse molestie.</p>
  79.       </div>
  80.       <div class="slider-wrapper">
  81.  
  82.             <div id="slider" class="nivoSlider">
  83.              <img src="http://bytes.com/submit/products/images/slide2.png" width="383" height="198" alt="" />
  84.              <img src="http://bytes.com/submit/products/images/slide3.png" width="383" height="198" alt="" />
  85.              <img src="http://bytes.com/submit/products/images/slide4.png" width="383" height="198" alt="" />
  86.             </div>
  87.  
  88.     </div>
  89.  
  90.         <div class="row no-bottom-margin">
  91.  
  92.             <section class="col">
  93.                 <h2>Crvulputate</h2>
  94.                 <p>Proven  or sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper there.</p>
  95.             </section>
  96.             <section class="col mid">
  97.               <h2>Innovulputateon</h2>
  98.               <p>E<span class="intro">dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</span>.</p>
  99.             </section>
  100.  
  101.             <section class="col">
  102.               <h2>Evulputatese</h2>
  103.               <p>From <span class="intro">dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</span>ge of our craft. </p>
  104.           </section>
  105.         </div>
  106.   </section>
  107.  
  108.       <!-- services -->
  109. <section id="services" >
  110.  
  111.              <h1>Ovulputate</h1>
  112.  
  113.              <div class="row no-bottom-margin">
  114.                 <section class="col">
  115.                     <h2>Mvulputate</h2>
  116.                     <p><img class="align-left" alt="" /> Videography • Photography • Audio • Editing • Motion Graphics • Technical Direction • Full Video Production  Crews  • Voice-Overs &amp; Music Composition... We cover events, conferences, interviews, documentaries &amp; more.</p>
  117.                 </section>
  118.                 <section class="col mid">
  119.                   <h2>Whendrerit</h2>
  120.                   <p><img class="align-left" alt="" />Reach or sit amet, consectetuer adipiscing elit, sed diam  dolor in hendrerit nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quf</p>
  121.                 </section>
  122.  
  123.                 <section class="col">
  124.                   <h2> Dolor in Hendrerit</h2>
  125.                   <p><img class="align-left" alt="" />Make the inteesigns. is nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu oftware. </p>
  126.  
  127.                 </section>
  128.             </div>
  129.  
  130.             <div class="row">
  131.                 <section class="col">
  132.                     <h2>IT  doloerit</h2>
  133.                     <p><img class="align-left" alt="" />Home and Business Networking Solutions  • Multimedia Solutions •   Computer Repair • Network &amp; Server Configuration • VPN • Cloud Services. Whatever the IT needs may be, we have a solution for you!</p>
  134.                 </section>
  135.                 <section class="col mid">
  136.                   <h2>Transmissions</h2>
  137.                   <p><img class="align-left" alt="" />Satellite, Fiber, Microwave, IP, Full SNis dolor in hendrerit exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu.</p>
  138.                 </section>
  139.  
  140.                 <section class="col">
  141.                   <h2>Apullamcorper Design</h2>
  142.                   <p><img class="align-left" alt="" />Desktop and mobile develois nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu  programs.</p>
  143.  
  144.                 </section>
  145.                 <section class="col_lar">
  146.                   <h2>Application Design</h2>
  147.                   <p>is nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu </p>
  148.  
  149.                 </section>             
  150.  
  151.           </div>
  152.  
  153.  
  154.         <a class="back-to-top" href="#main">Back to Top</a>
  155.  
  156.   </section>
  157.  
  158. </div>
  159. </body>
  160. </html>
  161.  


here is the styles.css code
Expand|Select|Wrap|Line Numbers
  1. #banner{width:950px;height:325px;float:left;clear:left; position:relative; margin-bottom:35px;}
  2. #banner h2{width:410px; height:70px; position:absolute; padding:10px 10px 10px 40px; 
  3. font: normal 17px/1.3em Times New Roman;color:#FFF; background:url('../images/1pxblue.png') repeat; top:30px;}
  4. #banner h3{width:273px; position:absolute; padding:10px; 
  5. font: normal 17px/1.3em Times New Roman;color:#FFF; background:url('../images/1pxblue.png') repeat; top:30px;}
  6. #banner-in{width:660px;height:230px; float:left;clear:left; position:relative; margin-bottom:35px;}
  7. #banner-in h3{
  8.     width:327px;
  9.     min-height:40px;
  10.     position:absolute;
  11.     font: normal 12px/1.3em arial;
  12.     color:#FFF;
  13.     background:url('../images/1pxblue.png') repeat;
  14.     top:90px;
  15.     padding-top: 10px;
  16.     padding-right: 20px;
  17.     padding-bottom: 10px;
  18.     padding-left: 20px;
  19.     height: 67px;
  20. }
  21. #banner-in h4{width:300px; min-height:40px; position:absolute; padding:10px; 
  22. font: normal 12px/1.3em arial;color:#FFF; background:url('../images/1pxblue1.png') repeat; top:50px;}
  23.  
  24.  
  25. .hrdotter{border-top:1px dotted #B2B2B2; height:20px; margin-top:20px; float:left; clear:left; display:block; width:100%;}
  26. .hrdottop{border-top:1px dotted #B2B2B2; height:20px; margin-top:0px; float:left; clear:left; display:block; width:100%;}
  27.  
  28. #left-sidebar{width:240px; float:left; clear:left;}
  29. #left-sidebar h4{color:#00468A; font: normal 22px/1.3em Times;}
  30. #left-sidebar ul#vnav {float:left; clear:left; font:12px arial, Verdana, Geneva, sans-serif; margin:10px 0px 50% 0px; width:240px;}
  31.     #vnav li {list-style:none; clear:left; }
  32.     #vnav li a {
  33.     color:#8D8D8D;
  34.     text-decoration:none;
  35.     display:block;
  36.     width:225px;
  37.     line-height:1.3em;
  38.     text-align:right;
  39.     margin-bottom:7px;
  40.     padding:5px 15px 5px 0;
  41. }
  42.     #vnav li a:hover { background:url(../images/bkgd-lite.jpg); color:#000; }
  43.     #vnav #select a {background:url(../images/bkgd-dark.jpg); cursor:default; color:#000;}
  44.  
  45.  
  46. #right-sidebar{
  47.     width:660px;
  48.     float:left;
  49.     border-left:1px dotted #AAAAAA;
  50.     min-height:300px;
  51.     padding-left:45px;
  52. }
  53. #right-sidebar ul{margin-left:15px;}
  54. #right-sidebar h2{font: normal 16px/1.5em Arial;color:#666666; text-transform:uppercase; margin:40px 0 10px 0;}
  55.  
Here is the products.css code
Expand|Select|Wrap|Line Numbers
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. /* Clearing and Alignment Classes */
  5. .align-left {
  6.     float: left;
  7. }
  8. .align-right {
  9.     float: right;
  10. }
  11. .clearfix:after {
  12.     visibility: hidden;
  13.     display: block;
  14.     font-size: 0;
  15.     content: " ";
  16.     clear: both;
  17.     height: 0;
  18. }
  19. .ie7 .clearfix { zoom: 1; } /* IE7 */
  20.  
  21. /* ------------------------------------------------------
  22.     STRUCTURE
  23. --------------------------------------------------------- */
  24. #header-wrap {
  25.     background: url(../products/images/header-bg.png);
  26.     width: 100%;
  27.     height: 70px;
  28.     z-index: 99999;
  29.     position: fixed;
  30.     top: 0;
  31.     left: 0;
  32. }
  33. header {
  34.     position: relative;
  35.     width: 940px;
  36.     height: 70px;
  37.     margin: 0 auto;
  38. }
  39. .content-wrap {
  40.     width: 1120px;
  41.     margin: 0 0 0 255px;
  42. }
  43. .content-wrap section {
  44.     position: relative;
  45.     width: 840px;
  46.     padding-top: 0px;
  47.     padding-right: 0;
  48.     padding-bottom: 15px;
  49.     padding-left: 0;
  50. }
  51. .content-wrap section section {
  52.     background: none;
  53.     margin: 0;
  54. }
  55. .content-wrap section .row {
  56.     clear: both;
  57.     overflow: hidden;
  58.     margin-bottom: 25px;
  59. }
  60.  
  61.  
  62. .content-wrap section .row .col {
  63.     float: left;
  64.     margin: 0;
  65.     padding: 0;
  66.     width: 260px;
  67. }
  68. .content-wrap section .row .mid  {
  69.     margin-left: 25px;
  70.     margin-right: 25px;
  71. }
  72. .content-wrap section .no-bottom-margin{
  73.     margin-bottom: 0;
  74.     width: 840px;
  75. }
  76.  
  77. .content-wrap section .row .col_lar {
  78.     float: left;
  79.     margin: 0;
  80.     padding: 0;
  81.     width: 840px;
  82. }
  83.  
  84. .content-wrap section .primary {
  85.     float: left;
  86.     width: 620px;
  87. }
  88. .content-wrap section .primary p.intro {
  89.     /* margin: 15px 0 10px 0; */
  90.     margin: 15px 0 25px 0;
  91. }
  92.  
  93.  
  94. .content-wrap section aside {
  95.     float: right;
  96.     width: 285px;
  97. }
  98. .content-wrap section aside h2 {
  99.     margin: 12.5px 0 12.5px 0;
  100. }
  101.  
  102. .content-wrap section aside ul.link-list {
  103.     font-size: 16px;
  104.     margin: 0 0 25px 0;
  105.     padding: 0;
  106.     list-style: none;
  107. }
  108. .content-wrap section aside ul.link-list li {
  109.     padding-left: 3px;
  110. }
  111. .content-wrap section aside ul.link-list li a {
  112.     display: block;
  113.     color: #3B3B3B;
  114.     padding-top: 12.5px;
  115.     padding-bottom: 12.5px;
  116. }
  117. .content-wrap section aside ul.link-list li a:hover,
  118. .content-wrap section aside ul.link-list li a:focus,
  119. .content-wrap section aside ul.link-list li a:active {
  120.     color: #285935;
  121. }
  122.  
  123. /* -----------------------------------------
  124.     Main Section
  125. ------------------------------------------ */
  126. section#main {
  127.     width: 840px;
  128.     background: none;
  129. }
  130. section#main h1 {
  131.     margin-top: 10px;
  132.     margin-bottom: 15px;
  133. }
  134. section#main .intro-box {
  135.     float:left;
  136.     width:400px;
  137.     min-height: 300px;
  138. }
  139. section#main .row .col h2 {
  140.     margin-top: 15px;
  141.     margin-bottom: 5px;
  142. }
  143.  
  144. /* Slider */
  145. .slider-wrapper {
  146.     float: right;
  147.     position: relative;
  148.     background: url(../products/images/slider.png) no-repeat;
  149.     margin-top: 30px;
  150.     margin-bottom: 13px;
  151.     width: 420px;
  152.     height: 234px;
  153. }
  154. .slider-wrapper #slider {
  155.     position: absolute;
  156.     top: 17px;
  157.     left: 20px;
  158.     width: 383px; /* Make sure your images are the same size */
  159.     height: 198px; /* Make sure your images are the same size */
  160.  
  161.  
  162.  
  163. /
  164. }
  165. .slider-wrapper .nivoSlider {
  166.     position: relative;
  167.     background: #fff url(../products/images/loading.gif) no-repeat 50% 50%;
  168. }
  169. .slider-wrapper .nivoSlider img {
  170.     position: absolute;
  171.     top: 0px;
  172.     left: 0px;
  173.     display: none;
  174. }
  175. .slider-wrapper .nivoSlider a {
  176.     border: 0;
  177.     display: block;
  178. }
  179. .slider-wrapper .nivo-controlNav {
  180.     position: absolute;
  181.     left: 50%;
  182.     bottom: -45px;
  183.     margin-left: -30px ; /* Tweak this to center bullets */
  184. }
  185. .slider-wrapper .nivo-controlNav a {
  186.     display: block;
  187.     width: 13px;
  188.     height: 14px;
  189.     background: url(../products/images/bullets.png) no-repeat;
  190.     text-indent: -9999px;
  191.     border: 0;
  192.     margin-right: 10px;
  193.     float: left;
  194. }
  195. .slider-wrapper .nivo-controlNav a.active {
  196.     background-position: 0 -14px;
  197. }
  198. .slider-wrapper .nivo-directionNav a {
  199.     display: block;
  200.     width: 33px;
  201.     height: 52px;
  202.     background: url(../products/images/arrows.png) no-repeat;
  203.     text-indent: -9999px;
  204.     border: 0;
  205. }
  206. .slider-wrapper a.nivo-nextNav {
  207.     background-position: -33px 0;
  208.     right: -50px;
  209.     top: 70px;
  210. }
  211. .slider-wrapper a.nivo-prevNav {
  212.     left: -48.5px;
  213.     top: 70px;
  214. }
  215. .slider-wrapper .nivo-caption {
  216.     /* font-family: Helvetica, Arial, sans-serif; */
  217.     padding: 5px 10px;
  218.     width: 363px;
  219.     font-size: 12px;
  220.     text-shadow: none;
  221.     text-align: center;
  222. }
  223. .slider-wrapper .nivo-caption p {
  224.     text-shadow: none;
  225.     color: #CBCBCB;
  226. }
  227. .slider-wrapper .nivo-caption a {
  228.     color: #66CC33;
  229.     /* border-bottom: 1px dotted #fff; */
  230. }
  231. .slider-wrapper .nivo-caption a:hover {
  232.     color:#fff;
  233. }
  234.  
  235. /* -----------------------------------------
  236.    Services
  237. ------------------------------------------- */
  238. section#services h1 {
  239.     margin: 5 0 25px 0;
  240. }
  241. section#services .row .col img.align-left {
  242.     margin-top: 13px;
  243.     margin-right: 12px;
  244. }
  245.  
  246.  
here is the main_temp.css code
Expand|Select|Wrap|Line Numbers
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4.  
  5. /* BASIC RESET */
  6. ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}
  7.  
  8. /* HTML ELEMENTS */
  9. body { /*background-color:#1b2940;*/ /*font:62.5% Georgia,'Times New Roman',serif;*/
  10.     letter-spacing:1;
  11.     background-color:#00468A;
  12.     height:100%;/*background-image:url(../images/bgimg.png); background-repeat: no-repeat*/
  13.     ;
  14. }
  15.  
  16. /* COMMON CLASSES */
  17. .break { clear:both; }
  18. .hr{background-image:url(../images/blueline1.png); height:2px;}
  19. /* HEADER */
  20. /*#header { height:541px; background-image:url(../images/1.png); background-repeat: repeat-x; width:100%; min-width:1024px;}
  21. */.headerimg { background-position: center top;  width:100%; height:541px; position:absolute;  }
  22.  
  23. /* NAVIGATION */
  24. #nav-outer {
  25.     height:95px;
  26.     padding-top:15px;
  27.     position:relative;
  28.     top:0px;
  29.     background-image:url(../images/headerbg1.png);
  30.     opacity:0.8;
  31.     filter:alpha(opacity=95);
  32.     width:100%;
  33.     min-width:1024px;
  34. }
  35. #navigation { height:100px; width:960px; margin:0 auto; background-image:url("../images/logo.png"); background-position:top left; background-repeat:no-repeat;/ }
  36. /*#logo{
  37.     position: absolute;
  38.     height:64px;
  39.     width:210px;
  40.     padding:2px;
  41.     background: url(../images/logo.png) no-repeat;
  42.     display: block;
  43.     top: 13px;
  44.     left: 36px;
  45.     border:hidden;
  46. }
  47. logo h1 a {
  48.     text-indent: -9999em;
  49.     display: block;
  50.     height:64px;
  51.     width:130px;
  52.     border:hidden;
  53.  
  54. }*/    
  55.  
  56. /*no border around images*/
  57. .images {
  58.     text-decoration: none;
  59.     text-align: center;
  60.     border-top-style: none;
  61.     border-right-style: none;
  62.     border-bottom-style: none;
  63.     border-left-style: none;
  64. }
  65.  
  66. /* SEARCH */
  67. #search { background-color:#051733; float:right; width:220px; padding:10px; }
  68. #tollfree{
  69.     float:right;
  70.     width:240px;
  71.     padding:10px;
  72.     font-size:14px;
  73.     color: #000000;
  74.     font-family:Verdana, Geneva, sans-serif;
  75.     font-weight:bold;
  76. }
  77. #searchtxt { padding:3px; width:150px; }
  78. #searchbtn { border:1px solid #eee !important; background-color:#CD2B3A; color:#eee; padding:3px; margin-left:5px; }
  79.  
  80. /* MENU */
  81. #menu { position:relative; float:left; margin-left:10px; font-size:14px;
  82.     color: #ffffff;
  83.     font-family:Verdana, Geneva, sans-serif; font-weight:200; margin:0 auto;}
  84. #menu ul { list-style:none; width:960px;}
  85. #menu ul li { display:inline; font-variant:small-caps;  font-size:14px;
  86.     color: #ffffff;
  87.     font-family:Verdana, Geneva, sans-serif; font-weight:200; text-align:center;}
  88. #menu ul li a {text-decoration:none;  font-size:14px;
  89.     color: #ffffff;
  90.     font-family: Arial, Helvetica, sans-serif, Verdana, Geneva, sans-serif; font-weight:200; padding-right:14px;}
  91. #menu ul li a:hover {background-color:#ac231a;}
  92. .menu_font{line-height:29px; padding-bottom:9px; padding-top:4px;}
  93.  
  94.  
  95. /* HEADER TEXT */
  96. #firstline { background-image:url("../images/textbg.png"); color:#333; font-size:40px; padding:4px 13px 7px; float:left; display:block; }
  97. #secondline { background-image:url("../images/textbg.png"); color:#CD2B3A; text-decoration:none; font-size:60px; padding:0 13px 10px; float:left; display:block; clear:both; }
  98. #secondline:hover { text-decoration:underline; color:#7F000C; }
  99. .pictured { background-color:#CC3333; color:#FFF; font-size:12px; padding:9px 16px; text-transform:uppercase; float:left; display:block; clear:both; margin-top:10px; }
  100. .pictured a { font-size:16px; font-style:italic; letter-spacing:0; text-transform:none; color:#FFF; text-decoration:none; }
  101. .pictured a:hover { text-decoration:underline; }
  102.  
  103. /* CONTROLS */
  104. .btn { height:32px; width:32px; float:left; cursor:pointer; }
  105. #back { background-image:url("../images/btn_back.png"); }
  106. #next { background-image:url("../images/btn_next.png"); }
  107. #control { background-image:url("../images/btn_pause.png"); }
  108.  
  109. /* HEADER HAVIGATION */
  110. #headernav-outer { position:relative; top:400px; margin:0 auto; width:960px; }
  111. #headernav { padding-left:24px; }
  112.  
  113. /* CONTENT */
  114. #content { color:#575757; background-color:#eee; width:100%; min-width:1024px; }
  115. #content p { padding:10px 20px; font-size:16px; width:960px; margin:0 auto; }
  116. #content p a { text-decoration:none; color:#CD2B3A; }
  117. #content p a:hover { text-decoration:underline; color:#7F000C; }
  118.  
  119. .email { font-family:Verdana, Geneva, sans-serif; size:11px;}
  120. .email  a{ text-decoration:none; color:#0067a4; }
  121. .email a:hover { text-decoration:underline; color:#333; }
  122.  
  123. /***********************/
  124.  
  125. #bannerbar{width:100%; min-width:960px;  float:left;
  126.     margin:0 auto; clear:both; text-align:center; }
  127.  
  128. #contentbar{/*height:410px;*//*min-height: 580px;height:75%;*/
  129.     height:100%;
  130.     width:1120px;
  131.     margin:0 auto;
  132.     clear:both;
  133.     position:relative;
  134.     background-color:#ffffff;/* width:960px;*/
  135. }
  136. #contentbar .left{
  137.     float:left; width:250; padding-right:10px; position:relative; /*line-height:20px;*/font-family:Verdana, Geneva, sans-serif;  font-size:12px;}
  138.  
  139. #contentbar    .left ul { padding:20px 20px; font-size:16px; margin:0 auto; display:block; font-family:Verdana, Geneva, sans-serif;  font-size:12px;}
  140. #contentbar  .left li { line-height:26px; padding-left:0px;display:block;font-family:Verdana, Geneva, sans-serif;  font-size:12px; /*background-image:url(../images/bullet-1.png); background-repeat:no-repeat; */}
  141. #contentbar  .left a:hover {
  142.     text-decoration:none;
  143.     font-size:12px;
  144.     color: #0067a4;
  145.     font-family:Verdana, Geneva, sans-serif;
  146. }
  147. #contentbar  .left a{ text-decoration:none; color:#0067a4;font-size:12px;font-family:Verdana, Geneva, sans-serif; }
  148.  
  149. #contentbar .right{float:left; padding:5px 5px 10px 10px;/*  position:relative;*/}
  150.  
  151.  
  152. /*product menu left side
  153. #contentbarproduct{/*height:410px;*//*min-height: 580px;height:75%;*/height:100%; width:960px;margin:0 auto; clear:both; position:relative; background-color:#ffffff;/* width:960px;*/}
  154. #contentbarproduct .left{
  155.     float:left;
  156.     width:200px;
  157.     padding-right:10px;
  158.     position:relative; /*line-height:20px;*/
  159.     font-family:Verdana, Geneva, sans-serif;
  160.     font-size:12px;
  161. }
  162.  
  163. #contentbarproduct    .left ul { padding:20px 20px; font-size:16px; margin:0 auto; display:block; font-family:Verdana, Geneva, sans-serif;  font-size:12px;}
  164. #contentbarproduct  .left li { line-height:26px; padding-left:0px;display:block;font-family:Verdana, Geneva, sans-serif;  font-size:12px; /*background-image:url(../images/bullet-1.png); background-repeat:no-repeat; */}
  165. #contentbarproduct  .left a:hover { text-decoration:none;  font-size:12px;
  166.     color: #333;
  167.     font-family:Verdana, Geneva, sans-serif;}
  168. #contentbarproduct  .left a{ text-decoration:none; color:#0067a4;font-size:12px;font-family:Verdana, Geneva, sans-serif; }
  169.  
  170. #contentbarproduct .right{float:left; padding:5px 5px 10px 10px;/*  position:relative;*/}
  171.  
  172.  
  173. #page-wrap {
  174.     float:left;
  175.     margin:0 auto;
  176.     clear:both;
  177.     position:relative;
  178.     /*height: 400px;*/
  179.     /*min-height: 580px; height:75%;*/
  180.     /*top:223px;*/top:-10px;
  181.     padding-bottom:0px;
  182.     font-size:16px;
  183.     min-width:1124px;
  184.     width:100%;
  185.     margin:0 auto;
  186.     /*background: #75c8f4; */
  187.     background:#f2f2f2;
  188.     -moz-box-shadow: 0 0 20px  black;
  189.     -webkit-box-shadow: 0 0 20px black;
  190.     box-shadow: 0 0 20px black;
  191.     background-color: #FFFFFF;
  192. }
  193.  
  194.  
  195. #page-wrap #col {/*min-height: 580px; height:75%;*/
  196.     /*height: 465px;*/
  197.     margin:0 auto;
  198.     padding:0px 0px;
  199. }
  200.  
  201. #line{ width:1000px; background-image:url(../backup/images/line.png); background-repeat:repeat-x; margin-top:70px; margin-left:12px; margin-right:12px;}
  202. #copyright{
  203.     text-align:center; /*margin-top:100px;*/
  204.     float:left;
  205.     clear:both;
  206.     position:relative;
  207.     min-width:1024px;
  208.     width:100%;/*margin-top:210px;*/
  209.     color: #9c9c9c;
  210.     font-size:12px;
  211.     font-family:Verdana, Geneva, sans-serif;
  212.     background-color:#00468A;
  213.     padding-bottom:10px;
  214.     width:100%;
  215.     min-width:1024px;
  216.     padding-top: 25px;
  217. }
  218. #copyright a:link{font-size:12px;
  219.     color: #9c9c9c;
  220.     font-family:Verdana, Geneva, sans-serif;}
  221. #copyright a:hover{font-size:12px;
  222.     color: #fff;
  223.     font-family:Verdana, Geneva, sans-serif;}
  224.     #copyright p{font-family:Verdana, Geneva, sans-serif; color:#9c9c9c; font-size:12px; margin-top: 5px; padding-top:30px;}
  225. /*#email a:link{color:#3091c3;}*/
  226. #copyright #socialmedia {float:right; margin-right:100px;display:block;}
  227. #copyright #socialmedia li{float:right; display:block; padding:6px; margin-top:-40px;/*margin-top:-50px*/;}
  228.  
  229. /****contact*******************/
  230.  
  231. h1{font-family:Verdana, Geneva, sans-serif; color:#666; font-weight:bold; font-size:20px; padding-top:5px; }
  232. p{
  233.     font-family:Verdana, Geneva, sans-serif;
  234.     color:#000;
  235.     font-size:12px;
  236.     padding-top:15px;
  237.     line-height:20px;
  238.     padding-right:5px;
  239.     text-decoration: none;
  240. }
  241. h2{color:#13508f;}
  242. h3{color:#c7c8ca;}
  243.  
  244.  
  245. .main_text {
  246.     font-family: Verdana, Geneva, sans-serif;
  247.     font-size: 12px;
  248.     color: #000;
  249.     text-decoration: none;
  250.     line-height: 20px;
  251. }
  252. .main_text_bold {
  253.     font-family: Verdana, Geneva, sans-serif;
  254.     font-size: 14px;
  255.     font-weight: bold;
  256.     color: #000;
  257. }
  258.  
  259. #socialmedia {
  260.     float:right;
  261.     border: 0;
  262.     margin-right: 5px;
  263. }
  264. #socialmedia li{
  265.     float:right;
  266.     display:block;
  267.     padding:1px;
  268.     margin-right: 15px;
  269. }
  270. #keypoint {
  271.     float:left;
  272.     border: 0;
  273.     width: 230px;
  274. }
  275. .image {
  276.     border-top-style: none;
  277.     border-right-style: none;
  278.     border-bottom-style: none;
  279.     border-left-style: none;
  280. }
  281.  
  282.  
Nov 7 '13 #1
0 1457

Sign in to post your reply or Sign up for a free account.

Similar topics
4
8447
Convert Wiki format text file to HTML page
by: mrby | last post by:
Hi, I see that Wiki's method of editing HTML is rather simple, for example: Using *bold* for bold text, and using _itatics_ for itatic font text. I wonder if there is available code for this purpose? Thanks much!
PHP
0
2712
Erroneous Text Extraction using HTML::Parser
by: Himanshu Garg | last post by:
Hello, I am using HTML::Parser to extract text from html pages from http://bbc.co.uk/urdu/ However the encoding of the input text seems to change to some unknown encoding in the output. The program is given below. The HTML is in a string to keep the example simple. The same problem appears with HTML in a file.
Perl
3
1997
Error while using html controls
by: sushi | last post by:
Hello, I am developing an asp.net website. In this I am using a web form say' Web form1.aspx' which has two button controls say 'button1' and 'button2'. When I am click 'button1' it displays a text 'Hi'. When I click the other button 'button2', it redirects to different page say' Webform2.aspx'. Now if I click the 'Back' menu of the browser,...
C# / C Sharp
15
4733
Page has Expired - using html input control (type=file)
by: Nathan | last post by:
I have an aspx page with a data grid, some textboxes, and an update button. This page also has one html input element with type=file (not inside the data grid and runat=server). The update button will verify the information that has been entered and updates the data base if the data is correct. Update will throw an exception if the data is...
ASP.NET
2
2656
Load HTML in text strings into HTML parser in Javascript
by: David Virgil Hobbs | last post by:
Loading text strings containing HTML code into an HTML parser in a Javascript/Jscript I would like to know, how one would go about loading a text string containing HTML code, so as to be able to use javascript or Jscript to work with the HTML code in the text string, in the same way that one works with XML code in a text string using the...
.NET Framework
8
5479
Generating header information using ElementTree
by: Craig | last post by:
Hi there, I'm only new to Python so please bear with me. I using ElementTree to generate an XML file that will reference a DTD and an XSL file. The header information I want at the start of the file is as follows: <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="test.xsl"?> <!DOCTYPE BobActivityLog SYSTEM "test.dtd">
Python
1
2865
New to Ajax - Returning Javascript and $_SESSION information. (Using PHP)
by: bsprogs | last post by:
I am currnetly programming a file hosting website in PHP and I am slowly integrating AJAX into the website. Here is my problem: The user uploads the file. The server processes the file and stores a $_SESSION variable. After the upload is complete, the server supplies a link that allows the user to view their link codes. Once they click...
Javascript
2
1620
display text retrieved with html tags
by: vikaspa | last post by:
In one of the web sites I Really got an excellent code to convert text entered in ms word to html format I am using following code for conversion <?php $txt= superhtmlentities($rrows); echo $txt ;?> The function is given below function superhtmlentities($text) {
PHP
3
3897
embedding javascript using html into perl script
by: happyse27 | last post by:
Hi All, I am creating the perl script using html form(with embedded javascript inside). When using this html form with javascript alone, it works where the form validation will pop up javascript windows to say the field is not keyed into properly. However, when i convert this html(with javascript inside) into perl script, the perl script...
Perl
0
7584
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
Windows Server
0
8108
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
Online Marketing
1
7644
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
Windows Server
0
7951
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
General
1
5484
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
Microsoft Access / VBA
0
3643
Trying to create a lan-to-lan vpn between two differents networks
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
Networking - Hardware / Configuration
0
3626
Windows Forms - .Net 8.0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
Visual Basic .NET
1
2083
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
C# / C Sharp
1
1201
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us