Solved

Help with styles

Posted on 2014-03-05
12
192 Views
Last Modified: 2014-03-06
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
Comment
Question by:sirbounty
  • 5
  • 4
  • 2
12 Comments
 
LVL 4

Assisted Solution

by:ravikantninave
ravikantninave earned 150 total points
ID: 39907576
h2 {
  font-size:10.0pt;
  font-family:"Courier New";
  margin-top:-10px;  
  }
0
 
LVL 4

Assisted Solution

by:ravikantninave
ravikantninave earned 150 total points
ID: 39907582
use
text-align:left; for header
0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39907640
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 67

Author Comment

by:sirbounty
ID: 39907700
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39907733
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
 
LVL 67

Author Comment

by:sirbounty
ID: 39907741
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
 
LVL 58

Expert Comment

by:Gary
ID: 39907750
Nothing wrong with it and if that is basically the makeup of the page then it will be fine.
0
 
LVL 67

Author Comment

by:sirbounty
ID: 39910944
Well, I was going to boost the points here, but can't seem to do that.  Did they change that feature? : \
0
 
LVL 58

Expert Comment

by:Gary
ID: 39910969
It's currently broken - it should (hopefully) be fixed next Wednesday
I can increase the points if you wish.
0
 
LVL 67

Author Comment

by:sirbounty
ID: 39911009
Sure, can you increase to 400 please?
Thanks!
0
 
LVL 67

Author Closing Comment

by:sirbounty
ID: 39911378
Thanks for the help :^)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

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…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

791 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