Div Alignment in Expression Web
|Expression Web <|
|Table of contents|
By the end of this exercises you should be able to:
Creating A Layout using Divs in Expression Web
Following this tutorial, you will be able to set a div to a centre browser position, no matter what the screen size of the user. An extension to this, using the same method is the creation of multiple div that dont drag and disappear behind each other when a window is resized. The idea is to position a wrapper div relative to the browser size, then all other divs go within this, positioned absolute. This allows very accurate positioning of the information within the page.
Open Expression Web and drag a div tag from the HTML toolbox and onto the main stage.
Click on the little arrow besides the word div above the main window, click position click relative. You have now made an inline style. Later we can transfer this to an external style sheet, so it can be applied to any future divs within the project if necessary.
In the Apply Styles panel, you will now see the inline style we have just made. Click on this to modify.
Now we apply some styles to the div tag, some background colour, width of the div (around 790 - 795px if you want to centre this for a browser window of 800px). This is the important bit. Click on the Box Category, and change so that the left and right margins are set to auto, the top to whatever distance you would like to have the div positioned at from the top of the window. Leave the bottom, this allows the div to expand to contain whatever content you put in it.
Just about finished, we now just have to set up the div id so you can recognise it when youre developing the site, and check the z index, which is the depth on the page in which the div sits, ie z-index 0 is the furtherest away, z-index 1 will sit on top of this etc. This is found in the Layers Panel. This is not present by default, so open it by clicking Task Panes on the Menu bar and then clicking layers. The wrapper layer by default should be at z-index 0. Right click to edit and give the div layer a meaningful name.
Give your div layer some depth by dragging down the bottom handle, the preview in a browser. it should be sitting nicely in a centre position.
To build you site up, you will now need to create more divs, but this time set their positioning attribute as absolute. You will then be able to position them within the wrapper, and they will hold this position no matter what the user does with resizing their browser window, or what size their monitor. These divs need to go inside the wrapper div, so check their positioning using the layers panel. They should have a higher z-index so they can be viewed above the wrapper layer, but within the confines of the wrapper boundaries. You can then set the new divs widths, heights, backgrounds and any other style using the style that has been created for that div. Don't forget to give them all unique and meaningful names.
If you want your new divs to be positioned outside the wrapper, drag them out, they will still stay positioned in respect to the wrapper div. Give them a margin value of a few pixels, so they remain neatly positioned.
This gives some freedom in laying out sites in column form where you can lay 3 divs side by side for example and they hold their position. Make one scrollable and you have a navigation setup similar to frames but without all the frame dramas.
Transferring your new style to an external style sheet
Create a new style within your style sheet.
Click on the inline style dropdown in the apply styles task pane. Click on new Style copy. The CSS styles selector box will pop up. Change the selector from .newStyle to #wrapper (or whatever id name you game your div. Make sure you include the # before the name. Define in an existing style sheet, and browse to your css file.
Click apply, Ok.
The #wrapper style will now apply to you div with the id "wrapper." If you want to be able to apply this style to any divs or other elements at any time, you will need to create a class selector. Instead of naming the style #wrapper, call it .wrapper, it will then be available to all elements. Use # selectors sparingly, they are however ideal for your wrapper as you are likely to use the same name throughout your site and also have the same style for it.
You can now remove the inline style by deleting it.