Learning Report 7
This is one of the last learning reports I needed to complete. But I have learned a lot from these learning reports and I am grateful for them.
Div Management
I titled this Learning Report Div Managment because it includes several different things regarding Div's which I have learned that has aided me in creating the web site I currently have. I think there is a lot to Div's and so I tried to learn as much as I could about them so I could make my site look the best that it can.
Sources
Overview
There were several things I wanted to accomplish using DIV's in my website. First I wanted a huge control over layout of the website. At first I was havine issues getting the correct layout. But then I just started imbedding Div's into other div's until I was able to alter the website how I saw fit. Below is a picture of a diagram that drew to show how I used DIV's to organize my website. It is pretty cool.
Another thing I wanted to accomplish was the fact that when I minimized the window on my browser all the Div's got messed up, information started getting all messed up and pictures wehre going everywhere and it looked horrible. I wanted to find a way to anchor or keep the layout so that at a certain point the window size did not affect the website. So I learned about min-widths and min-heights.
The last thing I wanted to learn was about placing two different background images in a div so that I could use two different images as the background image. One for the bottom and one for the top. That way I could have a symetric look and feel to my website. I learned that nesting more Div's within those divs you could accomplish that task. It got pretty intense.
Implementation
Besides the picture below showing my diagram of all the DIVs I have had in my website I also had to do a little programing. Here is some of the code that I used:
#content{
min-width: 1175px;
}
The above code fixed the width and height issues that I had when I had to resize. Below is code I used to put in more than one background image into a DIV.
<div id="content">
<div id="content_end">
</div>
</div>
#content{
background-image: (/../..url);
background-position: left top;
background-repeat: repeat-x;
}
#content_end{
background-image: (/../..DIFFERENTurl);
background-position: left bottom;
background-repeat: repeat-x;
}
