Solved

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

Posted on 2013-06-18
6
333 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now