/    Sign up×
Community /Pin to ProfileBookmark

New to CSS and need C&C

Ok so I just started working on my first non-tutorial webpage using CSS. I think its coming along pretty well but some constructive criticism on my code and how to better it would be greatly appreciated.

My site: [url]www.halotrialmods.org[/url] (still a WIP)

[code]body {
font-family: tahoma;
font-size: 11px;
text-align: center;
margin: 0px auto;
background-image: url(images/body-bg.jpg);
background-repeat: repeat-x;
}

#container {
background-color: #F0F1F3;
text-align: left;
margin: 0px auto;
width: 755px;
border: 1px solid #000000;
}

#header {
background-image: url(images/header-bg.jpg);
width: 755px;
height: 150px;
}

#hnav {
background-image: url(images/nav-bg.jpg);
width: 755px;
height: 21px;
text-align: center;
margin-top: 5px;
}

#barL {
background-image: url(images/barL-bg.jpg);
width: 18px;
height: 24px;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-left: 15px;
float: left;
}

#bar {
background-image: url(images/bar-bg.jpg);
padding-top: 6px;
width: 140px;
height: 18px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
float: left;
}

#barR {
background-image: url(images/barR-bg.jpg);
width: 15px;
height: 24px;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
float: left
}

#vnav {
margin-left: 15px;
background-color: #F7F7F7;
text-align: left;
width: 168px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
float: left;
padding-bottom: 5px;
padding-left: 5px;
}

#sotm_header {
padding-top: 6px;
width: 502px;
height: 18px;
background-image: url(images/bar-bg.jpg);
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
float: left;
}

#sotm_winner {
margin-left: 15px;
width: 535px;
background-color: #F7F7F7;
text-align: center;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
float: left;
}

#footer {
clear: both;
}
[/code]

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@ray326Jun 08.2007 — Your CSS seems ok but you need to work on the semantics of your mark up. E.g. a menu is a list of links and your main content looks like a definition list maybe.
[code=html]<dl>
<dt>This months winner</dt>
<dd><img ...></dd>
<dd>Onishikyo!</dd>
</dl>[/code]
Copy linkTweet thisAlerts:
@niconel_comJun 08.2007 — I cannot open you sitel.

I dont agree with the stapler guy about using defintion list. They are great ways of marking up data in that structure

See you specify font size in pixels....naughty boy...remember what your read about "Accessibility" ?

You might want to give your classes bit more descriptive names.

pretty neat ..keep it up
Copy linkTweet thisAlerts:
@ray326Jun 08.2007 — I dont agree with the stapler guy about using defintion list. They are great ways of marking up data in that structure[/QUOTE]True, but what's there now make no semantic sense at all plus it uses deprecated elements.
×

Success!

Help @Phenomena 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.9,
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,
)...