Skip to main content
Inspiring
December 8, 2010
Question

CSS Issues

  • December 8, 2010
  • 2 replies
  • 1605 views

Hi,

First - I'm having a problem with the search feature of this forum.  I tried to search for an answer to my question to avoid a double-post, but I received zero results regardless of the search term!  And yes, I even searched for css...and received no matches.

Now my question,

How can I get RoboHelp to, by default, apply a defined css style as a <div> tag?  Each time I apply a style, it becomes a <p class> and therefore I cannot add other elements inside this tag.

For example, I want to apply <div class="note"> then create a <ul> list inside the div tag. I'm able to hand-code this in my document, but I don't want to keep switching back and forth between design and html mode multiple times if I don't have to.

What am I missing? Did I fail to set something up correctly?

thanks in advance!

This topic has been closed for replies.

2 replies

MergeThis
Inspiring
December 8, 2010

You can do this in your .css file through the use of descendant child selectors or direct child selectors, in addition to configuring the main div.note separately. The difference between the two selectors is:

A descendant child selector applies a style based on whether one element is a descendant (at any level) of another.

div.note ul {
color: darkolivegreen;
}

In this example, the style for the UL would apply even if the list were inside a TABLE inside the DIV.

<div class="note">
<table><tr>
<ul><li></li><li></li></ul>
</tr></table>
</div>


A direct child selector applies only to immediate children of the element.


div.note > ul {
color: darkolivegreen;
}

In this example, the style for the UL would apply only if the list directly followed the DIV (no other elements between them).

<div class="note">
<ul><li></li><li></li></ul>
</div>

There is no limit to how many selectors are referenced in the element hierarchy.


div.note > ul > ol {
color: yellow;
}

In this example, the style for the OL would apply only if the list directly followed the DIV and the UL (in exact order).

<div class="note">
<ul><li></li><li></li></ul>
<ol><li></li><li></li></ol>
</div>

You could even have another style with the children reversed (div.note > ol > ul), if needed.

For more information on CSS, with working tutorials, see the w3schools.com site. I also use, as a solid reference tome, Beginning CSS: Cascading Style Sheets for Web Design, by Richard York. It's five years old, but still very helpful.

Good luck,

Leon

Inspiring
December 8, 2010

Thank you........

I have no idea what I did to search incorrectly.  I tried three times (at least) and it returned no matches each time.  I've searched the forum many times without issue........last night, it just wasn't working for me.  It's okay now.

Yes, MergeThis, this is exactly what I need to use the div tag for, but I forgot to mention that I previously changed the "note" css entry to div.note and this caused the "note" entry to disappear from the styles pod...so the only way to use was to manually add it in the .html editor.

There has to be an easy solution to this.....I just can't figure it out.

btw - thanks for the book recommendation!

Peter Grainge
Community Expert
Community Expert
December 8, 2010

Right, I can create a new div.note css entry, but it doesn't show up anywhere in the styles pod.  When I want to add to the document, I'll have to hand-code it.

Someone please correct me if I'm wrong.

please.

 


That's what I said.

Still curious as to why you need this.


See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Peter Grainge
Community Expert
Community Expert
December 8, 2010

I don't know which search option you used but I just entered CSS and got a couple of pages of results.

To the best of my knowledge the DIV tag can only be applied in the code. Curious as to why you need to enter lists within a DIV tag.


See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.