Solved

How do I style the body tag?

Posted on 2009-07-16
7
279 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
Comment Utility
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
Comment Utility
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
Comment Utility
Try to do this:
#ContentContainer h1

{

    ...

}
 

#MainContent h1

{

  ...

}

Open in new window

0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 2

Author Comment

by:adrake9
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Website Home page blank 4 25
Responsive CSS question 2 37
Detecting robots? 5 32
modify h2 4 8
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

763 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

7 Experts available now in Live!

Get 1:1 Help Now