• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 290
  • Last Modified:

How do I style the body tag?

Why wont this work? I've attached the code below and it wont work.
It works if I give it a class or ID but not if I just try to style the tag. I think i'm missing something

Works if I do

<body id="page-background"> and change the below code to #page-background
 
but I would like to be able to give the body tag another id so that I can style an active page in my nav bar. Any help is appreciated.

-a
body {
	background-color: #4b4b4b;
	background-image: url(../img/header_bg.jpg);
	background-position: center top;
	background-repeat: repeat-x;
}

Open in new window

0
adrake9
Asked:
adrake9
  • 4
  • 3
1 Solution
 
rseabirdCommented:
Normally the way I work with div's is to put only margin and padding to 0 for the body. All the rest I place in different div's. Usually you have a container, with wraps actually all the content you will show. Inside the container, you place different div's for different objects (e.g. navigation bar, page header images, sidebars etc.)
Something like this:


<body>
  <div id="container">
     <div id="NavigationBar"></div>
     <div id="ContentContainer">
        <div id="MainContent"></div>
        <div id="RightSideBar"></div>
     </div>
  </div>
</body>

Open in new window

0
 
adrake9Author Commented:
I do have a "wrapper class" for my page, which sets the width of my main content to 900px wide but i cant figure out why I cant style h1 tags or body tags or p tags. I have a reset.css file, could this have anything to do with it?
-a
0
 
rseabirdCommented:
Try to do this:
#ContentContainer h1
{
    ...
}
 
#MainContent h1
{
  ...
}

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
adrake9Author Commented:
I have a page structure like that. lets get away from the <body> tag. I'll give another example.
If I style an <h1> like this:

h1 { color: red;}

it should make all pages that reference that stylsheet give me red text.
Unfortunately it doesn't.

Could it be my doctype?.........wait. a minute

just looked in firebug and turned off the background: transparent part of my reset.css style sheet. and it worked. take a look below.
-a
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
 
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Open in new window

0
 
adrake9Author Commented:
tried some other tags and they worked, finally. I'm not sure why this works this way, but I'm glad I figured it out. I'll give you the points, have a great day!
0
 
rseabirdCommented:
The 'reset' css is to give you full control about how you want to design your div's. So all tags are first reset, but when you place it inside a div, you can give them the properties/layout you want.
0
 
adrake9Author Commented:
I think I'm getting the picture should I assing classes and IDs to the divs? and then calling them like this?

<div id="page-title">This is the page title</div>

then style the tags through those?

#page-title h1 {
      color: red;
      font-size: 25px;
}

Is this considered best practices?
-a
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now