473,659 Members | 2,591 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Indenting information under heading elements

I have a bunch of (old) pages that are outline-driven, and use the h1-h6
elements to define headings. Is there any way that I can create a stylesheet to
show them in an indented style? For instance, my HTML is:

<html>
<body>
<h1>Ti tle Page</h1>
Some content, perhaps the intro.

<h2>Secti on 1</h2>
Stuff about section 1.

<h2>Secti on 2</h2>
An overview of section 2.

<h3>Secti on 2a</h2>
A subsection within section 2.

<h3>Secti on 2b</h2>
Another subsection within section 2.

<h2>Secti on 3</h2>
The closing section.
</body>
</html>

and I'd like it to render as

Title Page (really big bold font)
Some content, perhaps the intro.

Section 1 (big bold font)
Stuff about section 1.

Section 2 (big bold font)
An overview of section 2.

Section 2a (big italic font)
A subsection within section 2.

Section 2b (big italic font)
Another subsection within section 2.

Section 3 (big bold font)
The closing section.

I've tried a bunch of options, but to no avail. I've even made some attempts
creating div elements underneath each heading, but a) I haven't gotten it to
work correctly, either, and b) having to change all of my pages would really
suck. Any thoughts would be greatly appreciated!
Jul 20 '05 #1
5 2234

"Chris Reigrut" <ch***@teravati on.com> wrote in message
news:10******** *****@corp.supe rnews.com...
I have a bunch of (old) pages that are outline-driven, and use the h1-h6 elements to define headings. Is there any way that I can create a stylesheet to show them in an indented style? For instance, my HTML is:

&lt;html&gt;
&lt;body&gt;
&lt;h1&gt;Ti tle Page&lt;/h1&gt;
Some content, perhaps the intro.

&lt;h2&gt;Secti on 1&lt;/h2&gt;
Stuff about section 1.

&lt;h2&gt;Secti on 2&lt;/h2&gt;
An overview of section 2.

&lt;h3&gt;Secti on 2a&lt;/h2&gt;
A subsection within section 2.

&lt;h3&gt;Secti on 2b&lt;/h2&gt;
Another subsection within section 2.

&lt;h2&gt;Secti on 3&lt;/h2&gt;
The closing section.
&lt;/body&gt;
&lt;/html&gt;

and I'd like it to render as

Title Page (really big bold font)
Some content, perhaps the intro.

Section 1 (big bold font)
Stuff about section 1.

Section 2 (big bold font)
An overview of section 2.

Section 2a (big italic font)
A subsection within section 2.

Section 2b (big italic font)
Another subsection within section 2.

Section 3 (big bold font)
The closing section.

I've tried a bunch of options, but to no avail. I've even made some attempts creating div elements underneath each heading, but a) I haven't gotten it to work correctly, either, and b) having to change all of my pages would really suck. Any thoughts would be greatly appreciated!


If your use of h1-h6 is consistent, you can define each the
style/indent desired, something like

h1 {font:bold 200% arial,sans-serif;}
h2 {font:bold italic 180% arial,sans-serif;text-indent:15px;}
h3 {font:bold italic 160% arial,sans-serif;text-indent:30px;}
h4 {font:bold 140% arial,sans-serif;text-indent:45px;}
h5 {font:bold 120% arial,sans-serif;text-indent:60px;}
h6 {font: 100% arial,sans-serif;text-indent:75px;}

However, this will affect all h1-6's in the site unless you
assign a class to separate your outline from the remainder of the
page/site.

hth
--
Chet
ng******@NOchar terSPAM.net (remove NO.....SPAM)
Jul 20 '05 #2
Chris Reigrut wrote:
I have a bunch of (old) pages that are outline-driven, and use the h1-h6
elements to define headings. Is there any way that I can create a stylesheet to
show them in an indented style?


What you describe is a nested list. Use the right markup for the job.

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #3
kchayka <us****@c-net.us> wrote:
Chris Reigrut wrote:
I have a bunch of (old) pages that are outline-driven, and use the h1-h6
elements to define headings. Is there any way that I can create a stylesheet to
show them in an indented style?


What you describe is a nested list. Use the right markup for the job.


What the OP described looks like every document that has headings at
multiple levels and content under each. The only difference is that he
wants the levels to be indented, outline style. Surely this one,
purely presentational, detail can't determine the markup that he
should use.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
Jul 20 '05 #4
Chris Reigrut <ch***@teravati on.com> wrote:
- - and I'd like it to render as

Title Page (really big bold font)
Some content, perhaps the intro.

Section 1 (big bold font)
Stuff about section 1.
If the stuff has no systematic markup (maybe it even has "loose" text,
i.e. text not wrapped into any block level container?), then it seems
hopeless without modifying the markup. With modified markup, it should
be rather simple.
I've tried a bunch of options, but to no avail. I've even made
some attempts creating div elements underneath each heading, but a)
I haven't gotten it to work correctly, either,
Exactly what did you try? URL?

If you just use

<div class="s">
<h2>...</h2>
stuff
<div class="s">
<h3>...</h3>
stuff
</div>
<div class="s">
<h3>...</h3>
stuff
</div>
</div>
<div class="s">
<h2>...</h2>
...

i.e. put each logical section, subsection, etc. (making the heading
part of a section) into a <div> element, then you could simply say

div.s { margin-left: 2em; }

or whatever indentation you like.
and b) having to
change all of my pages would really suck.


I don't think there's much you can do except hand-edit the pages,
unless you dare to try some automated processing that creates the <div>
markup on the basis of heading elements.

Too bad HTML was not born with <section> markup.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #5
Well, I finally managed to get it to work...thanks to everyone who responded
with hints! My solution required me to modify my pages as follows:

<html>
<body>
<h1>Title Page</h1>
<div class="hcontent ">
Some content, perhaps the intro.

<h2>Section 1</h2>
<div class="hcontent ">
Stuff about section 1.
</div>

<h2>Section 2</h2>
<div class="hcontent ">
An overview of section 2.

<h3>Section 2a</h2>
<div class="hcontent ">
A subsection within section 2.
</div>

<h3>Section 2b</h2>
<div class="hcontent ">
Another subsection within section 2.
</div>
</div>

<h2>Section 3</h2>
<div class="hcontent ">
The closing section.
</div>
</div>
</body>
</html>

with a stylesheet of:

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.17em;
margin-left: 15px;
}

h3 {
margin-left: 30px;
}

h1 + .hcontent {
}

h2 + .hcontent {
margin-left: 15px;
}

h3 + .hcontent {
margin-left: 30px;
}

I had hoped to get away with a single "houtline" class (to replace all of the
headers) and a single "hcontent" class, but this was the best I could do. And
without any ability to set a variable or calculate a value, I couldn't see
another solution. It would have been nice to be able to declare something like
h1 h2 h3 {
margin-left: @current(margin-left) + 15px;
}

Again, thanks for the help! If anyone has a better solution, I'd love to hear
about it!

Chris Reigrut wrote:
I have a bunch of (old) pages that are outline-driven, and use the h1-h6
elements to define headings. Is there any way that I can create a
stylesheet to
show them in an indented style? For instance, my HTML is:

&lt;html&gt;
&lt;body&gt;
&lt;h1&gt;Ti tle Page&lt;/h1&gt;
Some content, perhaps the intro.

&lt;h2&gt;Secti on 1&lt;/h2&gt;
Stuff about section 1.

&lt;h2&gt;Secti on 2&lt;/h2&gt;
An overview of section 2.

&lt;h3&gt;Secti on 2a&lt;/h2&gt;
A subsection within section 2.

&lt;h3&gt;Secti on 2b&lt;/h2&gt;
Another subsection within section 2.

&lt;h2&gt;Secti on 3&lt;/h2&gt;
The closing section.
&lt;/body&gt;
&lt;/html&gt;

and I'd like it to render as

Title Page (really big bold font)
Some content, perhaps the intro.

Section 1 (big bold font)
Stuff about section 1.

Section 2 (big bold font)
An overview of section 2.

Section 2a (big italic font)
A subsection within section 2.

Section 2b (big italic font)
Another subsection within section 2.

Section 3 (big bold font)
The closing section.

I've tried a bunch of options, but to no avail. I've even made some
attempts
creating div elements underneath each heading, but a) I haven't gotten
it to
work correctly, either, and b) having to change all of my pages would
really
suck. Any thoughts would be greatly appreciated!

--
------------------------------------------------------------------
Christopher M. Reigrut ch***@teravatio n.com
Principal www.teravation.com

Teravation Phone: (303) 682-9631
11705 Pleasant Hill Rd. Fax: (303) 682-9632
Longmont, CO 80504 Mobile: (303) 960-9831

"Here's the difference between theory and practice:
In theory, practice and theory are the same. In practice, they aren't"
Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

26
2433
by: Dave Patton | last post by:
http://members.shaw.ca/davepatton/gps.html In another newsgroup(related to GPS), in regards to the above page, someone said: ---------------------------------------------------------------------- That page has quite a cryptic title: "CIS: GPS". I saved the URL in my browser but changed the title to "Patton's GPS pages". The headings are rather haphazard. For example, the first one ("On This Page") is a third level heading (an <h3>),...
21
20678
by: Atanas Boev | last post by:
Is there any CSS way to make a <hr /> noshadow so I don't get the default 3D look in Netscape? I tried to use some border-bottom to make the line, but my "line" should be under text that is hanging to the right of a image with "float: left" and if I use border, the line is extended under the image. Also, I thing the <hr /> divider fits the meaning of the text quite well. But if somebody has better idea than using <hr /> thats also...
0
1317
by: David Ehmer | last post by:
Within divs my pages are rendering with the 2nd and subsequent elements indented. eg the first paragraph, list item or heading is where it should be, all the rest in the div (whether they are img, h2, p, li etc) are indented a small amount. If you have IE5.2Mac see the links below for examples of this. Note these divs mostly aren't positioned. ie they just sit in the normal flow. Seems to be a problem specific to this browser. I have...
2
1762
by: sgarfunkle | last post by:
I have a complex document that goes several heading levels deep, and it's unreadable with all the headings and paragraphs against the left margin. I'd like to indent H2 elements by 50 pixels, H3 elements by 100 pixels, and so on. The tricky part is that I need to get the paragraphs following each heading as well. Grouping everything in a DIV isn't an option for me, because I'm not the one generating the HTML (It's being done by a POD...
5
3328
by: MaxiWheat | last post by:
Hi, I would like to expose a situation that I would like to have informations about. Let's suppose I have a table that looks like this : <table cellspacing="0" cellpadding="0" border ="0"> <tr> <td><h1>Heading Something</h1></td>
7
2259
by: Harrie | last post by:
Hi group, I want to indent existing XML files so they are more readable (at least to me). At this moment I'm looking at the XML files OpenOffice.org's Writer application produces in it's zipped "SXW" format (and they're one line, probably to save space, which I find hard to read). At first I thought I was going to do it with sed/awk or something like that, but then I remembered the xsl:output element with the indent attribute of XSL and...
3
4270
by: David Veeneman | last post by:
I'm having a problem getting XML output properly formatted. specifically, line breaks and indentation are missing, even though I'm using an XmlTextWriter with Formatting = Formatting.Indented. Here is the code that's generating the problem: static void Main(string args) { // Create an XML document XmlDocument document = new XmlDocument();
16
1864
by: gomzi | last post by:
hi, I have written a small script that will display data in a div tag ...the data to be displayed will change every two seconds. The problem that i am having with this script is that, in internet explorer i get an error "expected )" . in firefox, nothing gets displayed...i am stumped on that!! The code :
1
1030
by: Dylan Parry | last post by:
Hi, I'm currently creating some ASPX pages, and I'd like to be able to dynamically create the heading elements (H1-H6). I've been looking through the available Types in C#, and so far I can't seem to find anything that is *specific* to heading elements. Is there any particular way I should do this, or is the generic "System.Web.UI.HtmlControls.HtmlGenericControl" my best hope?
0
8428
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8339
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
8535
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8629
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6181
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5650
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4176
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4338
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
1739
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.