CSS Colour Query

Hi there,

Doesn’t this work (regarding the footer, I mean):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <style>
      p.copy{text-align:center;}
      p.copy:after{content:" 1999-2012";}
    </style>
  </head>
  
  <body>
    <p class="copy">Copyright</p>
  </body>
</html>

I don’t know, but if I change the stylesheet to

p.copy{text-align:center;}
p.copy:after{content:" 1999-2012";}

It certainly does which is great.

I hesitate to say that I have created my first page without any spans and centers etc, but a page has been created.

Herzlichen Dank fuer Ihre Hilfe.

MfG

Antony

Kein Problem :wink:
Ich bin froh, dass ich helfen konnte.
Weiterhin viel Erfolg!

Antony,

The enclosed code is your groups.php page (including menu.php).

It is meant to be an example of effective HTML validation, not ideal code.

Comments:

Run it through the validator. It should test squeaky clean. HOWEVER, this does not mean that it is “good” code. It means that the HTML is valid. There are plenty of opportunities on this page for improvement. <br> tags can be replaced appropriately assigned margins in css, etc. I am not very familiar with <form>s, so there may be room for improvement there, too.

I imagine that this page is a work in progress and the layout will change considerably before it is finished.

I gather that visual cues like the indented code, are not particularly meaningful to you. I find them a helpful aid for tag accountability. You do seem to have a problem with stray tags and you have difficulty interpreting the messages given by the validator, so perhaps using a visual technique might be helpful. I also use a text editor that colors matching and stray tags differently. It also hints when there is a problem between the tags. All helpful toward the goal of writing reliable code.

I’m not familiar with the Coffee Cup HTML editor but it probably does the same things and more.

You said that your browser is “Windows 7”. I assume that means IE9. I use that sometimes, but lean heavily toward Firefox because of plug-ins such as the HTML Validator which makes real-time validation a breeze. The explanations are much clearer than those from the w3 validator, too !!! You might want to give Firefox and the HTML Validator plug-in a try.

There’s nothing wrong with spans.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Certificates in 5 Days C5D</title>
    <link rel="stylesheet" href="http://www.c5d.co.uk/clubscreen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="http://www.c5d.co.uk/c5dstyle.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.c5d.co.uk/c5ddropdownmenu.css" type="text/css" media="screen" />
    <link rel='stylesheet' id='easy-fancybox.css-css' href='http://www.c5d.co.uk/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4' type='text/css' media='screen' />
    <script src="http://www.c5d.co.uk/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
    <script src="http://www.c5d.co.uk/MenuMatic_0.68.3.js" type="text/javascript"></script>
</head>
<body>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var myMenu = new MenuMatic();
    });
</script>

<div id="wrapper">
    <div id="container" class="container">
    
<!-- BEGIN menu.php INCLUDE -->
        <div id="header" class="span-24" style="height:180px;">
            <div class="span-12">
                <img src="http://www.c5d.co.uk/c5dbackground.png" alt="my address" height="175" width="650" />
            </div>
            <div class="span-12 last" style="padding-top:30px; text-align:right;"></div>
        </div>
        <div class="span-24">
            <div id="navcontainer">
                <ul id="nav" class="menu">
                    <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-142"><a href="http://www.c5d.co.uk/homepage.php"><img src="http://www.c5d.co.uk/home.gif" alt ="home" /></a></li>
                    <li id="menu-item-64" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78"><a href="http://www.c5d.co.uk/homepage.php">Eng &amp; Wales</a>
                        <ul class="sub-menu">
                            <li id="menu-item-64000" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78"><a href="http://www.c5d.co.uk/homepage.php">England&nbsp;&amp;&nbsp;Wales&nbsp;Certificates</a>
                                <ul>
                                    <li id="menu-item-89"><a href="http://www.c5d.co.uk/parishrecords.php">Parish&nbsp;Register&nbsp;Entries</a></li>
                                    <li id="menu-item-88"><a href="http://www.c5d.co.uk/probates.php">Probates,&nbsp;Wills&nbsp;&amp;&nbsp;Admons</a></li>
                                    <li id="menu-item-87"><a href="http://www.c5d.co.uk/pre1858.php">Pre 1858 Probates</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://www.c5d.co.uk/groups.php">Family&nbsp;Groups</a></li>
                            <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://www.c5d.co.uk/research.php">Research&nbsp;Service</a></li>
                            <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://www.c5d.co.uk/ninthfield.php">Large&nbsp;Orders</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://www.c5d.co.uk/course.php">Scotland</a>
                        <ul class="sub-menu">
                            <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://www.c5d.co.uk/scotland.php">Scottish&nbsp;Certificates</a></li>
                            <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="https://secure.jotformeu.com/form/20562318766356">Scottish&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://www.c5d.co.uk/northernireland.php">N.Ireland</a>
                        <ul class="sub-menu">
                            <li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://www.c5d.co.uk/northernireland.php">Northern&nbsp;Irish&nbsp;Certificates</a></li>
                            <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="https://secure.jotformeu.com/form/20562335218347">Northern&nbsp;Ireland&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://www.c5d.co.uk/ro1.php">Eire</a>
                        <ul class="sub-menu">
                            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://www.c5d.co.uk/roi.php">Irish&nbsp;Certificates</a></li>
                            <li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="http://form.jotformeu.com/form/20560737900349">Irish&nbsp;Certificate&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="dummy7"><a href="http://www.c5d.co.uk/parishrecords.php">P R Es</a>
                        <ul class="sub-menu">
                            <li id="menu-item-86"><a href="http://www.c5d.co.uk/parishrecords.php">Parish&nbsp;Register&nbsp;Entries</a></li>
                            <li id="menu-item-85"><a href="https://secure.jotformeu.com/form/20563263008345">Parish&nbsp;Register&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-222 current_page_item menu-item-227"><a href="http://www.c5d.co.uk/censusentries.php">Censuses</a>
                        <ul class="sub-menu">
                            <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134"><a href="http://www.c5d.co.uk/censusentries.php">Census&nbsp;Entry&nbsp;Copies</a></li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotformeu.com/form/20563312173343">Census&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://www.c5d.co.uk/sterlingpayments.php">Payments in &#163;</a>
                        <ul class="sub-menu">
                            <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://www.c5d.co.uk/sterlingpayments.php">Make&nbsp;Payments&nbsp;in&nbsp;&#163;</a></li>
                        <li id="menu-item-42000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotformeu.com/form/20562220135338">Order Form</a></li></ul>
                    </li>
                    <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="http://www.c5d.co.uk/nzcerts.php">NZ</a>
                        <ul class="sub-menu">
                            <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.c5d.co.uk/nzcerts.php">New&nbsp;Zealand&nbsp;Certificates</a></li>
                            <li id="menu-item-122000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.c5d.co.uk/nzcerts.php">Order Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-61000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://www.c5d.co.uk/probates.php">Probates</a>
                        <ul class="sub-menu">
                            <li id="menu-item-84"><a href="http://www.c5d.co.uk/probates.php">Probates,&nbsp;Wills&nbsp;&amp;&nbsp;Admons</a></li>
                            <li id="menu-item-420000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://www.c5d.co.uk/pre1858.php">Pre&nbsp;1858&nbsp;Probates</a></li>
                            <li id="menu-item-4200000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotform.com/form/20393244360"> Probate&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
<!-- END menu.php INCLUDE -->

        <a href="https://secure.jotformeu.com/form/20563231274345" class="three">Secure Order Form Now Available</a>
        <h1>A Personal Service not just a Certificate Supplier.</h1>
        Why not try the ancestry group package which I provide ? Do a whole generation at once.
        <p>There are three options available. Just Click on the order form below.</p>
        <p class="two">Bronze:  &#163;49.95</p>
        <p>This consists of the birth certificate of a child and its parents. Three certificates.</p>
        <p class="two">Silver:  &#163;64.95</p>
        <p>This consists of the birth certificate of a child, it's parents and their marriage certificate.  Four certificates.</p>
        <p class="two">Gold:    &#163;89.95</p>
        <p>This consists of the Silver Package plus each parent's death certificate:  Six certificates.</p>
        <p>To order please complete the <a href="https://secure.jotformeu.com/form/20563231274345" class="three">Order Form</a></p>
        <p class="two">Terms of Service</p>
        <p>Each Service includes all research by me, though it would help if you would provide any releveant information you know.</p>
        <p>The service is limited to England and Wales only.</p>
        <p>Should an entry not be located; for example the birth may be before 1837, or a parent may have been born abroad, there will be a refund of &#163;13.</p>
        <p>I may need to come back to you for information if the surname is popular.</p>
        <p>I reserve the right to decline applications at my discretion.</p>
        <p class="two">To pay for a Group by Paypal or Google Check Out please click the relevant symbol below:</p>
        <div>
            <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                <input type="hidden" name="cmd" value="_cart" />
                <input type="hidden" name="business" value="antonylambert@certificates.fsnet.co.uk" />
                <input type="hidden" name="lc" value="GB" />
                <input type="hidden" name="item_name" value="Family Research" />
                <input type="hidden" name="button_subtype" value="products" />
                <input type="hidden" name="no_note" value="0" />
                <input type="hidden" name="currency_code" value="GBP" />
                <input type="hidden" name="add" value="1" />
                <input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHostedGuest" />
            </form>
        </div>
        <table>
            <tr>
                <td><input type="hidden" name="on0" value="Family History Research" />Family History Research</td>
            </tr>
            <tr>
                <td>
                    <select name="os0">
                        <option value="Gold">Gold &#163; 89.95 GBP</option>
                        <option value="Silver">Silver &#163; 64.95 GBP</option>
                        <option value="Bronze">Bronze &#163; 49.95 GBP</option>
                    </select>
                </td>
            </tr>
        </table>
        <div>
            <form action="/">
                <input type="hidden" name="currency_code" value="GBP" />
                <input type="hidden" name="option_select0" value="Gold" />
                <input type="hidden" name="option_amount0" value="89.95" />
                <input type="hidden" name="option_select1" value="Silver" />
                <input type="hidden" name="option_amount1" value="64.95" />
                <input type="hidden" name="option_select2" value="Bronze" />
                <input type="hidden" name="option_amount2" value="49.95" />
                <input type="hidden" name="option_index" value="0" />
                <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" name="submit" alt="PayPal &#8212; The safer, easier way to pay online." />
            </form>
        </div>
        <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
        <p>To pay by cheque please use this facility to calculate the cost in your currency.  If you pay by cheque, the  cost will be &#163;10 more to cover the exchange rate fee.</p>  <!-- XE.com Universal Currency Converter(tm) Input Page Starts --> <!-- Copyright (c) 2005 XE.com. Unauthorized use prohibited. --><!-- Input Template Version 3.10 --><!-- You may reformat this page section, but do not delete lines or variables that start with an asterisk -->
        <p>For quotes in any other currency, please contact me.</p>
        <p class="two">Other Services for the Genealogist:</p>
        <table class="other services">
            <tr>
                <td>Family Group Orders:</td>
                <td><p class="four"><a href="http://www.c5d.co.uk/groups.php">Click here</a></p></td>
            </tr>
            <tr>
                <td>Payments in Pounds:</td>
                <td><p class="four"><a href="http://www.c5d.co.uk/sterlingpayments.php">Click here</a></p></td>
            </tr>
            <tr>
                <td>Parish Register Entries:</td>
                <td><p class="four"><a href="http://www.c5d.co.uk/parishrecords.php">Click here</a></p></td>
            </tr>
            <tr>
                <td>Census Service:</td>
                <td><p class="four"><a href="http://www.c5d.co.uk/censusentries.php">Click here</a></p></td>
            </tr>
        </table>
<!--webbot bot="HTMLMarkup" startspan -->
        <a href="http://www.jdoqocy.com/click-2218224-10411339" target="_top"><img src="http://www.tqlkg.com/image-2218224-10411339" width="234" height="60" alt="1901 Census Access 234x60  - 10% DISCOUNT" border="0" class="center" /></a>
        <br /><br />
        <p class="copy">&copy;C5D-Certificates </p>
    </div>
</div>
</body>
</html>

I have firefox but and chrome but always use IE because of its familiarity. I shall give firefox a try.

This page is W I P as I need to put the exchange rate calculator on it.

I shall look at removing the BRs. Trying to work on a simple page first.

There’s loads to do of course but it will be fun learning I hope

Antony