Learning Report 8

This is my 8th Learning Report that I have done so far, the things I did in this learning report may change over time but I wanted to get it to work first.

Wrapper, Padding, and Spacing

To alter the padding on the sides of the site and to increase spacing a wrapper needs to be created to help insert that padding.

Source

w3schools

Overview

My website was smacked up against all edges of the page which causes me to dislike the overall look and feel of the website. I wanted a website which had spacing all around the entire web site. That spacing makes the website look and feel better. The issue was to figure out how. I spent hours working with padding codes in CSS for the seperate divs in the website. This did not improve the look or any changes to the padding desired on the borders of the website.

After some research I found out that working with divs would be the most beneficial. Divs put your information in different sections or cells which will portray your information. To alter the look and feel of that container of information can be altered by using css. To change a layout of a certain website placing divs inside divs with alter the entire layout of the website.

Implementation

What I did to start off is altering the template of each website page. I did this by placing all the current divs within the site in another div. I titled this div- wrapper. Here is the code to enter this div in:

<div id="wrapper">INSERT ALL OTHER DIVS HERE</div>

Then in order to complete the look and feel for the website you must alter the css code related to the wrapper div. Here is the css code that I implemented on my website to change the padding of the wrapper to give me an invisible border around my web site:

#wrapper{

padding-top: 10px;

padding-left: 30px;

padding-right: 30px;

padding-bottom: 30px;

}