Hello,
This is only my 2nd CSS project. The first one I copied a lot of things but didn't really learn it properly as it was a rush job. This time I am trying to really understand how to go about thing and I am coding every line myself. However, at this point I would sure appreciate someone "in the know" making some suggestions on what I have so far as I feel getting it right at this point will set a good foundation to move forward.
This is my code so far:
http://capiogroup.com/testing/page.tpl.htmlThe point where I am up to now looks fine to me but I am concerned about a couple of compromises I have made in getting to this layout and would appreciate any feedback from the experts.
First, there are a couple of things that could be much better that I not ready to deal with just yet. They are:
-It's only coded for Firefox right now. I.E. fixes will come later although it almost looks right in I.E7 already.
-I use 3-4 CSS files and it could all be in 1 file. Right now it's helping me be organized in my thinking this way but I fully appreciate someone better acquainted with CSS could put it all in one file quite comfortably, especially the small amount I have so far.
-The use of graphics is not optimized at all. Especially where I am just putting navigation graphics over an existing graphic.
Now my concerns:
- The upper outer graphic overlaps content area (header part) at the top. If there is a better way to achieve this than what I have done, please do tell. Right now I just put the graphics to be overlapped onto the body as a Fixed position type element. Then I put a relative Div element overlapping it.
- I wrapped the header, content and footer div's all in another div to make the work together. I don't know if that is the best way to do things but it seemed more complicated than when I was trying not to. Whether this is acceptable to those that know or not I would certainly value an opinion.
- The footer text is indented and I don't actually know why. It looks like the para. text is inheriting the Left value of the outer div.
- I set the graphic in the content area as Float: Left and then had the contents right of the graphic. If there is a more appropriate way to handle this I would appreciate knowing.
- The way I got the footer to float at the bottom of the content area seems like a hard way to do things and I suspect there is a simpler way than what I have done. Also, it has an anomaly I don't understand because the footer overlaps the content area by 2 pixels. I haven't been able to figure out why.
-And of course just in general if the code looks okay as a starting point.
Many thanks for anyone who's willing to have a quick look. It's just a small amount of code and won't take much to look through.
Reggie.
