DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 03-23-2006, 05:02 PM   #1
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Another site review

http://www.19121.com/index.htm is now closer to my final design. Please check out the links "About Us" and "Activities" for me. "Activities" probably represents the closest page to my final design.

I would especially appreciate anyone who can check the navigation out in Netscape 4, and in any browser on the Mac.
dthomsen8 is offline   Reply With Quote
Old 03-23-2006, 05:43 PM   #2
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Dave,

First of all, move all the CSS to a single file rather than define it on each page. Unless it's a custom style for one page, if you ever want to change something the beauty of CSS is that you only have to change it on the CSS file, not every file on the page.

I didn't look at the code closely so not sure if you nav is in the @import or not, but in Netscape 4 most of your CSS disappears. That's likely because it's in the @import file or your using CSS that N4 can't use.

Forum won't let me upload an image for some reason; it's only 22kb. Mostly it shows your site minus 80% of the CSS in N4, though. But I wouldn't worry too much about that. We're finally not worrying about it at work and your content is still visible.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 03-24-2006, 05:20 AM   #3
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Move to external style sheets

Quote:
Originally Posted by dacoyle
Dave,

First of all, move all the CSS to a single file rather than define it on each page. Unless it's a custom style for one page, if you ever want to change something the beauty of CSS is that you only have to change it on the CSS file, not every file on the page.

I didn't look at the code closely so not sure if you nav is in the @import or not, but in Netscape 4 most of your CSS disappears. That's likely because it's in the @import file or your using CSS that N4 can't use.

Forum won't let me upload an image for some reason; it's only 22kb. Mostly it shows your site minus 80% of the CSS in N4, though. But I wouldn't worry too much about that. We're finally not worrying about it at work and your content is still visible.
My problem is that every time I try to move the <style> ... </style> stuff from the HTML to an external style sheet, the styling doesn't work. I don't quite understand the weight given to each style source, and whehter the source (HTML or linked external) is significant. I do know that the order is important. In the code below, I would expect the second.css to outweigh the first.css, but what about the style for the <p> tag in the HTML in between?

Code:
 
<link rel="stylesheet" type="text/css" media="screen" href="first.css">
<style> 
p {font-size: 1em; font-family: Georgia, serif; color: black; text-align: left;}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="second.css">
Anyway, I will continue to read my Bos & Lie book, and try to make it work. I don't think that placing all the styling in a single external style sheet will work out for both the navigation and the page layout styling.
dthomsen8 is offline   Reply With Quote
Old 03-24-2006, 05:45 AM   #4
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
In the code below, I would expect the second.css to outweigh the first.css, but what about the style for the <p> tag in the HTML in between?

Code:
 
<link rel="stylesheet" type="text/css" media="screen" href="first.css">
<style> 
p {font-size: 1em; font-family: Georgia, serif; color: black; text-align: left;}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="second.css">
If first.css has any properties for p, they are overridden by the second stylesheet with the p rule; any rules/properties in second.css override whatever comes before.

Do yourself a favor and start with only a single, linked stylesheet; having three different "sources" for your styles is needlessly complicating matters. That includes the conditional stylesheets for IE (for which you stil lhavenb't explained the need). Start simple!

Quote:
Originally Posted by dthomsen8
I don't think that placing all the styling in a single external style sheet will work out for both the navigation and the page layout styling.
I'm sure it will work.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 03-24-2006, 06:13 AM   #5
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by dthomsen8
http://www.19121.com/index.htm is now closer to my final design. Please check out the links "About Us" and "Activities" for me. "Activities" probably represents the closest page to my final design.

I would especially appreciate anyone who can check the navigation out in Netscape 4, and in any browser on the Mac.
Do you mean to have the header on the Activities page different from the others (no text)?

And the word Activities is indented about 5px more than the P and subhead text below.

Navigation seems to work fine in Mac Firefox, Safari, and Opera 8.02, and it looks the same in all those.

I find it odd to have the detailed description of the links down below the list, though I’m not sure what you could or should do about it: Place the information in title so it appears on hover? Have a flyout menu on the main item? Or just include it in the button?

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 03-24-2006, 08:48 AM   #6
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Lots of ideas here

Quote:
Originally Posted by ktinkel
Do you mean to have the header on the Activities page different from the others (no text)?

And the word Activities is indented about 5px more than the P and subhead text below.

Navigation seems to work fine in Mac Firefox, Safari, and Opera 8.02, and it looks the same in all those.

I find it odd to have the detailed description of the links down below the list, though I’m not sure what you could or should do about it: Place the information in title so it appears on hover? Have a flyout menu on the main item? Or just include it in the button?
Lots of ideas and questions here, just what I expect. My objective is to use CSS for both navigation and for layout, as well as the usual typographical specifications.

The Activities page is now almost what I want for every page. The indenting for the word Activities and the subhead below it should be the same as the indenting for the text below it. I just have to adjust the styling to make that happen.

Once I have the Activities page looking just right (to me, anyway), then I would want to move most of the styling to external style sheets. Then I will be able to make individual pages all look the same, and the content will be separate from the styling. My past attempts to move the styling to an external style sheet have not worked.

I am glad to hear that the Mac Firefox and Safari navigation and styling work the same. Thank you for doing the testing.

The detailed description of the links is what makes the graphical buttons with the red row house and the grass appear along with the text as navigation buttons, including the visited, active and hover effects. The text appears in the <a> tag html, so it is easily changed for each page.
dthomsen8 is offline   Reply With Quote
Old 03-24-2006, 10:19 AM   #7
gary
Member
 
Join Date: Dec 2004
Location: In the heart of Lake Minnetonka
Posts: 337
Default

Quote:
Originally Posted by dthomsen8
My problem is that every time I try to move the <style> ... </style> stuff from the HTML to an external style sheet
That's the problem - do NOT include the <style>...</style> as part of the CSS doc, i.e.
HTML Code:
<link rel=stylesheet type="text/css" href="common.css">
and common.css contains only
Code:
body { padding-right: 0px; ...; }
...
#header img { float: left; }
(i.e., no style tags). Note that adding the final semicolon in each style will avoid later errors when you add additional features to a style.
gary is offline   Reply With Quote
Old 03-24-2006, 04:26 PM   #8
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Two CSS files, w/wo hacks

Quote:
Originally Posted by dacoyle
Dave,

First of all, move all the CSS to a single file rather than define it on each page. Unless it's a custom style for one page, if you ever want to change something the beauty of CSS is that you only have to change it on the CSS file, not every file on the page.

I didn't look at the code closely so not sure if you nav is in the @import or not, but in Netscape 4 most of your CSS disappears. That's likely because it's in the @import file or your using CSS that N4 can't use.

Forum won't let me upload an image for some reason; it's only 22kb. Mostly it shows your site minus 80% of the CSS in N4, though. But I wouldn't worry too much about that. We're finally not worrying about it at work and your content is still visible.
At last I seem to have achieved fully working examples, with and without the two hacks for IE 6 and IE 5.5.

www.19121.com/baseon.htm is the one with two hacks in the HTML,

www.19121.com/baseoff.htm is the one without the hacks,

so now everyone can see the effect of the hacks on the mouseover.

With the hacks on, the entire button is clickable, and the text changes regardless of where in the button the cursor points. With the hacks off in IE6, the spacing of the buttons changes, and only the text on a button is clickable, and the rest of the button does nothing.

The hacks go after the first CSS for the navigation, and before the second CSS for layout. The import is deliberate, to turn off the CSS for Netscape 4, but that is of much less importance than it once was.
dthomsen8 is offline   Reply With Quote
Old 03-25-2006, 06:21 AM   #9
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Descriptions of the Links

Quote:
Originally Posted by ktinkel
Do you mean to have the header on the Activities page different from the others (no text)?

And the word Activities is indented about 5px more than the P and subhead text below.

Navigation seems to work fine in Mac Firefox, Safari, and Opera 8.02, and it looks the same in all those.

I find it odd to have the detailed description of the links down below the list, though I’m not sure what you could or should do about it: Place the information in title so it appears on hover? Have a flyout menu on the main item? Or just include it in the button?
The style of the detailed descriptions of the links is modified to make them easier to read, dropping the word "includes" in the change. The current web site has 15 links on the home page, entirely too many, and this approach is to greatly reduce that, placing all those links in just a few categories.

The problem I have right now is how the About page and the Activities page put the buttons way further down on the side column than on the home page, even though all of them are now done from the same external CSS specifications. It works, but it looks strange.
dthomsen8 is offline   Reply With Quote
Old 03-27-2006, 06:55 AM   #10
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
At last I seem to have achieved fully working examples, with and without the two hacks for IE 6 and IE 5.5.

www.19121.com/baseon.htm is the one with two hacks in the HTML,

www.19121.com/baseoff.htm is the one without the hacks,

so now everyone can see the effect of the hacks on the mouseover.
Apart from the spacing between the "buttons" I don't see much difference between Mozilla and IE5 - without even looking at the CSS I'm pretty sure that can be solved by specifying margings and/or paddings.

Quote:
Originally Posted by dthomsen8
With the hacks on, the entire button is clickable, and the text changes regardless of where in the button the cursor points. With the hacks off in IE6, the spacing of the buttons changes, and only the text on a button is clickable, and the rest of the button does nothing.
OK, so just specify a size for the a tags. No hack needed - only a simple workaround.

Note: I didn't look at the version with the hacks - just at the one without hacks - and I'm convinced that whatever the problem is there can be solved without hacks. I find your CSS still very hard to read with three different stylesheets all specifying something for the same elements, so I gave up on that. But looking at the page in both IE5 and Mozilla I see something that should be solvable without any hacks.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
iWeb and more, review on Tidbits Daudio Web Site Building & Maintenance 8 06-17-2006 07:53 AM
Appreciate site review Webnauts Web Design 8 03-24-2006 06:35 PM
New Intel iMac review terrie Hardware & Gadgets 0 01-23-2006 03:08 PM
Macromedia Studio 8 Review Andrew B. Web Site Building & Maintenance 0 08-22-2005 08:31 PM
Excellent R1800 review terrie Hardware & Gadgets 18 04-06-2005 10:35 AM


All times are GMT -8. The time now is 12:52 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.