Solved

Center a horizontial list, put a left border on the leftmost box

Posted on 2013-06-18
6
335 Views
Last Modified: 2013-06-18
2 things I cannot get to work
1.center the Horizontal list
2.put a left border on the left most cell in the list
this does not work for the left border:

#horzlist li:last-child a {
border-right: solid 1px #0066ff;
}

the page
http://roofgenius.com/RoofCalcWriter/test.asp
how can i fix this?
0
Comment
Question by:isnoend2001
  • 3
  • 2
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39258373
I think it will help you if you clean up your code a little.  This seems to work.

Working sample http://jsbin.com/oxuroj/1/edit

code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Roofcalcwriter 10 screenshot</title>
<meta name="dcterms.created" content="Wed, 19 Jun 2013 01:59:25 GMT">
<meta name="description"  content="RoofCalcWriter estimate screenshot">
<meta name="keywords" content="Roofing">

<!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<style type= "text/css">
#menubox {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}
nav.menu_table_nav { text-align: center; }

.menu_table_nav #horzlist a
{
	width:88px;
	height: 16px;
	padding:4px;
	padding-top: 8px;
	text-decoration:none;
	font:10px Verdana, Geneva, sans-serif;
	font-weight: 600;
	color:#1C4FFF;
	text-align: center;
	background-color:  #f0f0f0;
	border-left: solid 1px #0066ff;
	border-top: solid 1px #0066ff;
	border-bottom: solid 1px #0066ff;
}
/*border-top: solid 1px red;
border-bottom: solid 1px red;*/


#horzlist li:first-child a { border-left: solid 1px #0066ff; }
#horzlist li:last-child a { border-right: solid 1px #0066ff; }
/*div#horzlist li:first-child {
border-left:none; }*/

 #horzlist a:hover
{
	background-color: white;
	color:#F00;
}
#horzlist li { display:inline; }
.Bodywrap
{
	width: 965px;
	margin: 0 auto;
}
.thispage hr { margin-top: 80px;  width= 100%
}
</style>
<link href="../roof.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="Bodywrap">
  <div style="float:Left"> <img src="../images/rglogo105x54.jpg" width="105" height="54" alt="Roofgenius Logo" title=""/> </div>
  <!--float-->
  <div style ="text-align:center"> 
    <script type="text/javascript"><!--

google_ad_client = "ca-pub-5860242097775343";

/* leaderboard728x90 */

google_ad_slot = "8943766566";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script> 
    <script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 
  </div>
  <!--aligncenter-->
  <div style="clear: both;"></div>
  <div style="margin-top:15px"></div>
  <div id="menubox">
    <nav class="menu_table_nav">
      <ul id="horzlist">
        <li><a href="http://roofgenius.com">Home</a></li>
        <li><a href="http://roofgenius.com/sitemap.asp">Site Map</a></li>
        <li><a href="http://roofgenius.com/about.htm">About</a></li>
        <li><a href="http://roofgenius.com/roofpitch.htm">Roof Pitch</a></li>
        <li><a href="http://roofgenius.com/download.asp">DownLoads</a></li>
      </ul>
    </nav>
    <!--nav--> 
  </div>
  <!--menubox-->
  
  <div class="thispage">
    <hr>
  </div>
  <!--thispage--> 
</div>
<!--bodywrap-->
</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39258380
This is even better  Working sample http://jsbin.com/oxuroj/2/edit


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Roofcalcwriter 10 screenshot</title>
<meta name="dcterms.created" content="Wed, 19 Jun 2013 01:59:25 GMT">
<meta name="description"  content="RoofCalcWriter estimate screenshot">
<meta name="keywords" content="Roofing">

<!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<style type= "text/css">
#menubox {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}
nav.menu_table_nav { text-align: center; }

.menu_table_nav #horzlist a
{
	width:88px;
	height: 16px;
	padding:4px;
	padding-top: 8px;
	text-decoration:none;
	font:10px Verdana, Geneva, sans-serif;
	font-weight: 600;
	color:#1C4FFF;
	text-align: center;
	background-color:  #f0f0f0;
	border: 1px solid #0066ff;
}
#horzlist li { display:inline; }
/*div#horzlist li:first-child {
border-left:none; }*/

 #horzlist a:hover
{
	background-color: white;
	color:#F00;
}
.Bodywrap
{
	width: 965px;
	margin: 0 auto;
}
.thispage hr { margin-top: 80px;  width= 100%
}
</style>
<link href="../roof.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="Bodywrap">
  <div style="float:Left"> <img src="../images/rglogo105x54.jpg" width="105" height="54" alt="Roofgenius Logo" title=""/> </div>
  <!--float-->
  <div style ="text-align:center"> 
    <script type="text/javascript"><!--

google_ad_client = "ca-pub-5860242097775343";

/* leaderboard728x90 */

google_ad_slot = "8943766566";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script> 
    <script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 
  </div>
  <!--aligncenter-->
  <div style="clear: both;"></div>
  <div style="margin-top:15px"></div>
  <div id="menubox">
    <nav class="menu_table_nav">
      <ul id="horzlist">
        <li><a href="http://roofgenius.com">Home</a></li>
        <li><a href="http://roofgenius.com/sitemap.asp">Site Map</a></li>
        <li><a href="http://roofgenius.com/about.htm">About</a></li>
        <li><a href="http://roofgenius.com/roofpitch.htm">Roof Pitch</a></li>
        <li><a href="http://roofgenius.com/download.asp">DownLoads</a></li>
      </ul>
    </nav>
    <!--nav--> 
  </div>
  <!--menubox-->
  
  <div class="thispage">
    <hr>
  </div>
  <!--thispage--> 
</div>
<!--bodywrap-->
</body>
</html>

Open in new window

0
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 250 total points
ID: 39258382
You are using the same css file in the page and also in the roof.css file that's why I delete some of them and attach the css to the roof.css file see below:
Your HTML page:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Roofcalcwriter 10 screenshot</title>
    <meta name="dcterms.created" content="Wed, 19 Jun 2013 01:59:25 GMT">
   <meta name="description"  content="RoofCalcWriter estimate screenshot">
    <meta name="keywords" content="Roofing">
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<link href="roof.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
  </head>
  <body>
  <div class="Bodywrap">
<div style="float:Left">
<img src="../images/rglogo105x54.jpg" width="105" height="54" alt="Roofgenius Logo" title=""/>
</div><!--float-->
<div style ="text-align:center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5860242097775343";
/* leaderboard728x90 */
google_ad_slot = "8943766566";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div><!--aligncenter-->
<div style="clear: both;"></div>
<div style="margin-top:15px"></div>
<div id="menubox">
<nav class="menu_table_nav">
            	   <ul>
		            <li><a href="http://roofgenius.com">Home</a></li>
                    <li><a href="http://roofgenius.com/sitemap.asp">Site Map</a></li>
                    <li><a href="http://roofgenius.com/about.htm">About</a></li>
                    <li><a href="http://roofgenius.com/roofpitch.htm">Roof Pitch</a></li>
                    <li><a href="http://roofgenius.com/download.asp">DownLoads</a></li>
				</ul>
            </nav><!--nav-->
</div><!--menubox-->
<div class="thispage">
<hr>
</div><!--thispage-->
</div><!--bodywrap-->
  </body>
</html>

Open in new window


And your roof.css file is:
/*  HTML5 reset  */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

a img{
	 border:0px;
 }
body{
	background:#FFF;
}
/* wrapper*/
#wrapper{
	width:100%;
	/*background:#999;*/
	clear:both;
}

/* header*/
header{
	width:100%;
	margin:0 auto;
	padding:8px 0 0 0;
}
header .header_area{
	width:965px;
}
.header_area .header_box1{
	width:113px;
	float:left;
	padding-top:88px;
	padding-right:65px;   
}
.header_area .header_box1 .logo{
margin-top:100px; /*added 05-07-13 */
 }

.header_area .header_box2{
	width:577px;
	float:left;	
}

.header_area .header_box3{
	width:145px;
	padding-top:20px;
	padding-left:65px;
	float:left;
    }
    
.header_area .header_box2 .ad_area{
	width:468px;
	height:50px;
	padding-top:10px;
}
.header_area .header_box2 h1{
	color:#F00;
	font:bold 24px "Times New Roman", Times, serif;
    font-style: italic;
    text-align: center;
}
.header_area .header_box2 h2{
	color: #000099;
	font:12px/22px Arial, Helvetica, sans-serif;
    font-weight: 600;
	text-align:center;
}
.header_area .header_box2 h3{
	color: #000099;
	font:12px/40px Arial, Helvetica, sans-serif;
    font-weight: 600;
	text-align:center;
	padding-top:10px;
}
.header_area .header_box2 p{
	color: #000099;
	font:bold 16px Arial, Helvetica, sans-serif;
	text-align:center;
}
.header_area .header_box3 h1{
	font:12px Verdana, Geneva, sans-serif;
    font-weight: 600;
	color:#000;
	text-align:center;
}

.header_area .header_box3 p{
		text-align: center;
}

.header_area .header_box3 p a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}
.header_area .header_box3 p a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}
header hr{
	width:965px;
}

/* section*/
section{
	width:100%;
}
section .section_area{
	width:965px;
	background:#FFF;
	padding-bottom:10px;
}
.section_area .leftpanel{
	width:190px;
	margin-right:10px;
	float:left;
	padding-bottom:10px;
}

.section_area .middlepanel{
	width:488px;
	padding-right:5px;
	padding-left:5px;
	float:left;
	padding-bottom:10px;
}
.section_area .rightpanel{
	width:257px;
	padding-left:10px;
	float:left;
	padding-bottom:10px;
}

.section_area .leftpanel h1{
	font:12px Verdana, Geneva, sans-serif;
	font-weight:600;
	color:#000;
	text-align:center;
	padding-top:10px;
}
.section_area .leftpanel .roof_estimating{
	width:180px;
	margin-top:15px;
	border:1px solid #0066ff;
	margin-left:0;
}
.section_area .leftpanel .roof_estimating h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:9px;
}
.section_area .leftpanel .roof_estimating ul{
	list-style-type:none;
	padding:4px 8px;
}
.section_area .leftpanel .roof_estimating li{
	line-height:13px;
}
.section_area .leftpanel .roof_estimating li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}
.section_area .leftpanel .roof_estimating li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}
.section_area .leftpanel .popular_roof{
	width:180px;
	padding-top:15px;
	margin-left:0px;
}
.section_area .leftpanel .popular_roof h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#8f4b0e;
	text-align:center;
	padding-top:9px;
}

.section_area .leftpanel .popular_roof .popular_area{
	border:1px solid #8f4b0e;
	padding:8px 0px;
}

.section_area .leftpanel .popular_roof .popular_area p{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 500;
    text-decoration: none;
	color:#000;
	padding:0px 4px;
}

.section_area .leftpanel .popular_roof .popular_area p a{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}
.section_area .leftpanel .popular_roof .popular_area p a:hover{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}
.section_area .leftpanel .popular_roof .popular_area ul{
	padding:14px 0;	
}

.section_area .leftpanel .popular_roof .popular_area li{
	line-height:13px;
	/*list-style:inside url(images/bullet_ball_blue.gif);*/
	list-style-type:none;
	background:url(images/bullet_ball_blue.gif) no-repeat left 2px;
}

.section_area .leftpanel .popular_roof .popular_area li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
	margin:0 18px;	
}

.section_area .leftpanel .popular_roof .popular_area li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
	margin:0 18px;
}

.section_area .leftpanel .popular_roof .popular_area .roofing_tool img{
margin-left:33px;
border-style: solid;
border-width: 1px;
border-color: #8F4B0E	
}

.section_area .leftpanel .popular_roof .popular_area .roofing_tool p{
	font:12px Verdana, Geneva, sans-serif;
	font-weight: 600;
	color:#000;
	padding-left:22px;
}

.section_area .leftpanel .popular_roof_ad{
	width:180px;
	padding-top:15px;
	padding-left:30px;
}

.section_area .leftpanel .popular_roof_video{
	width:180px;
	padding-top:15px;
}

.section_area .leftpanel .popular_roof_video img{
	padding-left:40px;
	padding-bottom:5px;
}

.section_area .leftpanel .popular_roof_video p a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .leftpanel .popular_roof_video p a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .middlepanel h1{
	font:bold 17px Arial, Helvetica, sans-serif;
	color: #000080;
	padding-top:14px;
}

.section_area .middlepanel p{
	font:13px/18px Verdana, Geneva, sans-serif;
	color: #000;
	padding-top:18px;
}

.section_area .middlepanel h2{
	font:bold 13px Verdana, Geneva, sans-serif;
	color: #000;
	padding-top:18px;
}

.section_area .middlepanel h3{
	color: #FF9900;
	font:bold 18px 'EB Garamond', serif;
	line-height:4.063em;
	text-align:center;
}

.section_area .middlepanel h4{
	color:#000;
	font:bold 12px Verdana, Geneva, sans-serif;
	text-align:center;
}


.section_area .middlepanel figure{
	width:140px;
	padding-top:10px;
	text-align:center;
}


.section_area .middlepanel figure p{
	font:bold 13px Verdana, Geneva, sans-serif;
	color:#000;
}

.section_area .middlepanel figure a{
	color:#1C4FFF;
	font:10px Verdana, Geneva, sans-serif;
	text-align:center;
	text-decoration:none;
	font-weight:600;
	padding-left:8px;
}

.section_area .middlepanel figure a:hover{
	color:#F00;
	font:10px Verdana, Geneva, sans-serif;
	text-decoration:none;
	text-align:center;
	font-weight:600;
	padding-left:8px;
	background-color:#EEE;
}

.section_area .middlepanel .ad{
	width:300px;
	padding-top:5px;
}

.section_area .middlepanel a{
	font:13px/18px Verdana, Geneva, sans-serif;
	color: #1C4FFF;
	text-decoration:none;
	font-weight:600;
}

.section_area .middlepanel a:hover{
	font:13px/18px Verdana, Geneva, sans-serif;
	color:#F00;
	text-decoration:none;
	font-weight:600;
	background-color:#EEE;
}

.section_area .rightpanel .bid{
	width:257px;
	padding-top:15px;
}

.section_area .rightpanel .bid_proposal{
	width:257px;
	padding-top:15px;
}

.section_area .rightpanel .roof_calcwriter{
	width:180px;
	margin-top:15px;
	border:1px solid #0066ff;
	margin-left:0px;
}

.section_area .rightpanel .roof_calcwriter h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:9px;
}

.section_area .rightpanel .roof_calcwriter ul{
	list-style-type:none;
	padding:4px 8px;
}

.section_area .rightpanel .roof_calcwriter li{
	line-height:13px;
}

.section_area .rightpanel .roof_calcwriter li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .rightpanel .roof_calcwriter li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area hr{
	width:965px;
	clear:both;
}

section .section_area .menu_table_ad{
	width:120px;
	padding-top:10px;
	float:left;
	background:#FFF;
}

section .section_area .middlepanel1{
	width:668px;
	padding:20px 25px 0 25px;
	float:left;
}

.middlepanel1 h1{
	font:12px Verdana, Geneva, sans-serif;
	padding:1.313em 0;
	color:#000;
	font-weight: 600;
	text-align:center;
}
.middlepanel1 .roofing_new_work{
	/*width:523px;*/
	width:560px;
	background:#FFF;
}
.roofing_new_work .row1{
	/*width:608px;*/
	border:1px solid #FB314D;
	background:#FFFFCC;
	font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
	clear:both;
}
.roofing_new_work .row1 .col1_new_work{
	width:164px;
	padding:13px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}
.roofing_new_work .row1 .col2_new_work{
	width:80px; /*width:68px;*/
	padding:5px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}
.roofing_new_work .row1 .col3_new_work{
	width:65px;
	padding:5px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}
.roofing_new_work .row1 .col4_new_work{
	border-right:none;
	padding:5px 0;
	width:64px;
	float:left;
	text-align:center;
}
/*start */
.roofing_new_work .row1 .col5_new_work{
	border-right:none;
	padding:5px 0;
	width:64px;
	float:left;
	text-align:center;
}

.roofing_new_work .row1 .col6_new_work{
	border-right:none;
	padding:3px;
	width:64px;
	float:left;
	text-align:center;
}

/*end */

.roofing_new_work .row2{
	/*width:608px;*/
	border:1px solid #CCC;
	border-top:none;
	background:#FFF;
	font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
	clear:both;
}

.roofing_new_work .row2 .col5_new_work{
	width:154px;
	padding:5px;
	float:left;
	border-right:1px solid #CCC;
	text-align:left;
}

.roofing_new_work .row2 .col6_new_work{
	width:68px;
	padding:5px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}

.roofing_new_work .row2 .col7_new_work{
	width:65px;
	padding:5px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}

.roofing_new_work .row2 .col8_new_work{
	border-right:none;
	padding:5px 0;
	width:64px;
	float:left;
	text-align:center;
}

.roofing_new_work .row2 .col9_new_work{
	width:68px;
	padding:13px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}

.roofing_new_work .row2 .col10_new_work{
	width:65px;
	padding:13px 0;
	float:left;
	border-right:1px solid #CCC;
	text-align:center;
}

.roofing_new_work .row2 .col11_new_work{
	border-right:none;
	padding:13px 0;
	width:64px;
	float:left;
	text-align:center;
}

.middlepanel1 .row3{
	border:1px solid #CCC;
}

.middlepanel1 .row3 h2{
	font:12px Verdana, Geneva, sans-serif;
	padding:0.9em 0;
	color:#000;
	font-weight:600;
	text-align:center;
}

.middlepanel1 .row3 p{
	font:11px/24px Verdana, Geneva, sans-serif;
	color:#000;
	text-align:left;
	margin:0 4px;
}

.middlepanel1 .row3 h3{
	text-decoration:none;
	font:12px Verdana, Geneva, sans-serif;
	padding:1.313em 0;
	color:#000;
	text-align:right;
	margin-right:4px;
}

.middlepanel1 .row3 a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.middlepanel1 .row3 a:hover{
	font:10px Verdana, Geneva, sans-serif;
	color:#F00;
	text-decoration:none;
	font-weight:600;
	background-color:#EEE;
}
/*footer*/
footer{
	width:100%;
}

footer .footer_area{
	width:965px;
	text-align:center;
}

.footer_area nav{
	text-align:center;
}

.nav_area ul{
	list-style-type:none;
}

.nav_area ul li{
	display:inline;
	padding-left:2px;
}

.nav_area ul li a{
	display:inline;
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.nav_area ul li a:hover{
	display:inline;
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.footer_area p{
	font:10px/26px Verdana, Geneva, sans-serif;
	color:#000;
}
/* - Styles I have added                                              jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj-~  */


.menutitle {
 font-size: 12px;
 font-family: Arial,Lucida Sans,Verdana,Tahoma;
  color: white;
 
   font-weight: bold;
    text-align: center; 
 }   
               
 .boxWhite { border: 1px solid #0066ff; 
 padding-left: 5px; 
 padding-right: 5px;  
 padding-top: 2px;
  padding-bottom: 3px;
  background-color: white;
  text-align: center;
   }             
               
.newbox { font-family: Arial;
 font-weight: normal;
  width:345px;
  padding: 6px;
   } 
  
 .newbox h2 { background-color:#0066ff;
  text-align:center;
  color:white; 
  margin:0px;
  font-size:12px;
  line-height: 28px; 
  }
     
.newbox ul { overflow:hidden; 
list-style-type:none;
 border: 1px solid #0066CC; margin:0px;
  padding:6px; font-size: 10px;
  }
  
.newbox li { width: 50%; float:left;
}

.newbox li a {
 color: #1C4FFF;
  font-weight:600;
  text-decoration:none;
   }
                  
.newbox2 {
  font-family: Arial;
  font-weight: normal;
   font-size:12px;
    border: 1px solid #0066CC;
   margin-bottom: 10px;
      } 
      
.newbox2 h2 {
 padding: 0px 10px;
  background-color:#0066CC; 
  text-align:left;
   color:white;
    margin:0px;
      font-size:12px;
      line-height: 28px;
  }
  
.newbox2 p {
 margin-bottom: 1px;
  padding: 10px 10px;
   }
   
 .newbox2 img {float: left; margin: 6px;
 }

 .browntitle    {
  background-color: #8f4b0e;   
  border: 1px solid #8f4b0e;
   padding-left: 4px;
   padding-right: 4px; 
   padding-top: 4px;
    padding-bottom: 2px; 
    text-align: center; }  
       
               
.brownbox         { border: 1px solid #8f4b0e; 
padding-left: 4px; 
padding-right: 4px; 
 padding-top: 5px;
 padding-bottom: 3px;
 background-color: #eae3e1; 
 line-height:13px;
/*list-style:inside url(images/bullet_ball_blue.gif);*/
list-style-type:none;
background:url(images/bullet_ball_blue.gif) no-repeat left 2px;
 }
               
.xcenter {text-align: center;
}             

.Bfont12 {
font-size:12px;font-weight:600;
 font-family:verdana, arial, helvetica, sans-serif;
 }
 
.font12      {
 font-family: verdana, arial, helvetica, sans-serif;
  font-size: 10pt;
  }
 .redbold      { font-family: Verdana; font-size: 12px;
 color: #FF0000; 
  font-weight: bold 
  }
  .greenbold      { font-family: Verdana; font-size: 12px;
 color: #008048; 
  font-weight: bold 
  }    
  

.BigRed      { font-family: Verdana; font-size: 18pt;
 color: #FF0000; font-style: italic; 
  font-weight: bold 
  }  
        
 .PerSqtable {     
	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
	width: 400px;
	table-layout: fixed;
	border-collapse: collapse;	
	margin-left:auto; 
      margin-right:auto;
	}
	
.PerSqtable tr.bottom
	{Border: 1px solid #CCC;
         padding: 0 0 4px;
          font-family: Arial; font-size: 10pt;
}

.PerSqtable td.bottom{
Border: 1px solid #CCC;
width: 512px;
padding: 4px;
}

.PerSqtable th {
	padding: 0 0 3px;
	text-align: left;
	}

.PerSqtable tr.yellow td {
	border-top: 1px solid #FB314D;
	border-bottom: 1px solid #FB314D;
	background: #FFC;
	}
	
.PerSqtable tr.yellow td:nth-child(1){
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #FB314D;
	text-align: center;
}

 .PerSqtable tr.yellow td:nth-child(6){
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #FB314D;
}

.PerSqtable td.adjacent {
	border-left: 1px solid #CCC;
	text-align: center;
	}
	
	.PerSqtable td.right{
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	text-align: center;
    }
	
.PerSqtable td{      
	border-bottom: 1px solid #CCC;
	padding: 0 0 2px;
	width: 120px;
	}

.PerSqtable td.width {
border-left: 1px solid #CCC;
padding-left: 3px;
width: 77px;	
	}
    	
.PerSqtable td.col1{
width: 170px;
text-align: left;
border-left: 1px solid #CCC;
padding-left: 4px;
}

.PerSqtable td.col2{
width: 78px;
text-align: center;
border-left: 1px solid #CCC;
}

.PerSqtable td.col3{
width: 64px;
text-align: center;
border-left: 1px solid #CCC;
}

.PerSqtable td.col4{
width: 64px;
text-align: center;
border-left: 1px solid #CCC;
}

.PerSqtable td.col5{
width: 66px;
text-align: center;
border-left: 1px solid #CCC;
}

.PerSqtable td.col6{
width: 68px;
text-align: center;
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
}
          
.PerSqtable a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.PerSqtable a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

          
.PerSqtable a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.PerSqtable a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}  
 #horzList ul{
float:left;
width:100%;
padding:3px;
margin:0;
list-style-type:none;
}

 #horzList a {
float:left;
width:90px;
height: 16px;
padding:4px;
padding-top: 8px;
text-decoration:none;
font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;  
	color:#1C4FFF;
	text-align: center;
background-color:  #FFC;
border-left: solid 1px #CCC;
border-top: solid 1px red;
border-bottom: solid 1px red;

}
#horzList li:last-child a {
border-right: solid 1px red;
 }

#horzList li:first-child a {
border-left: solid 1px red;
 }

 #horzList a:hover {background-color: white;
color:#F00; }

 #horzList li {display:inline;}              
  
.red{color:red;}

.section_area .middlepanel Calculatorhowto{
	width:480px;
	padding-top:10px;
	text-align:center;
}

/*practise     sdfsdgdgdgdfgdgdgdgfdfgdfgdfgdfgdgfdgfdgdgfdfg                                */

  .section_area .rightpanel .tallskscraper{
	width:190px;
	padding-top:15px;
    padding-right: 80px;
	border:0;
	text-align:center;
	}   
	
.section_area .rightpanel .menu{
	width:180px;
	margin-top:15px;	
	margin-left:0px;
	margin-bottom:15px;
	border-style:solid;    
}

.section_area .rightpanel .menu h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:9px;
}

.section_area .rightpanel .menu ul{
	list-style-type:none;
	padding:4px 8px;
}

.section_area .rightpanel .menu li{
	line-height:13px;
}

.section_area .rightpanel .menu li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .rightpanel .menu li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .middlepanel .wideimage{
	width:420px;
	padding-top:10px;
	margin-left: 20px;
	text-align:center;
}
	
.header_area .header_box3 p.red {color:red;
}

.easy img{
margin-top: 130px;
} 
  
.myfoot {
 font:12px Verdana, Geneva, sans-serif;
    font-weight: 600;  
  text-align:center;
 }

.myfoot a{
font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
    text-align:center;
 }
 
 .myfoot a:hover{font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}
 
 .section_area .middlepanel .ad{
	width:300px;
	padding-top:5px;
}
.section_area .middlepanel .bigimage{
	width:420px;
	padding-top:5px;
    text-align:center;
}

.font11 {font-size:11px;font-weight:500;font-family:verdana, arial, helvetica, sans-serif; color: #000000}

table.NailTable {
	font-family: verdana,arial,sans-serif;
	width: 460px;
	font-size:11px;
	color:#333333;/*black*/
	border-width: 1px;
	border-color: #666666;/*dark gray */
	border-collapse: collapse;
	margin: auto;
}
table.NailTable th {
	border-width: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #0066ff; /*blue */
	background-color: #f0f0f0;/*light gray */
}
table.NailTable td {
    height: 20px;
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #666666; /*dark gray */
	background-color: #ffffff;/*white */
}
table.NailTable .leftcol th{
width: 240px;
text-align: center;
}

.Specialh1{ color:#281b2b;
	font:24px/22px Arial, Helvetica, sans-serif;
    font-weight: 600;
	text-align:center;
	}
    .BfontWhite12 { font-size: 12px; font-family: verdana, arial, helvetica, sans-serif; color: 
               #FFFFFF; font-weight: bold; text-align:center; }table.NailTable {
	font-family: verdana,arial,sans-serif;
	width: 420px;
	font-size:11px;
	color:#333333;/*black*/
	border-width: 1px;
	border-color: #666666;/*dark gray */
	border-collapse: collapse;
	margin: auto;
}

table.NailTable th {
	border-width: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #0066ff; /*blue */
	background-color: #0066ff;/*blue */
	font-size: 12px;
	font-family: verdana, arial, helvetica, sans-serif;        
    font-weight: bold;
}

table.NailTable td {
    height: 20px;
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #666666; /*dark gray */
	background-color: #ffffff;/*white */
}

table.NailTable .leftcol th{
width: 240px;
text-align: center;
}

table.NailTable h1 { color:#000099;
	font:24px/22px Arial, Helvetica, sans-serif;
    font-weight: 600;
	text-align:center;
	}
	
table.NailTable h2 { font-size: 20px;
 font-weight: bold;
  text-align: center;
   }	
	
table.NailTable h3 { font-size: 16px;
 font-weight: bold;
  text-align: center;
   }
  
table.NailTable h4 { font-size: 11px;
 font-weight: bold;
  text-align: center;
   }
  
.Specialh4 { font-size: 11px;
 font-weight: bold;
  text-align: center;
   }  
  
 .bodywidth{
 width: 786px; 
 margin:0px auto;
  }
   
 .rightColumn{ 
 width: 130px; 
 float: left;
 margin-left:10px;
  	}
	
	.leftcolumn{
	width: 181px;
	float: left;
	margin-right:10px;	
	 }
	 
	 .centercolumn{
	 width: 428px;
	 float: left;
	 margin:0px auto;
	  }
	  
	.Bfont22{
	 font-size: 22px; font-family: verdana, arial, helvetica, sans-serif; 
               font-weight: bold;
			   color: #FFFFFF;
			   text-align: center;
	 } 
	  

.leftcol th{
width: 120px;
text-align: center;
} 
 .rightcol th{
width: 140px;
text-align: center;
} 


.bluegraybox ul{
	padding:14px 0;	
}

.bluegraybox li{
	line-height:13px;	
	border: 1px solid #0066ff;
	list-style-type:none;
	background:url(images/bullet_ball_blue.gif) no-repeat left 2px;
	background-color: #e9e9e9
}
a {	color: #0000ff;	font-size:10px;text-decoration:none;font-weight:600;font-family:verdana, arial, helvetica, sans-serif;}
a:link       { color: #1C4FFF }
a:visited {color:#07a;}
a:hover {background-color:#eee;}
a:hover {color: red;}

.Bfont22{
	 font-size: 22px; font-family: verdana, arial, helvetica, sans-serif; 
               font-weight: bold;
			   color: #FFFFFF;
			   text-align: center;
	 } 
     
     .largeRectangle{
	width:336px;
	padding-top:10px;
	text-align:center;
}

.boxtitle    { background-color: #0066ff;
 color: #FFFFFF;
 font-size: 12px;
  font-weight: bold;
  font-family: Arial,Lucida Sans,Verdana,Tahoma;      
   border: 1px solid #0066CC; 
   padding-left: 2px;
  padding-right: 2px;
  padding-top: 5px;
   padding-bottom: 1px;
    text-align: center;
 }               
               
               
.box { border: 1px solid #0066ff;
font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
 padding-left: 5px;
  padding-right: 5px;   
  padding-top: 5px; 
  padding-bottom: 3px;
  background-color: #e9e9e9;
   width: 183px;
    }
    
    .box li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
	margin:0 18px;
}

.box li a{
	font:10px Verdana, Geneva, sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none;
	color:#1C4FFF;
	margin:0 18px;	
}

.box li{
	line-height:13px;
	/*list-style:inside url(images/bullet_ball_blue.gif);*/
	list-style-type:none;
	background:url(images/bullet_ball_blue.gif) no-repeat left 2px;
	}
    
	
.box ul{
	padding:14px 0;	
}

.box p a{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}
.box p a:hover{
	font:11px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .rightpanel .talladd{ /*added 05-19-13--*/
	width:120px;
	padding-top:15px;
    padding-right:80px;
}
 .section_area .middlepanel .roofpitchbox  
{
	width:220px;
	margin-top:35px;
	border:1px solid #0066ff;
	background-color: #F2F2F2;
}

.section_area .middlepanel .roofpitchbox a{
	font:10px Verdana, Geneva, sans-serif;
    padding-left: 8px;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .middlepanel .roofpitchbox a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .middlepanel .roofpitchbox h1{
	height:20px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:9px;
}

.section_area .middlepanel .roofpitchbox ul{
	list-style-type:none;
	padding:4px 8px;
text-align:left;
}

.section_area .middlepanel .roofpitchbox li{
	line-height:13px;
}

.section_area .middlepanel .roofpitchbox li a{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#1C4FFF;
}

.section_area .middlepanel .roofpitchbox li a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
}

.section_area .middlepanel .LargeRectangle{
width: 336px;
text-align:center;
 }	
 
 .section_area .middlepanel .speciallist ul{
	list-style-type:none;
	padding:4px 8px;
}

.section_area .middlepanel .speciallist li{
font:13px/18px Verdana, Geneva, sans-serif;
	color: #000;
	line-height:15px;
    padding-left: 25px;
    list-style-type:none;
background:url(images/bullet_ball_blue.gif) no-repeat left 2px;	
}
.section_area .middlepanel .lipbender{
width: 295px;
padding-left: 25px;
padding-top: 25px;
text-align: center;
 }
 
 .section_area .middlepanel .bend_1inch{ 
 width: 178px; 
 }
 
 .section_area .middlepanel .bend_45{ 
 width: 243px; 
 }
 
 .section_area .middlepanel .finished_bend{ 
 width: 164px; 
 }
 
 .section_area .middlepanel .paypal_button{ 
 width: 148px; 
 text-align:center;
 }
 
 .section_area .middlepanel .buy_non_usa{ 
 width: 143px; 
 text-align:center;
 }
 
 .section_area .middlepanel .paypal_logo{ 
 width: 100px; 
 text-align:center;
 }
 .section_area .middlepanel figcaption{ 
font:13px/18px Verdana, Geneva, sans-serif;
	color: #000;
    }
        
    .section_area .middlepanel img{
    padding-right: 10px;
    padding-left: 6px;
     }
 /*last 2 sections removed */       
      .section_area .middlepanel{  
     font:12px/18px Verdana, Geneva, sans-serif;
	color: #000;
	padding-top:18px;
    }
     .section_area .middlepanel hr{ 
    background: #666;   
    border: 0;
    height: 1px;
    width: 90%;
    color: #666
     }	
     			
    .section_area .middlepanel .paddedinline {
    display:inline;
    padding-right: 6px;
    padding-left: 6px;
     }
     
     .section_area .middlepanel a{
font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
color:#1C4FFF;
}

.section_area .middlepanel a:hover{
	font:10px Verdana, Geneva, sans-serif;
    font-weight: 600;
    text-decoration: none;
	color:#F00;
	background-color:#EEE;
	margin:0;
}

.Bodywrap{
	width: 965px;
	margin: 0 auto;  
}	
.thispage hr{
	margin-top: 80px;
	width= 100%
}
#menubox {
	width: auto ;
	margin:0 auto;
	display:table;
} 	
/*border-top: solid 1px red;
border-bottom: solid 1px red;*/
.menu_table_nav ul li{
	list-style:none;
	float: left;
	min-width:88px;
	height:16px;
	padding: 8px;
	text-decoration:none;
	font:10px Verdana, Geneva, sans-serif;
	font-weight: 600;  
	color:#1C4FFF;
	text-align: center;
	background-color:  #f0f0f0;
	border-top: solid 1px #0066ff;	
	border-bottom:1px solid #0066ff;
	border-left:1px solid #0066ff;
	display:inline;
}

.menu_table_nav ul li:last-child{
	border-right:1px solid #0066ff;
}

Open in new window

0
Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

 

Author Comment

by:isnoend2001
ID: 39258460
Thanks padas, i pasted your code, but it made no difference

Thanks : jagadishdulal, but it didn't work.the code in the css file cannot be changed as other pages are using it
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 39258466
The code works fine  http://jsbin.com/oxuroj/2 and I fixed up a few things too.  I don't know what is in your style sheet. I am only working with the css in your style tags. You probably have something conflicting.  To fix:

Move this line

<link href="../roof.css" rel="stylesheet" type="text/css">

ABOVE the </style></style> tags

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Roofcalcwriter 10 screenshot</title>
<meta name="dcterms.created" content="Wed, 19 Jun 2013 01:59:25 GMT">
<meta name="description"  content="RoofCalcWriter estimate screenshot">
<meta name="keywords" content="Roofing">

<!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<link href="../roof.css" rel="stylesheet" type="text/css">
<style type= "text/css">
#menubox {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}
nav.menu_table_nav { text-align: center; }

.menu_table_nav #horzlist a
{
	width:88px;
	height: 16px;
	padding:4px;
	padding-top: 8px;
	text-decoration:none;
	font:10px Verdana, Geneva, sans-serif;
	font-weight: 600;
	color:#1C4FFF;
	text-align: center;
	background-color:  #f0f0f0;
	border: 1px solid #0066ff;
}
#horzlist li { display:inline; }
/*div#horzlist li:first-child {
border-left:none; }*/

 #horzlist a:hover
{
	background-color: white;
	color:#F00;
}
.Bodywrap
{
	width: 965px;
	margin: 0 auto;
}
.thispage hr { margin-top: 80px;  width= 100%
}
</style>

<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="Bodywrap">
  <div style="float:Left"> <img src="../images/rglogo105x54.jpg" width="105" height="54" alt="Roofgenius Logo" title=""/> </div>
  <!--float-->
  <div style ="text-align:center"> 
    <script type="text/javascript"><!--

google_ad_client = "ca-pub-5860242097775343";

/* leaderboard728x90 */

google_ad_slot = "8943766566";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script> 
    <script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 
  </div>
  <!--aligncenter-->
  <div style="clear: both;"></div>
  <div style="margin-top:15px"></div>
  <div id="menubox">
    <nav class="menu_table_nav">
      <ul id="horzlist">
        <li><a href="http://roofgenius.com">Home</a></li>
        <li><a href="http://roofgenius.com/sitemap.asp">Site Map</a></li>
        <li><a href="http://roofgenius.com/about.htm">About</a></li>
        <li><a href="http://roofgenius.com/roofpitch.htm">Roof Pitch</a></li>
        <li><a href="http://roofgenius.com/download.asp">DownLoads</a></li>
      </ul>
    </nav>
    <!--nav--> 
  </div>
  <!--menubox-->
  
  <div class="thispage">
    <hr>
  </div>
  <!--thispage--> 
</div>
<!--bodywrap-->
</body>
</html>

Open in new window


Then I would suggest figuring out what is overlapping and removing/merging to clean things up.
0
 

Author Closing Comment

by:isnoend2001
ID: 39258507
Thanks
I removed the link to the style sheet and it works
0

Featured Post

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery scrollTop 2 50
How to create a 3-column full-width flex button layout 1 31
Custom Form Design to Match this example 1 22
Create CSS Animation for Page Transitions 4 26
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question