Skip navigation
andie55
Currently Being Moderated

Page justification in Live View is suddenly messed-up

Jan 2, 2013 1:37 AM

http://toohotpepperssalsa.com/contact.html

 

I tried to change the height of the line from 25 to 20 and take out the cell padding at the top and bottom of the table and YIKES!  I changed back the line height to 25, I have done something wong in the setting and I can't even use the program for a new site with the setting messed up.  I had tried to create a new site and so I could copy the content but that didn't work.

 

The page suddenly went to the right and the horizontal menu went vertical first.  When I've got it in DESIGN view, it's fine but when it LIVE VIEW or published, it's messed up.

 

Please help.  I do have head injuries from many years ago and am trying to do this for my daughter-in-law.  THANK YOU for any help you can give me.  I've tried going through settings to check but have not gotten anywhere.

 
Replies
  • Currently Being Moderated
    Jan 2, 2013 2:53 AM   in reply to andie55

    On line 17 of style.css, have a look at the highlighted

    #layout {

        width:0px;

        text-align:justify;

        line-height:25px;

        background:url(../images/layout.gif) left top no-repeat;

        padding:0px 71px 0px 76px;

        margin:0px auto;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 2, 2013 4:38 AM   in reply to andie55

    I am glad that you found it.

     

    Sorry about my reply, with it I meant to point you in the correct direction, for example an element width of 0px will not show the element at all and cause all sorts of havoc (depending on the browser) for its contents.

     

    Normally it is not necessary for a height property to be set because the height will automatically adjust to the contents. Line-height can be used to give the desired effect.

     

    But to be honest, I think you should start with one of Dreamweaver's layout. Although the colours will not suit your application, these are easily altered within the CSS. This will give you a head (no pun intended) start.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 2, 2013 4:50 AM   in reply to andie55

    Any hope of my recouping it so I can finish it?

    Yes there is!

     

    Just let me work at it. I'll get back to you

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 2, 2013 5:02 AM   in reply to Ben Pleysier

    Change line 17 of style.css to

    width: 960px;

    Then please come back here with the next problem

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 2, 2013 5:56 AM   in reply to andie55

    I am glad that you are feeling better although I cannot share the emotion with you. I can't see the change because you have not uploaded it as yet. Don't worry about doing that now, I need a few hours sleep and will come back after that.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 4, 2013 12:52 PM   in reply to andie55

    Hi Deb,

    Gramps gets busy as do we all.  If he doesn't reply & you still need help with your site, you can contact me through my web site.

    http://alt-web.com/contact.shtml

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 5, 2013 12:28 AM   in reply to Nancy O.

    @Nancy,

     

    Thank you for your support, this is very much appreciated. I know you would do a great job, but after an 8 months' stint in Montreal, I feel obliged to give something back to the hospitable Canadians.

     

    @Deb,

     

    You are almost where you want the site to be. Don't give up! The problem that you have is associated with your grasp on the markup (HTML) and the styling (CSS) thereof. If you agree, we will start afresh. I propose the following stages:

    1. simplify the markup of index.html
    2. add style rules to the markup
    3. apply the common parts to the other pages

     

    Stage 1 - Simplify the markup

     

    Have a look at http://pleysier.com.au/deb/exercise.html The first thing you will notice is that the page is devoid of all styling, but does contain the full content of what you want to convey.

     

    Right click on the page and in the dropdown menu click on 'View Source" or similar.

     

    Here you will notice that the first few lines have changed to what is called HTML5 declarations. This is not only much simpler to remember, but it is also the latest declaration. You will also see that all the styling, including inline styling,  has been removed, the img elements have been modified and empty elements have been removed.

     

    Now rename your local version of index.html to index_old.html and create a new file called index.html. Copy the source code from the online version and paste that into the new file and save the file.

     

    Stage2 - Add styling to the layout

     

    Have a look at the stylesheet http://pleysier.com.au/deb/css/screen.css.

     

    We start the styling with so-called reset style rules. This resets the built-in browser default rules. This will ensure that our page will render the same in all browsers.

     

    Create a local file in the CSS subdirectory called screen.css and copy and paste the online contents into the new file.

     

    Go back into index.html and link the new style sheet as in

    <title>Design Style</title>

    <link rel="stylesheet" href="css/screen.css">

    </head>

    View the document in your browser and you should see a similar result to http://pleysier.com.au/deb/

     

    The next step is to create the other pages, but we will do this in a next session.

     
    |
    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