I have purchased a website template with style sheet. I know nothing about CSS. I want to use the same style sheet on several websites by just changing the entries.
The files are here:
a2z-internet.com/scriptlance/test.html
a2z-internet.com/scriptlance/style.css
I need the following done:
1. I want the CSS file to only contain the css classes required for test.html.
2. CSS can be optimized by removing extraneous css properties etc.
3. A space should be at the top of the page showing the background.
4. The space between the header images and the content (under the slidenav) currently shows the background. Instead this should be white.
5. I have received the following comments from friends. These should be taken into account and fixed:
It seems to me like the slicing for this design/template is unnecessarily over complicated. Naming selectors like “grid_3 pull_6” is just hard on the head, and it’s creating a lot of code that’s hard to manage. This template could learn a lot from csszengarden.com – which teaches us to name divs such as “preamble, summary, main_menu, etc” instead of “big_red_block, left_column, and grid_3”.
The problem comes from the elements being used incorrectly, for example:
#header {
z-index: 2;
height: 78px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
}
This #header code is using a corner radius for #header, which has no background color, and it’s not even using all of the needed code (border-top-left-radius: 8px; and border-top-right-radius: 8px; should be used as well).. 🙂
and using codes like: #nav.toprounded to add round corners is great,, but it should be used as a stand alone class (.toprounded) so it can be added to other elements, like your footer could simply add the ‘.bottomrounded’ class, instead of having that code duplicated for it.
Please also comment any changes. Thanks.
