?
Solved

Help with styles

Posted on 2014-03-05
12
Medium Priority
?
195 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
12 Comments
 
LVL 4

Assisted Solution

by:ravikantninave
ravikantninave earned 600 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 600 total points
ID: 39907582
use
text-align:left; for header
0
 
LVL 58

Accepted Solution

by:
Gary earned 1000 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
Industry Leaders: 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!

 
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 1000 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

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!

Question has a verified solution.

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

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.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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…
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).

764 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