• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 198
  • Last Modified:

Help with styles

I'm trying to put together what I need to duplicate an existing report.
I've automated everything, but now I'm trying to get the formatting correct.
Unfortunately, I seem to have forgotten a lot from my 2002 classic asp course. :^)

That said, I've come up with something like the code below for my html data.
However, I've got a few issues...
1) I'd like to reduce the whitespace between my <h1> values and the <h2> data that follows.
2) My tables aren't coming out as I'd like.  The headers are centered, and I'd like them left-aligned.

Formatting
<html><head><style>
.err {font-size:8pt;color:red;}
.norm {font-size 8pt;color:navy;}
.warn {font-size 8pt;color:orange;}
.head {font-size 8pt;color:black;}
th { text-decoration:underline; font-size:11pt; color:navy; align=left;font-weight:bold }
td { padding-right:15%; }
h1 {
  font-size:10.0pt;
  font-family:"Comic Sans MS";
  color:#003399;
  margin-right:0in;
  margin-left:0in;
  text-decoration:underline;
  font-weight:bold;}
h2 {
  font-size:10.0pt;
  font-family:"Courier New"}
</style>
</head>
<body>
<h1>FIRST TITLE</h1><div id=2><h2 class=norm>Some information I'd like to display</h2></div>
<h1>SECOND TITLE</h1><div id=5>
  <table><tr><th>Some heading</th><th>Another Heading</th></tr>
  <tr class=warn><td>Data value</td><td>Information</td></tr>
  <tr class=warn><td>Data value2</td><td>Information2</td></tr>
 </table></div>
<h1>THIRD TITLE</h1>
<div id=6>
  <table><tr><th>Some heading</th><th>Another Heading</th></tr>
  <tr class=err><td>Data value</td><td>Information</td></tr>
  <tr class=err><td>Data value2</td><td>Information2</td></tr>
 </table></div>
</body></html>

Open in new window

0
sirbounty
Asked:
sirbounty
  • 5
  • 4
  • 2
4 Solutions
 
ravikantninaveCommented:
h2 {
  font-size:10.0pt;
  font-family:"Courier New";
  margin-top:-10px;  
  }
0
 
ravikantninaveCommented:
use
text-align:left; for header
0
 
GaryCommented:
Using TH will automatically bold and center a table header cell
Reset it with
th {
text-align:left
}

For the Header tags, the same thing you need to reset the default margin, tweak as necessary

h1,h2 {
margin:5px 0
}

The previous comments are weird to say the least
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
sirbountyAuthor Commented:
Much better!  And I do appreciate the explanation, however I found the table headers did not automatically include an underline.  Nonetheless, I think I like it without.
Changing the margin looks great, but now too tight with the following element.
Rather than a separate margin for each, is there a way to simply pad a bit before the next <h1>?
0
 
GaryCommented:
So you want to add an extra top margin to every H1 bar the first?

h1:not(:first-of-type) {
margin-top:10px
}


Tweak as necessary
This is not an ideal way to target though, you should be using a container at least so you don't affect any other H1 tags
0
 
sirbountyAuthor Commented:
My code generates these 'elements' and my logic was to set each report up with a div tag (div id=3).  Then I loop through them and, placing them in order, build the html code from that.

If that's not ideal to monkey with the first-of-type, then I suppose I should just keep playing with the all-around margins?
0
 
GaryCommented:
Nothing wrong with it and if that is basically the makeup of the page then it will be fine.
0
 
sirbountyAuthor Commented:
Well, I was going to boost the points here, but can't seem to do that.  Did they change that feature? : \
0
 
GaryCommented:
It's currently broken - it should (hopefully) be fixed next Wednesday
I can increase the points if you wish.
0
 
sirbountyAuthor Commented:
Sure, can you increase to 400 please?
Thanks!
0
 
sirbountyAuthor Commented:
Thanks for the help :^)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now