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 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.
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.
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…
Second, I can think of no useful reason for the <p> </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:
.kefalonia p { /* controls the listings in the index and thee graves with several names */
display:table-cell;
text-align:left;
[color=red][s]padding:3px 20px 3px 0; /* padding-right visually separates "columns" */[/s][/color]
}
[color=red][s].kefalonia div {
display:table-cell;
}[/s][/color]
To:
.kefalonia p { /* controls the listings in the index and thee graves with several names */
display:table-cell;
text-align:left;
[color=blue]padding:3px 0px;[/color]
}
[color=blue].kefalonia p + p {
padding-left:50px; /* padding-left visually separates "columns" */
}[/color]
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!
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?
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 ?
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:
.clearfloats {padding-bottom:10px;} /* whatever amount of space is desired */
