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.
Help in critiquing website
69 posts
• Page 4 of 5 • 1, 2, 3, 4, 5
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
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
- John Zeman
- Rank III - Intermediate
- Posts: 56
- Joined: Sat Dec 11, 2004 3:17 pm
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.
Besides my webpage, I'm trying to get snaggs.gif off the ground.
- Cheyenne
- Rank III - Intermediate
- Posts: 87
- Joined: Wed Sep 20, 2006 1:57 pm
- Location: CA
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
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
- John Zeman
- Rank III - Intermediate
- Posts: 56
- Joined: Sat Dec 11, 2004 3:17 pm
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:
So, I'll eliminate it and put a couple of <br> in and lets see what happens.
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:
This information was provided by the person who created the page. You know, the sites that have premade "pages".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?
So, I'll eliminate it and put a couple of <br> in and lets see what happens.
- Cheyenne
- Rank III - Intermediate
- Posts: 87
- Joined: Wed Sep 20, 2006 1:57 pm
- Location: CA
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.
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
<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.
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
- John Zeman
- Rank III - Intermediate
- Posts: 56
- Joined: Sat Dec 11, 2004 3:17 pm
hspace & vspace
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??
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??
- Cheyenne
- Rank III - Intermediate
- Posts: 87
- Joined: Wed Sep 20, 2006 1:57 pm
- Location: CA
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.)
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.)
-
MikeGale - Rank VI - Professional
- Posts: 612
- Joined: Mon Dec 13, 2004 2:50 pm
- Location: Tannhauser Gate
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.
-
CaryD - Rank II - Novice
- Posts: 46
- Joined: Sun Oct 01, 2006 2:18 pm
- Location: CA
Re: hspace & vspace
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.
-
CaryD - Rank II - Novice
- Posts: 46
- Joined: Sun Oct 01, 2006 2:18 pm
- Location: CA
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.
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.
- Cheyenne
- Rank III - Intermediate
- Posts: 87
- Joined: Wed Sep 20, 2006 1:57 pm
- Location: CA
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
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
-
CaryD - Rank II - Novice
- Posts: 46
- Joined: Sun Oct 01, 2006 2:18 pm
- Location: CA
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.
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.
- Cheyenne
- Rank III - Intermediate
- Posts: 87
- Joined: Wed Sep 20, 2006 1:57 pm
- Location: CA
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.
-
CaryD - Rank II - Novice
- Posts: 46
- Joined: Sun Oct 01, 2006 2:18 pm
- Location: CA
69 posts
• Page 4 of 5 • 1, 2, 3, 4, 5
Return to General Web Development
Who is online
Users browsing this forum: No registered users and 2 guests