Skip navigation
LBRodgers
LBRodgers
Currently Being Moderated

Page self distructs when adding a dive tag for an image

Jun 16, 2012 6:02 PM

Tags: #div #cs5.5 #dreamweaver #images

I have been working on a website for weeks and have rebuilt it from scratch more times than I know.

The home page has an example of the problems I have been having. Every time I create a div tag to hold an image the page falls apart in live view and in the browser. It looks fine in design view. I have tried every method I could find to import an image, but in some browsers the images on the bottom of the page all stacked up on top of each other to the left. I have tried drop and drag, AP Div, and image placeholder, image placeholder inside a div and inside an AP Div. There is no back ground image in the area of the images. I did create a container div to the size of my page to begin with and have tried with and without

a container. All my efforts are not working and I am at the end of my ideas. I hope someone can tell me

how to do this and work. The url that I posted has no navigation in it at the moment so I am not concerned about that.

 

Thanks for your help.

Linda

 

http://www.ellenlramsey.com

604 Views   5 Replies   Latest reply: LBRodgers, Jun 18, 2012 11:38 AM
 
Replies
  • adninjastrator
    Currently Being Moderated
    1. adninjastrator,
    Jun 16, 2012 7:18 PM   in reply to LBRodgers
    Report

    A few things:

    <div id="navbar"></div>

    <div> with no content...

    are you sure you meant to open and then close </div> with out anything in it?

     

    </table>

    </div>

    closing </div> which had not been opened or was already closed (see comment above).

    <td><a href="index.html"><img src="file:///C|/EllenLRamsey_site/images/navbar.jpg"

    invalid image address... get rid of file:///C|/EllenLRamsey_site/

    It would be helpful to describe in exact detail which div, which image, how is it out of place, where should it be.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Jun 17, 2012 10:54 AM   in reply to LBRodgers
    Report

    You'll have way fewer problems if you spend a little time learning code fundamentals first and use the W3C validation tools often during development.  Code errors cause 98% of browser display problems.

     

    HTML & CSS Tutorials - http://w3schools.com/

     

    How to Develop with CSS?

    http://phrogz.net/css/HowToDevelopWithCSS.html

     

    Code Validation Tools

    ------------------------------------

    CSS - http://jigsaw.w3.org/css-validator/

    HTML - http://validator.w3.org/

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • LBRodgers
    Currently Being Moderated
    3. LBRodgers,
    Jun 18, 2012 6:49 AM   in reply to Nancy O.
    Report

    Nancy O. Thank you for the critique. I was aware of the issue with the navbar. I mentioned it in my questions. I will clean it up.

     

    I have been studing html and css as have gone through this process of learning. Although I am a beginner I have found it very difficult to weed through all the tutorials and information on the subject to the point of utter confussion. I find even the w3school.com site first page is enough to make me want to head for the hill, it is too much to taken in. I don't give up easily, but maybe you could point me to a list (1., 2., 3., ) of tutorials that would not make me all round expert but rather a compedent beginner.

     

    Thank you.

     

    Linda

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Jun 18, 2012 11:14 AM   in reply to LBRodgers
    Report

    No one site, tutorial or class is going to cover everything you need to learn.  It takes years of reading books & articles, practicing with code and building sites to become truly competent enough to call yourself a professional web developer.   Take baby steps.  Focus on the HTML tuts.  Practice the exercises.  Take the quizzes.  When you've absorbed one chapter, move to the next one.  In time, the light bulb will go on and you'll see HTML code is no great mystery.

     

    CSS is more complex.  I always tell people to draw a rough sketch of the page layout & placement of individual elements.  Use margins, padding & floats to create columns & align elements.   This goes completely contrary to DTP & graphics apps where you can click & drag things around.  DW is NOT a graphics app and should not be used this way.  It's a coding and site management tool.  The more you know about code, the easier it is to get the results you want.

     

    APDivs should not be used in primary layouts.  Default CSS positioning (unspecified or static) is all you need for 98% of what you'll be doing.   

     

    In order to place elements in your layout with CSS, first understand the Box Model.

    http://www.w3schools.com/css/css_boxmodel.asp

    http://css-tricks.com/the-css-box-model/

     

    Decide what the element's relationship is to other things around it.  Will it be a block level element all by itself?  Or an inline element inside a list or paragraph? 

    http://www.w3schools.com/css/css_display_visibility.asp

     

    Or perhaps you need to float the element left or right of other content.

    http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

     

    Hopefully I've given you enough to get you started.  If not, post back with details about where you want to place your image.

     

    MORE WEB DESIGN RESOURCES:

    http://forums.adobe.com/message/4105662#4105662

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • LBRodgers
    Currently Being Moderated
    5. LBRodgers,
    Jun 18, 2012 11:38 AM   in reply to Nancy O.
    Report

    I am well aware that this is a life time subject. Cliff notes version is not what I am looking for. No tricks, no short cuts just basic down to earth tutorials on html and css. I quess the other way to look at is what do basic developers look for in examing their code for errors. I understand that html is the structure and css is the decoration. I will look through your suggestions to see if they are what I am looking for. Thank you for your suggestions.

     

    Linda

     
    |
    Mark as:
Actions

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