SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Where Have I Gone wrong with my list ?

    I have created a list and it works fine with two minor points. At the begining and end, the list give two dots.

    The CSS is

    .kefalonia { /* controls the listings in the index and thee graves with several names */
    list-style-type:none;
    display:table;
    padding:0;
    margin:0 auto;
    }
    .kefalonia li { /* controls the listings in the index and thee graves with several names */
    display:table-row;
    text-align:left;
    padding:0;
    margin:0;
    }
    .kefalonia p { /* controls the listings in the index and thee graves with several names */
    display:table-cell;
    text-align:left;
    padding:3px 20px 3px 0; /* padding-right visually separates "columns" */
    }
    .kefalonia div {
    display:table-cell;
    }

    The HTML is here

    <ul class="kefalonia">
    <li>
    <p>Serjeant George Didcott</p>
    <p>&nbsp;</p>
    <p>Oct 25th 1835</p></li>

    <li><p>Corporal George Simpson</p>
    <p>&nbsp;</p>
    <p>Sept 29th 1835</p></li>

    <li><p>Prvt George Bennett</p>
    <p>&nbsp;</p>
    <p>Aug 28th 1835</p></li>
    <li><p>Prvt John Moran</p>
    <p>&nbsp;</p>
    <p>Oct 1st 1835</p></li></ul>

    I am sure it's me because the CSS works well with other pages but I have looked for ages and cannot spot a difference

    The page is http://www.c5d.co.uk/staffordshiremilitia.php

    Thanks for looking

    Antony

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The code you posted is not relevant to the issue. You have a few <li> elements on your page that are not contained in a <ul>, which is invalid code, and those two <li>s have a default dot beside them.

    lis.jpg

  3. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply which sorted it perfectly.

    Those were in an odd place. No wonder I couldn't spot them

    Antony

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Cool, no probs.

    I notice that there is another empty <li></li> at the bottom of the page, which is causing another dot at the very bottom that you might want to remove.

  5. #5
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again

    It's resolved

    Antony

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ooooh, I like it! Looks like you borrowed the list code from the 1841 page, but changed the second container from <div>s to <p> tags. That's an improvement!

    However, you need to make a couple of changes...

    First, there is the usual stray <p> tag that needs to be taken care of. Near the bottom of the page, the line...
    Code:
        <img class="young" src="staffordshiremilitia.jpg" width=382 alt="Staffordshire Militia"><p>
    Should be changed to:
    Code:
        <p><img class="young" src="staffordshiremilitia.jpg" width=382 alt="Staffordshire Militia"></p>

    Second, I can think of no useful reason for the <p>&nbsp;</p> in the middle of each list item. It is unnecessary and should be deleted. Doing that will simplify the HTML.

    Finally, we need to make a simple change to the css:
    Code:
    .kefalonia p {               /* controls the listings in the index and thee graves with several names */
        display:table-cell;
        text-align:left;
        padding:3px 20px 3px 0;  /* padding-right visually separates "columns" */
    }
    .kefalonia div {
        display:table-cell;
    }
    To:
    Code:
    .kefalonia p {               /* controls the listings in the index and thee graves with several names */
        display:table-cell;
        text-align:left;
        padding:3px 0px;
    }
    .kefalonia p + p {
        padding-left:50px;       /* padding-left visually separates "columns" */
    }
    The CSS change repairs the centering of the list on this page AND allows you to create as many "columns" as you wish without necessarily having to modify the css. If you need to change the "column" separation, it is done by modifying the padding-left item only.

    You could apply this style change to the 1841 page and be a step closer to unifying the code on your site!

    Cheers!

  7. #7
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. As you making it all the same is something I am trying to do all the time.

    However I seem to have fallen at the first hurdle.

    If you look at that page, you will see that the husbands' names in the second section are superscripted based on these two

    <li><p>Susannah, Wife of Edw<span class="sup">d</span> Causer</p><p> Nov 11<span class="sup">th</span> 1835</p></li>

    .sup1 {
    vertical-align: baseline;
    font-size: 0.6em; /* superscript */
    position: relative;
    top: -0.6em;
    font-weight:bold;}
    .sup {
    vertical-align: baseline;
    font-size: 0.6em; /* superscript */
    position: relative;
    top: -0.3em;
    font-weight:bold;}


    If you then look at this page


    http://www.c5d.co.uk/illegible.php

    you will note that the letter t is Capt is not superscripted. Can you spot why ? The CSS appears to be the same on both sheets

    In the memory of the infant of Cp<span class="sup">t</span>.........

    .sup1 {
    vertical-align: baseline;
    font-size: 0.6em; /* superscript */
    position: relative;
    top: -0.6em;
    font-weight:bold;}
    .sup {
    vertical-align: baseline;
    font-size: 0.6em; /* superscript */
    position: relative;
    top: -0.3em;
    font-weight:bold;}

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yes, the problem is a missing } brace in the css.
    Code:
    .zante p + p {
        padding-left:50px;       /* padding-left visually separates "columns" */
    }    /* THIS BRACE IS MISSING */
    HOWEVER, for such a tiny page, there are several HTML errors AND several CSS errors in addition to the missing curly brace.

    I'll send you some fixes as best I can.

    How does one fix the impossible?
    Code:
    table {margin:auto;a:link, a:visited {color:#000000; font-size: 15px;font-weight:bold;}}

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    OK, this is the zantestyle.css
    Code:
    /*
    	Theme Name: Permanent
    	Theme URL: http://newwpthemes.com/wordpress-theme/permanent/
    	Description: Permanent is a free WordPress theme with featured content option and supports the post thumbnails. Suitable for any niche. Theme Options at admin panel.
    	Author: NewWpThemes.com
    	Author URI: http://newwpthemes.com/
    	Version: 3.0
    	Tags: Blogging, Ads Ready, Three  Columns, Right Sidebar, Fixed Width, Options Page
    */
    
    /* LAYOUT */
    
    
    body {
        background:#9ab;
        font-weight:bold;
        font-style:italic;
        font-size:15px;
        font-family:"New Century Schoolbook", Times, serif;
    }
    .container {
        width:950px;
        margin:0 auto;
    }
    h1 {
        color:#fff;
        font-size:19px;
        font-weight:bold;
        font-style:italic;
        text-align:center;
    }
    a:link,
    a:visited {
        color:#000;
        font-size:15px;
        font-weight:bold;
        text-decoration:none;
    }
    p.one {
        color:#fff;
        font-size:19px;
        font-weight:bold;
        font-style:italic;
        text-align:center;
    }
    p.one a:link,
    p.one a:visited {
        color:#cd0000;
        font-size:19px;
        font-weight:bold;
    }
    a:hover {
    	color:#fff;           /* Colour of Links when hovering */
        text-decoration:none;
    }
    
    #navcontainer {           /* controls top sub menu boxes known as navigation bar */ 
    	height:45px;
    	display:block;
        background:#000;
        -moz-border-radius:5px;
        -khtml-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
    }
        
    p.copy {text-align:center;}
    p.copy:after {content:" 1999-2013";}
          
    img.center {
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
    img.zante {
        display:block;
        border-radius:10px;
        margin-left:auto;
        margin-right:auto;
    }
    p.zantetext {
        text-align:center;
        padding-top:10px;    /* changed from 80px to put div.clearfloats around the adverts. */
    }
    p.zantepara {
        text-align:center;
        padding-top:5px;
    }
    p.zanteblocktext {
        margin-left:auto;
        margin-right:auto;
        width:22em;
    }
    table {
        margin:auto;
    }
    
    #advert1 {float:left; padding-top:5px;}
    #advert1 a, #advert2 a {display:block;}
    #advert1 img, #advert2 img {border-radius:7px;}    
    #advert2 {float:right;padding-top:5px;}
    a img {display:block; border:0;}
    
    hr {
        color:#708090;
        background-color:#f708090;
    }
    
    .buttonHolder {text-align:center;}
    
    .zante {                /* controls the listings in the index and thee graves with several names */
        list-style-type:none;
        display:table;
        padding:0;
        margin:0 auto;
    }
    .zante li {              /* controls the listings in the index and thee graves with several names */
        display:table-row;
        text-align:left;
        padding:0;
        margin:0;
    }
    .zante p {               /* controls the listings in the index and thee graves with several names */
        display:table-cell;
        text-align:left;
        padding:3px 0px;
    }
    .zante p + p {
        padding-left:50px;       /* padding-left visually separates "columns" */
    }
    .zante div {
        display:table-cell;
    }
    
    .sup1 {
    	vertical-align:baseline;
    	font-size:0.6em;              /* superscript */
    	position:relative;
    	top:-0.6em;
        font-weight:bold;
    }
    .sup {
    	vertical-align:baseline;
    	font-size:0.6em;              /* superscript */
    	position:relative;
    	top:-0.3em;
        font-weight:bold;
    }
    
    .clearfloats:before,
    .clearfloats:after {
        content:"";
        display:table;
        line-height:0;
    }
    .clearfloats:after {
        clear:both;
    }
    And illigible.php
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Illegible Grave in Zakinthos British Cemetery</title>
        <link rel="stylesheet" href="http://www.c5d.co.uk/zantestyle.css" type="text/css" media="screen">
        <link rel="stylesheet" href="http://www.c5d.co.uk/c5ddropdownmenu.css" 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 c5dmenu.php INCLUDE -->
    <?php include $_SERVER["DOCUMENT_ROOT"] . "/c5dincludes/c5dmenu.php"; ?>
    <!-- END c5dmenu.php INCLUDE -->
            <h1>Your Certificates in 5 Days ?</h1>
            <p class="one">There is another way. <a href="http://www.c5d.co.uk">Certificates in 5 Days (C5D)</a> Why not give me a try ?</p>
    <!-- START FMP & Ancestry adverts -->
            <div class="clearfloats"> <!-- adverts container (optional?) -->
                <div id="advert1">
                    <a href="http://www.jdoqocy.com/click-5433512-10520381">
                        <img src="http://www.awltovhc.com/image-5433512-10520381" width="264" height="60" alt="264x60: I am your Nan">
                    </a>
                </div>
                <div id="advert2">
                    <a href="http://www.awin1.com/cread.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588">
                        <img src="http://www.awin1.com/cshow.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588" width="264" height="60" alt="264x60">
                    </a>
                </div>
            </div>
    <!-- END FMP & Ancestry adverts -->
            <p class="zantetext">Illegible name who died aged  3 months 25 days</p>
            <p class="zantepara">In the memory of the infant of Cp<span class="sup">t</span>......... and Isabella his wife</p>
            <div class="buttonHolder">
                <button onClick="window.location='http://www.c5d.co.uk/zantecemeteryindex.php'">Back to the Index</button>
            </div>
        </div>
    </div>
    <p class="copy">&copy;C5D-Certificates</p>
    </body>
    </html>
    Notice that I put the adverts into div.clearfloats and made the appropriate adjustment in the css. It's commented.
    Fixed several stray tags. Plus, the meta charset line was wrong... left over from HTML4 maybe?

    Hope this helps.

  10. #10
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, all the 36 zante pages are done.


    I like the idea of putting the ads in that clear float div. If I were to use that on the other sections of the site it would remove the need for all the style item classes with padding-top:80 px; etc ?

    Am I correct ?

    Antony

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by certificates View Post
    I like the idea of putting the ads in that clear float div. If I were to use that on the other sections of the site it would remove the need for all the style item classes with padding-top:80 px; etc ?

    Am I correct ?

    Antony
    Essentially, yes.
    IF NO additional padding is desired, THEN your conclusion is correct.

    IF a consistent amount of additional space between the bottom of the adverts and the next sentence is desired (10px for example),
    THEN you can add the desired padding to the bottom of div.clearfloats and thereby not need to add any padding to that first paragraph. (and probably eliminate several classes )

    To do that add the following css:
    Code:
    .clearfloats {padding-bottom:10px;}    /* whatever amount of space is desired */

  12. #12
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for confirming.

    I'll try it out. I have a very busy couple of days ahead with work, so may not be about. I shan't be ignoring you

    Antony

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    First, delete padding-top from p.keftext:

    kefstyle.css - Line 56
    Code:
    p.keftext{text-align:center; padding-top: 120px}
    Then, add the missing } brace in the css:

    kefstyle.css - Line 119
    Code:
    .kefalonia p + p {
        padding-left:50px;       /* padding-left visually separates "columns" */
    }        /* THIS CLOSING BRACE IS MISSING */
    Finally, add above the .clearfloats styles:
    Code:
    .clearfloats {
        padding-bottom:10px;
    }
    That should fix it.

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    hurstpages.php

    Cut the following lines of text (INCLUDING the comment lines).
    Code:
    <!--START ancestry 14 day free trial advertisement -->
            <div id="advert1">
                <a href="http://www.jdoqocy.com/click-5433512-10520381" target="_top">
                    <img src="http://www.awltovhc.com/image-5433512-10520381" width="264" height="60" alt="264x60: I am your Nan">
                </a>
            </div>
    <!--START MERCHANT:merchant name Find My Past from affiliatewindow.com -->
            <div id="advert2">
                <a href="http://www.awin1.com/cread.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588">
                    <img src="http://www.awin1.com/cshow.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588" width="264" height="60" alt="264x60">
                </a>
            </div>
    <!-- START CONTENT -->
    Replace them with (INCLUDING the comment lines).
    Code:
    <!-- START FMP & Ancestry adverts -->
            <div class="clearfloats"> <!-- adverts container (optional?) -->
                <div id="advert1">
                    <a href="http://www.jdoqocy.com/click-5433512-10520381">
                        <img src="http://www.awltovhc.com/image-5433512-10520381" width="264" height="60" alt="264x60: I am your Nan">
                    </a>
                </div>
                <div id="advert2">
                    <a href="http://www.awin1.com/cread.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588">
                        <img src="http://www.awin1.com/cshow.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588" width="264" height="60" alt="264x60">
                    </a>
                </div>
            </div>
    <!-- END FMP & Ancestry adverts -->


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •