Solved

How do I style the body tag?

Posted on 2009-07-16
7
280 Views
Last Modified: 2012-05-07
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
Comment
Question by:adrake9
  • 4
  • 3
7 Comments
 
LVL 8

Accepted Solution

by:
rseabird earned 500 total points
ID: 24872836
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
 
LVL 2

Author Comment

by:adrake9
ID: 24872909
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
 
LVL 8

Expert Comment

by:rseabird
ID: 24873005
Try to do this:
#ContentContainer h1

{

    ...

}
 

#MainContent h1

{

  ...

}

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Comment

by:adrake9
ID: 24873120
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
 
LVL 2

Author Comment

by:adrake9
ID: 24873189
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
 
LVL 8

Expert Comment

by:rseabird
ID: 24873264
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
 
LVL 2

Author Comment

by:adrake9
ID: 24873319
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now