473,396 Members | 1,810 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > big gap between div. ie text information using html 5 css3

Join Bytes to post your question to a community of 473,396 software developers and data experts.

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

nomad
664 Expert 512MB
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 1450

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

Similar topics

4
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...
PHP
0
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...
Perl
3
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...
C# / C Sharp
15
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...
ASP.NET
2
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...
.NET Framework
8
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...
Python
1
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...
Javascript
2
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);...
PHP
3
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...
Perl
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
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...
Windows Server
0
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...
Windows Server
0
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...
General
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice

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:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!