RGD - Positioning and Layout Lesson

 

Positioning and Layout Lesson

Positioning is Key

Managing position layout Image Showing various possible web page content layoutThe elements that were added to your HTML documents in the past appeared on the screen in the same order typed. As you were introduced to other element options, you more than likely used the <div> element to define the sections on your web page. Now that you are adding HTML 5 elements, you have discovered that the use of semantic elements is useful for browsers to interpret the type of content that will be contained in the defined sections. As you construct the pages in the website, the visual message you desire to project will more than likely cause you to overlap and rearrange how elements appear. In addition to textual content, your web page will probably include a logo, images, and shapes. The browser will position the image, shapes, and textual content based on the position property. As you utilize CSS to assist you in document design, you can use the position property to define how the element appears on the web page. The figure below showcases how a browser would position those elements based on the property value.

 

Positioning Table Data Image Property Value: Static Result: Default setting. Elements flow according to the rules of normal flow. Property Value: Inherit Result: The current element uses the same value for the position as its parent element. Property Value: Fixed Result: The element is fixed to the background and does not move even when the page is scrolled. Property Value: Relative Result: The element is positioned relative to its normal position. An element's default position is where the browser would have placed it if no positioning style was applied. Property Value: Absolute Result: The element is positioned at specific coordinates either on a page or within a containing element.

More About Floating

In the Styling with CSS module, it was referenced that floating could be used to reposition images to different sections of the web page. The float property has four possible values. The figure below showcases those values.

Floating Table Data Image Property Value: Float: left Result: Moves the selected element as far left as possible and forces the other content to wrap to the right of it. Property Value: Float: right Result: Moves the selected image as far right as possible and forces other content to wrap to the left. Property Value: Float: none Result: Default setting. The element will follow the normal flow. Property Value: Float: inherit The element will be floated the same as its parent element.

Joanna and I discovered that some of the elements used on a web page take up a lot of horizontal space. In such an instance, you should set the width property so you do not encounter any issues with the floating application.

 

Clearing Floats

You can cause your element to float below the image by using the clear property of left or right or both. If you set the clear property to the left, the element will be located below any left floated images or shapes with the same block formatting context. If you set the clear property to the right, the element will be located below any right floated images or shapes with the same block formatting context. If the clear property is set to both, the element will begin below any floated box in that context.

As you create an assortment of web pages, you will discover that some elements are bigger than the element that contains it. For example, a logo may flow outside of a box that includes the logo's slogan. This dilemma can be fixed by using the overflow: auto clear fix.

 

Website Layout

It is important that you organize web pages in a rational way so your audience can move from page to page without any problems. This process involves structuring which will impact the linking connection among pages. We will discuss the topic of linking (navigation) later, but understand that common web site structures include:

 

Structure Details
Linear Web pages are organized and linked in sequential order.
Hierarchical Web pages are ordered by level of detail. The first page will most likely include summary detail with additional pages sharing specific information bout the product or service.
Webbed Web pages are not organized in any format. The audience can access pages based on their interest.

 

It is possible to use a combination of structures as you construct your website. As you think through layout, remember that your goal is to create a user-friendly website environment.

 

IMAGES CREATED BY GAVS