locked
Couple of questions... RRS feed

  • Question

  • Alright, I barely know what I'm doing, but I've got my site to look right *thumbs up*
    I'm pretty sure the fonts I use are only on windows vista/7, but I still really wanna use them - is there a way to defult to another font if my chosen font isn't found on the viewers machine? (instead of times new roman or whatever it defaults to if the user doesnt have the fonts installed)

    *EDIT* Found this info from an article: "For maximum font compatibility or if you are too particular of the fonts to be used on your web site , I recommend using the embedded font technologies or using Bitstream Font Player, which allows you to use a select set of fonts available from them. However, the question that you should ask yourself - Would I download and install a font just to view a web site the way the designer wanted me to?" - so how would I set up embedded fonts? (Im using WE3 btw)

    My second question is - I have all my parts absolutely positioned according to the top and left hand side of the page - is there a way to automatically center all the content of my page in the viewers browser? Like a bit of code I can dump at the top or something?

    Sorry for being a complete amateur, your advice is appreciated
    Thursday, February 4, 2010 10:15 AM

Answers

  • Be aware that font use is controlled by the owner of the font.  You can't just embed them without knowing if you are allowed to, or if you need to pay to do so.  Google it: lots of limitations and "gotcha"'s.  And in answer to the question "Would I download and install a font just to view a web site the way the designer wanted me to?" - the answer from most people will be "No."

    Absolute positioning will NOT look right as soon as someone visits your site who has different text size settings on their browser than you do.

    Post a link to your site and let us see what you've done.
    Thursday, February 4, 2010 11:07 AM
  • To your first question, use a font-family. If their computer doesn't have the font you specify, provide a list of fall-back fonts that are of similar style and width, gradually getting more universal as you go, ending with the serif or sans-serif as an absolute last resort.

    Nobody, and I mean nobody, is going to download and install a font onto their computer just because a website asks/tells them too. Seriously. Nobody wants to waste the time or take the security risk.

    Absolute positioning is the most dangerous trap a "complete amateur" can fall into. Looks easy--breaks when viewed by someone with different settings/browsers. If there is any part of web design that should be reserved for experienced users, it's absolute positioning. You must know the pitfalls of it. The web ain't print; you have no control over the user's settings or monitor. You have to accommodate them, not the other way around.
    Thursday, February 4, 2010 1:50 PM
  • Thanks guys, I'll try uploading my site when I'm home in a couple of days - how do you set fall back fonts Bill? And what alternative positioning should I use?

    Use something like:

    p {
             font-family:Arial, Helvetica, sans-serif;
    }

    In this example the CSS is asking for the windows "Arial" first and then if the browser doesn't have that available it will look for the Helvetica which is usually on Apple boxes and if it doesn't have either of those the browser will show what ever "sans-serif" font it has around. On Linux boxes you usually get that latter and it ain't pretty.


    As far as positioning goes try using the default:

    "Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)"
    Thursday, February 4, 2010 3:36 PM
  • Damned this forum, I had posted earlier a long post with examples of what was wrong on your site in the coding and hit submit before leaving for several hours. I come back to find the post wasn't in the thread and is no where to be found.

    Okay, let me try again. The primary issues with your site is that you are using position absolute. Change:

    <div style="padding: 5px; margin: 10px; height: 902px; width: 1072px; position: absolute; left: 26px; top: 16px;">


    To <div id="content">

    Then after you remove the dupliate link to your stylesheet add:

    #content {
       width: 1072px;
       margin: 10px auto 0 auto;
       padding: 5px;
       position: relative;
    }

    This will center the content on your page, more or less but it won't fix all the issues. To do that you will need to get rid of all the absolutely positioned content.

    Looking at the page you have a basic masthead and two column layout that is pretty simple in terms of site complexity, no color changes that need to be full height or anything like that.

    Don't use points on the web, they are for print and are handled differently depending on the browser/os. If I have large fonts set in Windows IE will use 120ppi for rending while Firefox will ignore my large font setting and use 96ppi for rendering points. That a big difference. That's where ems & % come in. 1em is roughly 12pt or 16px text (depending on the users system but this works for math) so 44pt would be approx. 3.7em.

    Better coded: http://wizerways.net/screensavers/
    A few other changes to fit in 1024px window and a few of my preferences re coding:  http://wizerways.net/screensavers/alt.html

    Notice that in both examples there is real semantic mark-up used. Pargraphs separated by headings not line breaks.

    In my preferred version I used images for the headings because you will want those to stay in your chosen font even if the visitor doesn't have the same font installed.

    MS MVP Expression Tutorials & Help http://by-expression.com
    Sunday, March 7, 2010 11:10 PM

All replies

  • Be aware that font use is controlled by the owner of the font.  You can't just embed them without knowing if you are allowed to, or if you need to pay to do so.  Google it: lots of limitations and "gotcha"'s.  And in answer to the question "Would I download and install a font just to view a web site the way the designer wanted me to?" - the answer from most people will be "No."

    Absolute positioning will NOT look right as soon as someone visits your site who has different text size settings on their browser than you do.

    Post a link to your site and let us see what you've done.
    Thursday, February 4, 2010 11:07 AM
  • To your first question, use a font-family. If their computer doesn't have the font you specify, provide a list of fall-back fonts that are of similar style and width, gradually getting more universal as you go, ending with the serif or sans-serif as an absolute last resort.

    Nobody, and I mean nobody, is going to download and install a font onto their computer just because a website asks/tells them too. Seriously. Nobody wants to waste the time or take the security risk.

    Absolute positioning is the most dangerous trap a "complete amateur" can fall into. Looks easy--breaks when viewed by someone with different settings/browsers. If there is any part of web design that should be reserved for experienced users, it's absolute positioning. You must know the pitfalls of it. The web ain't print; you have no control over the user's settings or monitor. You have to accommodate them, not the other way around.
    Thursday, February 4, 2010 1:50 PM
  • Thanks guys, I'll try uploading my site when I'm home in a couple of days - how do you set fall back fonts Bill? And what alternative positioning should I use?
    Thursday, February 4, 2010 2:20 PM
  • Look in the post at the top of this forum labelled BEFORE POSTING. There's lots of links to tutorial and info that will show you the right way to A. use EW, and B. use HTML and CSS commands.

    Thursday, February 4, 2010 3:04 PM
  • Thanks guys, I'll try uploading my site when I'm home in a couple of days - how do you set fall back fonts Bill? And what alternative positioning should I use?

    Use something like:

    p {
             font-family:Arial, Helvetica, sans-serif;
    }

    In this example the CSS is asking for the windows "Arial" first and then if the browser doesn't have that available it will look for the Helvetica which is usually on Apple boxes and if it doesn't have either of those the browser will show what ever "sans-serif" font it has around. On Linux boxes you usually get that latter and it ain't pretty.


    As far as positioning goes try using the default:

    "Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)"
    Thursday, February 4, 2010 3:36 PM
  • For positioning, use margin, padding, floats and clears.  Look at the resources in the Before Posting.  Recommended minimum:  Download and work through Cheryl's "Basic Website Series" tutorial at http://by-expression.com/content/tutorials.aspx.  It will take a few hours and save you many days.  Go through the http://w3schools.com/ tutorials on CSS, HTML and XHTML [right at the top of the left hand menu].  You can flip through those very quickly, and have a context for what you are asking EW to do:  it helps, when you are creating a style, to know what the attributes you can select from actually do. :)
    Thursday, February 4, 2010 5:37 PM
  • Thanks for your advice, the font issue's solved now then, I'll use custom font families
    *EDIT* Actually that's not exactly true, I want to use Parchment as my primary font choice, but it seems to be significantly smaller than a lot of the other fonts, so if it goes to a fall-back font the title almost doubles in size - how do I control font sizes within the font family?

    Been going through the tutorials on the official expression web 3 site as I find them the easiest to follow - so I have a little more knowledge now

    Time Bandit, I can't see a 'default' positioning option
    To center all the content in my page I'm going to use the auto position for the left and right values, but because not all the content is directly central in relation to each other, I've decided to cut and paste all my page content to within one div and center that. It doesn't seem to be working though, I think it's because the individual divs within the larger div are absolute and thus ignore the positioning properties applied to the master div - does that make sense? If so how do I get around this? Thanks

    *EDIT2* It's as if I need to absolutely position the contained divs in relation to the master div which contains all the page's content as opposed to the edges of the page page itself

    Wednesday, March 3, 2010 10:38 AM
  • Use "em" as the font measurement unit

    1 em will produce on the users screen a font in the size that user wants to use as default

    2 em will be twice as big as whatever that user uses as default
    ClarkNK, A.K.A. HomePage Doctor
    HomePageDoctor.com -- Expression Web database tutorials
    Ownertrades.com -- Created with FP, Access, Bots and Wizards
    MyNumbersTracker.com -- Created with Expression, VWDExress, SQL Express, and ASP.NET.
    Wednesday, March 3, 2010 1:23 PM
  • You can't control font sizes differently for each font in a family. Clark's answer won't help you there. That's why I said in my post above..."provide a list of fall-back fonts that are of similar style and width."

    The natural fall-back for Arial is Helvetica, since they are very similar. You can't just put any old font in there as a fall-back and expect it to work.

    Is this a church site? I find Papyrus used a lot in religious sites.

    You need to read up on this stuff before you get any deeper. The resources are in the BEFORE POSTING thread at the top of the forum.

    Edit: 3/7/2010. I conflated the names of the fonts (Parchment vs Papyrus). But in any case--they are Windows-only fonts and need a font family for safety's sake.

    Wednesday, March 3, 2010 1:53 PM
  • "To center all the content in my page I'm going to use the auto position for the left and right values, but because not all the content is directly central in relation to each other, I've decided to cut and paste all my page content to within one div and center that. It doesn't seem to be working though, I think it's because the individual divs within the larger div are absolute and thus ignore the positioning properties applied to the master div - does that make sense? If so how do I get around this? Thanks"

    You get around it by not using absolute positioning, as I mentioned in my first reply.  That's a bad idea in general since anything that contains text needs to be able to expand when people increase their text sizes, and the content below it needs to be able to move out of the way.  Absolute position makes this impossible.  There are occasions when absolute position is useful, but you need to know how to use it, and what it can be used with.  General page layout is not one of these cases.

    Have you posted a link to your site in this thread?  (I can't find it.)  If not, please do.
    Wednesday, March 3, 2010 2:47 PM
  • I have tried using other positioning but whenever I do it moves everything else around and I want it to look how it looks on my screen at the moment - do I have to upload it to my domain, or is there anyway to attach a .htm file to this thread? Thanks
    Wednesday, March 3, 2010 3:04 PM
  • Thanks for your advice, the font issue's solved now then, I'll use custom font families
    *EDIT* Actually that's not exactly true, I want to use Parchment as my primary font choice, but it seems to be significantly smaller than a lot of the other fonts, so if it goes to a fall-back font the title almost doubles in size - how do I control font sizes within the font family?

    Been going through the tutorials on the official expression web 3 site as I find them the easiest to follow - so I have a little more knowledge now

    As others said you need to use fonts that are similar in size & structure in your font families. For example if you set your font size to .9em with Verdana as the first choice then Arial or Helvetica (for Mac users) as the second the size will be dramatically different.

    This is using Verdana.
    This is using Arial.
    This is using Tahoma.

    See the differences by lining up where the "g" at the end of using falls in each.

    If those tutorials you are following on the Expression site are teaching you to use absolute positioning then I'd recommend not following them. I'm serious about that because font scaling and even just using a different browser on a screen with a different resolution or any change to a visitor's default settings can break an absolutely positioned page.

    These are some of the reasons that I created the Building a Basic Website tutorial to avoid some of the pitfall created using absolute positioning as many of the MS tutorials teach you. Can you use absolute positioning without breaking a  site, sure IF you know all the pitfalls and are very careful about how/when you use them. I use absolute positioning on my company's website (which is not http://by-expression.com) but it isn't something for beginners to use because is is deceptively easy and can be very fagile.


    MS MVP Expression Tutorials & Help http://by-expression.com
    • Proposed as answer by Aprilla Wednesday, March 3, 2010 4:02 PM
    Wednesday, March 3, 2010 3:13 PM
  • I've been trying to figure out relitive positioning all afternoon and I can't get to grips with it - is there a guide on how to use it anywhere as you're right, the official expression web ones use absolute positioning?
    Wednesday, March 3, 2010 3:55 PM
  • Go look at the resources in the BEFORE POSTING sticky which includes many resources on creating page layouts without using either absolute OR relative positioning. You use floats, margin & padding to "position" your content on the page relative to othe content/containers.
    MS MVP Expression Tutorials & Help http://by-expression.com
    Wednesday, March 3, 2010 4:00 PM
  • To show us what you've done, yes you do need to publish it and post a link here.  (We need everything - CSS, images - not just html.  Publishing lets us see that.)  If you already have a site on your domain, you can publish this site-in-progress in a subdirectory, and the general public will not see it.  If there is no site up there yet, publish the site-in-progress and either leave it there and fix it over time, or remove it once you've gotten feedback on it.

    Wednesday, March 3, 2010 4:22 PM
  • Sorry, I've been mega busy - I originally built my site without using dynamic templates, but I decided to include them to tidy things up a bit, but for some reason it's changed the positioning of my elements in different browsers, but here it is anyway: http://www.crimsonnight.com/screensavers(DT).html 
    I've been thinking, is there a way I could send screenshots to someone and pay them to build my site exactly how I want it to look (ie correct all the stuff I can't seem to get my head around)?

    *EDIT* See it looks fine in my browser - if that was centered then that would be perfect: http://i124.photobucket.com/albums/p22/grantwilde/scrnshot.png
    Sunday, March 7, 2010 8:29 AM
  • Damned this forum, I had posted earlier a long post with examples of what was wrong on your site in the coding and hit submit before leaving for several hours. I come back to find the post wasn't in the thread and is no where to be found.

    Okay, let me try again. The primary issues with your site is that you are using position absolute. Change:

    <div style="padding: 5px; margin: 10px; height: 902px; width: 1072px; position: absolute; left: 26px; top: 16px;">


    To <div id="content">

    Then after you remove the dupliate link to your stylesheet add:

    #content {
       width: 1072px;
       margin: 10px auto 0 auto;
       padding: 5px;
       position: relative;
    }

    This will center the content on your page, more or less but it won't fix all the issues. To do that you will need to get rid of all the absolutely positioned content.

    Looking at the page you have a basic masthead and two column layout that is pretty simple in terms of site complexity, no color changes that need to be full height or anything like that.

    Don't use points on the web, they are for print and are handled differently depending on the browser/os. If I have large fonts set in Windows IE will use 120ppi for rending while Firefox will ignore my large font setting and use 96ppi for rendering points. That a big difference. That's where ems & % come in. 1em is roughly 12pt or 16px text (depending on the users system but this works for math) so 44pt would be approx. 3.7em.

    Better coded: http://wizerways.net/screensavers/
    A few other changes to fit in 1024px window and a few of my preferences re coding:  http://wizerways.net/screensavers/alt.html

    Notice that in both examples there is real semantic mark-up used. Pargraphs separated by headings not line breaks.

    In my preferred version I used images for the headings because you will want those to stay in your chosen font even if the visitor doesn't have the same font installed.

    MS MVP Expression Tutorials & Help http://by-expression.com
    Sunday, March 7, 2010 11:10 PM
  • Thanks so much for your reply Cheryl, especially for typing it out twice, and uploading some examples, I really appreciate it.

    OK changing the first bit to "<div id="content">" is easy enough, and I managed to remove the extra reference to the stylesheet, but whereabouts in the code do I add

    "#content {
       width: 1072px;
       margin: 10px auto 0 auto;
       padding: 5px;
       position: relative;
    }"?

    By "points" are you refering to the custom font size, eg '50pt' for 'The Chao Garden' subheading? And are you saying that even selecting 'large/small' etc for the font size drop down list isn't really good practice and that I should always use the em method instead? I tried changing 'The Chao Garden' subheading to 3.7em and it looks the same, so I'll keep it like that then; should I change the rest of my fonts (eg content/links) to em?

    Good idea using pictures, I shall do that instead, why didn't you use a picture for the main header though, should I avoid this? Also should I use .gif instead of .jpg?

    The other query I have is where to actually make the changes, because the one I uploaded relies on a dynamic web template but the changes you've made are solely to the screensavers page if im correct? Is there anyway I could directly import your optimised page into my site (I was thinking of downloading it and making it a dynamic web template or something if thats OK with you? If so I could thank you in my contact me & acknowledgements page with a link to your site?)

    Thanks again for all your help, I'm learning a lot
    Monday, March 8, 2010 10:26 AM
  • Crimson,

    Look at the examples I gave you hosted on my site. Open each one then in IE under the Page menu select "Edit with Expression Web". You will then be able to see what I did on each page. You can even save the open page to a new local site so you can play with it. That's what I did to get your images and get rid of the inline styles, provide proper structural mark-up - aka using real headings, a list for the links in the lower right, that sort of thing.

    Before you use what I provided, please contact me through my site using the form at http://by-expression.com/blogs/by-expression/contact.aspx 
    MS MVP Expression Tutorials & Help http://by-expression.com
    Monday, March 8, 2010 3:29 PM
  • Thanks Cheryl, will do, don't see the option to 'edit with expression web' though, only 'microsoft office word'
    Monday, March 8, 2010 3:40 PM
  • Then you need to change the settings. Go to Tools > Internet Options > Program tab and change the "Edit with" dropdown to Expression Web instead of Word.
    MS MVP Expression Tutorials & Help http://by-expression.com
    Monday, March 8, 2010 8:29 PM
  • I'm trying to use as much of your code as I can Cheryl but I have a couple of queries if you don't mind?

    One of the page titles ('Contact Me & Acknowledgments') is bigger than the space allocated for the page title and doesn't seem to center in the column if that makes sense? How do I correct this?
    *EDIT* Also the links (under the main page picture) are not centrally aligned with the picture so the same applies to that
    *EDIT3* Is there a way to make the PageTitle block a fixed size because I'm scrolling through my pages and it pushes the rest of the content down when the images are slightly different size - sorta ruines the flow - I'd prefer to resize the images to fit within a set area if possible?

    Also why didn't you use an image for the main site header (the re-opening bit at the top) - shouldn't I replace it with a .gif so everyone can view it correctly? Which brings me onto my last point, why did you use .gif as opposed to .jpg etc; is it better practice?

    *EDIT2* The other thing is, different pages require different numbers of content blocks in the left column - I'm relying on a dynamic template (created using your screensaversalt upload) so I've made the three blocks from the screensavers page into editable regions but most pages only require two content blocks and when I try to delete one it doesn't seem to work, only the content within dissapears, and not the actual block. For the page I'm working on now for example I require 5 blocks of content on the left hand side, how do I add more (if I'm using a dynamic template) in the same format you've used?

    If you want me to re-upload my site let me know;
    thanks so much once again!
    Wednesday, March 10, 2010 9:46 AM
  • Display issues always require a link to the page displaying the problem so links are necessary.
    MS MVP Expression Tutorials & Help http://by-expression.com
    Wednesday, March 10, 2010 4:30 PM
  • OK sure thing, my company's blocked FTP uploads, so I'll do it when I get home tomorrow night, thanks

    Wednesday, March 10, 2010 4:47 PM
  • Managed to upload a couple of pages in the end:
    So you can see how've I've used your input to structure things compared to before: http://www.crimsonnight.com/Screensavers.html
    This one has an example of the centering issue: http://www.crimsonnight.com/ContactMe&Acknowledgments.html
    This one requires more content (ie I've written another story so require another subtitle and content block for the blurb): http://www.crimsonnight.com/CreativeWriting.html **NOT ANY MORE - SEE EDIT2**
    Home page (doesn't rely on dynamic template): http://www.crimsonnight.com/defaultupload.html
    *EDIT* Uploaded another page, maybe needs a layout change, or a scrollbar for the main site news?: http://www.crimsonnight.com/News.html

    *EDIT2* I think I may have found one solution - pressing enter within a content box creates another section within which a different style can be applied - so based on this logic I could change my dynamic template so that there's only one content box per page and put as much or as little stuff in each one as I require, or is that bad practice? I have uploaded a couple of examples:
    http://www.crimsonnight.com/CreativeWriting.html
    http://www.crimsonnight.com/Games.html

    Look forward to your response!

    *EDIT3* Just incase anyone read this, I managed to solve most the problems myself (I'm just not sure how well) - and have opened a new thread here: http://social.expression.microsoft.com/Forums/en-US/web/thread/0dddeda2-be5a-4ce8-a49a-02ed2dc72ca2
    Wednesday, March 10, 2010 9:51 PM