Designing Public Records Tables + Layout

[etidd]

I’m most certain that jenabkhan001 is another A.I. spam bot like those I have seen pop in to our previous topics, copying and pasting text from legitimate posts.

@ronpat

This poster has been developing his site for a couple of years and is pleased with the progress of his site and his growing knowledge of HTML and CSS.

Pleased is an understatement. This website is my baby :hatched_chick:, and I'm very proud of it. :relaxed: No framework. No WordPress or CMS- just a custom HTML / CSS layout, and the page load times are relatively small when compared to a lot of other sites comparable in size. Learning these skills is a lot of fun (challenging, yes), and a few of the SitePoint mentors and volunteers may have watched this site evolve over the last few years. In the future, I may even start looking for a business partner to help prepare the marketing campaigns and to write new landing pages. I have big plans for this site that I am excited about, and this Public Records section is going to fatten up very quickly.

@ronpat

Did you remove the “bgdark.gif” image from the home page intentionally? I just realized that it’s in the CSS but ‘not found’. The page looks ‘different’ without it.

Going back to the bgdark.gif issue, I have replaced that file from my backups. Given my current skill level, I may have never discovered that file was missing if it wasn’t for your discernment, ronpat. I would be up the river without a paddle. You’re a godsend to this web dev. community.

Back to this notice page, I have now styled the anchor tags to what I see as suitable, but let me know if my code can be optimized. For readability sake, I colored the anchor text as white, though I know it is conventional for links to be blue.

Do you think it will be necessary to add a bit of text that says “To proceed:”, or will most visitors understand what they have to do to go to the next page? I know I would know what to do, but just because I think it’s a good measure, I am going to add the text, “To proceed:”, just above the links.

Links markup (lines 17-22):

        <div id="agree">
            <a href="publicrecords.html">I Agree.</a>
        </div>
        <div id="back">
            <a href="index.html">Back to the Home Page.</a>
        </div>

Link styles (publicrecords1.css, lines 55-77):

/* links */
.notice a { 
	display:inline;
    margin:0 12px 10px;
	padding:5px 8px;
	color:#FFF;
}
#agree a {
	background:#090;
	border:6px ridge #063;
	font-size:2.4em;
}
#agree a:hover, #agree a:focus { background:#060; }
#agree { margin:28px 0 36px; }
#back a {
	background:#F00;
	border:6px ridge #900;
}
#back a:hover, #back a:focus { background:#900; }
.content a:hover, .content a:focus {
	color:#ccc;
	text-decoration:none;
}

I also downsized the text so that everything would hopefully fit inside a full-size window on larger devices, but this may have been a trivial change. This notice page does not need to be very long. It’s just one of those pages that the user sees as cliché (a mere formality) and clicks the “I agree.” link within just a few seconds.

Files Updated.

Stay warm. It’s cold out there.

-ty

[etidd]

About the links on the public records pages that have tables:
This may not be a big issue as I’m sure someone would have alerted me, but I see that because the links have a universal rule of display:block; that the links can be clicked on the entire block level.

That seems tacky to me, but I suppose it’s just fine. I don’t mind it at all within the tables, and if I screw around with the display:block; property, the centering and layout of all the links goes out of wack.

I added some final text on publicrecords.html about filing costs of $2 per page and a link to e-mail the admin (me) about inquiries on filing. When I added in the link to e-mail me, the link occupied its own line and broke the text until I applied the following CSS rule to the link:

(publicrecords2.css, line 93):

.content p > a { display:inline; }

I don’t know. I’m just wondering about this, too.

-ty

[ronpat]

@etidd

the links can be clicked on the entire block level

Those links can be styled:

a {
    display:inline-block;
    margin:0 auto;
}

You can use {display:inline} but it will lose any vertical padding that is applied.

[etidd]

I have followed your instruction, but have I done something wrong? The bottom link is aligned to the left, despite margin:0 auto;

a {
    display:inline-block;
    margin:0 auto;
}
/*.content p > a { display:inline; }*/

[ronpat]

No, my mistake. Long night. Treat it like an inline object. Delete the margin property (that was goofy) and apply {text-align:center} to the parent container.

On the public records notice page, I don’t think I would reduce the text that much. Personally, I thought that the default size made a bigger psychological impact.

I’ll see about a pair of buttons for you, too, if you’re interested.

[etidd]

Understood. My sleep schedule has been off since we got ice and snow on the ground in Georgia. Plus, I’m overwhelmed by everything I have to accomplish.

The links are corrected and behaving properly. Files are updated. Centering the text on the parent container means that I can do away with the other text-align:center; rules that are sprinkled throughout the CSS file.

I don’t know about fiddling with the buttons anymore. If you have a good idea, I may want to roll with it, but I’m becoming satisfied with what I put together tonight, and I’m getting tired of messing around with all of it. If you don’t think what I came up with is up to par, then please show me what might be better. The only thing I see wrong now is the visited link color of purple looks a bit weird on the anchor “buttons”.

What’s really on my mind is making sure everything is all finished on these pages, testing them for irregularities, and then consolidating the CSS. For example, publicrecords.css could contain the common / shared styles, and publicrecords1.css, 2.css, 3.css can contain the table styles and the other page-specific CSS rules.

-ty

[etidd]

Files Updated.

Well, I finished my best attempt at consolidating the CSS files for these pages. It seems to behave as expected. I’m not sure how much resources I’m actually saving the user by consolidating these pretty small CSS files, but that’s what I did.

I’ll go back and size up the notice text since you say it has a bigger impact (DONE). There’s no sense in trying to size elements for looking nice on one size of browser window (That’s never consistent.).

Also, I added in a layer of containing divs around many of the links. Hopefully, that doesn’t bloat the markup too much, but I like the links to remain neatly stacked on top of each other without that “issue” of the links being able to be accessed at the entire block level and without the links sitting horizontally next to each other (display:inline;).

Will you give it the once over and let me know if any improvements can be made?

-ty

[etidd]

One of the last orders of business HTML / CSS for the WRG website is the section pages. To view one, try clicking the “insurance” button on the drop down menus. Each of the drop down buttons leads to a different “section” page where all the drop down menu items are listed for viewers that can’t or do not wish to use the drop down menus.

I’m sure you will have a fit, ronpat, when you see the section pages’ current state. I’ll be making a new thread about those pages soon, and we will focus on the insurance section as the test page.

[ronpat]

The pages look good to me except that I think you might have gone overboard on font-size. I was not thinking of enlarging it more than the original size. It looks a good bit larger than expected now. Instead of 1.5em and the default line-height, 1.3125em and line-height:1.375; ought to look more professional.

I think your choices of buttons are aqequate. I can come up with some that look and act more like “push buttons” but yours are clear.

[etidd]

Privacy notice font size:

.content p {
    font-size:1.3125em;
	line-height:1.375em;
    text-align:center;
    margin:.75em 4%;
}

That looks great to me.

Yes, the buttons are adequate in my opinion. I think any more debating over them is too much effort for very small return.

This Public Records portion looks about complete. That didn’t take too long- just a couple of weeks. All validated. I don’t see any errors in the validator.

[ronpat]

Just an FYI detail: I wrote the line height as a unitless value. Just 1.375, not 1.375em. It probably doesn’t matter here, but the idea behind unitless line heights is that the unitless line height adapts to changes in font-size, whereas a line-height with a unit of measure doesn’t adapt if the font-size changes. Just file that away somewhere. It might be useful to know someday.

[etidd]

Done. I’ll keep unit-less line height values in mind for the next endeavor on the section pages.