/    Sign up×
Community /Pin to ProfileBookmark

CSS Guru Tips – Standard CSS Question

Copy linkTweet thisAlerts:
Dec 14.2007

I recently revamped my site using css/html. I have tested it on multiple browsers however, I am not a guru therefore I am unsure if any of my coding is non-standard or if there is a better way to address some design issues. See the code below. Your help is much appreciated.

Thanks,
Hopefully One Less Bad Coded Site on the WWW

[CODE]/* CSS Document */

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

body {

background-color: #2E3136;

color: #CCCCCC;

font-family: “Arial Narrow”, Arial, Tahoma, Helvetica, sans-serif;

font-size: 14px;

}

p {

margin: 1em 0;

}

#wrapper {

width: 766px;

margin: 0 auto;

background-color: #3A3D42;

min-height: 100%;

}

* html #wrapper {

height: 100%;

}
/*Main Images for Each Site Page*/
#header {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_5.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}

#header1 {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_1.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}

#header2 {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_3.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}

#header3 {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_4.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}

#header4 {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_7.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}

#header5 {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_2.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}

#header6 {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_8.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}

#header7 {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_6.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}

#header8 {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_9.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}

#header9 {

height: 418px;

background-color: #2E3136;

background-image: url(css%20assets/main_pic_0.jpg);

background-repeat: no-repeat;

background-position: right 117px;

}
/*End Main Images for Each Site Page*/
#nav {

height: 117px;

border-left: 1px solid #2E3136;

border-right: 2px solid #2E3136;

}

#nav li {

list-style: none;

float: left;

padding-right: 7px;

background-image: url(css%20assets/divider.jpg);

background-repeat: no-repeat;

background-position: right top;

}

#nav .last {

padding: 0;

background: 0;

}

#nav a {

float: left;

width: 147px;

height: 98px;

background-image: url(css%20assets/navback.jpg);

background-repeat: repeat-x;

background-position: left bottom;

line-height: 98px;

padding-top: 19px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

color: #CCCCCC;

font-size: 90%;

}

#nav a:hover {

background-position: left -5px;

color: #FFFFFF;

}

#nav .current, #nav .current:hover {

color: #FFFFFF;

background-image:url(css%20assets/navcurrent.jpg);

cursor: default;

}

#nav .current {

color: #FFFFFF;

background-image:url(css%20assets/navcurrent.jpg);

cursor: default;
}
h1 {

width: 311px;

height: 287px;

background-image: url(css%20assets/logo.jpg);

font-size: 1px;

color: #E8E9ED;

}

#content {

overflow: hidden;

}

* html #content {

overflow: visible;

height: 1%;

}

.contentgroup {

margin: 0 30px 10px;

padding: 20px 0;

overflow: hidden;

border-bottom: 8px solid #4F5257;

}
/*Content Group1 for Product Page w/o Border*/
.contentgroup1 {

margin: 0 30px 10px 30px;

padding: 20px 0;

overflow: hidden;
}

.contentgroup a {

color: #0598F8;

}

.contentgroup a:hover {

color: #6CC4FC;

text-decoration: none;

}

.contentgroup ul {

padding: 10px 0 10px 20px;

}

/* Product Pages*/

.contentgroup1 a {

color: #0598F8;

}

.contentgroup1 a:hover {

color: #6CC4FC;

text-decoration: none;

}

.contentgroup1 ul {

padding: 10px 0 10px 20px;

}
/* End Product Pages*/
h2 {

font-weight: normal;

font-size: 90%;

text-transform: uppercase;

border-left: 17px solid #4F5257;

border-right: 17px solid #4F5257;

margin: 14px 0 4px;

padding: 10px;

}

h3 {

font-weight: bold;

text-transform: uppercase;

font-size: 140%;

}

.left-col {

width: 200px;

float: left;

padding: 10px 15px;

min-height: 195px;

}

.left-col2 {

width: 200px;

float: left;

padding: 90px 15px;

background: url(css%20assets/home_pic_3.jpg) no-repeat;

}

.right-col {

width: 231px;

float: right;

padding: 10px 15px 10px 230px;

min-height: 195px;

background-repeat: no-repeat;

background-position: 15px center;

}

.right-col2 {

width: 446px;

float: right;

padding: 10px 15px 10px 15px;

min-height: 195px;

background-repeat: no-repeat;

background-position: 15px center;

}

/* Various Column Sizes for Pages within Site*/
/* Main Pages Content: About */

.left-colb {

width: 675px;

float: left;

padding: 0px 0px 0px 0px;

min-height: 195px;

background-repeat: no-repeat;

background-position: 0px top;

}
/* Main Pages Content: Product */

.left-colc {

width: 500px;

height: 100px;

float: right;

padding: 30px 0px 10px 190px;

min-height: 100px;

background-repeat: no-repeat;

background-position: 65px center;

}

.left-cold {

width: 650px;

height: 100px;

float: right;

padding: 30px 0px 10px 0px;

min-height: 100px;

}

/* Main Pages Content: Testimonial */
.left-cole {

width: 675px;

height: 200px;

float: left;

padding: 5px 0px 5px 0px;

min-height: 250px;

background-repeat: no-repeat;

background-position: 0px top;

}

.left-colf {

width: 675px;

height: 1300px;

float: left;

padding: 5px 0px 5px 0px;

min-height: 1300px;

background-repeat: no-repeat;

background-position: 0px top;

}
/* Main Pages Content: Contact */

.left-colg {

width: 675px;

height: 100px;

float: left;

padding: 0px 0px 0px 0px;

min-height: 100px;

background-repeat: no-repeat;

background-position: 0px top;

}

.left-colh {

width: 675px;

height: 800px;

float: left;

padding: 0px 0px 0px 0px;

min-height: 800px;

background-repeat: no-repeat;

background-position: 0px top;

}
/*Testimonials*/

.left-coli {

width: 675px;

height: 800px;

float: left;

padding: 0px 0px 0px 0px;

min-height: 800px;

background-repeat: no-repeat;

background-position: 0px top;

}

.left-colj {

width: 675px;

height: 1600px;

float: left;

padding: 5px 0px 5px 0px;

min-height: 1600px;

background-repeat: no-repeat;

background-position: 0px top;

}

.left-colk {

width: 675px;

height: 500px;

float: left;

padding: 5px 0px 5px 0px;

min-height: 300px;

background-repeat: no-repeat;

background-position: 0px top;

}
/*Divider for Product Page*/
.frame {

background-image:url(../cart/images/general_images/background_2.gif);

height: 10px;

width: 700px;
}
/*Promotion Banner for Home & Product Pgs*/
.promo-banner {

width: 700px;

height: 100px;

float: left;

min-height: 100px;

background-image:url(css%20assets/promo_1.gif);

background-repeat: no-repeat;

background-position: left;

}
.lightback {

background-color: #4F5257;
}

* html .left-col, * html .right-col, * html .contentgroup, * html .contentgroup1, * html .left-colb{

height: 195px;

overflow: visible;
}

#padder {

height: 70px;
}

#footer {

font-size: 80%;

color: #4F5257;

text-align: right;

padding-top: 10px;

width: 766px;

height: 70px;

margin: -70px auto 0;

background-color: #2E3136;
}

#footer ul {
}

#footer li {

list-style: none;

display: inline;

border-right: 1px solid #999999;
}

#footer .last {

border: 0;
}

#footer a {

color: #999999;

padding: 0 0.5em;

text-decoration: none;
}

#footer a:hover {

color: #CCCCCC;
}[/CODE]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarDec 14.2007 — all rather good except for the IE adjustment(better to put them in conditional comments so no other browsers can fall for them.

padding: 0px 0px 0px 0px;
could always be rewritten to be smaller:
padding: 0px;
but other than that I don't see anything worth complaining about. Good work.
Copy linkTweet thisAlerts:
@dtm32236Dec 14.2007 — i know that it's pretty much irrelevant, but padding: 0px; can be written padding:0; (to take it one step further). this only goes for 0 though, you can't do padding:10;

the code is good - it validates.

but if i could suggest one thing... i wouldn't set font-size to 14px. This should be the users choice. Some like bigger text, others like it smaller. They will usually have their browsers set to display text in the size they like, but this is restricting them to 14px font size.

i would usually do font-size:100%; then when you want to change the size (if you want a smaller link or something) use font-size:.85em; this way, it keeps their standard text size, and just shrinks it a little as per your specifications.

does that make sense?

good code though...
Copy linkTweet thisAlerts:
@ray326Dec 16.2007 — padding: 0px;[/QUOTE]And a zero length is zero regardless of dimension so padding:0; is valid, too.
×

Success!

Help @ne_plus_ultra spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...