Skip navigation
Dave_Burrows
Currently Being Moderated

Several aspects of my code aren't working

Aug 17, 2012 6:16 AM

Tags: #error #template #dreamweaver #images

Hello;

 

This is my first time using Dreamweaver.  This Photoshop illustration is what I'm working towards.

 

I'm as close as I can get it right now, though, and my code is coming up short of the mark.  The box above the table is to be the only image; the other 6 are text boxes.

 

1.  Looking at the work in the WYSIWYG editor of DW, the top of the text boxes is either raise 15 or 20 px, or has moved off to the left about the same distance; I can't seem to get the divs to space evenly.

 

 

2.  In Firefox, the text box tops are where they belong - this is browsing the file on my drive, it's not uploaded anywhere - and the divs are spaced pretty well.  However, as you can see, the center section of each text box looks correct in the WYSIWYG editor of DW, but in my browser, it's opaque when it should be translucent.

 

 

3.  The cave paintings aren't appearing except outside the margins; they are part of the same graphic that is the background.  If I had my drothers, it would display above the text boxes (that illustration itself is also a transparancy separate from the background) in one place, and one place only.  I suspect that could be done with CSS, but I don't know where to begin.

 

 

Could I possibly impose on anyone who knows how to fix even a part of what's broken for your expertice, and some of your time?  I'd be much obliged.

 

Peace,

 

Dave

 

 

 
         


DR. SEUSS

 

I like nonsense, it wakes up the brain cells.   Fantasy is a necessary ingredient in living, it's a way of looking at   life through the wrong end of a telescope. Which is what I do, and that   enables you to laugh at life's realities.

 



CARL SAGAN

Skeptical scrutiny is the means, in both science and religion, by which deep thoughts can be winnowed from deep nonsense.


JAMES JOYCE

But Noodynaady's actual ingrate tootle is of come into the garner mauve and thy nice are stores of morning and buy me a bunch of iodines.


ROBERTSON DAVIES

 

There is no nonsense so gross that society will   not, at some time, make a doctrine of it and defend it with every weapon   of communal stupidity.


 
  
  
 
Replies
  • Currently Being Moderated
    Aug 17, 2012 6:23 AM   in reply to Dave_Burrows

    Let's try again.  As you can see your images didn't come through (except for the last one).  You cannot use email to do these things - instead come to the webforum and make your posts.

     

    First things first - are you planning on slicing the image in PS and exporting the HTML into DW?  If so, stop what you are doing immediately - that is not a reliable method to use to create a *real* web page, as it only works well for prototyping.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 17, 2012 8:10 AM   in reply to Dave_Burrows

    The place to start with this is not with images, it's with code.  Let's see the code on your page.  In all respects, if the code is not right, your display will not be right.

     

    The best way to do this is to upload the page and its dependent files to some webspace that you control, and post a link to that uploaded page.  The distant second best way is to paste the code into a reply here.

     

    Can you do either of those?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 17, 2012 9:02 AM   in reply to Dave_Burrows

    Copy the code from DW.  Open your reply in the forum.  Paste the code into the reply.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 17, 2012 10:28 AM   in reply to Dave_Burrows

    Wow - that's IT?  Your code is badly truncated. For example, every webpage should be structured like this -

     

    <! doctype html>

    (this is an html5 doctype, but there are at least two others that you could use - html4.01 strict, and html 4.01 transitional)

    <html>

    <head>

    (this is where your page title, your page meta information, your stylesheets and your links to external files goes)

     

    </head>

    <body>

    (this is where the readable content of your page goes, within the HTML infrastructure)

     

    </body>

    </html>

     

    (the items in parentheses are explanations, not part of the structure)

     

    Which application wrote the HTML that you show above (i.e., where did you get that code)?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 17, 2012 2:29 PM   in reply to Dave_Burrows

    That said, can you tell me how to move forward?

     

    Unfortunately, the short answer to that is to learn HTML and CSS.  It's really the only way to move forward, particularly if you have specific and perhaps unusual requirements for your site.  And here's the really bad news - until your page is well formed and can satisfy the online validation tools at http://validator.w3.org, you are going to be unable to produce anything worth putting on the web.

     

    I don't want to seem harsh - but this is the fact of life that you must face when you begin to develop a real website.

     

    So - how can we get off this dime?  Do you have any webspace that you control so that you can upload some files?  And are you, in fact, working with Dreamweaver?  Are you working out of a defined site in Dreamweaver?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 17, 2012 3:05 PM   in reply to Dave_Burrows

    Open DW, press F1, and read about how to define a site.  Please make sure that you do that before committing any more time to this project.

     

    Next, and left over from my last post is this -

     

    Do you have any webspace that you control so that you can upload some files? 

     

    The best way to get you going is to have access to your files.  Can you do that? Or is EBay your only intended destination for these pages?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2012 2:25 PM   in reply to Dave_Burrows

    Unfortunately, eBay templates bare little resemblance to real web sites because eBay forces you to use their peculiar proprietary code and not much else.  I wish I could tell you that Dreamweaver is the best tool for creating eBay auction pages but it's not unless you're very strong with HTML and well versed in eBay's eccentric code practices.

     

    You'll get better results with TurboLister 's Design Editor -- if you can get that infernal app to work on your computer.  I have an XP laptop that handles TurboLister but none of my other PCs will run it.

     

    I self host images on my own web space, too, so I don't use Photobucket or other 3rd party image services.  I find that less is more with eBay listings.  When you attempt to get too creative or ambitous, the layout invariably falls apart because eBay doesn't use web standards compliant code.   Just keep things simple and you'll be in good shape for selling multiple products on eBay.

     

    Good luck with your project.

     

    PS.  I have that exact same bias tape foot for a Singer that's 40+ and still working great!

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2012 3:16 PM   in reply to Nancy O.

    Nancy has given you words of wisdom.  Without a strong grasp of HTML, CSS, and table-based layouts you will bend your needle on this page's design.  There are just too many gotchas lurking there.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 20, 2012 4:31 AM   in reply to Dave_Burrows

    First, your background image - 721K - is much too heavy. You need to find a way to make it less so. Try a JPG not a PNG (neither 8-bit PNG nor GIF are suitable for images with texture, and 24/32-bit PNG is usually too heavy for such images).

     

    Next, your code is too heavy-handed.  Try this instead -

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Index.html</title>

    <style type="text/css">

    html {

              overflow-y:scroll;

     

    }

    body {

              background-color: #31443e;

        background-image: url(http://www.forestelves.com/bg.png);

        background-repeat: repeat;

    }

    #wrapper {

              position:relative;

              width:800px;

              margin:0 auto;

    }

    .main_body_container {

        width: 724px;

              min-height:550px;

        background-color: #00F;

        margin: 0 auto;

    }

     

     

    </style>

    </head>

     

     

    <body>

    <!--Start Wrapper -- Should be Highest Div-->

    <div id="wrapper">

    <!--Start Main Canvas-->

    <div class="main_canvas">

     

     

    <!--Start Main Body-->

    <div class="main_body_container">

     

     

     

     

     

     

     

     

     

     

    </div>

    <!--End Main Body-->

     

     

     

     

     

     

     

     

     

     

    </div>

    <!--End Main Canvas-->

     

     

    </div>

    <!--Close of Wrapper Div -- Should Be Lowest Closed Div-->

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 23, 2012 9:52 AM   in reply to Dave_Burrows

    Your images are much to0 textured to be using PNG as a format.  This makes them VERY heavy and noticeably slow to load.  The pproblem is that you need to have some transparency in those images.  This is just a poor design choice.

     

    Now for changes -

     

    1.  Remove longdesc attribute from all image tags - this is intended to link to a TEXT file that provides a verbose description of the associated image - for accessibility reasons, not to an image file as you have done.

    2.  You get the b.png image to repeat by making it a background image that tiles in the background of the container. You have attempted to do that by creating a rule -

     

    #borders {

     


    background-image: url(http://www.forestelves.com/b.png);

    background-repeat: repeat-x;

    background-position: center top;

    width: 800px;

    position: relative;

    height: auto;

    }

     

    but then you never assigned the "borders" id to anything so that the rule could be expressed!  Further, you have specified you want it to repeat horizontally, and it should repeat vertically, so "repeat-y" is the right choice there. I put that ID on the div.main_body_container.

     

    3.  Your item.png image didn't drop.  It's right where you put it.  It's your layout that won't allow it to be higher.  I moved it to replace the improperly located b.png image which was placed in a row above the table you inserted to hold item.png, and then removed that unnecessary inner table.

     

    4.  The text is resisting your efforts because you have no place left to put text within your table since it's completely filled with images.  See my fixes on the link below.

     

    5. There is no instance of 'art.png' on your page.

     

    You can see my changes here (I have only 'fixed' the top text area with the quote from Dr. Seuss) -

     

    http://www.gws-sandbox.com/burrows.html

     
    |
    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