In order to determine what is going right or wrong with your web page layout, you have to go to the source. This means looking under the hood.

Under the pretty hood of your web page, the nice layout you see on your Internet browser, is a whole bunch of code with strange and foreign sounding references. At first glance, it's like looking under the hood of a racing car. You know that all of that junk makes the car go, but what the heck is all that mess under the hood?

Viewing HTML

To lift the hood on your page, make sure the page is being viewed from your web browser and from within your web browser's top menu, click VIEW > SOURCE or PAGE SOURCE. Another page will pop-up either inside another browser window or inside of a program that comes with your operating system called Notepad, or some variation thereof. This is your HTML page which structures your page.

Viewing CSS

To view your CSS, either know the actual address (or have it already on your hard drive), or scroll down through the HTML page to the following reference:

<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">

This is the link that loads in your attached CSS style sheet. To view your CSS, either double click on the file name or type in the specific link to the file in your web browser such as:

http://www.yoursite.com/wordpress/wp-content/themes/default/style.css

In WordPress, PHP is used to actually generate the HTML page. This is often complex and confusing code. To view the HTML, view a generated page, such as a sample post. To make changes in the HTML structure and CSS references, you will need to modify the appropriate PHP file. The Codex page on using themes has more information on how to view your Theme Templates and find out which Template is associated with which section on your page.

The problem-solving techniques herein describe how to change the CSS to influence the layout of the page.

Posted in: CSS, WordPress

Related FAQ's

Marius Ion ANGEL HOT SOFT LLC (800) 316-7677