So now we want to add another div to this layout, to start further refining how things will be positioned on the page. To do that, I am going to place my cursor inside this div and add another div inside it and at this point, I am going to move to Split Screen.
Now if you are much of a programmer, you like the code yourself anyway, but if you are a designer and you are not used to looking at the code, I want to encourage you to get in the habit of having your screen split about like this.
I like to have a design area to work in. but be able to keep an eye on what's happening in the background, especially if I am working with divs like this. So I want to make sure that my cursor is inside this first div, which has the id 'container'. This little highlighting on this bracket means that my cursor is in the right place and I can see here, it's there, I am not going to replace that one when I add a new div, and I can simply double-click to insert another div into this design.
Now, it can get a little tricky to select divs inside of divs. So if I put my cursor in here, trying to find the div I want, I am not always sure I get the right one. Here are two ways you can make sure you are selecting the right div. One, is to select it in a breadcrumb trail up here, the other is to simply click and highlight it in the code itself and either one will work and you will still be able to create and apply styles, even if you have selected the div in the code.
So I am going to choose New Style and I am going to create another style. Again, the first thing we want to do is give this style a name and again we are creating an id style because we are positioning a div and we want a style, we will only use once on the page. So deleting everything in the Selector field, starting with the pound sign(#), I am going to call this one 'top'.
Now in the Position category, I can set the Width again to match my first div. This is optional because it would be controlled by the div it's inside, but I want to make sure that it stays the size of my banner, no matter what. So I will go ahead and specify that and I am going to set a height for this one as well. Because I want this div to perfectly fit my banner and I know that the graphic for my banner is 780x148.
If you are not sure about a graphic you are going to put in a div, you can always resize it after you will insert the image. This time I will show you a shortcut; if you click this box, next to Apply new style to document selection, then as you create the style, it will automatically be applied to your div.
Transcription by:
Scribe4you Transcription Services