Adobe Community: Cntering imgage in DW CS 5.5

Cntering imgage in DW CS 5.5

Apr 23, 2012 10:02 AM

Latest reply: MurraySummers, Jul 3, 2012 9:22 AM

Replies

Currently Being Moderated

15. Nancy O.,

Jun 29, 2012 9:00 AM in reply to turmanc

Report

Hope your grandson is doing really well.

Centering requires CSS: either external, embedded or inline.

First things first. You need a document type on the first line of your code. Without this, your page is running in Quirks Mode which confuses browsers & centering won't work. Photoshop doesn't generate the best code.

In DW, go to Modify > Page properties > Title/encoding and choose a doc type that fits your coding skills. Recommend: HTML4 transitional.

Next, alter the first line of table code like so (inline CSS here for expediency):

<table id="Table_01" style="border:none; width:1062px; margin:0 auto" cellpadding="0" cellspacing="0">

Centering Pages, Images and other elements with CSS
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements _with_CSS-16640.html

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as:
Currently Being Moderated

16. turmanc,

Jun 29, 2012 9:32 AM in reply to Nancy O.

Report

My grandson is doing super! Like it never happened! I am here babysitting now! Thanks for asking!

OK, super, that seems to do the trick! Now, should I create a style sheet so it is easier to apply the change to
all the other pages? If so, how do I create it and aplly it? You said i should set the type to an HTML type that matches
my HTML skills... do they have an HTML type -1? (ha-ha)

|
Mark as:
Currently Being Moderated

17. Nancy O.,

Jun 29, 2012 10:47 AM in reply to turmanc

Report

Great news about your grandson!!

HTML4 Transitional will work fine with your table layout.

Creating an external CSS file is no problem and much easier to manage.

Go to File > New > Blank > CSS > hit Create button.

Paste this into your CSS file.

#Table_01 {
border:none;
width:1062px;
margin:0 auto;
}

SaveAs basic.css

Link your HTML pages to your external CSS file as shown below:
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

Nancy O.

|
Mark as:
Currently Being Moderated

18. turmanc,

Jun 29, 2012 1:10 PM in reply to Nancy O.

Report

I think linked the css sheet to my document. I can see the link in the code.
And uploaded both the doc and the style sheet but still not centering
Am I not reading the style sheet? I was concerned about the relativity of the sheet to the document.
Here is a link to the page. I am working on the houm-page.html. You can see the style sheet in the same dir

http://6thcav.net/test2/HOME-Page.html

|
Mark as:
Currently Being Moderated

19. MurraySummers,

Jun 29, 2012 1:48 PM in reply to turmanc

Report

All the files linked from that page are loading. Some of them (too many, in fact) are very large! All of those >200K PNG files should be downsized alot! Not only is it a very bad idea to have your page's content completely contained within graphics, it's not kind to your readers (especially those that use screen assistive devices). It appears to them (as well as search engines) as if your page is completely blank.

Anyway, change this -

<table id="Table_01" width="1062" height="2062" border="0" cellpadding="0" cellspacing="0">

to this -

<table id="Table_01" width="1062" height="2062" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto">

and see what happens.

|
Mark as:
Currently Being Moderated

20. turmanc,

Jun 29, 2012 2:34 PM in reply to MurraySummers

Report

I am going to replace the graphic text with searchable text as soon as I learn how to do it!
Yes, the pages are way too big. One of the guys in our group created them and I just wanted to get
the new page up and work on the speed and such. Are PNG files the porper format or should I use GIF?

|
Mark as:
Currently Being Moderated

21. MurraySummers,

Jun 29, 2012 2:38 PM in reply to turmanc

Report

For those images with so much background texture, JPG would be the right way to go, BUT you may have problems with seams between images matching with JPG images. Give it a try. Anyhow, the JPG images should be about 10% as heavy as the PNG images are....

|
Mark as:
Currently Being Moderated

22. Nancy O.,

Jun 29, 2012 2:59 PM in reply to turmanc

Report

turmanc wrote:

I think linked the css sheet to my document. I can see the link in the code.
And uploaded both the doc and the style sheet but still not centering
Change link path from this:

<link href="/basic.css" rel="stylesheet" type="text/css" media="screen">

to this without the leading slash and it should work:

<link href="basic.css" rel="stylesheet" type="text/css" media="screen">

Nancy O.

|
Mark as:
Currently Being Moderated

23. turmanc,

Jun 29, 2012 7:07 PM in reply to Nancy O.

Report

What did I do wrong? I figured it had to do with being relative to the diosk or site
How can I fix it?

|
Mark as:
Currently Being Moderated

24. MurraySummers,

Jun 30, 2012 4:37 AM in reply to turmanc

Report

Your links should be document relative links, unless you have a reason for using root relative ones (there are reasons to use them, but mostly the reasons involve advanced usages). The link you had on your page was a root relative one. It should be changed to document relative as shown in Nancy's previous post.

|
Mark as:
Currently Being Moderated

25. turmanc,

Jul 2, 2012 7:30 PM in reply to MurraySummers

Report

Yeah, I tried JPG and it loaded way faster. But, I do get lines and sch. Is there a way to fix this? there is no
code between the JPGs so is it table or cell issues? Any links to turtorials for this and formatting text so
I can get rid of the graphic text and use searchable?

|
Mark as:
Currently Being Moderated

26. MurraySummers,

Jul 3, 2012 6:15 AM in reply to turmanc

Report

I'm afraid you have painted yourself into a corner. While attractive, this layout just is not optimal for use on the web. With all of your content embedded in images you are taking a double whammy of poor search-engine exposure of content (i.e., each page is basically devoid of any machine-readable content) along with the gigantic weight of the assembled page. Nevertheless, can you post a link to the jpg-based page so we can see what it looks like?

I also note that you have not implemented the suggestions for how to center your page.

|
Mark as:
Currently Being Moderated

27. turmanc,

Jul 3, 2012 7:26 AM in reply to MurraySummers

Report

Actually, I did implement the suggestions. Just a different link..

http://6thcav.net/test3/HOME-Page.html

The original pages I got from my friend do have the text as searchable, I just wanted to get something up and running while I
learned how to fromat the text into my page so i just threw them up as graphics. The intent is to go back and make the page with text.... I just need to learn how. I have one of his original PSD files if it would help to see it

Here is a couple of links to the site with JPG instead of PNG and have the problems

http://6thcav.net/6thnew/BOARD-of-DIRECTORS-Paget.html
http://6thcav.net/6thnew/RECRUITING-JOIN-Page.html

|
Mark as:
Currently Being Moderated

28. MurraySummers,

Jul 3, 2012 9:22 AM in reply to turmanc

Report

I believe the problem you have can be traced to your wholesale use of merged and split cells for layout. Please read this article -

http://www.apptools.com/rants/spans.php

Also, I believe that 1062px is too wide. A maximized browser viewport on a 1024px wide screen only has about 980px of available width before it drops a horizontal scrollbar.

Anyhow - take a look here: http://www.murraytestsite.com/6thcav.html

I have eliminated the spans from that page (mostly) and instead used a series of stacked tables to hold each unique cell arrangement. It looks fine, no?

|
Mark as: