I’ve had several requests to show how nested <div> tags can help design a page. In this instance I’m going to build a welcome page that resembles the one below.

Things You’ll Learn
  • Identifiers
  • Complex Selectors
  • Floats and Clears
  • Child Selectors
  • Background image positioning

Capture140There are a couple of things to note here:

  • I will be building a responsive page – to some extent. It will not be fully responsive like a v11/Foundation-based page would be. In my next post, I will take the code for this page and turn it in to a completely responsive, Foundation-based page.
  • I won’t use the same images since I only have this page as a screenshot.

So, let’s get started.

First thing’s first – I have to add the basics, the text, to the page. Right now it’s just 6 <p> tags and an associated <ul> for each.

Capture141

Before I do anything else, I have to start adding some divs. Here’s how to decide what should be in a <div> tag. First, think of <div> tags as containers. By default, browsers don’t add any styles or properties to a <div>. We have to add those.

If we look at the original design, there are 2 rows of 4 categories. This means that we need 2 container <div> tags, one to surround each row of categories…and then each category should be in its own <div>. I want each category to have its own <div> so I can style them properly. One thing I don’t want is to have to set the properties for each <p> tag, each <ul>, that would be AWFUL.

In all, we’re talking 10 <div> tags here – but don’t panic, it’s not too scary, I promise.

I’ll add the inside <div> tags first.

To do this, I need to highlight everything that needs to be in that container and click the Group icon in the Home tab of the ribbon.

Capture144When the Create Group window opens, I find and select ‘div’ and click OK.

Capture148

This results in a <div> tag surrounding the content I selected.

Capture149Repeat this step for the remaining 5 categories. Here’s the resulting XML Editor view alongside the code view:

Capture150Notice that I haven’t applied any styles yet. That is by design. I’m going to show you how to ‘cheat’ and apply styles to everything without creating a bunch of new classes! It’s seriously nifty!

Now, I’m going to surround the each set of four categories in a <div> tag. Do the same process as above – select all four categories and click the Group icon.

Capture152NOW I get to add some styles! Whoop! Whoop! First, I’m going to create a class for the outer <div>, the one that contains the 4 smaller ones. It’ll be div.category_group. Be sure to assign that new class to the two big <div> tags. Now for some basic properties. I want the div.category_group to extend across the page for now (width: 100%)…and I don’t want anything else floating to the right or the left of it (thus, the clear:both setting).

div.category_group
{
    width: 100%;
    clear: both;    
}

And I need each category item to float to the left. To make this happen, I’m not going to create a new class for the <div> tags, I’m going to create a complex selector that selects all <div> tags inside of the larger <div>. This relieves me of having to remember to apply a class to those nested <div> tags. It looks like this:

div.category_group div
{
    float: left;    
}
Finding identifiers and complex selectors in the Stylesheet Advanced View is pretty easy:

Capture162

 

Here’s what things look like via the Preview:

Capture154It’s super ugly – but it’s moving in the right direction. I have 2 rows of 4 categories each with just those few rows of CSS code. Now I need to style the <p> that identifies each category. Again, I’m going to use a complex selector.

div.category_group div p:first-child
{
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
    color: #696969;
}

Let’s talk about that for a second. What I’ve done is tell CSS that I want it to find the first <p> tag inside any <div> that is located inside of the div.category_group…and style it the way I’ve indicated: centered, bold, grey, and 16pt. Any other <p> tags inside of that <div> will not be affected. However, if I add a <p> tag above that category label, then that new <p> will take the style, not the original label. Here’s a preview:

Capture155Better – but I’m not there yet. If you notice, the width of the nested <div> tags are all over the place. I need to set that so it looks better. I go back to the complex selector that selects the inside, nested <div>.

div.category_group div
{
    float: left;
    width: 25%;
}

All I’ve done is told the code to find <div> tags inside of the larger <div> and set the width to each one to 25%. Here’s the new look.
Capture156Wow, so much better! I need to center the <ul> tags inside each div and remove the bullets. Again, complex selectors to the rescue. First, the centering:

div.category_group ul
{
    text-align: center;
}

And now removing the bullets:

div.category_group ul li
{
    list-style-type: none;
}

And the results:

Capture157 It’s almost there! I need to add some icons now. For this example, I used free icons from flaticon.com. However, if you need icons for a production project, you’ll need to have the icons made in-house or buy some online.

Instead of adding the image directly in each <div> via an <img> tag, I’m going to add the image as a background image to each <div> tag. The problem here is that if we added it to

div.category_group div{}

Then all the divs would have the same image…and that is definitely not what I want. To solve this problem, I’m going to use IDs. The trick with IDs is that you can only use an ID once per HTML page.  That will not be an issue here.

I’ll create the following IDs:

  • #appearance
  • #settings
  • #performance
  • #users
  • #plugins
  • #codes
  • #tools
  • #dashboard

And then I need to add each ID to the appropriate <div> tag.

<div id="settings">
                <p>Manage Settings</p>
                <ul>
                    <li>Reading</li>
                    <li>Writing</li>
                    <li>General Settings</li>
                </ul>
            </div>

I follow this pattern for all 8 category divs.

Here’s how I apply an image to a <div> tag’s background:

#settings
{
    background-image: url('../Images/settings48.png');
}
#appearance
{
    background-image: url('../Images/hand14.png');
}

Now, I don’t know about you – but I think the build below has some issues…

Capture158Clearly, I have some work to do. I’m going to make sure the image only appears once and  appears in the center above the label. Note that I’m not applying these properties individual IDs making classes for each <div>. Instead, I’m going to add the CSS to position the image properly in the complex selector for the nested div.

div.category_group div
{
    float: left;
    width: 25%;
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: center 0;

}

The result is this.
Capture159I’m much closer – just have to make space for the image above the label. To do that, I’m simply going to add some padding to the nested div. Remember, padding adds space inside an item, margin adds space outside. Thus, the use of padding here.

div.category_group div
{
    float: left;
    width: 25%;
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: center 0;
    padding-top: 30px;
}

BEHOLD the beauty of CSS!!!!

Capture161

Download Files

There’s a lot to learn here…so please ask questions via the comments. I’m expecting a few – don’t let me down!

I have a confession (and it seems as though this blog turns in to my confessional more often that I’d care to admit!)…I’ve never really understood what Search Filters do.

Kind of like String Theory. I know all the words used to describe String Theory, but when put together in to sentences and paragraphs, not even Morgan Freeman can make it make sense.

Yes, I looked up Search Filters (not String Theory) in the Flare help system:

A filter can be included in the search feature to let users narrow their search based on concepts that you have inserted into topics. Concepts are simply markers that you add to topics that have some kind of relationship with each other. They are also used for inserting concept links into topics (such as the See Also link that you see at the bottom of this topic).

And I understood the words there – but I didn’t understand the concept, the “how do I apply this to my project” part of it…

…until very recently.

Now I get it.

I’ll tell you what I know them to be – and then I’ll show you how to build your own Search Filter Set.

Let’s say I write proposals as part of my job and I use Flare to do this. In every proposal, I have a recurring series of topics that, while the topic titles are similar or even exact, the content is not.

And let’s say that I wrote a topic on Subcontractor Management a few proposals back. I even know which proposal I wrote it for. And what I wrote was good. I’m not talking every day good – but rather proposal-winning good. I need to find that content.

So, I have the topic subject, Subcontractor Management, and the proposal name: FDA. But I need to find that particular topic among the many other topics and paragraphs that contain those words.

I could do a search in the online output of all of my proposals with these criteria: “FDA Subcontractor Management.” We won’t get in to how I should surround “Subcontractor Management” with quotes so only topics with those two words in that order are found…but the problem is, if the acronym is not included anywhere in the topic, I won’t find it. It simply won’t appear in my search results. Instead I will get a bazillion results that I’ll have to sift through until I realize that the topic I need isn’t listed in the results.

Capture120

Capture119

Now, the other option I can think of is to use the nav bar (TOC) on the left side of the online help and look for the FDA proposal, which I find quite easily…but how do I find the topic of Subcontractor Management quickly? I can’t unless I know exactly where to look.

To solve this problem, I’m going to create a Search Filter Set. In short, it will allow me to

  • Limit my search to a particular proposal
  • Use the Search feature of my online help
  • Use all the features that come with the search, like quotes around phrases

Capture123Much better! From 28 results to 2! I can live with that!

“That’s great,” you say, “but how I do make that little pull-down doohickey appear in my search bar?”

I’ll show you, but first I’ll give a quick list of steps:

  1. Create concept terms
  2. Apply concepts to topics
  3. Create Search Filter based on Concepts
  4. Add Search Filter to Target
  5. Go.

Create Concept Terms

First I have to create at least one concept term. In this instance, I’m going to create a series of concept terms based on the proposal name. So I’ll have FDA, DON, DOS, etc.

To create the first concept, I’m going to open a topic that was part of the FDA proposal.

Then, I open the Concept Window via the View tab in the ribbon.

Capture124

The result is this handy-dandy window appearing on the right side of my Flare UI:

Capture125

Now I already have a bunch of concepts created and they appear listed in the bottom half of the window. Your window may be empty if you have no concepts.

Just to be sure, I click in the open topic, preferably in the h1. Then I type ‘FDA’ in the Concept Term window. You’ll see a big green box appear in your h1, or wherever you clicked in your topic.

Capture126

Applying the Concept to Topics

Don’t go panicking and saying, “Laura, I have a gazillion topics that need that concept applied! I will not open each one and do this!”

Trust me – I wouldn’t do it either. So here’s a great place to use the old tried-n-true Search and Replace feature.

I open my Find and Replace in Files window from the Home tab of the ribbon.

Capture127

Then I flip over to the Text Editor of the topic I just added the concept to (yes I ended a sentence with a preposition…it sounds better!).

Capture129

You’ll see that the concept term tag is sitting right inside the opening <h1> tag.

Instead of adding the concept to the <h1>, I’m going to add it to the <body>.

Capture131

You’ll see that I am looking for the opening <body> tag and then replacing it with that same <body> tag plus the code for the concept.

Now to narrow the search:

Since all of the FDA topics in my project are in the FDA folder, I’m going to select (documents in the same folder) for Find in. And I change ‘All’ to ‘Topics’ in the File types.

Capture132Here’s the trick!

I make sure Find in Source Code is checked in Find Options.

Then I do the Find Next/Replace thing until that concept has been added to all the appropriate topics.

Create Search Filter based on Concepts

Now that I’ve applied the concept to the topics, now I have to create the Search Filter. And if you don’t know where those are – join the club. I had to look it up too. The answer: Project Organizer > Project > Advanced > Search Filters.

Capture133

I open the default set and see this. Not that it’s a little blank and scary….but it’s a little blank and scary.

Capture134

The first thing I did was click on the New icon – but when it created another row that looked exactly like the first one, I decided to just edit the existing item.

I changed ‘My Subset’ to ‘FDA’ and now I have to associate a concept. When I click on Concepts, the Select Concepts for Search Filter window opens.

Capture135

You’ll see that I have a bunch of concepts already in this project – but for this exercise, I’m just going to move FDA over via the arrow.

Capture136

Add Search Filter to Target

OK, we’re almost home! Stay with me!

Finally, I need to tell Flare to use this Search Filter with the right target. I open my HTML5 target, go to the Advanced tab, and look for the Filter File field. I select the search filter I’ve been working on.

Capture137

Whew!  I’m done. All that’s left is the build. When the build is done, this is how my search works:

Capture138

 

Page 1 of 6112345102030...Last →