Solved

Help with styles

Posted on 2014-03-05
12
190 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to create a tile layout 1 36
Error viewing ASP page 12 146
push text up below h2 tag 1 34
Max-width on individual images in grid 4 51
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

932 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

10 Experts available now in Live!

Get 1:1 Help Now