Until you have specific questions about specific code, I would suggest that you take the page that I wrote and disassemble it… dissect it. First become familiar with how it behaves, then apply the commented out outlines, maybe add some of your own; then change some of the property values and see what changes. There’s a lot to learn, and several ways of doing many things. There is usually a “best” way to do something, but certainly not the only way.
The code that I wrote expects three background images. I used one image in two places and a background color in the third place instead of an image. The images could have been assigned/layered differently.
Taking a hard look at your code now that I have some free time. I got my own bottom background to work now I have 3 different colors layered on my background. Still not understanding why so many divs. Really seemed like overkill or am I missing something. Here is what I’m talking about.
<div class="bgwrap h"> <!-- holds the bgcolor/image row that extends from edge to edge -->
<div class="container"> <!-- sets the max-width of .container (each of the rows within the bgcolor bar) -->
<div class="names"> <!-- display:table; width:100%; (allows the table to be fluid, resize at narrow widths) -->
<div class="tcell m">Michael</div> <!-- display:table-cell -->
<div class="tcell"> <!-- display:table-cell -->
<div class="tcell c">Christina</div> <!-- display:table-cell -->
</div>
</div>
</div>
Placing the “.container” divs with content inside the .bgwrap color row container assures that the height of the color row will adapt to the height of its contents even if something wraps at narrow widths the height will adapt. Fluid design.
This is one of three “rows”. You are showing the second row also. .bgwrap in the second row does the same thing… its height will adapt to the height of its contents at different widths.
I could have done the same thing with the third row, but chose to keep that image assigned to the <body> tag for your benefit. The best choice for image placement depends on the layout.
But the short answer to the extra layer of divs is a “Fluid Layout” technique for a narrow page with bgcolor-rows that extend edge to edge of the window that will likely be viewed in wide screen monitors.
I gather that you do not want the date text within the darker color row, so a different arrangement for that second row would be appropriate… most likely eliminating the second row.
Post a make-believe screen shot of how the page show look in a desktop monitor and I’ll help you write the code.
Actually I’m keeping a lot of that design. I thought about putting the dates just a little lower than the dark bar and were it is sitting on top of the picture. I really need to move on with designing the rest of the website. I spent almost twpo weeks trying to get this far with the backgrounds being the problem. I’m really in this for the learning experience more than anything so I’ve been studying your code quite a bit. http://michaelmorris.website/michaelmorris1a.html.
Cant say that I learned much in college about web programming. I took courses and finished the coursework but really didn’t get a deep level of understanding. So I’m really going back to re study what i’ve missed.
It’s good that you have the time to do that. The pace of work and family life can leave little room for reviewing. I have more time for re-reading/reviewing lessons now, too, and it’s surprising how much I skimmed over or have forgotten. Reviews are good things.
I use that validator daily lest errors creep into my code. No one is flawless.
I also noticed you used @media screen. We didn’t learn media queries in class and this is the first I’ve heard about them along with viewport. Do you work as a programmer or web developer.
The media query reduces the size of the font for the narrowest screens and, of course, the viewport meta tag is required to make them work as expected.
Not a programmer nor pro web dev… just a hobbiest.
It should be your best friend along with the css validator and your first port of call when you complete any reasonable section of code. For beginners I tell them to check hourly. It will save hours of work if used regularly and wisely.
