none
Text Alignment RRS feed

  • Question

  • I have a DWT with a header, a nav div, a left side bar, a body div and a footer.  The body (the only editable region of the DWT) of my home page is simply some centered text, but when I view it on different computers the text goes to left align and hides behind the left column.  (Any other suggestions would be great also).  The site is www.aj81.net
    Friday, September 9, 2011 2:36 PM

Answers

  • Just to follow up on what Ian said, a link to a stylesheet has a CSS file as the href.

    That means the relative path and name of a file ending in ".css".

    You are also using auto-named styles.  That's a big mistake when using a DWT, if you did the same thing within the DWT itself.

    What if you create an auto-named "style1" in your DWT, and another "style1" in a page?  They could overlap/conflict/add, depending on what they are, and different pages will show different things for the DWT portions styled with "style1".  You already have this case, with style14 and style15 defined as different things on the DWT and on the page.

    style14, in particular, says to text-align center on this page, and is followed by instructions for it to text-align center, from the DWT.

    Always name your styles something meaningful, and reuse them as appropriate.  Don't let EW auto-name them.

    Also, I noticed a <form> around all the content.  I'm curious as to why?  (There is no form functionality on the page.)

    You are also trying to fix the position of the footer.  As soon as you have significant text on the page, that will break for folks using a larger browser text setting than you are.  The main body text will overlap the footer.  The same thing will happen in your masthead and other containers where you've assigned a height.  Text will expand as users adjust their browser text size, but those heights won't.  Guideline: Don't put heights on containers that have text in them, and don't try to fix the position of your containers on the page.  Leave heights off, and let them expand as needed.

    And, you are using spaces in some file names.  Don't do that.  The folders and filenames should use dashes, underscores, or just skip the space altogether.  Remember, it's the text you show people (page title, link names, etc.) that need to be nicely readable, not the file names themselves.

    It's good that you published the page as the beginning stage.  There are some things to address that will be easier to do now than it would be after you've put a lot more time into it.

    If you haven't already done so, you might want to go through some of the resources in the "FAQ - Start Here" post near the top of this forum.  The Basic Site tutorial would be a good thing to go through.

    • Marked as answer by Haus10 Friday, September 9, 2011 5:47 PM
    Friday, September 9, 2011 4:37 PM

All replies

  • A couple of things stand out. One is that you have no main stylesheet, the link to it reads:

    <link href="dwt%20style%20template" rel="stylesheet" type="text/css" />

    The other is that I'd expect to see a style for the main_content that gave it a left hand margin equal to the width of the left_col.

    These styles may be in the missing stylesheet ??


    Ian Haynes

    EW V4 Add-Ins
    EW resources, hints and tips
    Friday, September 9, 2011 3:04 PM
  • First, thank you for posting a link to the problem page. Now, the div that you're talking about is moving to that position because you're telling it to. Here is the markup for that container:

    <div style="height: 435px; z-index: -4; width: 692px; position: absolute; top: 195px; left: 254px;" class="style2" id="page_content">

    That one tag contains a multitude of sins, but look first at the "left: 4px;" rule. Since you have specified absolute position, that puts the div 4 pixels from the left side. Make that "left: 254px" and it slides right over to the right.

    However, that is NOT what you should do. That page is a mess, and it will be easier to rebuild it than to try to fix it. What you should do is stop work on this page, throw away what you have, and avail yourself of the learning resources listed at the bottom of the Forum FAQ and Guidelines - Start Here thread before going back to work on it.

    In that markup, you have specified a height for the div, which contains text. That means that it is inaccessible to vision-impaired users who increase their text size, causing your content to overflow its container. Consider the impression given by a school Web site which can't even accommodate poorly-sighted visitors...

    Absolute positioning is virtually never appropriate in Web design outside of a very few circumscribed applications such as dropdown/flyout menus. It should never be used by anyone without a complete and thoroughgoing knowledge and understanding of HTML and CSS. To get an idea of the mess your page is in, do this: Open the page in Firefox, then click View|Zoom|Zoom Text Only, then press Ctrl-+ three or four times to increase text size, and watch your layout go straight down the toilet.

    Seriously, for your own benefit, go to the Prerequisites for Using Microsoft Expression Web to learn what you actually need to know to use EW, then check the learning resources in the FAQs referenced above. EW is not WYSIWYG, and you cannot simply draw out your layout in design view. It doesn't work that way. You're going to have to put in some time learning HTML and CSS before you can use EW effectively. Good luck!

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Friday, September 9, 2011 4:25 PM
    Friday, September 9, 2011 4:23 PM
  • Just to follow up on what Ian said, a link to a stylesheet has a CSS file as the href.

    That means the relative path and name of a file ending in ".css".

    You are also using auto-named styles.  That's a big mistake when using a DWT, if you did the same thing within the DWT itself.

    What if you create an auto-named "style1" in your DWT, and another "style1" in a page?  They could overlap/conflict/add, depending on what they are, and different pages will show different things for the DWT portions styled with "style1".  You already have this case, with style14 and style15 defined as different things on the DWT and on the page.

    style14, in particular, says to text-align center on this page, and is followed by instructions for it to text-align center, from the DWT.

    Always name your styles something meaningful, and reuse them as appropriate.  Don't let EW auto-name them.

    Also, I noticed a <form> around all the content.  I'm curious as to why?  (There is no form functionality on the page.)

    You are also trying to fix the position of the footer.  As soon as you have significant text on the page, that will break for folks using a larger browser text setting than you are.  The main body text will overlap the footer.  The same thing will happen in your masthead and other containers where you've assigned a height.  Text will expand as users adjust their browser text size, but those heights won't.  Guideline: Don't put heights on containers that have text in them, and don't try to fix the position of your containers on the page.  Leave heights off, and let them expand as needed.

    And, you are using spaces in some file names.  Don't do that.  The folders and filenames should use dashes, underscores, or just skip the space altogether.  Remember, it's the text you show people (page title, link names, etc.) that need to be nicely readable, not the file names themselves.

    It's good that you published the page as the beginning stage.  There are some things to address that will be easier to do now than it would be after you've put a lot more time into it.

    If you haven't already done so, you might want to go through some of the resources in the "FAQ - Start Here" post near the top of this forum.  The Basic Site tutorial would be a good thing to go through.

    • Marked as answer by Haus10 Friday, September 9, 2011 5:47 PM
    Friday, September 9, 2011 4:37 PM
  • Thank you, I actually am teaching a high school course using ExpressionWeb 2.  The students are creating these pages, so trouble shooting is nearly impossible, considering I have no actual training in HTML, Web Design, or anything related.  I am relying almost completely on the program and the book that teaches the program (and in chapter one emphasizes that EW is WYSIWYG, of course a few hundred migraines later I have found this to be false).
    Kyle Hauenstein
    • Edited by Haus10 Friday, September 9, 2011 5:51 PM
    Friday, September 9, 2011 5:49 PM
  • Definitely go through the resources.  It is completely unfair and nonsensical to expect a teacher to teach what he doesn't know himself.  Your students will learn to make pages that break, and they won't know why. :)

    Take a good long look at the link in the first paragraph in the "FAQ .. Start Here", the one Scott pointed you to, Prerequisites for Using Microsoft Expression Web  

    Print it out for your students, and make sure they take it seriously.  You can make quite a mess of a site without knowing what you are doing.  Web design requires knowing the underpinnings and how they work, even when using a tool that lets you work in "Design View".

    Also, do take the time to go through the Basic Site tutorial, referenced in the resources section of that FAQ post.  If you go through it, you'll be able to teach your students much better practices.

    As to "WYSIWYG", as you've discovered, well, no.  It's an approximation of what you'll see - subject to browser variations and browser text size settings - if you knew what you were doing when you designed the page.  You can design two pages that look identical in Design View, and have one that will work properly on the web across browsers and over a range of text size settings, and one that will break in some browsers and when visitors change text size.  ... And I'm just touching the surface of possible differences that won't be apparent in Design View.
    • Edited by KathyW2 Friday, September 9, 2011 8:35 PM
    Friday, September 9, 2011 8:31 PM
  • The form tag has runat="server" so it looks like you may have created an ASP.Net page and then converted it to a DWT, which is not a good idea (although in this instance is doing no harm).

    I see you've now fixed the postion issue for the main content but still have the incorrect link to the stylesheet:

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="dwt%20style%20template" rel="stylesheet" type="text/css" />
    <link href="Dropdown-Menu.css" rel="stylesheet" type="text/css" />

    This should be pointing to a css file, maybe "dwt style template.css" but as noted, if this is the correct file, you need to rename this to get rid of the spaces. If it doesn't exist, delete this line completely.

    Most if not all of the issues Kathy and Scott pointed out still exist.


    Ian Haynes

    EW V4 Add-Ins
    EW resources, hints and tips
    Saturday, September 10, 2011 8:51 AM
  • Thanks, I am taking their advice and starting to rebuild the DWT from the ground up.  I am using some of the code (dropdown menus etc.) to make it go a little quicker, but this has been invaluable.  Thank you!
    Kyle Hauenstein
    Wednesday, September 14, 2011 12:50 AM