I have based my code off several tutorials which has culminated what I think is quite a complicated CSS layout. It has a docked footer. The sidebars are turned on dynamically in my template depending if there is content. The site is designed to work in the following scenarios:1 Column
ointer; font-family: arial, sans-serif; min-width: 70px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; color: white; }.button:hover { border: 1px solid #2F5BB7; }.button:active { -moz-box-shadow: 0 0 2px #888; -webkit-box-shadow: 0 0 2px #888; box-shadow: 0 0 2px #888; }/* BUTTONS */#button_search { height: 34px; background: url(http://www.divology.com/wp-content/themes/divology/tutorials/google-search/ico-search.png) no-repeat #4d90fe center; border: 1px solid #3079ED; text-indent:-999px; color: transparent; line-height:0; font-size:0; }#button_primary { border-color: #3079ED; background-color: #55A4F2; }#button_secondary { border-color: gray; }#field_regular { height:27px; }/* FIELDS */#field_large { height:300px; }/* HEADER */#header-wrap { top: 0; left: 0; }#header-container { line-height: 60px; height: 60px; border-bottom: 1px solid #E5E5E5; }#header { margin: 0 auto; position: relative; }#header h1 { color: #beffbf; text-align: left; width: 290px; margin: 0; position: absolute; left: 0; top: 20px; }#header h1 em { color: #90b874; font-size: small; display: block; }#header ul { top:0; margin: 0; padding: 0; list-style: none; position: absolute; right: 0; }#header ul li { float: left; margin-right: 5px; }#header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; }#header ul li a:hover { color: #beffbf; }/* CONTAINER */#container { margin: 0 auto; font-size: 1.4em; overflow: auto; padding: 31px 0 80px 0px; }#container-wrap { min-height:100%; position:relative; min-width: 940px; }#logo { height:20px; }/* FOOTER */#footer-wrap { bottom: 0; left: 0; }#footer-container { line-height: 60px; height: 60px; bottom: 0; border-top: 1px solid #E5E5E5; }#footer { margin: 0 auto; position: relative; }#footer ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; right: 0; }#footer ul li { float: left; margin-right: 5px; }#footer ul li a { color: #90b874; font-size: 12px; padding-left: 10px; padding-right: 10px; text-decoration: none; }#footer ul li a:hover { color: #beffbf; }#faq EM { display:none; }#faq LI STRONG { font-weight:normal; color:#246; text-decoration:underline; cursorointer; }.hidden { display:none; }#content{ background: orange; height: auto;}#col-main { overflow:hidden; }\[/code\]I am new to CSS coding, and I have had to make a lot of decisions without really knowing my stuff. I would love to get feedback to see if I can improve this code, especially with regards to making it cleaner, short code or more compatible.
- No div class lft
- No div class rgt
- Content in div class col-main
- Content in either div class lft or div class rgt
- Content in div class col-main
- Content in div class lft
- Content in div class rgt
- Content in col-main div
ointer; font-family: arial, sans-serif; min-width: 70px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; color: white; }.button:hover { border: 1px solid #2F5BB7; }.button:active { -moz-box-shadow: 0 0 2px #888; -webkit-box-shadow: 0 0 2px #888; box-shadow: 0 0 2px #888; }/* BUTTONS */#button_search { height: 34px; background: url(http://www.divology.com/wp-content/themes/divology/tutorials/google-search/ico-search.png) no-repeat #4d90fe center; border: 1px solid #3079ED; text-indent:-999px; color: transparent; line-height:0; font-size:0; }#button_primary { border-color: #3079ED; background-color: #55A4F2; }#button_secondary { border-color: gray; }#field_regular { height:27px; }/* FIELDS */#field_large { height:300px; }/* HEADER */#header-wrap { top: 0; left: 0; }#header-container { line-height: 60px; height: 60px; border-bottom: 1px solid #E5E5E5; }#header { margin: 0 auto; position: relative; }#header h1 { color: #beffbf; text-align: left; width: 290px; margin: 0; position: absolute; left: 0; top: 20px; }#header h1 em { color: #90b874; font-size: small; display: block; }#header ul { top:0; margin: 0; padding: 0; list-style: none; position: absolute; right: 0; }#header ul li { float: left; margin-right: 5px; }#header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; }#header ul li a:hover { color: #beffbf; }/* CONTAINER */#container { margin: 0 auto; font-size: 1.4em; overflow: auto; padding: 31px 0 80px 0px; }#container-wrap { min-height:100%; position:relative; min-width: 940px; }#logo { height:20px; }/* FOOTER */#footer-wrap { bottom: 0; left: 0; }#footer-container { line-height: 60px; height: 60px; bottom: 0; border-top: 1px solid #E5E5E5; }#footer { margin: 0 auto; position: relative; }#footer ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; right: 0; }#footer ul li { float: left; margin-right: 5px; }#footer ul li a { color: #90b874; font-size: 12px; padding-left: 10px; padding-right: 10px; text-decoration: none; }#footer ul li a:hover { color: #beffbf; }#faq EM { display:none; }#faq LI STRONG { font-weight:normal; color:#246; text-decoration:underline; cursorointer; }.hidden { display:none; }#content{ background: orange; height: auto;}#col-main { overflow:hidden; }\[/code\]I am new to CSS coding, and I have had to make a lot of decisions without really knowing my stuff. I would love to get feedback to see if I can improve this code, especially with regards to making it cleaner, short code or more compatible.