How to Add Divs To a Centered Layout with Expression Web Part 2

Back to the tutorials page

The finished example of this tutorial is here.

This tutorial will show you how to add sections into a centered layout. The template I will be starting with is the one from my first tutorial on how to make a centered layout. 

You should have a css sheet from the first tutorial and saved it as main.css in the first tutorial.  If you don't have the sheet, make one now and save it as,' main'.  We are going to add the rest of the styles that we use in this tutorial to the main.css sheet. 

So when making new styles,  select 'Add to an existing style sheet' and point to your main.css page when making a new style.  If you were not prompted to save a css sheet, then make a new css page and call it 'main' and save it.

Erase all the text that was in the container, just highlight all the text and delete it. Be careful not to delete the container, just the text. Hit Enter a couple of times to give yourself some room to work. Go to the top of the page.

Type "This will be the name of your site." On the next line type "This will be the address or town and state you live in" and in the third line type "This is the title page - think home page". Now go to Task Panes and in the dropdown menu pick Toolbox. Highlight the first line of text you just typed. In the bars across the top of your page there are some white boxes with dropdowns attached.

To the left of the font and font size boxes is a box that has (Paragraph) in it. Click the dropdown and find --heading 1 <h1>-- click on this. This designates your highlighted text as the #1 heading. This text will turn larger by default and have a bold font.

Line 2. Highlight the text and go up on the bar . Go to the dropdown and pick <address>. This changes the font and text to a normal font.

Line 3. Type in "This is the title page - think home page" Designate this <h2>. This title needs to be something that tells the viewer what they are about to see on the page.

Now unless you are making a one page site you will need some navigation. There are several places to put navigation. Top, bottom and sides. We will start with the top.

Click in a line below your Title Page. Go up to your menu bar and pick <ul> Type in Home and hit the enter key, About Me and enter, Contact Me and enter. This should give you 3 rows of text with bullets in front of them. Put your cursor in the text you just typed. Go up to the bar that has the orange tag in it and click <ul>. Go to the Toolbox and right click <div> and click wrap. This will put a box around the 3 navigation words. Now name this div in your Tag Properties (Task Pane - Tag Properties). Make sure the div is still orange, if not click it again. Go to the id tag in Tag Properties and type in - topnav. You will see the div change to <div#topnav>.

Now we are going to make this a one line horizontal menu. Highlight the text again and go up to the left side of the toolbar. It says Paragraph. Choose <ul>. This makes your navigation a list.

Click New Style. In the selector type #topnav . Remember to backspace to clear the period off. Also remember that we are defining in the Existing Style Sheet, which should be main.css . In the Block category under line-height put 20px. In the position category under height put 20px. In the layout category under display use inline from the dropdown menu. Click OK.

Click New Style. Make this style #topnav ul . In the Block category under text-align, choose center. In the Background category, choose a color. In the Box category choose padding: 0: and margin: 0. Leave the checkmarks on. In the Position category under width type in 100 and choose % from the dropdown. Click OK.

Click New Style. Make this style #topnav li. In the Layout category choose display: inline. Click OK.

Now we will see what we have done. Go to File > Preview in Browser and pick the Browser you use (Internet Explorer, etc.).The top navigation needs some separation. Right click on #topnav li and Modify style. Under Box uncheck margin and put in left; 2em. Now you have separation. Check your preview again. Even though it doesn't look centered in EW, it is in the Browser. It saves time if you check in the Browser and see what your page is really going to look like instead of just trusting that EW is showing you the right picture.

Now click in the area below the the top navigation you just made. Go to the Menu bar and click <ul> again. Type in the same items you used for the top navigation or choose some others, maybe some favorite places you want to go, which is what I'm going to use.  Hawaii, Bahamas, Caribbean. Remember to 'enter' after each one. Highlight <ul> and wrap it with a div from the toolbox. ID this div sidebar. Click on the orange tag named <div#sidebar>. This makes your second navigation list. This one will be vertical and placed in a box on the right.

Click on the orange tag <div#sidebar> again. Click on New Style.  Check the box and define in existing style sheet. This will keep all you styles in a sheet instead of on your web page. This makes your page faster loading. Click on New Style. Name it #sidebar. Go to border and pick something you like and click OK. See it automatically apply the style without clicking apply first. You had already named the div 'sidebar' and the #sidebar style tells EW to apply this style to anything that has the id 'sidebar'.

This is going to be the only sidebar id we are going to use, so we are going to Modify the style. Right click on '#sidebar ' and pick Modify Style. Under Background make the color a lighter color. Under Box give your letter a 2px padding. This will move the letters away from the border a little. Under Position make the width: 150px. Click apply and see what you have done. If you don't like what you see, change it. Then click Apply again. Try changing the background, just to see it. Click OK.

Make a new style and call it #sidebar ul.  We need to remove the auto-styling from the ul. Go to the Box category and put 0px in margin and padding.  Click Apply.  Now it is too close to the edge.  Put a 2 in the margin area.  Click OK.

Let's get rid of the bullets. Select <li>. Make a new Style and call #sidebar li.  Under List in list-style-type : none.

The bottom navigation is made the same way as the top navigation was. Except you would name it #botnav.  Go ahead and do that now.

Now wait, where are we going to put all the text we wanted to put in. This is how you add an area, after you have already done something. No you don't have to delete it.

Click on the last word in your side navigation menu. If you are not working in the split view, where you can see your code, click on split in the bottom left corner of your EW screen. Click on the last word in your side navigation. Look in the code view. It should look like this:

<div id="topnav">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
</div> {click in here and hit enter}

Now click in the space just after the </div> and before the next line of code. Hit Enter. This will create a space. Now go to your Toolbox and right click <div> and pick Insert. . See the <div></div>. Select in between the two >< and type content goes here. This is what it should look like <div>content goes here</div> Click on your design view part and it will change.

Be sure to look at the example link so that you can compare.  The finished example is here

Now the content space appears but it is above the sidebar navigation. Click on the orange <div> in the bar. This selects the div you just made. Make a new style and call it #content and check the box. Define in existing stylesheet. In Position category make the width:65%. In the Layout category under float, pick right. Your content has positioned itself next to your side navigation. As you add content the box will expand to accommodate the text. I have added some Latin filler text for you to use in the example that you can copy and paste here

But now the text box has overrun my bottom nav box. To fix this right click on the #botnav style and pick Modify style. In the Layout category under float; pick left and under clear; pick both. This make the bottom navigation float to the left, so that it sits under the sidebar and clears everything on both sides above it. Click OK.

The last thing to do is the footer. This will be the last div of the page. If it does not have a <div> in the bar at the top, create one by inserting a div.  Click in the space below the bottom navigation. Toolbox > right click <div> and Insert. Make the tag properties ID #footer. Make a new style.  Call it #footer. In the Position category make the width; 100% and in the Block category click text-align; left  and click OK. The footer will be in position under all the other content in the page. Type in something about how this is your page and any copyright info.

At this point feel free to change the kind and size and color of your font and or any other things you might want.

Trademark Disclaimer - Expression Web is the Trademark of and the property of Microsoft Corporation. Microsoft is not affiliated with Certain Web Design or this website, nor is Certain Web Design sponsored by Microsoft Corp.

©2009-2010 Certain Web Design, All Rights Reserved.