Note: I don't have any training in HTML or CSS or doing things correctly, and also am not very clear on computer programming terminology, so please forgive me (and correct me!) if I use words inappropriately. Also, my code indentation is wayward--please forgive, again.
Some background: I'm updating a website via WordPress and, within the context of the entire website, am trying to create a set of pages that feature one of the museum's programs, called 'Mr. Carnegie's Grand Tour'. The "homepage" for this subset of pages is where my problem occurs.
Some more specific background: In order to distinguish the "parent" page of the Tour from the pages that it will lead to (the "child" pages), I fiddled around with some CSS and managed, via absolute positioning, to move the banner-like image at top so that it is just a few pixels below the automatically displayed 'Mr. Carnegie's Grand Tour' heading. I did this in order to eliminate the white space that was created by using <html> and <head> tags at the beginning of my page.
Below are the contents of the page (as editable through the WordPress interface):
<html>
<head>
<style type="text/css">
table.menu {
border-style: solid;
border-color: #cccccc;
border-width: 5px;
width: 210px;
position: absolute;
top: 40px;
left: 500px;
}
img.carnegie {
height: 253px;
position: absolute;
top: 321px;
left: 500px;
}
img.masthead {
height: 154px;
position: absolute;
top: 40px;
left: 0px;
}
</style>
</head>
<body>
<p>
<img class="masthead" src="/wp-content/uploads/grandtourmainhead1.jpg">
<table class="menu">
<tbody>
<tr>
<td>
<ul>
<li><a href="http://www.cchmuseum.org/carnegie_tour/">Tour Home</a></li>
<li><a href="aboutus.htm">About Us</a></li>
<li><a href="Who_was_Andrew_Carnegie.htm">Who was Andrew Carnegie?</a></li>
<li><a href="General_Tour_Information.htm">General Tour Information</a></li>
<li><a href="Carnegie_Tour_Sites.htm">Carnegie Tour Sites</a></li>
<li><a href="Andy_the_Library_Explorer.htm">Andy the Library Explorer</a></li>
<li><a href="Prizes_and_Tour_Sponsors.htm">Prizes and Tour Sponsors</a></li>
<li><a href="New_Stories_and_Photos.htm">New! Stories and Photos</a></li>
<li><a href="More_About_Carnegie.htm">More About Carnegie</a></li>
<li><a href="Download_Your_Passport.htm">Download Your Passport</a></li>
<li><a href="New_Museum_Poster.htm">New Museum Poster</a></li>
<li><a href="Contact_Us.htm">Contact Us</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<!--URL in next line is placeholder- will designate later-->
<a href="http://www.cchmuseum.org/carnegie_tour/passport"><img class="carnegie" src="/wp-content/uploads/CarnegieDesign_2.jpg"></a>
</p>
</body>
</html>
The problem: Using absolute positioning to move everything up and eliminate that white space seems to have introduced another problem: now, when I view the page at (http://www.cchmuseum.org/education/carnegie_tour/), a few of the links near the bottom of the list, namely 'New! Stories and Photos', 'More About Carnegie', and 'Download Your Passport' are unclickable. I used the Firefox Firebug add-on and found that the following line of code (in the WordPress backend) seems to be doing something that covers up the unclickable links:
<div style="width:100%;position:relative;float:left;padding-top:50px;">
Question: Why is this line of code in the WordPress backend interfering with my patchy CSS?
Is there anything I can do about it?
Thank you.
