none
Website isn't auto sizing to fit all screen sizes?

    Question

  • Hello,

    I am an EW rookie (to say the least!).  I built my parents old website using Frontpage (pretty user friendly).  Our server discontinued support, so I purchased EW4 (and a couple of help books) and started over.  I just published our new site last night and I thought it looked fantastic (clearly my own personal opinion).  Major sigh of relief!!  I should have known it wouldn't be that easy (Murphy's Law, right?)

    My parents called and said it looks all jumbled on their computer.  I brought my laptop to their house, the site looks fine on my laptop, it most definitely looks jumbled on their computer! 

    (I have a screenshot, but got the error msg "Body text cannot contain images or links until we are able to verify your account).

    We have different screen resolutions.  I'm using 1280x800 on my widescreen.  They're using the std 1024x768.  I have the container in my website (forum would not let me insert webpage hyperlink until account is verified) to 90% hoping it would resize to fit any monitor.  I did have another person check the site, it looked fine to them as well.  I don't know if I need to try to fix my website, or fix my parents computer!  I'm sure it's an easy fix (well, maybe for somebody other than me), I'm just hoping someone out here in forum world might have an answer.  I CHANGED their viewing percentage to 82% and it seems to view fine, but clearly this can't be the solution as I can't adjust the world's viewing screen.  :)

    (I have a screenshot of this as well)

    After a year of working on this website "when I have the proverbial free minute", I'm anxious to see it function properly on ANY COMPUTER.  Is this an unreasonable expectation (feeling eye twitch coming on)

    Thank you BEYOND measure in advance for any suggestions anyone might be able to offer.

    Missy

    Thursday, July 18, 2013 4:45 PM

Answers

  • You don't need to look at it on other computers to see the problems with the layout, simply resize your own browser. Narrow the width of your browser window, and you no longer have room for elements you have floated side by side.  When that happens, the floated elements move down to where they can fit.  (That's the nature of "float".)

    If you assume that people browse the web with the browser maxed out on their screen, remove that thought from your mind.  People resize the browser window to a comfortable size, often much less than the size of a high resolution screen because they have other applications open as well and want to easily click to other windows.  They can also resize text in their browsers, which is another thing to test for.  Also, if you have only tested the site in one browser, download and use other browsers to test your site.  The newest versions of browsers don't have too many differences among them, but if you are using an earlier version of IE you may be surprised by what is different in modern browsers.

    You also set a height on your main container and containers inside it, of 30000px.  That means the page ends up 30000px high, no matter what content you have.  (Why are you asking people to scroll down and past 30000px of nothing?)  Take the height off divs.  They'll expand when they need to, to fit what is inside them.

    Note that if what is inside them is floated, you need to put something that is not floated, and has style "clear:both" applied to it (which tells it to stay below the floated elements), after the floated elements but still inside the container.  Otherwise the container will not know how high to be to contain the floated elements.  (Part of the nature of floated elements: they are placed, then removed from the document flow and not "seen" by their container when it figures out how high it must be for its contents.)  You'll see this if you apply a background color or image to the container, and wonder why it only shows behind the non-floated divs at the top.  The non-floated element below the floated ones fixes this.

    Simplify your life:  Put fixed widths on the divs.  Don't try and create a completely flexible layout.  Given the vast range of screen sizes out there, even a sucessful attempt would look a bit silly on very wide screens or vary narrow ones.  [The way to do a flexible layout now is by "responsive design", but that is definitely not  a beginner design topic.]

    • Marked as answer by Missy2013 Thursday, July 18, 2013 6:14 PM
    Thursday, July 18, 2013 5:51 PM

All replies

  • No way to help without a link to the site. You will need to publish it so we can see the html code and supporting files before anyone can help. A screenshot is not going to provide much info.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    Thursday, July 18, 2013 4:59 PM
  • We can't give any firm advice without seeing the site but, with the wide variety of screen sizes around, even with desktops and laptops (never mind tablets and mobiles) you would be better using a fixed width layout that fits the minimum aize desktop screen.

    I'd use a fixed width of 980px which handles the 1024x768 screen, rather than a percentage.

    It is possible to make a percentage width layout work but you need to have a layout that adapts to the screen size. Try it with some simple content first and build it up from there. Keep resizing your browser to check what happens.

    This approach leads to what is the better solution, but not suitable for a rookie, which is to use a 'responsive design' which works from mobile size upwards. This can give an optimal view on all screen sizes but requires a lot of careful work.

    HTH


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Complete Web
    expression(web.blog)

    Thursday, July 18, 2013 5:12 PM
  • Missy: This stupid new forum software is driving everyone crazy because it won't let new users post a link.

    But we're smarter than that.

    Make the link look not like a link (i.e.: www dot mysitename dot com) and we'll figure it out. We really do need to see the site to try to solve display problems; thanks for trying to give us the link.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Thursday, July 18, 2013 5:16 PM
  • I do apologize.  I did honestly try to include the hyperlink (and screen shots as I mentioned), but when I tried to click on submit it wouldn't let me.  It said no hyperlinks or images until my account is verified.  I had to remove them to publish my question.

    www.raystownprimitives.com

    I have since checked with several other sources and the site seems to be working fine.  I think it must just be a set up issue with my parents monitor.  I just wonder if any other potential viewers are having the same issues.

    Thank you again for any advice, I do appreciate it.

    Thursday, July 18, 2013 5:20 PM
  • (smile)  Thank you for the kind words, I felt like an idiot asking for help with no reference to where the help was needed!  I should have thought of "disguising" my web link.  Very clever!  :)  Hopefully you can also see the link I posted to Pat, but just in case - www.raystownprimitives.com

    I have the screen shots (so you can see what I was seeing) also, if anyone would like to see them.

    Missy

    Thursday, July 18, 2013 5:26 PM
  • You don't need to look at it on other computers to see the problems with the layout, simply resize your own browser. Narrow the width of your browser window, and you no longer have room for elements you have floated side by side.  When that happens, the floated elements move down to where they can fit.  (That's the nature of "float".)

    If you assume that people browse the web with the browser maxed out on their screen, remove that thought from your mind.  People resize the browser window to a comfortable size, often much less than the size of a high resolution screen because they have other applications open as well and want to easily click to other windows.  They can also resize text in their browsers, which is another thing to test for.  Also, if you have only tested the site in one browser, download and use other browsers to test your site.  The newest versions of browsers don't have too many differences among them, but if you are using an earlier version of IE you may be surprised by what is different in modern browsers.

    You also set a height on your main container and containers inside it, of 30000px.  That means the page ends up 30000px high, no matter what content you have.  (Why are you asking people to scroll down and past 30000px of nothing?)  Take the height off divs.  They'll expand when they need to, to fit what is inside them.

    Note that if what is inside them is floated, you need to put something that is not floated, and has style "clear:both" applied to it (which tells it to stay below the floated elements), after the floated elements but still inside the container.  Otherwise the container will not know how high to be to contain the floated elements.  (Part of the nature of floated elements: they are placed, then removed from the document flow and not "seen" by their container when it figures out how high it must be for its contents.)  You'll see this if you apply a background color or image to the container, and wonder why it only shows behind the non-floated divs at the top.  The non-floated element below the floated ones fixes this.

    Simplify your life:  Put fixed widths on the divs.  Don't try and create a completely flexible layout.  Given the vast range of screen sizes out there, even a sucessful attempt would look a bit silly on very wide screens or vary narrow ones.  [The way to do a flexible layout now is by "responsive design", but that is definitely not  a beginner design topic.]

    • Marked as answer by Missy2013 Thursday, July 18, 2013 6:14 PM
    Thursday, July 18, 2013 5:51 PM
  • Thank you for the advice.  I admit it's still all a wee bit confusing.  I'm still learning and when my help books didn't offer a solution, I did a lot of "trial & error" (not always the best way) until I got the desired result.  Of course, the desired result could be creating other problems I'm unaware of (as you pointed out with my container height). 

    I will sincerely read and re-read your answer, try to wrap my brain around it and begin making changes.  The fear is when I change one thing, 20 other things change with it (now I have 21 things to fix... see what I mean?)  When you know what you're doing its just about taking the time to fix it... when you're new and unsure of yourself (if you can remember when you first began) its all one big anxiety attack.  :)

    I'll give it a try.

    Thank you again,

    Missy

    Thursday, July 18, 2013 6:13 PM
  • Take it in simple steps:  Give the divs fixed widths.

    Then, go through and simply remove any height: 30000px you have in any style.

    At this point, you'll notice your background won't go down below your left and right columns.  That's where adding a non-floated element below them, inside the container that they are in, comes in.  You could add a non-useful element to do that, or you could simply move the contents of your footer information to their own div below the other two, don't float the footer div, and add the "clear:both" style to it so it will always be below the floated columns.


    Thursday, July 18, 2013 7:11 PM
  • Missy, this was done fairly quickly using one of the free templates Tina and I offer http://www.css-layouts.org/raystown-primitives/

    The layout uses a fixed with and has equal height columns that uses an image as the background.I resized some of your images so they would fit the layout. The content area uses a solid color rather than the background image you used. Both columns resize depending on the amount of content but no height is specified. Rather than insert the star with each of the navigation links, I used it as a background for the a tag.

    Some things to think about:

    Graphic images should have an alt tag. Example does not.

    file names should NOT contain spaces. Use a hyphen if you want to separate words.

    Create your style rules in your style sheet rather than using the formatting toolbar and letting EW add style# to the head section fo your page. http://www.expression-web-tutorials.com/style1-created.html

    Using headings on your page - H1 for the main topic of the page (Semantic markup)

    You could just as easily use a fluid layout and achieve the same look. This is what I started with

    http://www.frontpage-to-expression.com/site-templates/equal-height-site-templates.html

    Republished as the first one had a mistake.

    Pat



    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates


    • Edited by Pat Geary Friday, July 19, 2013 11:45 AM edited template.
    Thursday, July 18, 2013 8:04 PM
  • Page displays funky on IE 10 with only the menu showing. I see all sorts of
    problems in your code starting with spaces in file and folder names:

    Images%20-%20Design%20Elements/cran-beige%20checkerboard%20-%20SMALL.jpg

    Every time you see a %20 it means there is a space plus many servers are case
    sensitive. You have specified heights and widths inline often over writing that
    in your style section. You are using <br> for spacing and so many auto style
    classes that it is impossible to tell what is being applied where.

    Whenever I see something like this:

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br>

    </div><!-- left-col -->

    <div id="right-col" style="height: 30000px" class="auto-style24">

    <div class="auto-style24" style="height: 275px; width: 864px;">

    <br><span class="auto-style16"><span class="auto-style17">Help us

    celebrate!&nbsp; It's our</span><strong><br>

    <img alt="" height="97"
    src="Images%20-%20Design%20Elements/HOME%20PAGE%20ELEMENTS/10th-Anniversary-Animated1.gif"
    width="500"><br><br></strong>Welcome

    to Raystown Primitives!!&nbsp; 2013 marks our 10 year anniversary!&nbsp;

    I know there will be display problems in many browsers and at different
    screen resolutions. You really do need to spend some time with the learning resources in the FAQ at the top of this forum.


    Free Expression Web Tutorials
    For an Expression Web forum without the posting issues try expressionwebforum.com

    Friday, July 19, 2013 12:49 AM
  • "Page displays funky on IE 10 with only the menu showing."

    Widen your browser window.  The right column contents will float under the long left side menu column if you don't have it wide enough.  This problem isn't specific to IE10.  :)

    Friday, July 19, 2013 1:09 AM
  • Hello Again Kathy,

    I hope you don't break out in hives seeing my name again!  I spent some time studying your suggestions (and all the other posted suggestions and comments.  I appreciated you taking the time to remind me to take it step by step (that was kind, I was close to tears).  I don't mean to sound like a sap (although clearly I'm about too), but right way or wrong way I spent a lot of time trying to teach myself this software.  Obviously I made a lot of bad choices (as Cheryl pointed out when she displayed my code), but to be honest I don't recall reading about no spaces in file names (I will fix this right away).  I'm sure it was in the book somewhere, but again...sadly, I missed that.  The same goes for using <br> to get down to the next line?  I didn't realize that was poor code.  I'm not sure how you put something below the element you just placed without using it, but I will keep looking.  I'm trying to learn from my mistakes, but I guess sometimes I don't realize I'm making them.  This is the HUGE difference between classroom training and just using "classroom books".  You don't get immediate feedback when you start to go down the wrong path.

    Anyway, I made the changes you suggested, step by step.  I did notice some positive effects immediately!  My company logo at the top, and my top-nav hyperlinks will resize inside a browser window (Hallelujah!).  One small step for the rookie, one giant leap....well for somebody, I'm sure.  Sadly though, my left navigation column took a beating, you were right about losing my background.  My right column is angry with me too. My opening greeting (it's our anniversary, blah blah) is down below the left column, and despite my best efforts and coaxing, it refuses to return to its original position. I took my "copyright" info and placed it inside a div box at the end of my webpage (still inside the main container) and added the "clear:both" style, but it didn't seem to change anything. I'm sure there is something I'm not doing correctly (obviously), but I just don't know what it is.

    I copied my entire website into a new directory so I could make changes and test things without compromising what is currently published.  I know my current website has critical flaws in it, but if you're browsing with your window fully open, it "appears" to look ok, and more importantly (especially for my parents), customers can successfully order their products.

    I envy your understanding and knowledge of this subject matter.  I wish I could hire you to sit at my desk with me, I would imagine it would go something like this.....

    "Missy, hold my latte a sec, Oh yeah, I see your problem right away, we need to delete these two lines of code, add a div box here, take out this semicolon, and add a colon, click our heels together 3 times, save it, preview in a browser, Wah-Lah, it's all working.  Let me double check in another browser, Yep, everything looks great!!  You can actually sleep tonight!"  :-)  Oh, give me my latte back.

    I know you offered advice with only the best intentions and I am truly grateful.  I'm going to keep working at this until I figure it out!!  Thank you again for all of your help. :)

    Missy

    Friday, July 19, 2013 8:45 PM
  • PAT,

    Thank you so much for the templates!  They look really well done (and REALLY easy to do!).  I have to tell you I am seriously considering it!!  I just hate to give up on myself just yet.  Between what I paid for the EW4 software, what my husband paid to buy me Photoshop CS6 for Christmas, and the ridiculous amount of time I've spent learning and working on this website for my parents..... I feel like I have to keep moving forward.  I know I can do this (eventually....before any more grays set in!)   But BELIEVE ME, I bookmarked your site, and saved your comments to read and re-read, and I sincerely....SINCERELY appreciate all of your help and suggestions.

    Thank you so much,

    Missy

    Friday, July 19, 2013 8:47 PM
  • Missy, basically what I did was use your graphics. They are no longer animated cause I quickly resized them using Snagit just to show you the difference in what you had done and what you could do.T achieve the equal height columns without adding a height to the columns, I created a container for the content section (menu and content) and used your graphic image as the background. If you look again, I added the graphic part that you used for the content background so it has the same look as you currently have.

    http://www.css-layouts.org/raystown-primitives/

    The navigation column floats to the left and the content column has no float but does have a left margin that places it to the right of the navigation.

    The menu uses your star graphic but uses css to style the menu. I used white as the font color cause I could barely see the black against the blue.

    The images in the content area lost their animation when I resized them in Snagit. You could use whatever graphics program you want. While I have Photoshop CS6, I am not proficient in using it. That is on my To DO List.

    You could do exactly the same thing with a flexible layout. The entire template was created within EW but I did not use the formatting toolbar to create the look, just created classes and applied them.

    While I browse the web with my browser fully open, MOST FOLKS including my 99 year old husband do not.

    Use the one I did as a learning tool. View the source code which is heavily commented as well as the style sheet.

    OK off to cook dinner.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    Friday, July 19, 2013 9:58 PM
  • Missy,

    The way to get help if you are half-way there, but stuck, is to publish the page as it now is, and let us know (republish the link) when you have done that.  We can easily look at the problems that remain and give advice.

    By the way, <br /> is perfectly valid for going to the next line inside the current container.  What they shouldn't really be used for is replacing using margin and padding on elements you want spacing between, which is usually what you find when you see a sequence of several of them in a row.

    And, even if you want to keep working from your original design, don't hesitate to look at what Pat did and apply some of the changes that make improvements.  For example, it is absolutely true that the black text in your side menu is almost invisible on that dark blue - extremely difficult to read.  Pat's white is easy to read.  Pat's change of left justifying the items in that side menu rather than centering them, as you did, also makes a very strong improvement in how easy it is to scan down the list.

    • Edited by KathyW2 Saturday, July 20, 2013 1:51 PM lkjk
    Friday, July 19, 2013 10:36 PM
  • Pat,

    I completely missed what you were trying to tell me the first time you responded with the template idea.  I sincerely apologize for that!  I see now you were trying to throw me the proverbial lifeboat, and I just swam right on by it with my mouth running!  I understand now what you mean (and THANK YOU for taking the time to reiterate so I would understand!).  Yes, Yes, this DOES make sense (finally).... and I really appreciate the comments, they are fantastic and I had my notebook buzzing (the ole' pen & paper kind, not the "laptop" kind!).

    I will DEFINITELY give this a try, either by customizing it with my own content, or by mimicking some of the layout coding.  Really Great!

    Kathy, Thank you so much for offering to help me get unstuck from where I currently am after I resized my columns and tried to add the clear:both thingy to bring my background back to my left col.  That was really sweet of you.  I'm too paranoid (and embarassed) to publish it right now.  This has really been a humbling(and STRESSFUL) experience for me.  I did all this in an effort to save my parents some money from hiring a professional, and I feel like I'm really letting them down, and probably costing them a lot of sales as our site hangs out there relatively broken, looking anything but professionally done.  :(

    Is there anyway I can cut & paste the code for you in here?  Or, do you need to see it published in order to interpret things properly?

    Thank you both for all of your efforts to help me, I sincerely am appreciative!

    Missy

    Sunday, July 21, 2013 9:18 AM
  • Just create a separate directory on your current site and publish the test pages to that folder OR if your ISP gives you any space, publish to that space and then give us the link.

    Remember we have all been beginners at one time or another - in the exact same spot as you are.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    Sunday, July 21, 2013 11:13 AM
  • Missy:

    Pasting code here doesn't give anyone the whole picture, since it leaves out the style sheet, artwork, etc. To check for display problems, we need to see it all in action (well, Pat, Kathy, and Cheryl need to see it--they've given lots of good feedback).

    Pat's point about posting it in a separate directory is so that you essentially have a website within a website, and when you post the link here, only we can see it, since there is no link from your current site to it. I think you're afraid to post it in place of the current site (which is wise), since everybody would see a work in progress. But don't worry about creating the subsite that Pat suggested. You can use that as a private sandbox to share your progress.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Sunday, July 21, 2013 4:25 PM
  • Hi Pat,

    I tried adding a separate directory on my current web.  Hopefully I am completely understanding what you're asking me to do.  I added a new folder in my website (inside EW) called "Test_Files" and added the file I modified (my revised homepage) in that particular folder.  The new page is called "almosthome".  Then I published only that folder to my current server (Yahoo).  I manually typed in the link for the new page, (raystownprimitives.com/almosthome) but the page it's showing me looks nothing like the page I see in expression web (or even when I preview in a browser).  *sigh*  It's situations like this that give me an eye twitch.  Clearly I'm doing something wrong, or making this request more difficult than it needs to be, but (as usual), I'm not sure what I'm doing.

    Missy

    p.s. - In case I don't say this enough, I REALLY and SINCERELY appreciate your help!  I wish I had time to sit at this computer and just spend hours working on this website!  Especially when you guys are kind enough to post a response.   The reality of it though, is that I have 2 beautiful children (and my youngest just turned 2!).  I try not to do any "computer time" until my baby is napping, or both kids are in bed for the evening.  I try to keep family a top priority the rest of the day.  The reason I tell you this is because if there are sometimes large pauses between my replies, I didn't want you all to think I am taking this lightly, or not eager to learn and correct these problems!  I just have to find the right "quiet time" to work at the computer.

    Monday, July 22, 2013 3:43 AM
  • Very quick until later this afternoon. Check the paths to image files and make sure they are pointing to where the images are actually located. And make sure you published it to the same location on the server you have it on the site on your computer.

    http://raystownprimitives.com/almosthome is NOT the same as http://raystownprimitives.com/Test_Files/almosthome

    I am assuming almosthome is the name of the page.

    A hint: If you want to create a new folder in EW on your current site and move a page, the best way to do that is to drag the page to the newly created folder. That way links and paths to images and such will be adjusted accordingly. If you are using the same style sheet for both the old and new pages you will need to be very careful that you don't change something in the style sheet attached to the old page that will mess it up. I tend to save both the style sheet and the new page with a new name like revised-style-sheet.css and revised-index.html and then work on the page. That way I know I will not mess up the page that is currently displayed on the web.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates


    • Edited by Pat Geary Monday, July 22, 2013 2:15 PM zzzzzzzzzzzzzzzzzzzz
    Monday, July 22, 2013 11:56 AM
  • Right. You can't put just the page in that folder, because all the links to everything else on the page (and the other external things like style sheets) don't point to the right folder any more. All the links in the page are relative to its location in the folder structure, and you now have a page that's in a different folder with a different relationship to all the other stuff. It's as though you moved into a new house but tried to drive the same way to the grocery store; 2 lefts and 3 rights got you there from your old house, but that doesn't work from the new one.

    You have to put a copy of the entire site in the new folder, that way all the links point to the same relative places (not to the original locations in the site that's live on the web).


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Monday, July 22, 2013 12:06 PM
  • Ahhhhh ok (the light bulb kicks on). Yes, I understand what you mean and this makes COMPLETE SENSE now!! I will copy those files today as soon as I have a chance and hopefully get back to you guys this evening. Thank you Bill for the fabulous scenario, I loved it. :)
    Monday, July 22, 2013 1:38 PM
  • Ok, I've managed to create a successfully create a subdirectory with a copy of my webpage in it.  I was changing things left and right and starting to see things looking pretty decent (or so I thought).  I was making changes to the styles (which I needed to do) and I got rid of a lot of the auto styling.  I knew a couple of the other pages in my test folder would be affected by removing some of the styling, but I can correct that later (or so I thought).  I continued working on the home page (1 step at a time) and published my TEST folder.  I viewed the home page, but it still has the tall (30000px) right column and some other changes I made are not showing.  I think I know why, and  realizing that, I think I made a HUGE mistake!! 

    I was making changes to my style sheet, but it just occurred to me that these changes are being saved to my mainstyle.css sheet (feeling nauseous), which means that my ORIGINAL website is now a snarled mess.  I should have created a NEW style sheet and attached THAT to my test files so as not to interrupt the original site and the original styles attached to it. 

    The problem is, even though the site I want you to see (the TEST home page) is published, unless I publish the "mainstyle.css" sheet, you want be able to see it the way it views in EW.  HOWEVER, if I publish the revised stylesheet, it was completely mess up my currently published website.

    (rubbing forehead), and I thought I couldn't mess things up any further.....

    Is there anyway to copy the "mainstyle.css" style sheet at this point?  Remove the one from my TEST files, and reattach the new copied one?  This way each directory (the original one and my TEST files) will have their own style sheets?  This seems like a reasonable plan (she says optimistically).

    Tuesday, July 23, 2013 2:09 PM
  • Assuming the style sheet on your live site is the one you want for your other pages, locally, you can copy it down to recover it for your local site.

    Copy (not move - you don't' want to break the style links to your other pages) the modified mainstyle.css into your test folder.  Fix the link in your test page to point to that one.

    Connect to your published site and publish the mainstyles.css that is up there *down*: Select it on the right side (live site) and click the arrow pointing right to left to copy it to the left side (local) site.  It will overwrite your modified mainstyles.css and restore your other pages.  The copied version of your changes that is now in your test folder will  cotinue to be used for your test changes.


    • Edited by KathyW2 Tuesday, July 23, 2013 3:48 PM jlklj
    Tuesday, July 23, 2013 2:57 PM
  • Hi Kathy,

    You're a genius!  More notes for my notebook!  THANK YOU SO MUCH!!

    I finally managed to get my "test" index page published and viewable!  Here is the link. 
    raystownprimitives.com/TEST/index.htm

    All of the other pages currently attached to is (via the existing hyperlinks, etc.) are jumbled....but I'm not worried about that right now.  Baby steps, right? :)

    Right now I'm trying to figure out how to get my left column background back.  I tried adding the div with the clear:both at the bottom, but it doesn't seem to be making a difference?  Also, I removed the "star pic" images on my left-col hyperlinks and re-added the star as part of the image option under my "list" styles.  I did have this style applied originally and it looked great.  Sadly though, when I attached a hyperlink, it bumped my star up a level and my text down to the next line (irritating!).  I couldn't for the life of me figure out how to fix it, so I did one of my "trial & error work-arounds" and came up with adding the star as a .gif image.  Anyway, I would love to be able to utilize the graphic option in the list style, hopefully you will be able to tell me how to get them all on one line?

    I removed some of the unnecessary styles on my "revised" style sheet and tried REALLY hard to use styles instead of manually formatting things. Sometimes it's difficult though. If you want a text bolded, or bigger, it seems so easy just to point and click on the icons at the top of the screen as opposed to creating a style. Truth be told, sometimes I just stare at the "create new style" button trying to figure out what to name these things! Silly, right?

    Anyway, hopefully you'll see some positive changes from the first index page you looked at. :)

    AS ALWAYS, Thank you (and everyone) for your help..... it truly is invaluable to me at this point!  You guys are literally my lifeline to getting my parents web fixed while maintaining my own sanity for my family's sake!

    Missy

    Thursday, July 25, 2013 12:19 AM
  • Corrected link http://raystownprimitives.com/TEST/Index.htm

    Good idea to use all lowercase so you don't have to worry about the proper case I and i and NOT the same.

    If you look at the style sheet that goes with this http://www.css-layouts.org/raystown-primitives/ you can see I added the star background as part of the styling for the hyperlink itself

    #leftColumn1 ul li a { font: normal .85em Arial;
        color: #FFFFFF;
        display: block;
        padding: 5px 0px 5px 30px;;
        line-height: 17px;
        text-decoration: none;
        background: url('../images/STARS-SMALL SCALE.gif') no-repeat 8px 6px;

    with spacing so the star does not butt up against the actual text.

    Forum software is doing strange things so will start another post in the hopes it behaves.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    Thursday, July 25, 2013 1:26 AM
  • The way I have created the equal height look is to create a wrapper div for the sidebar and content columns. Then use a background image with the two column backgrounds. http://www.css-layouts.org/raystown-primitives/images/content-bg.jpg

    The blue is the wide of the column plus the padding, the rest is the background for the content area.  Styling for that div is

    #contentWrapper {
        clear: both;
        background-image: url('../images/content-bg.jpg');
        background-repeat: repeat-y;
        background-color: #A59D80;
    }

    Inside the content wrapper are two divs that represent the sidebar and the content.

    #leftColumn1 {
        float: left;
        width: 200px;
        padding: 10px 10px 10px 10px;
        color: #FFFFFF;
    }

    and the content column

    #content {
        padding: 10px 10px 10px 10px;
        margin: 0px 0px 0px 220px;
    }

    Rather than float the content column to the right, I give it a left margin of 220px which moves it to the left of the sidebar.

    There is nothing wrong with using the formatting toolbar for applying bold and italics. If you want to change the size of font say on your h2 tag, change the style rules for that tag rather than increasing the size of it using the formatting toolbar. In naming your styles I tend to use names that tell me what that style does.

    .smltxt {style rules}is for text I want to be smaller.

    .important { style rules } for any text that I want to call attention to.

    .imgctr {
        display: block;
        margin: 0px auto;
    }
     can be used to center an image on the page. And so on . . . . .

    Off to bed for tonight.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    Thursday, July 25, 2013 1:40 AM
  • " I tried adding the div with the clear:both at the bottom, but it doesn't seem to be making a difference?"

    You didn't add any element at the bottom below the floated columns, yet still inside the container div, that has a style of clear:both.  So that's why it doesn't make a difference: it's not there.  You did put a div with class equal to "Clear" inside the floated right column.  If a style for "Class" were defined as being clear:both, it wouldn't work because the div is in the wrong place.  But in fact, "Clear" hasn't been defined at all, and won't do anything even if you move the div into the right place.  You need to create a style for .Clear that contains clear: both;  (A <div>, by the way, is a pretty big element, left with default margins and spacing, and may put more room than you want at the bottom of the container div, but get it working before you worry about those details.)

    You have a div inside your left column with a height of 118px.  Remove the height: it is why you have only a 118px background showing for that div, and the list spills over the bottom of it.

    Thursday, July 25, 2013 3:39 AM
  • Noting that you have twice indicated that you don't understand the significance of letter case, please be aware that case matters in many aspects of Web development. Pat, above, had to correct the URL you provided from "raystownprimitives.com/TEST/index.htm," which causes a 404 error, to http://raystownprimitives.com/TEST/Index.htm, which does not. That is because for all UNIX-based servers (Linux, nginx, etc.), case is significant. So, Index.htm, index.htm, and index.HTM are three different files, unlike Windows, which sees all three as referring to the same file.

    Not only that, but CSS is case-sensitive, as well. If you assign a class named "Clear," then create the selector as ".clear," the properties defined for that selector will be ignored. That is true regardless of the type of server in use. And if you are using EW's default doctype, all tags and attributes must be lowercase.

    Here's the thing—that's why Pat recommended that you use lowercase for everything. That way, you don't have to remember the capitalization, and you don't end up with missing images and broken links because of inconsistent capitalization. I modify that slightly by using camel case for CSS (e.g. dropCap instead of dropcap), because that is my standard practice and I have always used that method, so I don't ever get confused and generate incompatible selectors and assignments. You can adopt whatever method you want, but whatever you choose, be consistent in its application going forward.

    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 Thursday, July 25, 2013 4:22 AM ....
    Thursday, July 25, 2013 4:16 AM
  • Pat,

    Thank you so much for your constant (and wonderful) advice!  The star image background on my "UL" worked beautifully!!!  I was thrilled!  So easy too!!  I also took your advice and removed the "float" from my right column, and simply gave it an expanded left margin - again, worked beautifully!!!  I'm REALLY getting excited as these things come together!!!  It's so fun to see something WORK when you click on the button, as opposed to my normal thoughts of, "Now why did it do THAT?!?!".  So, I thank you especially for that! :)  I LOVE your idea of the wrapper background to make my columns look even at all times, but I admit I'm still having trouble wrapping my brain around how to create it, and implement it.  I'll keep reading your posts, sometimes I have to read things a million times before the lightbulb kicks in, but I'll get it.  It's a great idea and if I can get it to work (and I WILL keep trying!!), I think it will alleviate A LOT of my problems!

    (in the meantime though)

    Kathy,
    I tried (again) to enter an element (this time I used a div, with more realistic sizes, to contain my copyright info).  I created a style called "clear_both" and set it the way you recommended.  I put it below my right column, but above my container.  Sadly I think I'm still not understanding where it needs to go in order to pull the background of my left column down.  I apologize in advance, I'm sure you're ready to bang your head off the wall with me (or my head maybe is more appropriate).  I don't mean to be such an idiot, I'm just trying to understand how these things work, until I do.... unfortunately I'm probably going to be a little dense following what seems like simple instructions. 

    Scott,
    You are so right about my inability to use all lowercase (or at least use a mix of upper and lower consistently!) text inside my web.  I'm a capitalization and proper punctuation freak!  I can't even bring myself to use shortcuts and abbreviations when I'm texting!  No "brb" or "lol" or "what r u doing?" for me!  It's a habit I know I will never break, SO I will definitely have to be more consistent in my use of mixed capitals.  Being able to use the "_" to put proverbial spaces between my words has helped immensely.  I'm really going to remind myself to be aware of my file and style names.  Thank you for pointing that out.  Obviously I needed the reminder, and I appreciated getting it! 

    I know I sound like a broken record, but I am so thankful for the time you all take to respond to my posts, and for all the advice, tips and guidance you have given me.  It's unreal what a weeks worth of "networking" has done for my understanding.  My notebook is getting huge! :)

    Missy

    Thursday, July 25, 2013 1:32 PM
  • Looking at http://raystownprimitives.com/TEST/Index.htm

    If you want the CATEGORIES text to be centered, rather than .auto-style1 { margin-left: 15px; margin-right: 15px; }

    create a style rule

    .ctr {text-align:center;}

    and apply it to the h2 tag OR if you want all of your h2 tags center, add text-align:center; to the
    current h2 style rules.

    Right now on your menu list, if you hover over the choice, the text disappears with the white background. You need to specific a contrast color to the shile background so the text shows. So add to this style rule

    #left-col a:hover {
        background-color: #FFFFFF;
        color: #000000; }

    or whatever color you choose to use.

    For your footer, try creating a style rule for your footer with style rules

    #footer {
        clear: both;
        background-color: #9C967E;
        border-top: solid 1px #9bb6d2;
        padding: 10px 10px 10px 10px;
        border-top-color: #2E394A;
    }

    and apply the id to the footer div. Change to suit your purposes.

    I also usually add
    #outerWrapper #footer p {
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: center;
        font-size: .85em;
    }

    to remove the top and bottom margins from the footer paragraphs. Wors the same as using a br tag between the lines.

    More later,

    pat



    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates



    • Edited by Pat Geary Thursday, July 25, 2013 2:16 PM xxxxxxxxxxxxxxxxxxxxx
    Thursday, July 25, 2013 2:07 PM
  • "Sadly I think I'm still not understanding where it needs to go in order to pull the background of my left column down. "

    You are misunderstanding my original post.  That isn't supposed to bring your left column background down.  That's what brings your #container background down to contain the columns when you had two floated columns in it.

    And now you don't.  You have one floated column, and it is shorter than the right content.  The "clear:both" div will only come into play if the left column becomes longer than the right column.  Then it would bring the #container background down to include the left column.

    As for bringing your background image of the left hand column down: well, it won't.  It's the background of that column.  It stays inside that column.

    If you want the space below the left hand column to be blue, you need to handle that as a separate problem.

    If your left hand column will always be shorter than your right hand column, why not move that left column's background image to #container?

    If you do that you may want to add a background color to your copyright div so it wont lose contrast against the blue.

    Thursday, July 25, 2013 2:09 PM
  • Scott,

    You are so right about my inability to use all lowercase (or at least use a mix of upper and lower consistently!) text inside my web.  I'm a capitalization and proper punctuation freak!  I can't even bring myself to use shortcuts and abbreviations when I'm texting!  No "brb" or "lol" or "what r u doing?" for me!  It's a habit I know I will never break, SO I will definitely have to be more consistent in my use of mixed capitals.  Being able to use the "_" to put proverbial spaces between my words has helped immensely.  I'm really going to remind myself to be aware of my file and style names.  Thank you for pointing that out.  Obviously I needed the reminder, and I appreciated getting it! 

    Missy, I think that you are still missing the point. What you really should start doing is NOT to "use a mix of upper and lower consistently," but, unless there is a very good reason to, don't use capitals at all; use lower case exclusively. HTML and CSS markup is NOT prose, and there is literally no reason whatsoever to use capitals anywhere in markup. I happen to use camelcase in CSS selectors because it is consistent with the convention of using camelcase in javascript for properties which are hyphenated in CSS. So, in javascript, "background-color" becomes "backgroundColor." If you do not have a specific need to use a capital in filenames, image references, etc., DON'T! Simply use lowercase throughout, and you won't have to remember what you used where, period.

    As far as the use of underscores to replace spaces in filenames goes, opinion is split on that. Personally, I prefer the hyphen to the underscore, for the very good reason that, since links are underlined by default in standard browsers, underscores disappear when the link is underlined. This can cause them to be confused with spaces when reading them or writing them down. Hyphens are clearly present when the link is underlined, so they don't have this problem.

    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 Thursday, July 25, 2013 2:45 PM ....
    Thursday, July 25, 2013 2:43 PM
  • " unless there is a very good reason to, don't use capitals at all; use lower case exclusively"

    A caution, since your site already contains filenames and folders with mixed case:  If you choose to follow Scotts advice, which is good advice, don't simply rename your folders and files and change their case.  Since Windows makes no disctinction, EW won't know you've actually renamed the file.  You will then have a mix of file cases that look one way, but are believed to be the other way inside EW.  The way to rename files when you are only changing case is to first rename it to something completely different, let EW update all the links, then change it again to the name you want, using consistent lowercase - and, again, let EW update all the links.

    Thursday, July 25, 2013 4:50 PM
  • http://www.css-layouts.org/raystown-primitives/test.html

    This is just taking your basic layout without the menus and pictures and explaining each section. Only basic styles for the divs is included. Not sure if it makes it easier or more difficult.

    http://www.css-layouts.org/raystown-primitives/test2.html

    The above page adds your top menu and the styles from YOUR style sheet.

    http://www.css-layouts.org/raystown-primitives/test3.html

    The above page adds in your left side navigation with some slight changes in your styles rules.

    If you keep on in this manner, checking after each change, you can tell where your design is going to break. I would encourage you NOT to use all centered text in your content area as it is more difficult to read.

    As you add styles, think about what that particular style rule is going to do and name it accordingly.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates


    • Edited by Pat Geary Thursday, July 25, 2013 5:28 PM xxxxxxxxxxxxxxxxxxxxxxxxxx
    Thursday, July 25, 2013 5:06 PM
  • The way to rename files when you are only changing case is to first rename it to something completely different, let EW update all the links, then change it again to the name you want, using consistent lowercase - and, again, let EW update all the links.

    Excellent point, Kathy. It hadn't occurred to me that a novice might not know how to make the changes without bollixing things up.

    Missy, just follow Kathy's advice, above, and make sure that you do all of the renaming, etc. in EW's interface, so it can keep track of them and update all the links as you work. Note that you only need to change one letter to another to make it "completely different" to Windows (e.g "Index.htm" to "ondex.htm," then back to "index.htm"). Windows Explorer and other file managers won't know to do that (automatically update all references to that file), so don't work outside of EW when renaming and moving.

    Generally speaking, when creating full copies, for backup or to move to a test folder, using Explorer or another file manager is fine, because you do not want links updated anyway. But, whenever you are performing file operations that may affect links within the site, and you want those operations accounted for, make sure you always use EW's file and folder interface.  ;-)

    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.

    Thursday, July 25, 2013 7:38 PM
  • If you keep on in this manner, checking after each change, you can tell where your design is going to break. I would encourage you NOT to use all centered text in your content area as it is more difficult to read.

    Excellent advice, Pat. Missy, that is perhaps one of the most important habits you need to get into—checking your changes as you work, using "Preview in Browser" to test in several browsers as you go. That way you catch any issues that break your pages as soon as they happen, so you have a good idea what caused the problem, and can go back and investigate (and "Undo" works even after reviewing a page). That is far, far preferable to testing after working for a half-hour, only to find that something you did during that session has completely hosed the page, and you have no idea what it was.

    Test early and often. It may seem to be more time-consuming, but believe me, the time that you don't spend tracking down errors quickly makes up for it. Oh, and that "centered, straight down the page" look screams "1990s FrontPage novice." Centered text is appropriate in very few places, and body text is not one of them.

    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.

    Thursday, July 25, 2013 7:54 PM
  • Pat,

    I think I'm finally understanding.  Thank you so much for taking the extra time to explain things to me so thoroughly.  I know you didn't have too, but I sincerely appreciate it.  I like the changes you made, and I wrote down all of the suggestions and all of your advice in my notebook.  You have been SUCH a big help, Thank you!!

    The test files were a wonderful idea, and a huge help to see how simple changes can make a huge difference to the look of my site. 

    I think armed my with notebook, I'm ready to start working on re-organizing my original site files.  I want to get it republished as soon as I can (given the limited amount of time I have to work on it anyway). 

    Kathy,

    Thank you for the advice on renaming files.  I had actually made that mistake already.  This clears a lot of things up.  I'll start renaming the proper way. 

    I have a lot of work ahead of me....

    Monday, July 29, 2013 12:42 PM
  • Missy, another thing you might want to consider as you are redoing your pages/site is the use of semantic markup. See

    http://webstyleguide.com/wsg3/5-site-structure/2-semantic-markup.html

    Right now the only heading tags I see used is the h2 tag for Categories on the left side navigation. What I would be using as the H1 tag or content of a particular page is the masthead banner at the top of each page which is a graphic image and which search engines cannot read.

    While you may want a different graphic image at the top of each page - I would not - if you do that, you should also add the same title surrounded by the h1 tag as the first thing in the content side of the page.

    Rather than using paragraph tags to separate content, you use the br tag to create new lines or add spacing.

    You might also think about moving to a DWT or Dynamic Web Template for those parts of each page that are the same like the top menu, the left side navigation and the footer. You are download a free ebook from here.

    http://any-expression.com/expression-web/ebooks/expression-web-dwt-ebook.htm

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    Monday, July 29, 2013 8:56 PM