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!

Using CSS only! Whoop Whoop!

Note: I built this in Flare v11 – but you can build it in v10 as well.

Friends, it’s been too long since I’ve written. Let’s just say that the following got in the way of my posting here:

  • Work
  • Kids
  • Clients
  • Spine surgery
  • Kids
  • Work
  • Life

Anyhoo, I built this cool feature in Flare for a client and thought it would be cool to share with folks. It’s a horizontal menu with a second level of items.

Capture118

The cool part: the HTML is super easy…and the CSS is easy (not super easy, I’ll admit). Especially when you can copy my code and look like a superhero to your colleagues.

Let’s look at the HTML first – and when I say super easy, I’m not kidding:

  <ul class="tablist">
            <li><a href="#">First Item</a>
            </li>
            <li><a href="#">Second Item</a>
            </li>
            <li><a href="#">Third Item</a>
            </li>
            <li><a href="#">Fourth Item</a>
            </li>
            <li><a href="#">Fifth Item</a>
                <ul>
                    <li><a href="Exhibit_A.htm">Exhibit A</a>
                    </li>
                    <li><a href="Exhibit_B.htm">Exhibit B</a>
                    </li>
                    <li><a href="Exhibit_C.htm">Exhibit C</a>
                    </li>
                    <li><a href="Exhibit_D.htm">Exhibit D</a>
                    </li>
                    <li><a href="Exhibit_E.htm">Exhibit E</a>
                    </li>
                    <li><a href="Exhibit_F.htm">Exhibit F</a>
                    </li>
                    <li><a href="Exhibit_G.htm">Exhibit G</a>
                    </li>
                    <li><a href="Exhibit_H.htm">Exhibit H</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Sixth Item</a>
            </li>
        </ul>

It looks like this in the Flare XML Editor.

Capture102

(Just ignore the eyeball thing for now. I’ll show you what this is and what it does shortly).

The important thing to note is that you’re looking at a nested list…and not just one list interrupted by another.

I’ve pasted the HTML for this list in to a blank topic in a new project so I can build it step-by-step. It looks like this:

Capture103First – before I start dorking around with the CSS, I’m going to create a new <ul> class. I’m calling mine ul.tablist. If you don’t  know why I’m doing this – please contact me. We need to talk.

In the new class, I open the List section and set

ul.tablist{
list-style-type: none;
}

When using the Flare default stylesheet, there was an image assigned to the list-style-image property, so I’m going to turn that off as well.

ul.tablist{
list-style-type: none;
list-style-image: none;
}

Now, one thing you’ll notice in this screenshot is that not all the bullets are gone. Essentially only the top-level bullets are gone, with the secondary-level bullets still remaining.

Capture105The reason for this is: technically, only the top-level <ul> has that class assigned to it. Even though the nested list is inside the <ul>, it doesn’t have the same class assigned….and shouldn’t. I have to remove the bullets from the nested list with a complex selector:

ul.tablist ul
{
    list-style: none;
list-style-image: none; //if necessary//
}

This means that any <ul> inside of the ul.tablist will not have bullets. A quick preview shows my progress.

Capture106Now I need to shift the list from a horizontal position to a vertical one. Keep in mind that I’m not making the LIST itself (meaning the <ul>) horizontal, but rather the items in it (the <li> tags). So I’m going to create another complex selector that looks like this:

.tablist > li
 {
 float: left;
 margin-right: 5px;
 line-height: 13pt;
 }

Now you may have noticed the ‘>’ between the two tags. This means that I only want those <li> tags that are children of <ul.tablist> to move. This is called a child selector.

If I were to remove that, then ALL of the <li> inside of the <ul.tablist>, including those in the nested <ul> would behave this way.  This is a descendant selector. Since I only want the top-level items to be horizontal, I make sure the ‘>’ is there.

The float:left setting will cause each <li> to move to the right of the previous one until there’s no space on the row left. I added margin so the entries wouldn’t bump up against each other and line height to give the entry a particular height.

Let’s see what we have now.

Capture108Not much has changed in the XML Editor view except that maybe the entries are scrunched up. But let’s see what a preview looks like.

Capture107And it’s horizontal! Ugly – but horizontal. The next issue is to hide that secondary list until some action is taken, in this case hovering over the <li>.

ul.tablist ul
{
    display: none;
    list-style: none;
}

That line of CSS code means that any nested lists inside a <ul> with the class of ‘tablist’ will be hidden. All others will continue to be visible.

And here’s what I’m seeing now in the XML Editor. The eyeball icon with the red x means that something is technically not visible when compiled…but remains visible for you to continue working on it.

Capture109And via Preview:

Capture111I’m getting closer!

Now to get the hover behavior to work. Normally, I would have to use JavaScript to get the hover behavior to work – but let’s just say that JavaScript and I, we’re not close. But clearly the folks behind CSS3 knew that there were people out there like me who couldn’t really work with JavaScript…so they developed some pseudo classes, one of which is hover.

Let’s talk about that a bit more by way of a visual.

ul.tablist li:hover ul{}

What the heck, you say. What is that? Let’s examine each item in the selector.

Earlier in this post, I set the nested <ul> to not appear at all. So I have to change that…but I only want it to appear when I hover over a particular <li> in that <ul>. So….that line of CSS code says:

“When in the <ul> with the class of ‘tablist,’ make the nested <ul> appear only when I hover over the <li> that contains that nested <ul>.” So, I have to make the <ul> appear.

ul.tablist li:hover ul
{
    display: block;
}

In that chunk of code, the :hover is the pseudo class. There are other pseudo classes like :after, :before, etc.

This means that when I hover over an <li> item with a nested list in it, make the list appear. Here’s the result via the Preview:

Capture112Oooh, it works! So happy! However….(isn’t there always a ‘however’)…I don’t want the sixth bullet in the list to move to the right to accommodate the now-appearing list. To do this, I have to set the positioning for that nested list AND the top-level list. I’ll do that through absolute positioning and here’s how.

Before I can absolutely position the nested list – I have to position it relative to something else. In this instance I’m going to set the relative position on the parent <ul>. Work with me on this – the container item is positioned relatively like so:

ul.tablist{
list-style-type: none;
list-style-image: none;
position: relative;
}

Then, I position the nested list. I remember it this way – the containing tag must be relatively positioned before the other tag can be positioned absolutely.

ul.tablist li:hover ul
{
    display: block;
    position: absolute;
}

Think of absolute positioning as part of a pair, like Sith lords. There are always two. So if there’s a need to position a particular tag absolutely, there must be another tag that is postitioned relatively.

Let’s see what the results are via the Preview window:

Capture113Niiiiiiice…..I’ve prevented that last bulleted item from moving and now I want to do some beautifying. I want to move the nested list down and way from the horizontal list and put a border with rounded edges around it. First step – borders:

ul.tablist li:hover ul
{
    display: block;
    position: absolute;
    border: 1px solid blue;
    border-radius: 10px;
    padding: 5px; 
}

In Preview, I get this:

Capture114Hmmmm…while I like the border, I don’t think I have enough padding inside the border (changing it to 10px instead of 5px) and I’m really disliking the underlining on each Exhibit. To remove the underlining, you don’t change the style of the <li> but rather the <a> inside it, like this:

.tablist ul li a
{
    display: block;
    padding: 3px 10px 3px 10px;
    text-decoration: none;
}

Notice the ‘ul’ after the .tablist. This narrows the change to just the nested list. If I had wanted to remove the underlining from ALL the <li> tags, I could remove that <ul>. It would result in this:

Capture115

Don’t get me wrong, I like this a lot…but folks like to see underlining when there’s a link….and without it, readers may not know that those items are linked. So, I’ll leave the underlining on the top-level list.

Capture116

Now for the positioning. I’m going to approach this the easiest way possible: top margin.

ul.tablist li:hover ul
{
    display: block;
    position: absolute;
    border: 1px solid blue;
    border-radius: 10px;
    padding: 10px;
    margin-top:7px;    
}

It’s a subtle difference, but a good one.

Capture118Hopefully this has been helpful. If I covered anything that you need further clarification on, please don’t hesitate to post a comment.

Page 1 of 24123451020...Last →

Recent Posts