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 11-27-2008, 11:20 PM   #1
BobRoosth
Member
 
Join Date: Jan 2005
Location: Los Angeles, Ca.
Posts: 933
Default Reworked Site -- Advice Needed

I have been asked to modify a web site. After a couple of minutes I decided my first step would be to redraft the template to minimize tables and explicit font calls. But keep the same site design.

The original is http://www.edar.org. The first cut at a revision is here:

http://edar.org/new/indexnew.html

The one thing I have not been able to get working is to keep the display area centered in the browser window. I thought I could do this with some attribute on the #wrapper id. But I have not found the magic bullet.

Could one one of the css gurus out there give me a nudge in the right direction?
BobRoosth is offline   Reply With Quote
Old 11-28-2008, 12:21 AM   #2
Richard Waller
Member
 
Richard Waller's Avatar
 
Join Date: Aug 2005
Location: Goring-by-Sea, West Sussex UK
Posts: 732
Default

Excellent. Good for site name and purpose, and name and address clearly shown. Small point: I don't like the change of font size halfway down.

   
__________________
Richard Waller
www.waller.co.uk
www.goring-by-sea.uk.com
Richard Waller is offline   Reply With Quote
Old 11-28-2008, 12:23 AM   #3
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

to #wrapper add:

margin-left:auto;
margin-right:auto;

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 11-28-2008, 08:19 AM   #4
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

Add to wrapper this line —

margin: 0 auto;

Or replace the 0 with whatever margin you want for top and bottom.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 11-28-2008, 06:24 PM   #5
BobRoosth
Member
 
Join Date: Jan 2005
Location: Los Angeles, Ca.
Posts: 933
Default

Bingo. Thanks. I knew it had to be something simple.
BobRoosth is offline   Reply With Quote
Old 11-29-2008, 11:40 PM   #6
BobRoosth
Member
 
Join Date: Jan 2005
Location: Los Angeles, Ca.
Posts: 933
Default

Please allow me another question or two. I have posted the entire revamped site at http://edar.org/new/

The menu starts just a few pixels above the right column material. I have not found a way to adjust the spacing. Suggestions?

The original version has a gray bar below the menu. The easiest way I could see to create it was to style the last list element of the menu to be gray with a large height. But, of course, that height is fixed and page length varies. What can I place either as the last menu element or below the navcontainer that would be automatically be the correct height?
BobRoosth is offline   Reply With Quote
Old 11-30-2008, 08:25 AM   #7
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

Why not make the nav box at left (with the menu at the top) all grey. Then give it min/max heights. If you really need white between the menu elements, then give them border-bottom: npx solid white;

Place your #content and #navcontainer divs () in a single div, then you could give the left column a height of 100%; that height would be driven by the active height of the #content box. (Then the grey would be as tall as the content, but no taller.)

Should work. Not too crude.

Cool product.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 11-30-2008, 12:27 PM   #8
BobRoosth
Member
 
Join Date: Jan 2005
Location: Los Angeles, Ca.
Posts: 933
Default

The containing DIV is already there. That seems to work, with one small issue I can't solve. There is a very thin gray line at the bottom. It has to be the underlap between #main and #content.
BobRoosth is offline   Reply With Quote
Old 11-30-2008, 01:10 PM   #9
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 BobRoosth View Post
The containing DIV is already there. That seems to work, with one small issue I can't solve. There is a very thin gray line at the bottom. It has to be the underlap between #main and #content.
I don’t see any grey line in Firefox 3.0.4. Nor in Safari 3.2. Try refreshing your screen or emptying your browser cache. Is it still there?

BTW: Do you have Firefox and its Web Developer plugin? I find it really useful for troubleshooting oddities.

I especially like the View Style Information (which gives you the line numbers of your CSS that affect the chosen object) and Display Element Information for any selected element (which provides the name and path). Its local validation modules are also useful.

(That plugin is supposedly incompatible with FF3, but even though every time I update the browser, the plugin remains and remains functional. So don’t believe everything you read.)

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 11-30-2008, 01:31 PM   #10
BobRoosth
Member
 
Join Date: Jan 2005
Location: Los Angeles, Ca.
Posts: 933
Default

Working in Windows, I see it in IE7, FF3, Opera 9 and Chrome..... Sample below. I did not have the developer tools. I do now. Still exploring what they can tell me. I particularly like the Outline tools and the one that shows the names of various elements.

Do you know any tool that will consolidate the elements of a css? I found that somehow I had two versions of #main, among others. It is very easy to have related definitions far apart in the file, making it hard to read the file and know what goes with what. DW is not particularly good about showing the issues.
Attached Thumbnails
Click image for larger version

Name:	EDAR_grayline.jpg
Views:	10
Size:	90.9 KB
ID:	1391  
BobRoosth 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
Murdered a WordPress site. Advice? ktinkel Web Site Building & Maintenance 9 05-15-2008 01:40 PM
Interesting hosting advice site ktinkel Web Site Building & Maintenance 12 03-31-2008 07:23 AM
Advice Needed on How to Begin DTP Project ss2003 Fonts & Typography 2 06-13-2007 09:19 AM
Pot Lid Advice dthomsen8 The Corner Pub 4 06-03-2007 12:58 AM
SQL Help Needed CarlSeiler Web Site Building & Maintenance 6 03-14-2007 07:41 PM


All times are GMT -8. The time now is 10:53 AM.


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