Help in critiquing website

Post here if your message doesn't fit into another forum but is still about web development. Includes site critiques, web hosting and server questions, helpful software and resources, and more.
Cheyenne
Rank III - Intermediate
Rank III - Intermediate
Posts: 87
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne » Mon Apr 02, 2007 7:06 pm

John,
Red the information you suggested. Helped a bit. But, what is a Clip? and @?

Also, the stylesheet you use, I printed out.

When you check out my website, www.cableguymom.com. can you do it in Firefox or Netscape, please. My links in IE look ok. In Firefox and Netscape, some of the link font is "outside the box". I don't know what to look for in my Css to change.

John Zeman
Rank III - Intermediate
Rank III - Intermediate
Posts: 56
Joined: Sat Dec 11, 2004 2:17 pm

Post by John Zeman » Tue Apr 03, 2007 9:18 pm

Cheyenne I did a double take when I read your question of "What is a clip?" For to me a clip is the name of the very familiar to me programming language of my preferred text editor NoteTab Pro. So at first I thought I must have inadvertently mentioned that in one of my previous posts but now I realize you were referring to clip as to what it means in CSS.

Well first off, I've never really used clip in CSS but my understanding of it is it allows us to only show a portion of a box, for example an image. Kind of like doing a crop without actually doing a crop if that makes any sense. Since I've never had a need to do such a thing on a web page I've never really explored the possibilities of clip in css.

Likewise with @ as what I don't know about it far outweighs what I do know. My understanding of it is it's primarily used when you embed your CSS within your html documents. Since I almost never do that, preferring external stylesheets instead, I have very little experience with it.

I half expect someone else here to correct me on the above as these are areas of CSS I've never had reason to explore before.

In regards to your web site I do have it bookmarked, but due to a very tight work schedule right now I really haven't looked at it yet. I will though. :)

John

Cheyenne
Rank III - Intermediate
Rank III - Intermediate
Posts: 87
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne » Tue Apr 03, 2007 9:39 pm

Thank you for your explanations. Look at my site as you have time. It is a project that will be ongoing for a long time - as time permits.

Besides my webpage, I'm trying to get snaggs.gif off the ground.

John Zeman
Rank III - Intermediate
Rank III - Intermediate
Posts: 56
Joined: Sat Dec 11, 2004 2:17 pm

Post by John Zeman » Sat Apr 07, 2007 3:00 pm

Hi Jeanne,

I finally found a little free time to peek at your http://www.cableguymom.com/ web site, here's some initial thoughts on it.

Perhaps it's intentional on your part but the first thing I noticed was the slow loading time of the page. Traced that to the photographs which look like they may be full sized as they came out of the camera. Again though, you may have wanted them that way. FWIW if it were me, I would reduce the original photos down using the Photoshop, PaintShop Pro or whatever graphics program you use, saving them as JPGs with medium compression. Then if you want the full sized photos available you could make the reduced sized ones on the page clickable, where a click on a small photo would open the full size image.

Also on my 1680 pixel wide screen, one of your sentences looks too wide. So you may want to insert another <BR> or two into the text so some of the lines don't get too wide. Actually if it were me I'd enclose it all in a set width DIV that's centered, then the word wrapping would be automatic.

You might want to bump up the 0 pixel margin setting for the <body> in your CSS as some of the text/graphics butts right up against the edge of the screen.

And near the opening <body> tag you have this:

<div class="page"> </div>
<div class="page-header">
</div>

I'm not sure why you have those two empty DIVs, as spacers perhaps?

I viewed your web site with Firefox 2.0.0.3

John

Cheyenne
Rank III - Intermediate
Rank III - Intermediate
Posts: 87
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne » Sat Apr 14, 2007 1:53 pm

John:
I haven't forgotten about you message. Things have been kinda hectic here and I haven't been able to get to my web page for over a week.

Your question to me:
And near the opening <body> tag you have this:

<div> </div>
<div>
</div>

I'm not sure why you have those two empty DIVs, as spacers perhaps?
This information was provided by the person who created the page. You know, the sites that have premade "pages".
So, I'll eliminate it and put a couple of <br> in and lets see what happens.

Cheyenne
Rank III - Intermediate
Rank III - Intermediate
Posts: 87
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne » Sat Apr 14, 2007 2:20 pm

John: It does belong in there. It's my Name. Perhaps I need to put it in the CSS?

John Zeman
Rank III - Intermediate
Rank III - Intermediate
Posts: 56
Joined: Sat Dec 11, 2004 2:17 pm

Post by John Zeman » Tue Apr 17, 2007 4:55 pm

Ok I see what you did there with those seemingly empty DIV tags Jeanne. You're only using it to display the rectangular graphic of your name as a background image for the div. If it were me I'd just display the graphic as an image in my HTML, perhaps centering it in a div element.

<div align="center">
<img src="Apache/images/je5blanktitle.jpg" width="514" height="226" alt="" title="">
</div>

(The above would not work in a strict document but you're using a transitional one so it should be ok)

I can certainly relate to your being exceptionally busy lately. I'm running down the home stetch of finishing a web site I've been building since mid February and I've got a deadline to meet. It has to be uploaded by late next Saturday night because when the Sunday papers come out the following morning there are going to be 525,000 ad inserts in those papers touting this new web site. :shock:

Of course no one bothered to tell me that was going to happen until about a week ago. lol So as you might imagine I've been in overdrive wrapping this project up and am finally just about done with it.

John

Cheyenne
Rank III - Intermediate
Rank III - Intermediate
Posts: 87
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

hspace & vspace

Post by Cheyenne » Tue Jul 03, 2007 6:37 pm

www.cableguymom.com/snaggs.gif.html
As you can see, I'm posting snaggs for other to use. (So far, I've had permission to do this)
As you can see by going into Source, that I have been making space between the snaggs so they don't look all bunched together. I do so by hspace="20" inside the img src brackets.

If the snagg needs to be more centered because of its design, I use vspace="a certain number".

There Has to be an easier way than typing the command each time. Is there a such a command??

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 704
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Post by MikeGale » Wed Jul 04, 2007 3:51 pm

You could try using a specialised CSS for the spacing.

The large number of images presumably makes this a very heavy page. That could cause problems for dial up users. (Not sure how many of those are left, but presumably a lot in some countries.)

User avatar
CaryD
Rank II - Novice
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Post by CaryD » Wed Jul 04, 2007 4:43 pm

MikeGale wrote:The large number of images presumably makes this a very heavy page.
Good point. I noticed the 11owlupsidedown.jpg was 2MB. A thumbnail linked to the full size image would be much better.

User avatar
CaryD
Rank II - Novice
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Re: hspace & vspace

Post by CaryD » Wed Jul 04, 2007 5:36 pm

Cheyenne wrote:As you can see by going into Source, that I have been making space between the snaggs so they don't look all bunched together. I do so by hspace="20" inside the img src brackets.

If the snagg needs to be more centered because of its design, I use vspace="a certain number".

There Has to be an easier way than typing the command each time. Is there a such a command??
Here's something you can try. I took this from your photos page and removed the border, hspace and vspace stuff.

Code: Select all

<p>
<img src="animated/11forestfire.jpg" width="300" height="185">
<img src="animated/11froghangingonbud.jpg" width="225" height="158">
<img src="animated/11germanshepardlickingkitten.jpg" width="225" height="279">
<img src="animated/11herodog.jpg" width="213" height="213">
<img src="animated/11kittendon'tshootme.jpg" width="200" height="150">
<img src="animated/11kittensleepingyarn.jpg" width="225" height="197">
<img src="animated/11kittenunderbigdog.jpg" width="277" height="201">
<img src="animated/11moosekissingkitten.jpg" width="250" height="200">
<img src="animated/11peacockalbino.jpg" width="250" height="188">
<img src="animated/13whitewolf.jpg" width="250" height="188">
<img src="animated/13whitewolves.jpg" width="220" height="270">
<img src="animated/13wolfamongstbranches.jpg" width="250" height="188">
<img src="animated/13wolfinsnow.jpg" width="220" height="165">
<img src="animated/13wolflayinginsnow.jpg" width="250" height="165">
<img src="animated/13wolves3.jpg" width="250" height="180">
<img src="animated/15fawnandhorses1.jpg" width="225" height="149">
<img src="animated/15fawnandhorses2.jpg" width="225" height="149">
<img src="animated/15fawnandhorses3.jpg" width="225" height="149">
<img src="animated/15brownhorses2.gif" width="140" height="220">
<img src="animated/20buffalosoldier.jpg" width="180" height="193">
<img src="animated/30dreamweaver.jpg" width="200" height="267">
<img src="animated/30ladyencircledbyeagle.jpg" width="250" height="202">
<img src="animated/30ladyprofile.jpg" width="250" height="173">
<img src="animated/30ladysinglehorse.jpg" width="300" height="212">
<img src="animated/30simplicityladywhitehorse.jpg" width="200" height="200">
<img src="animated/30ladywith2horses.gif" width="200" height="199">
<img src="animated/30warriorbowandarrow.jpg" width="200" height="276">
<img src="animated/30warrioronhorse.jpg" width="240" height="240">
<img src="animated/30wolfbluedreamweaver.gif" width="240" height="233">
<img src="animated/30wolfwithfeatherinfront.jpg" width="200" height="229">
<img src="animated/40SeniorCitizenbiker.jpg" alt="Senior Citizen Biker" width="240" height="180">
</p>
You must close your headings and paragraphs since you're using strict. Even if you weren't, you really don't want the browser guessing what you had in mind.

I then added this to the style sheet:

Code: Select all

img {
	border-style: none;
	vertical-align: middle;
	margin: 10px;
}
Since the images are contained in the paragraph each "line" of the paragraph will have the same height as the tallest image in that line plus the image's top and bottom margins. Vertically aligning the images to the middle of the line will make things look nicer. Additionally, I used a 10px margin to add space between lines and to the sides of the images, but I see you might like a 20px margin now that I've reread your original post.

Cheyenne
Rank III - Intermediate
Rank III - Intermediate
Posts: 87
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne » Mon Jul 09, 2007 6:48 pm

Cary
Just picked up your post. Thank you for what you've done.

I have wanted to put a small image which the viewer could roll over and the picture/snagg becomes larger. I know that this system will let my page load faster especialy the cableguymom.com/snaggsgif.html

What is the size of a thumbnail?

I'd like the code to go on the CSS page.

I'm going to put a feedback form on my site. Kinda like a guest book. My webhost sets it up for me.

User avatar
CaryD
Rank II - Novice
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Post by CaryD » Wed Jul 11, 2007 9:00 pm

Hi Cheyenne,

A thumbnail can be any size you wish. You probably knew that, but there just are not any quick rules about it. Just use whatever size you like.

Here's something you might be interested in:

Lightbox 2

Cheyenne
Rank III - Intermediate
Rank III - Intermediate
Posts: 87
Joined: Wed Sep 20, 2006 1:57 pm
Location: CA
Contact:

Post by Cheyenne » Wed Jul 11, 2007 9:42 pm

Thank you, Cary.

Two questions: What happens if Lighthouse "closes its doors" re: updates. If Vista continues to update itself and Lighthouse doesn't, what will be the consequence.

Two: What code can I use for my snaggs so they don't take a long time to download? I have a lot more I am going to add. If that's not possible, maybe I need to make more links?

Thank you.

User avatar
CaryD
Rank II - Novice
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Post by CaryD » Wed Jul 11, 2007 11:00 pm

Cheyenne wrote:Two questions: What happens if Lighthouse "closes its doors" re: updates. If Vista continues to update itself and Lighthouse doesn't, what will be the consequence.
There shouldn't be any consequences. If you use lightbox then you'll always have your copy of the necessary code even if the website vanishes.

Compatibility between Vista and Lightbox shouldn't even be an issue. As long as the browser being used works with Vista, Lightbox and anything else that's web-based will work as well.
Cheyenne wrote:Two: What code can I use for my snaggs so they don't take a long time to download? I have a lot more I am going to add. If that's not possible, maybe I need to make more links?
I would definitely split the one page you have into several smaller pages/sub-categories to speed up page loading. Using thumbnails linking to larger images as you mentioned should help a lot in the cases of big images.

Post Reply