BYYB Forums

*** Warning *** Technical geeky web site discussion follows ...

Ok,

First, I was looking for some sort of "contact the web master" link on the BYYB web site and I can't find one anywhere.  The closest thing I could find was a "report to moderator" link while reading a post, and I couldn't report myself, and the text field was too small anyway.  I also could not be sure from the member list which one of the many Administrators listed actually performed work on the website. So I decided to post this here.

And now, on to the main event ...

I ended up on the main byyb page by accident, and noticed the homepage looked different (and better) than the last time I was there.

But I do have some CSS style nits to pick.  The two images on the home page have been floated left and right to the edges of the containing division and the text has been allowed to wrap around the images.  However, no allowances have been made for margins on the images with the result that the text flows right up against the photos.  I personally think this looks sloppy and makes the text harder to read and the page looks "lubberly" to me.

For example, the image on the right is specified as ...

<img class="alignright size-medium wp-image-17" title="normal_bowsplash1" src="http://www.byyb.org/wp-content/uploads/normal_bowsplash1-213x300.jpg" alt="normal_bowsplash1" />

... where the css styles named alignright, size-medium, and wp-image-17 affect how the image is displayed.

The main page style sheet is ...

<link rel="stylesheet" type="text/css" href="http://www.byyb.org/wp-content/themes/simplewp/style.css" />

which contains ...

.alignleft {
float: left;
}
.alignright {
float: right;
}
.alignleft a, .alignright a {
color: #fff;
}

... but does not contain any references to size-medium or wp-image-17, which are either hidden somewhere else that I have missed, or they are left over artifacts from repeated editing of the web page in wordpress.

I think you will like the results if you add the following code to your style sheet ...

.alignleft img {
margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 0em;
}

.alignright img {
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 1em;
}

... as the text will maintain some distance from the image, and the size of the margin will scale with the text.

Alternatively, you could probably add ...

.wp-image-17 img { margin: 1em 0em 1em 1em; }

and achieve the same results.

I expect that this post will be deleted after it has been read by the appropriate administrators, as the only intended audience is the web master(s) who maintain the site.

And just to be clear ... I do like the web site.

Cheers,
Tom

Hi Tom,

The site was using Website Baker, a CMS that held some promise but proved to be unstable.  An upgrade corrupted the database and without a database for a CMS ... well, you know.  So I did quickly adapt a WordPress "simple" theme to imitate the look and feel of the old site.  WordPress is much easier for rotating administrators to update now that they have a one-button update procedure in the Admin section.

Since the mad scramble to resurrect the site, I haven't had a chance to return and tweak much.
I added a "margin: 1em 1em 1em 0;" and "margin: 1em 0 1em 1em;" to the alignleft and alignright CSS declarations, and I think it does look better.

Thanks for your detailed recommendations!