Looking the Hood for CSS
Once you have lifted the hood to see the HTML and CSS, it is time to start playing Sherlock Holmes. To start, you have to know what you are looking at and where to find the basic elements to help you find the culprit.
The HTML page features all the structural code that sets up the "grid" into which your page sits. Think of it as a map with notes written all over it. The notes are actually pointers to the directions which are found within the CSS file.
Scroll down past a lot of <link rel='archives'... information until you see <body>. Below this will be the layout "body" of your web page. From here on, every bit of information is critical to the structure and design of your page.
As you scroll through it, look for identifying ID and CLASS statements. For example, you may see the following:
<div id="page"> <div id="header"> <h1>My WordPress Site</h1> <div id="headerimg"> </div> <div class="description">by Me and Only Me</div> </div> <div id="content" class="widecolumn"> <div class="post">
This may look confusing, but it is basically setting up sections with your content in it.
It begins with the division called "page" which sets up the look of the entire page. If you look in the CSS file for #page selector, you will see the presentation styles associated with it. It is followed by the header division which includes a heading (H1) with the title of your site. This particular layout is based upon the default which includes an image in the header, set by the "headerimg" division. After that comes a division with a CLASS reference called "description" which is the place you have a subtitle or description of your site. Again, look in your CSS to find .description to find out how that area is styled.
The next two tags close the header (</div>) and then begins the division ID of "content" which also features a CLASS called"widecolumn", followed by another CLASS called "post". The "content" and "widecolumn" layout the overall look of the containers holding your "post".
This is an example of the parent/child relationship. And, as you will see in the next section, this is one of the major places where CSS layout problems begin!