Skip navigation
Currently Being Moderated

Cntering imgage in DW CS 5.5

Apr 23, 2012 10:02 AM

I am building a web page using layered images out of PS 5.5. I have tried several suggestions

of CSS code to no avail. Seems the fact that it is layered is my problem. Can someone point

me to the CSS code for this? If needed I can send a link to one of my pages...

 
Replies
  • Currently Being Moderated
    Apr 23, 2012 1:15 PM   in reply to turmanc

    turmanc wrote:

     

    If needed I can send a link to one of my pages...

     

    Please do.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 5:37 PM   in reply to turmanc

    If you are looking for the webpage to be centered, replace the top of your existing code with:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>CONTACT INFO Page Lo-Res-sliced</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css">

    body{

    margin:0 auto;

    width:100%;

    }

    </style>


     

    Then, on your <body> tag, remove the red text:

    <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/CONTACT-INFO-Page-Lo-Res-sliced-act_11.png',' images/CONTACT-INFO-Page-Lo-Res-sliced-act_12.png','images/CONTACT-INF O-Page-Lo-Res-sliced-act_13.png')">

     

     

    That should center the whole page.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 24, 2012 8:40 AM   in reply to turmanc

    Your page was missing a DOCTYPE which is an essential piece of code on any HTML document. Without it, browsers may not render your page correctly as they are not sure what version of HTML coding is used. See: http://www.w3schools.com/tags/tag_doctype.asp

     

    The additional part on the <html> tag is not always a requirement but helps inform the browser of the namespace used. See: http://www.w3schools.com/tags/att_html_xmlns.asp

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 24, 2012 9:05 AM   in reply to Rik Ramsay

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     

    Woops! I meant to add in the Transitional Doctype as this will allow you the most flexibility. The Strict one above effectively has stricter rules and is not as flexible. You would be better to use the one below.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 5:35 AM   in reply to turmanc

    Change

     

    body {

    margin: 0 auto;

    }

     

    to:

     

     

    #Table_01 {

    margin:0 auto;

    }

     

     

     

    Plus you have an opening <script> tag missing after the closing </style> tag. It should go in the code as below:

     

    <style type="text/css">

    #Table_01 {

    margin:0 auto;

    }

    </style>

    <script>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2012 5:20 AM   in reply to turmanc

    Since I viewed the page code last time you seem to have acquired the correct opening <script> tag for your js scripting in the head of your page (<script type="text/javascript">) so you don't need the one I informed you you include last time I posted

     

    Change this:

     

    <style type="text/css">

    #Table_01 {

    margin:0 auto;

    }

    ;

    width:100%;

    }

    </style>

    <script>

     

     

     

    To this:

     

     

    <style type="text/css">

    #Table_01 {

    margin:0 auto;

    }

    </style>

     

     

     

    I dont know what the black line is but since the page is all image I would include in your css:

     

    img {

    display: block;

    }

     

     

    So this:

     

    <style type="text/css">

    #Table_01 {

    margin:0 auto;

    }

    </style>

     

     

    Becomes:

     

     

    <style type="text/css">

    #Table_01 {

    margin:0 auto;

    }

    img {

    display: block;

    }

    </style>

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 27, 2012 5:29 AM   in reply to turmanc

    The one in which your page is centered but the rollover is not working, do the following:

     

    Remove Line 15 of your HTML code:

     

    <script>

    This is an unneeded script open tag. This makes the Swap Image function unusable.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 27, 2012 5:31 AM   in reply to Sudarshan Thiagarajan

    Regarding the black line, it should be a problem with the image that is being loaded as I see your entire site is done with image slices. That's why it appears to be fine when you refresh the page as it reloads the image.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 29, 2012 8:54 AM   in reply to Rik Ramsay

    @Rik: Hmm - a 100% width page cannot be 'centered' since it occupies the full viewport width.  If you want the page centered you will have to give it a width less than 100%!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 29, 2012 9:00 AM   in reply to turmanc

    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
    Jun 29, 2012 10:47 AM   in reply to turmanc

    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
    Jun 29, 2012 1:48 PM   in reply to turmanc

    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
    Jun 29, 2012 2:38 PM   in reply to turmanc

    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
    Jun 29, 2012 2:59 PM   in reply to turmanc

    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
    Jun 30, 2012 4:37 AM   in reply to turmanc

    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
    Jul 3, 2012 6:15 AM   in reply to turmanc

    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
    Jul 3, 2012 9:22 AM   in reply to turmanc

    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:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points