Should I be using padding, margins & inline?

[FONT=Verdana]I usually have to go to a bookstore and browse through several books in search of one that presents the material that I’m seeking and does so in such a way that is meaningful to me.

Yes, copying and pasting code without understanding it isn’t very educational; especially if the copied code doesn’t cause obvious problems.

I would have probably put those two columns of data on www.c5d.co.uk/1841.php in an HTML table instead of a list. The list code is invalid, anyway.

  is a fine tool for keeping words together that should not wrap separately. You understand that. Anything can be overused or misused. Most of the time, when someone uses a string of  s, they are trying to create a line of space… not a line of unbreakable space… just space. So why not put a space between pairs of  ? Takes less typing, looks less ugly, wraps at end of lines. Go figure. (not advocating, just musing.)

In your menu bar, the  s aren’t needed, they serve no purpose, period.

I’m curious to know something, please. On that page, http://www.c5d.co.uk/1861-70.php, how did so many short lines of <td> text end up taking two lines before the closing </td>? I can’t imagine how or why that happend. Do HTML editors to that on purpose?

That’s a huge amount of data. How did you ever do it? Incredible determination and patience you have.[/FONT]

I didn’t think there were any &nbsp,s on the menu bar.

Have I missed some ?

I can’t answer your question about the tables, I’m afraid. I type them all out in Exvel and convert them to HTMl via the save as web page option.

If you think there’ a hugh amount of data, then you should look at the census pages too. 1841-1911 for my locality. Not yet complete but more than half way there.

As for the two columns, everyone tells me tables are a no go unless it’s tabular like the baptism entries.

Antony

Is it possible that you are calling a different c5dmenu.php file than you intend? The menu that I see if full of " "s and does not contain the flyout menu in the first drop-down item.

Ahhh, data exported from Excel as a web page. That explains it. Thanks.

“Everyone”? That’s funny. I see a small, two column matrix. It could have come from an Excel spreadsheet. It can be coded quite efficiently with an HTML table. Positioning list items is certainly doable, but not as efficient. However, the present list code is just plain broken no matter whose camp you follow.

NOTHING about your page is as “broken” as the links. Your page has been designed to look like a printed page. The trouble with that is that printed pages do not contain hyperlinks. At this time, a user is obligated to mouse over everything on your page, images and print, in an effort to discover whether or not any links exist on the page. THERE ARE NO CLUES. Your design does not consider the classic web page user who expects links to look distinct. THAT is a BAD thing. Your site has hundreds of pages, some of which contain a huge amount of information. As a user, I would be frustrated after viewing the first two or three pages because of the difficulty of identifying links.

Since inception, HTML has had default link behaviors built in… no css modifications necessary. Those default behaviors include colors and underline. Those are behaviors that people have been trained to expect from web pages since HTML was introduced. CSS gives us the power to alter the user experience. Unfortunately for users, some of today’s designs depart from those anchor expectations a bit too far and are difficult to navigate. Your site is “difficult to navigate” because the links are hidden within the text. Underlines on non-link text further obscure the links. That’s just how it is. The “look” that you like is not the “look and feel” that works best for the users.

I have uploaded the c5ddropdownmenu again.

Are you still seeing the   ? When I look at the source now in Chrome it looks fine

Antony

I opened the homepage in Opera and did a hard reload in Firefox. The results of both are the same.

I still see the " "s in the menubar code and the flyout is still missing.

Are you sure the php include is calling the correct file?
<?php include $_SERVER[“DOCUMENT_ROOT”] . “/c5dincludes/c5dmenu.php”; ?>

Seems to be OK now.

I have just refreshed the folder and it has an up to date file there

Yep, ya fixed it. Has the name of the menu source file changed from c5dmenu.php to something else?

Okaaaayy, List Items it is for the 1841 Census of Hurst.

I like things to center automatically, use minimal classes and targeted css. See what you think.


.center {                    /* center-align any paragraph */
    text-align:center;
}
.census1841 {                /* ul - list of districts for 1841 - replaces ED, ED1q, ED3 */
    list-style-type:none;
    display:table;
    padding:0;
    margin:0 auto;
}
.census1841 li {
    display:table-row;
    text-align:left;
    padding:0;
    margin:0;
}
.census1841 p {
    display:table-cell;
    text-align:left;
    padding:3px 50px 3px 0;  /* padding-right separates columns */
}
.census1841 li a {
    display:table-cell;
}
.dlinks {                    /* replaces .kellys and .kellys2 - the last paragraph with the directory links */
    text-align:center;
}
.dlinks span,
.dlinks a {
    display:inline-block;
    padding:0 10px;
}


<!DOCTYPE html> 
<html lang="en">
<head>
    <title>The 1841 Census of Hurst</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://www.c5d.co.uk/censusstyle.css" type="text/css" media="screen">
    <link rel="stylesheet" href="census1841a.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>
        <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="234x60: 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>
<!--END MERCHANT:merchant name Find My Past from affiliatewindow.com-->
        <p class="censustext">This page is entirely for the 1841 census of Hurst and its surrounding districts.</p>
        <p class="center">For the relevant Enumeration District from 1841 click on the link below.</p>
        <ul class="census1841">
            <li><p>Enumeration District 1</p><a href="http://www.c5d.co.uk/description1841ed1.php">Rassbottom</a></li>
            <li><p>Enumeration District 2</p><a href="http://www.c5d.co.uk/description1841ed2.php">Waterloo St &amp; Stalybridge Centre</a></li>
            <li><p>Enumeration District 3</p><a href="http://www.c5d.co.uk/description1841ed3.php">Stalybridge Town Centre</a></li>
            <li><p>Enumeration District 4</p><a href="http://www.c5d.co.uk/description1841ed4.php">Stamford Street &amp; Wakefield Road</a></li>
            <li><p>Enumeration District 5</p><a href="http://www.c5d.co.uk/description1841ed5.php">Cocker Hill</a></li>
            <li><p>Enumeration District 6</p><a href="http://www.c5d.co.uk/description1841ed6.php">Ridge Hill</a></li>
            <li><p>Enumeration District 7</p><a href="http://www.c5d.co.uk/description1841ed7.php">Sour Acre &amp; Heyrod</a></li>
            <li><p>Enumeration District 8</p><a href="http://www.c5d.co.uk/description1841ed8.php">Scout Mill &amp; Mossley</a></li>
            <li><p>Enumeration District 9</p><a href="http://www.c5d.co.uk/description1841ed9.php">Mossley</a></li>
            <li><p>Enumeration District 10</p><a href="http://www.c5d.co.uk/description1841ed10.php">Hartshead Pike</a></li>
            <li><p>Enumeration District 11</p><a href="http://www.c5d.co.uk/description1841ed11.php">Greenhurst &amp; Hurst Nook</a></li>
            <li><p>Enumeration District 12</p><a href="http://www.c5d.co.uk/description1841ed12.php">Hurst Cross &amp; Higher Hurst</a></li>
            <li><p>Enumeration District 13</p><a href="http://www.c5d.co.uk/description1841ed13.php">Luzley &amp; Hazlehurst</a></li>
            <li><p>Enumeration District 14</p><a href="http://www.c5d.co.uk/description1841ed14.php">Smallshaw &amp; Wilshaw</a></li>
            <li><p>Enumeration District 15</p><a href="http://www.c5d.co.uk/description1841ed15.php">Hurst Brook</a></li>
            <li><p>The Workhouse</p><a href="http://www.c5d.co.uk/descriptionworkhouse1841.php">Union Workhouse</a></li>
        </ul>
        <p class="center">Also included here are the Kelly's Directory Entries for Hurst from 1905 and 1918.</p>
        <p class="dlinks"><span>To view them, please click the relevant link:</span>
            <a href="http://www.c5d.co.uk/kellyshurst.php">Kelly's Hurst 1905</a>
            <a href="http://www.c5d.co.uk/kellyshurst1918.php">Kelly's Hurst 1918</a>
        </p>
<!--webbot bot="phpLMarkup" startspan -->
        <div class="buttonHolder">
            <button onClick="window.location='http://www.c5d.co.uk/hurstpages.php'">Return to the Hurst Pages</button></div>
        </div>
    </div>
    <p class="copy">&copy;C5D-Certificates</p>
</body>
</html>

OK I’ll try it tonight

Work beckons now !

Antony

Antony, in the previous example, other than deleting the classes assigned to the list items, the list code is intact. That was the purpose of that example. Same HTML, different (simpler) css, improved behavior. With one little exception… the clickable area of the anchors extends outside of the text to the full width of the “column”. Not necessarily undesirable, but not what you started with.

This example adds a div container around each anchor so they all will behave exactly as your original design.


.center {                    /* center-align any paragraph */
    text-align:center;
}
.census1841 {                /* ul - list of districts for 1841 - replaces ED, ED1q, ED3 */
    list-style-type:none;
    display:table;
    padding:0;
    margin:0 auto;
}
.census1841 li {
    display:table-row;
    text-align:left;
    padding:0;
    margin:0;
}
.census1841 p {
    display:table-cell;
    text-align:left;
    padding:3px 50px 3px 0;  /* padding-right visually separates "columns" */
}
.census1841 div {
    display:table-cell;
}
.dlinks {                    /* replaces .kellys and .kellys2 - the last paragraph with the directory links */
    text-align:center;
}
.dlinks a {
    display:inline-block;
    margin-left:20px;
}


<!DOCTYPE html> 
<html lang="en">
<head>
    <title>The 1841 Census of Hurst</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://www.c5d.co.uk/censusstyle.css" type="text/css" media="screen">
    <link rel="stylesheet" href="census1841b.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>
        <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="234x60: 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>
<!--END MERCHANT:merchant name Find My Past from affiliatewindow.com-->
        <p class="censustext">This page is entirely for the 1841 census of Hurst and its surrounding districts.</p>
        <p class="center">For the relevant Enumeration District from 1841 click on the link below.</p>
        <ul class="census1841">
            <li><p>Enumeration District 1</p><div><a href="http://www.c5d.co.uk/description1841ed1.php">Rassbottom</a></div></li>
            <li><p>Enumeration District 2</p><div><a href="http://www.c5d.co.uk/description1841ed2.php">Waterloo St &amp; Stalybridge Centre</a></div></li>
            <li><p>Enumeration District 3</p><div><a href="http://www.c5d.co.uk/description1841ed3.php">Stalybridge Town Centre</a></div></li>
            <li><p>Enumeration District 4</p><div><a href="http://www.c5d.co.uk/description1841ed4.php">Stamford Street &amp; Wakefield Road</a></div></li>
            <li><p>Enumeration District 5</p><div><a href="http://www.c5d.co.uk/description1841ed5.php">Cocker Hill</a></div></li>
            <li><p>Enumeration District 6</p><div><a href="http://www.c5d.co.uk/description1841ed6.php">Ridge Hill</a></div></li>
            <li><p>Enumeration District 7</p><div><a href="http://www.c5d.co.uk/description1841ed7.php">Sour Acre &amp; Heyrod</a></div></li>
            <li><p>Enumeration District 8</p><div><a href="http://www.c5d.co.uk/description1841ed8.php">Scout Mill &amp; Mossley</a></div></li>
            <li><p>Enumeration District 9</p><div><a href="http://www.c5d.co.uk/description1841ed9.php">Mossley</a></div></li>
            <li><p>Enumeration District 10</p><div><a href="http://www.c5d.co.uk/description1841ed10.php">Hartshead Pike</a></div></li>
            <li><p>Enumeration District 11</p><div><a href="http://www.c5d.co.uk/description1841ed11.php">Greenhurst &amp; Hurst Nook</a></div></li>
            <li><p>Enumeration District 12</p><div><a href="http://www.c5d.co.uk/description1841ed12.php">Hurst Cross &amp; Higher Hurst</a></div></li>
            <li><p>Enumeration District 13</p><div><a href="http://www.c5d.co.uk/description1841ed13.php">Luzley &amp; Hazlehurst</a></div></li>
            <li><p>Enumeration District 14</p><div><a href="http://www.c5d.co.uk/description1841ed14.php">Smallshaw &amp; Wilshaw</a></div></li>
            <li><p>Enumeration District 15</p><div><a href="http://www.c5d.co.uk/description1841ed15.php">Hurst Brook</a></div></li>
            <li><p>The Workhouse</p><div><a href="http://www.c5d.co.uk/descriptionworkhouse1841.php">Union Workhouse</a></div></li>
        </ul>
        <p class="center">Also included here are the Kelly's Directory Entries for Hurst from 1905 and 1918.</p>
        <p class="dlinks">To view them, please click the relevant link:
            <a href="http://www.c5d.co.uk/kellyshurst.php">Kelly's Hurst 1905</a>
            <a href="http://www.c5d.co.uk/kellyshurst1918.php">Kelly's Hurst 1918</a>
        </p>
<!--webbot bot="phpLMarkup" startspan -->
        <div class="buttonHolder">
            <button onClick="window.location='http://www.c5d.co.uk/hurstpages.php'">Return to the Hurst Pages</button></div>
        </div>
    </div>
    <p class="copy">&copy;C5D-Certificates</p>
</body>
</html>

Antony, the last list item on 1841.php is missing an opening <div>


<li><p>The Workhouse</p>[COLOR="#0000FF"]<div>[/COLOR]<a href="http://www.c5d.co.uk/descriptionworkhouse1841.php">Union Workhouse</a></div></li>

Also, these <span> tags can be deleted. They are unnecessary.


[COLOR="#FF0000"]<span>[/COLOR]To view them, please click the relevant link:[COLOR="#FF0000"]</span>[/COLOR]

Finally: the stylesheet link at the top of the page can be deleted. It was my test link and is unnecessary now.


    [COLOR="#FF0000"]<link rel="stylesheet" href="census1841b.css" type="text/css" media="screen">[/COLOR]

Thanks as ever for this lot.

It has worked well for all 9 pages, except the last one www.c5d.co.uk/1811.php.

Which bit of the CSS centres the lines. I have tried looking at all of the CSS you provided and trying various combinations but the pargraphs stubbornly stick to the left

Antony

Follow this very carefully because it is really tricky.

First, delete all 3 of the new things on the css sheet that pertain to census1811.

Second, make the following change:


[COLOR="#0000FF"].census1811,      /* add this line exactly, including the comma */[/COLOR]
.census1841 {                /* ul - list of districts for 1841 - replaces ED, ED1q, ED3 */
    list-style-type:none;
    display:table;
    padding:0;
    margin:0 auto;
}

Third, enjoy a cup of tea. :slight_smile:

One more thing…

Remember that pesky stray <p> tag that’s been following you around? Well, it’s baaaaak.


[COLOR="#FF0000"][s]<p>[/s][/COLOR]<p class="one">There is another way. ......

It seems to be annoyingly resilient. :slight_smile:

I thought that by specifying it seperately it would do the same thing, which I had done, but by doing what you suggest it doesn’t quite do what I want it to do because the line spacing is different.

However now that I know which one centres the paragraph, this is what I have done and it works fine

.census1811 { /*centres the para & specifies the line space */
list-style-type:none;
display:table;
padding:0;
margin:0 auto;line-height:25px;
}

Now I can have that coffee

Antony

I think that the additional <p> has gone for good now. How do you spot them ? A trained eye ? A program ? Only everything does validate OK

Antony

Antony, please revert to my recommendation:

Insert that one line.

AND ADD below everything else:


.census1811 li {
    line-height:25px;
}

OK, done.

Thanks

Antony

Just when I thought it was fine, I have come across a browser incompatability problem.

If you look at the drop down menus in IE and firefox, then some of the appear to be cut off at the bottom. Can you give me a clue how to resolve this ?

It works fine in Chrome

Antony

Which page has the problem, Antony? The drop-down menus work OK for me in Firefox, IE8 and Chrome. Nothing is being cut off.