Solved

Help with styles

Posted on 2014-03-05
12
189 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
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!

 
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

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

744 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

15 Experts available now in Live!

Get 1:1 Help Now