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>Title Page</h1>
Some content, perhaps the intro.
<h2>Section 1</h2>
Stuff about section 1.
<h2>Section 2</h2>
An overview of section 2.
<h3>Section 2a</h2>
A subsection within section 2.
<h3>Section 2b</h2>
Another subsection within section 2.
<h2>Section 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!
5  2209 
"Chris Reigrut" <ch***@teravation.com> wrote in message
news:10*************@corp.supernews.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:
<html>
<body>
<h1>Title Page</h1>
Some content, perhaps the intro.
<h2>Section 1</h2>
Stuff about section 1.
<h2>Section 2</h2>
An overview of section 2.
<h3>Section 2a</h2>
A subsection within section 2.
<h3>Section 2b</h2>
Another subsection within section 2.
<h2>Section 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!
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******@NOcharterSPAM.net (remove NO.....SPAM)
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.
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.
Chris Reigrut <ch***@teravation.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/
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:
<html>
<body>
<h1>Title Page</h1>
Some content, perhaps the intro.
<h2>Section 1</h2>
Stuff about section 1.
<h2>Section 2</h2>
An overview of section 2.
<h3>Section 2a</h2>
A subsection within section 2.
<h3>Section 2b</h2>
Another subsection within section 2.
<h2>Section 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!
--
------------------------------------------------------------------
Christopher M. Reigrut ch***@teravation.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" This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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:...
|
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...
|
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,...
|
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...
|
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">...
| | |
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...
|
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.
...
|
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...
|
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...
|
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,...
|
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...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
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...
|
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...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
| |
