Back To Website Design Forum

Adding color to content area

  • ciarac
  • Beginner
  • Beginner
  • User avatar
  • Joined: Aug 18, 2007
  • Posts: 48
  • Loc: Spain
  • Status: Offline

Post October 12th, 2007, 10:53 am

Hi,

I recently asked for a site review of my website http://www.website-copy-writer.com and I got some great feedback. I'm slowly working my way through it all.
One of the suggestions was to put a light grey color in the content area (suggestion made by kocisz) which is an idea that I like.
I don't know how to do it though.

Do I need to enclose the text in a table?
I'm using css and I really am a novice so any help is greatly appreciated.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 12th, 2007, 10:53 am

  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6744
  • Loc: Martinsburg, WV
  • Status: Offline

Post October 12th, 2007, 11:07 am

The easiest way would be to place all of your content in a <div> and assign the <div> a background color. I see you do have a <div> assigned so you need to add this to your CSS.

Code: [ Select ]
#contentcell {background: #C0C0C0;}


Also in your source code you have <div="contentcell">. You need to change this to <div id="contentcell">.
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8212
  • Loc: USA
  • Status: Offline

Post October 12th, 2007, 12:11 pm

grinch2171 wrote:
The easiest way would be to place all of your content in a <div> and assign the <div> a background color. I see you do have a <div> assigned so you need to add this to your CSS.

Code: [ Select ]
#contentcell {background: #C0C0C0;}


Also in your source code you have <div="contentcell">. You need to change this to <div id="contentcell">.


OR change the "#contentcell" to ".contentcell" and make the div "div class="contentcell">" It is more "strict XHTML" valid and it works just the same. It can be done both ways. Just a thought.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6744
  • Loc: Martinsburg, WV
  • Status: Offline

Post October 12th, 2007, 12:18 pm

Both ways will validate as XHTML Strict.

My understanding of the difference between ID and class is you can use a class multiple times on one page and an ID can only be used once per page.

Quote:
The key thing to know is that IDs identify a specific element and therefore must be unique on the page – you can only use a specific ID once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and should be observed. Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8212
  • Loc: USA
  • Status: Offline

Post October 12th, 2007, 1:37 pm

oh, then thats why it didn't validate for me. Because I used an ID more than once and it said that I can't use ID in XHTML strict.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post October 12th, 2007, 2:49 pm

I noticed that the site seemed to be right justified. You could center it if you wanted pretty easily. You have a class in your CSS that you're not using:

Code: [ Select ]
.maintable {
    width: 760px;
}
  1. .maintable {
  2.     width: 760px;
  3. }


I would change that to a div (since you're only need it once) and wrap it around your entire site. Start it right after <body> and end it right before </body>, like this:

Code: [ Select ]
<body>
<div id="maintable">

all your content

</div>
</body>
  1. <body>
  2. <div id="maintable">
  4. all your content
  6. </div>
  7. </body>


Then, in your CSS change the 'maintable' class to this:

Code: [ Select ]
#maintable{
      width:760px;
      margin-left:auto;
      margin-right:auto;
      }
  1. #maintable{
  2.       width:760px;
  3.       margin-left:auto;
  4.       margin-right:auto;
  5.       }


The margin thing will center the page for you.

The site looks nice, by the way. Very elegant.
  • ciarac
  • Beginner
  • Beginner
  • User avatar
  • Joined: Aug 18, 2007
  • Posts: 48
  • Loc: Spain
  • Status: Offline

Post October 12th, 2007, 4:31 pm

Hey, great help from all of you, and 'elegant', you say? Hee, thanks!

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 80 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.