CSS Footer & Content layout methodology
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.html
The 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.
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.html
The 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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Glad to help!
ASKER
I've updated it (http://capiogroup.com/testing/page.tpl.html) and from all you have told me I am feeling comfortable with how this is is now.
I've chosen to limit this to working on ie6, ie7 and Firefox 2. That should cover most users. I guess I've got to get into the dirty business of handling I.E. quirks now.
Thanks again.
I've chosen to limit this to working on ie6, ie7 and Firefox 2. That should cover most users. I guess I've got to get into the dirty business of handling I.E. quirks now.
Thanks again.
ASKER
Just thought I would post an (almost) final file after all the help.
Only things left optimizing for better use of graphics and bottom links will rollover when I get the rest of the graphics (from the designer) but the code is already set up.
All comments welcome!
http://www.capiogroup.com/ee/deezign/faq.html
Only things left optimizing for better use of graphics and bottom links will rollover when I get the rest of the graphics (from the designer) but the code is already set up.
All comments welcome!
http://www.capiogroup.com/ee/deezign/faq.html
ASKER
Thanks so much for comments. I agree with both of your about the multiple files. I only mentioned it because in my last project when I asked a question someone told me to cut them down. In that case it wasn't really possible because I was working with a web CMS that just did things a certain way.
That tutorial is magic! It puts all the little things I've been working on right at the finger tips.
Oceanbeach'es comments have been very useful too.
Thanks guys!