locked
Working with template RRS feed

Answers

  • I revisited your posted page and, based upon what you have there, made a guess about what your actual objective is. On that basis, I presume that you're looking for this:

    If that is the case, then you can alter the rule for the .title selector as follows:

    #outerWrapper #header .title {
        font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;
        font-size: 1.7em;
        font-weight: bold;
        color: #000000;
        margin-top: 70px;
        float:right;
        display:inline; /* Prevent IE double-margin bug */
        margin-right:120px;
    }

    And, since we don't really need those embedded styles in the DWT, added while experimenting, get rid of them and add them to the site.css selector, like so:

    #outerWrapper #header {
        background-color: #9bb6d2;
        background-image:url('../images/Inside-Edge-logoB-this-one-no-tag-150h.jpg');    /* substitute your file name/path here */
        background-repeat:no-repeat;
        padding: 10px 10px 10px 10px;
        font-weight: bold;
        border-bottom: solid 1px #4b647f;
        height: 150px;
        margin:0;
        padding:0;
    }

    That results in what it APPEARS you want to accomplish, although my image and header are larger (based upon your "200px" height comment above). To adjust that, simply resize your image (in a graphics editor), and make the necessary adjustments to the CSS.

    That's my best guess at what you're after, and it's all I can do until you provide exact specifications for your objective. (I have not explained where the spurious "horizontal blue bar" came from because, frankly, it's not worth the time to analyze faulty CSS to figure out and explain the cause. Sorry. ;-)

    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 Wednesday, June 6, 2012 4:34 PM
    • Marked as answer by YoVincenzo Wednesday, June 20, 2012 7:43 PM
    Wednesday, June 6, 2012 4:27 PM
  • You don't say which direction you want the gradient to be, vertical or horizontal, but yes, you would create it in Photoshop or another editor, then take a vertical or horizontal slice of it, depending upon your objective, and tile it as the background-image property for that div. If the div will contain text, which means its height may increase, you'll want to also assign a background-color property equal to the terminal value of the gradient color, so that it's unnoticeable when the div's size increases beyond that of the gradient.

    To see an example, check out this site, where I used a double gradient slice in the header. View it in Firefox, and select "View|Zoom|Zoom Text Only," then start pressing "Ctrl-+" repeatedly. Notice that as the "An Independent Insurance Agency" text in the header increases in size, eventually pushing the lower bound of the header div downward, you don't really notice that the gradient has ended, because the background color is identical to the bottommost color of the gradient image. Works like a champ... ;-)

    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.

    • Marked as answer by YoVincenzo Monday, July 9, 2012 4:24 PM
    Saturday, July 7, 2012 9:02 PM
  • Right. If what you are after is something similar to that effect, ideally you would create your vertical gradient at the intended height of the container. The width is immaterial, because you're going to use "background-repeat: repeat-x" to tile it horizontally anyway, like so:

    #header {
       background-image: url('images/my-bg-gradient.jpg');
       background-repeat: repeat-x;
       background-color: /* whatever your lower gradient color is goes here */
    }

    Note that the background-color is only significant if the header will contain actual, readable (and scalable) text (that was my client's chosen <h1> text). If your header will contain only images or other non-text content, it will not be scaled and that property is moot.

    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.

    • Marked as answer by YoVincenzo Monday, July 9, 2012 4:24 PM
    Saturday, July 7, 2012 10:11 PM

All replies

  • Without knowing with template you are using, or exactly what you've done, I can only give the general response: to make an image be in the background of your text, an obvious way to do it is to make it the background image of the container of the text.
    Friday, February 17, 2012 12:04 AM
  • Thanks, that helps. I am getting closer now.

    My problem now is the container seems to be the Masthead, and I can't figure out how to set the background.  I have been successful in setting a background for the header, but that is not what I want.

    Here is the code from the .dwt that I am looking at, but it seems I need to be looking somewhere else:

    <!-- Page Container begins here -->
    <div id="outerWrapper">
     <!-- Masthead begins here -->
     <div id="header">
      <p class="title">My Site Name</p>
     </div>
     <!-- Masthead ends here -->
     <!-- Navigation begins here -->



    • Edited by YoVincenzo Friday, February 17, 2012 12:31 AM
    Friday, February 17, 2012 12:25 AM
  • The "Masthead" is just a name in the comments.  The container is <div class="header">, and inside that is another container, <p class="title">.  Pick one, probably the "header".
    Friday, February 17, 2012 12:32 AM
  • OK that did it for me. You were correct, it was the header.

    Thanks

    Friday, February 17, 2012 1:06 AM
  • By the way, I placed the background image by selecting the header in the code, going to CSS Properties tab/CSS properties, and selecting background image under there. Is there another way to do this? Sometimes I find out down the line that the way I do things is not the easiest way, or the preferred way.

    Thanks


    • Edited by YoVincenzo Friday, February 17, 2012 1:12 AM
    Friday, February 17, 2012 1:11 AM
  • As with most things in EW you can use the CSS Properties Task Panel or the Modify Styles Rask Panel or Edit the style sheet itself. The header is the correct set of style rules to edit.

    If you prefer to use an image for the site name rather than the style rules for .title, you can create an image for the site name and insert it into the header div as an image.

    Example: http://www.expression-web-tutorials.com/night-lights/

    There are also instructions for working with the site templates here http://www.frontpage-to-expression.com/site-templates/working-with-site-dwt.html

    Tina and I would love to see examples of the site templates in use if you would like to send us a url.

    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, February 17, 2012 1:59 AM
  • Thanks for the info, Pat.

    When the site is set up in a few weeks, I will send you a link.

    By the way, does your site have any tutorials on setting up a photo gallery or slideshow? From my reading of old posts here, the advice has been that we need to use a 3rd party application. I assume that is still the case?

    Thanks

    Friday, February 17, 2012 3:25 PM
  • The two I use most often are Web Album Generator which is free. http://www.expression-web-tutorials.com/web-album/index.html

    and the EW addin from Ajatix Lightbox http://www.expression-web-tutorials.com/ajatix-lightbox.html

    There are others available but these are the two I use most often.

    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, February 17, 2012 3:53 PM
  • Thanks Pat.

    I am waiting to hear if we are going forward on the website. Once I know I will go forward with one of those galleries.

    Thanks

    Friday, February 24, 2012 2:47 PM
  • Hi,

    I am going forward now with this project, still working with Pat and Tina's template "two column left fixed width 1024".

    I need to make the container with the title larger to fit a logo, but when I make it larger the content below it does not move down so I can't see the increase in size. What would be the correct way to do this?

    Thanks


    • Edited by YoVincenzo Monday, May 28, 2012 1:04 AM
    Monday, May 28, 2012 1:04 AM
  • Publish your page and post a link.

    Monday, May 28, 2012 2:17 AM
  • ???

    Which container? The paragraph with class="title," or the div with id="header," which contains it. You have to be specific—we can't read your mind.

    In answer to either, it will automatically expand vertically to hold its contents, and depending upon the nature of the contents (inline or block), vertical padding can be used make it expand even further, so it's not clear what you're talking about.

    [Note: No offense to the authors, for whom I have the greatest respect, but I usually avoid creating ids or class names identical to standard HTML elements, such as using class="title" in this case. Just sayin'... ;-)]

    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 Monday, May 28, 2012 2:37 AM
    Monday, May 28, 2012 2:31 AM
  • Sorry for the lack of detail.

    Yes, it is the paragraph with class="title".

    I will press people to try get the hosting set up so I can publish this to make it easier to ask questions.  I'll try to make that happen today.

    Thanks

    Monday, May 28, 2012 2:31 PM
  • I need to make the container with the title larger to fit a logo, but when I make it larger the content below it does not move down so I can't see the increase in size. What would be the correct way to do this?

    What is your exact objective? Is the existing paragraph text meant to overlay the logo image? Sit beside it? Which side? Below it? Above it? Why not put the logo image in the "header" div which contains the "title" paragraph?

    When describing display issues, there is no such thing as too much detail, but, as you can see, there can easily be far too little.

    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.

    Monday, May 28, 2012 7:08 PM
  • OK it took longer than I hoped, but the hosting is set up now.

    http://www.insideedgerecovery.com/

    My objective is to have the logo and the company name in the "header" div. I chose to put them both in the "title" paragraph but I am willing to change that if necessary.

    My problem is that I wanted more vertical space for the logo and company title, but when I made the "title" paragraph taller the "header" div did not expand vertically too. So then I went in the .css file and changed the "header" div from 100 to 200. That made the "header" div taller but now there is a horizontal blue bar through the header div that I can't identify.

    Am I going about this correctly, or is there a better way to do this?

    Thanks

    Wednesday, June 6, 2012 3:05 AM
  • When creating an embedded style for the header didn't work, but an inline style did, I realized that there must be a higher specificity selector somewhere, so I looked in site.css, and sure enough, found this:

    #outerWrapper #header {
        background-color: #9bb6d2;
        padding: 10px 10px 10px 10px;
        font-weight: bold;
        border-bottom: solid 1px #4b647f;
        height: 150px;
        margin:0;
        padding:0;
    }

    Actually, when I found it, the margin and padding weren't there, and height was 100px. Anyway, because that selector has two ids, it has a specificity of 200, and no selector declared later can override it unless it has a higher specificity. When I set the rule in site.css as shown, and already had an embedded rule in the dwt for this

    #header {
        background-image:url('../images/Inside-Edge-logoB-this-one-no-tag-150h.jpg');    
        background-repeat:no-repeat;
    }

    I got this result:

    Now, I still don't know if that's what you want, because you apparently didn't read my last post, particularly this line: "When describing display issues, there is no such thing as too much detail, but, as you can see, there can easily be far too little." You still haven't explained exactly what your specific objective is for the relationship between the image and the title (Side by side? Where? Overlaid? How? Get it? We can't read your mind...). When you do so, I will try to provide more specific instructions to attain that objective.  ;-)

    Oh, BTW, when I grabbed that header image, it was 2167px x 918px and 162kB!! Outrageous! I took it into Photoshop and resized it to 354px x150px and 4.8kB, the actual size it was to be used at. Always pre-process, size and optimize, your graphics in a graphics editor before using them on the Web. Web editors and browsers make crappy graphics processors...

    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 Wednesday, June 6, 2012 4:08 PM
    • Marked as answer by YoVincenzo Friday, June 15, 2012 3:10 AM
    • Unmarked as answer by YoVincenzo Wednesday, June 20, 2012 7:43 PM
    Wednesday, June 6, 2012 5:07 AM
  • I revisited your posted page and, based upon what you have there, made a guess about what your actual objective is. On that basis, I presume that you're looking for this:

    If that is the case, then you can alter the rule for the .title selector as follows:

    #outerWrapper #header .title {
        font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;
        font-size: 1.7em;
        font-weight: bold;
        color: #000000;
        margin-top: 70px;
        float:right;
        display:inline; /* Prevent IE double-margin bug */
        margin-right:120px;
    }

    And, since we don't really need those embedded styles in the DWT, added while experimenting, get rid of them and add them to the site.css selector, like so:

    #outerWrapper #header {
        background-color: #9bb6d2;
        background-image:url('../images/Inside-Edge-logoB-this-one-no-tag-150h.jpg');    /* substitute your file name/path here */
        background-repeat:no-repeat;
        padding: 10px 10px 10px 10px;
        font-weight: bold;
        border-bottom: solid 1px #4b647f;
        height: 150px;
        margin:0;
        padding:0;
    }

    That results in what it APPEARS you want to accomplish, although my image and header are larger (based upon your "200px" height comment above). To adjust that, simply resize your image (in a graphics editor), and make the necessary adjustments to the CSS.

    That's my best guess at what you're after, and it's all I can do until you provide exact specifications for your objective. (I have not explained where the spurious "horizontal blue bar" came from because, frankly, it's not worth the time to analyze faulty CSS to figure out and explain the cause. Sorry. ;-)

    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 Wednesday, June 6, 2012 4:34 PM
    • Marked as answer by YoVincenzo Wednesday, June 20, 2012 7:43 PM
    Wednesday, June 6, 2012 4:27 PM
  • Thanks for the help, paladyn.

    Sorry it took me a while to get back here. Yes, your guess about what I wanted was correct. I've been experimenting with it following your suggestions, and I have been able to get it to look like that. But by the time I was done the code was somewhat messed up, so I decided to start over.

    The directions you gave me for repairing the code were helpful, but I'd like to learn how to do the same thing using the Design interface, since I am still in the early learning stages in working with code. Could you give me some direction in doing that?

    I created a subdomain to use for this project, so the web address now is
    http://support.insideedgerecovery.com/

    Thanks


    • Edited by YoVincenzo Tuesday, June 12, 2012 11:21 PM
    Tuesday, June 12, 2012 11:21 PM
  • The directions you gave me for repairing the code were helpful, but I'd like to learn how to do the same thing using the Design interface, since I am still in the early learning stages in working with code. Could you give me some direction in doing that?

    No, I cannot, and neither can anyone else. You can't work that way with Expression Web. It is NOT a WYSIWYG program, and you must know HTML and CSS, at a minimum, in order to use it effectively.

    Did you notice the process of analysis I went through above, figuring out what you wanted, and how to arrive there, then executing it? I was able to do that because of my knowledge of HTML and CSS; it would not have been possible without it. And it would not have been possible, at all, using the "design interface."

    Here's the thing: MS has produced a whitepaper that you must read, called the Prerequisites for Using Microsoft Expression Web. That title means exactly what it says, and you should note that "prerequisite" is synonymous with "requirement," not "suggestion." You must know those technologies in order to work with EW, period.

    If you check of the Learning Resources section of the Forum FAQs and Guidelines - Start Here, you will find a lot of free resources. I recommend that you start with the w3schools courses at http://w3schools.com/html/ and http://w3schools.com/css/. They're bite-sized, self-paced lessons you can work through at your own pace. Then, when you finish them, download and work through Cheryl's excellent "Build a Basic Web Site" video tutorial, at http://by-expression.com/post/2009/09/22/Basic-Website-Tutorial.aspx, which will teach you how to apply those principles using EW's visual interface.

    Don't assume that you can simply start with a template and work with it without knowing anything. That's not the way it works. Whether starting from scratch, or building upon a template, you must know HTML and CSS to use EW.

    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.

    Wednesday, June 13, 2012 12:32 AM
  • "I created a subdomain to use for this project, so the web address now is http://support.insideedgerecovery.com/"

    Well, that's no help, it's all in Latin! (We've had people come in here asking why their templates are in a foreign language. ;-) )

    The problem is, the Design Pane can't know what your intentions are, so it has to default back to a layout method that's the least common denominator. Try this (then throw the page away): in the Design Pane, drag a DIV (or the edge of one) a little ways on the screen. EW will automatically change it to a layer (absolutely positioned DIV), and your site will break on other peoples' computers. But it's the only choice EW has.

    If you can't deal with HTML and CSS, your best bet is to give up on Expression Web and use the website builder that's probably included with your hosting package or use Verizon Website Builder or Intuit Website Builder (monthly fees apply, of course) or the $20 drag-and-drop software at Staples. I'm not being a smart-ass, those are your options. They will ALL use layers, it'll be a piece of cake to do, and it'll be a piece of doo-doo on other peoples' machines. There is no halfway method. You gotta take a bit of time and learn the basics.

    N.B.: The normally execrable forum software is particularly acting up tonight. Everything I click takes me back to my Profile page to modify it. Ugh!


    Alec Guiness walks into a cell phone store and picks up a smartphone. The salesman tells him, "This is not the Droid you are looking for."


    Wednesday, June 13, 2012 2:39 AM
  • "how to do the same thing using the Design interface"

    You write your CSS by hand, or you use the Style panels:  "New Style" in Apply Style or Manage Style, and you can also modify styles in the CSS Properties panel.  These methods assume you know what you want to do, but offer you choices rather than require you to do it by memory.  You do not create your CSS in Design View.

    To use EW, you will need to become comfortable with CSS - no choice, or you will create bad pages that break.

    Wednesday, June 13, 2012 3:19 AM
  • N.B.: The normally execrable forum software is particularly acting up tonight. Everything I click takes me back to my Profile page to modify it. Ugh!

    Ah, so I'm not the only one. At first I thought it was my browser of choice, FF12, but then I found that it did the same on all browsers. An equal opportunity cock-up...

    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.

    Wednesday, June 13, 2012 2:32 PM
  • It should be noted that the tools provided in the interface can be used effectivly ONCE you understand what they are doing. This means when you use them you look over EW's shoulder and make sure the result is correct. In other words the default code can not always be relied upon to be the best choice. Some compromise is available when using EW's tools in that you can use them effectivly within those limitations without being a total CSS-HTML expert, BUT you must at a minimum know the basics. I have co-workers who hand code everything and others who are somewhere in the middle and still others who work in the design interface. For the most part they all can make good pages that validate. 
    Wednesday, June 13, 2012 2:58 PM
  • True, but the knowledge is the key. Without it, it is very easy to accidentally create position attributes when dragging elements around and sizing them in design view. And without knowing the impact upon page flow of position attributes, the developer cannot understand what is happening to the page when things go squirrelly. The irony is that when one knows enough about CSS to take this into account, one generally does not need to use the design interface to create layout. ;-)

    In the case of what the OP in this instance wanted to accomplish, working with the template, it required, and was trivially easy to accomplish with, the application of margins, padding, and floats, and could not have been accomplished using the design interface without either creating AP elements or applying the appropriate CSS, in which case the design surface is unnecessary.  Q.E.D.  ;-)

    cheers,
    scott

    "If you don't understand positioning, you probably don't need it. If you did understand it, you would not use it."— _Ronx


    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 Wednesday, June 13, 2012 3:44 PM
    Wednesday, June 13, 2012 3:35 PM
  • Thanks for all the input.

    The issue here is that I have a learning disability that makes it a long learning curve for me to adapt to working with the CSS/html code. It has been suggested to me that I may be better off using Wordpress or Joomla or one of the other similar programs, but I wanted the challenge of working with EW because I thought in the end it would give more flexibility.

    Right now I am at the stage of using templates, working in the Design view, and then using my (still limited) knowledge of HTML to fix problems or tweak the page. I frequently work in the Split view so I can see the code that is being created. Doing it like this allows me to ease into the learning process, and I am getting better with HTML. While I am unable to create anything but a simple page from scratch, I have been able to work successfully with several templates in this manner up to now. This particular procedure in this template is giving me a problem though.

    Thursday, June 14, 2012 3:31 AM
  • That is EXACTLY the way to do it. Always work in split view (that's a universal recommendation in here), and everybody says that that is a great way to learn the code (click on the item in the Design Pane, check the code above). I learned to code in Notepad in the first class I took! And I worked in text-based editors before Dreamweaver. But split view is the best and a great way to learn the code.

    Keep at it.

    WordPress and Joomla have their own learning curves. WordPress is far simpler of the two. But modifying either is no easy task. Adding content is a piece of cake, though, so if you find a WP template you like, you're good to go. I hate setting Wordpress up on our servers, though.  Wordpress host your site.


    Alec Guiness walks into a cell phone store and picks up a smartphone. The salesman tells him, "This is not the Droid you are looking for."

    Thursday, June 14, 2012 3:49 AM
  • The thing is, the more complex the changes you want to ring on a template, the more you will need to know in order to to do it. Resolving your original question, above, took almost no time at all—it actually took more time to figure out what you were after than it did to implement it afterward.

    Here's the thing: I think you may be making some incorrect assumptions about the learning needed. Rather than retype it all, let me copy my earlier references from above:

    If you check of the Learning Resources section of the Forum FAQs and Guidelines - Start Here, you will find a lot of free resources. I recommend that you start with the w3schools courses at http://w3schools.com/html/ and http://w3schools.com/css/. They're bite-sized, self-paced lessons you can work through at your own pace. Then, when you finish them, download and work through Cheryl's excellent "Build a Basic Web Site" video tutorial, at http://by-expression.com/post/2009/09/22/Basic-Website-Tutorial.aspx, which will teach you how to apply those principles using EW's visual interface.

    Those w3schools HTML courses are literally bite-sized, very small, concise lessons, 150 in total, each introducing a single aspect of HTML, and each with an accompanying "Try It Yourself!" exercise to practice applying the principle taught in THAT lesson—immediate feedback and reinforcement. Likewise with the w3schools CSS lessons, same format. You can go through them at your own pace, in any order you wish, going from one to the other, even using them as reference lookups. I believe that you will find they will fit your learning situation admirably.

    Likewise with Cheryl's video tutorial. I have done it myself, and can recommend it from my own personal experience. It comes with a zip file containing all of the assets—Word files, images, etc.—used in the tutorial. Download the tutorial and assets file. Watch it through completely first. Then, watch it through again, stopping and starting it this time so that you can use the assets to actually work through it with her this time. You will be amazed at how much you will learn from this process, I promise you.

    The thing is, you will never become proficient enough to make anything but very minor changes to templates by using the design surface. That is not what it is for, and not what EW is for. Truth. The changes I made above, while significant in terms of your immediate objective, were minor, trivial, in terms of the process of creating the average Web site, and if you expect to ever be more than a tinkerer, or to aspire to professional (paid) status, you will have to learn this stuff. There's no better time than now... ;-)

    Speaking of now, those posts up above where I posted the solution to your original question, along with the image and the code that produced it, did answer the thread question, and should be marked as answer.

    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, June 14, 2012 4:23 AM
  • OK thanks. I've been working through more tutorials.
    Wednesday, June 20, 2012 7:42 PM
  • I want the background in the "topNavigation" div to be a gradient.

    Do I need to create in image in photoshop and make it the background for the div, or can EW create a gradient for me?   The site is still at http://support.insideedgerecovery.com/

    Thanks



    • Edited by YoVincenzo Saturday, July 7, 2012 8:44 PM
    Saturday, July 7, 2012 8:43 PM
  • You don't say which direction you want the gradient to be, vertical or horizontal, but yes, you would create it in Photoshop or another editor, then take a vertical or horizontal slice of it, depending upon your objective, and tile it as the background-image property for that div. If the div will contain text, which means its height may increase, you'll want to also assign a background-color property equal to the terminal value of the gradient color, so that it's unnoticeable when the div's size increases beyond that of the gradient.

    To see an example, check out this site, where I used a double gradient slice in the header. View it in Firefox, and select "View|Zoom|Zoom Text Only," then start pressing "Ctrl-+" repeatedly. Notice that as the "An Independent Insurance Agency" text in the header increases in size, eventually pushing the lower bound of the header div downward, you don't really notice that the gradient has ended, because the background color is identical to the bottommost color of the gradient image. Works like a champ... ;-)

    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.

    • Marked as answer by YoVincenzo Monday, July 9, 2012 4:24 PM
    Saturday, July 7, 2012 9:02 PM
  • The double gradient in your site is similar to what I'd like. When I create the slice to use, should it be the same height in pixels as the topNavigation div and the width is not important because it will tile across? And are there any special steps I should take in order to make it tile correctly, or do I just select it to be the background image and EW does the rest?

    Thanks


    • Edited by YoVincenzo Saturday, July 7, 2012 9:24 PM
    Saturday, July 7, 2012 9:24 PM
  • Right. If what you are after is something similar to that effect, ideally you would create your vertical gradient at the intended height of the container. The width is immaterial, because you're going to use "background-repeat: repeat-x" to tile it horizontally anyway, like so:

    #header {
       background-image: url('images/my-bg-gradient.jpg');
       background-repeat: repeat-x;
       background-color: /* whatever your lower gradient color is goes here */
    }

    Note that the background-color is only significant if the header will contain actual, readable (and scalable) text (that was my client's chosen <h1> text). If your header will contain only images or other non-text content, it will not be scaled and that property is moot.

    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.

    • Marked as answer by YoVincenzo Monday, July 9, 2012 4:24 PM
    Saturday, July 7, 2012 10:11 PM
  • I created it but did not find a need for the background color options you specified. Would adding it do anything for me?

    http://support.insideedgerecovery.com/ 

    I'd like to add, under the text paragraph, where presently the picture of the bridge is, 4 square boxes boxes, each about 200 px high by 200 px wide, all right next to each other, and centered on the page. They will have some text in them and will serve as links to some other pages. What would be the best way to do that?

    Thanks

    Monday, July 9, 2012 4:31 AM
  • Did you read my last post? The link you just provided, first of all, has no gradient background. I thought you said you'd created it.

    Second, if you read my last post, you know that if you plan to have text in that header, which you still do now, you will need a background color as described in that post to account for vertical expansion when the text is resized.

    Third, you've got a bad habit of not bothering to mark the posts that answer your question as the answer.

    Fourth, this question about the boxes makes yet another question completely unrelated to this thread's topic (which has already been answered), and should have been asked in a new thread.

    Fifth, what you are asking requires a basic understanding of HTML and CSS to implement, and neither I nor anyone else is going to give you a step by step tutorial in how to build your page, element  by element, which is what you're asking for.

    You have already been told to read the Prerequisites for Using Microsoft Expression Web to see what you need to know to use EW. Do so. Now!

    When you have done so, see the Learning Resources and Reference Sites section of the Forum FAQs and Guidelines - Start Here, to find a list of free training resources, enumerated in detail above, to acquire the knowledge you will need. We're not here to spoon feed you and lead you by the hand through building your site. Learning what you need to know is your responsibility. Might as well start now.

    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.

    Monday, July 9, 2012 5:21 AM
  • Did you read my last post? The link you just provided, first of all, has no gradient background. I thought you said you'd created it.

    There is a gradient. It is in the topNavigation div. That was the location I asked about. Please re-read my post on with that question.

    Second, if you read my last post, you know that if you plan to have text in that header, which you still do now, you will need a background color as described in that post to account for vertical expansion when the text is resized.

    As stated, the header was not the location for the background I asked about. If you are looking for it there, that is the reason for your upset. And now I understand what happened: since you were thinking I was talking about the header, you gave the instructions about vertical text expansion which did not apply to me. That explains why I found I did not have to implement background color, and what caused my confusion when implementing your solution.

    Third, you've got a bad habit of not bothering to mark the posts that answer your question as the answer.

    I do mark the posts that answer, just apparently not fast enough to suit you. Since I was still asking about the background, I saw no need to yet on this issue. And yes sometimes I do forget for a few days.
    And previously you asked me to mark replies as answers when I did not feel that I had the answer yet, in spite of the fact that you judged it to be answered.


    Fourth, this question about the boxes makes yet another question completely unrelated to this thread's topic (which has already been answered), and should have been asked in anew thread.

    Looks to me like the topic tile is “Working with a template” which makes the questions relevant. Is there a rule about only one question per OP per thread? If so, I can go along with that. I thought using the same thread might make a smoother flow and give those who assist some background on what is going on.

    Fifth, what you are asking requires a basic understanding of HTML and CSS to implement, and neither I nor anyone else is going to give you a step by step tutorial in how to build your page, element by element, which is what you're asking for.

    I don’t see that the question requires a step by step tutorial. The reply could simply be an answer that provides a framework for me to work from and learn from. Something like “you need to create 4 divs that are aligned in this particular manner”.  0r  “you need to create a four cell table”. Or a link to a tutorial that covers this issue.  Like the answers that KathyW has given me in this and other threads. A detailed in-depth answer while helpful, is not always what the question requires.

    You have already been told to read the Prerequisites for Using Microsoft Expression Web to see what you need to know to use EW. Do so. Now!

    Already did that.

    When you have done so, see the Learning Resources and Reference Sites section of theForum FAQs and Guidelines - Start Here, to find a list of free training resources, enumerated in detail above, to acquire the knowledge you will need. We'renot here to spoon feed you and lead you by the hand through building your site. Learning what you need to know isyourresponsibility. Might as well start now.

    I think the definition of spoon feed is a very subjective one. Many questions that are regularly answered in forums like this could be called spoonfeeding. And for most people that is ok.  I am a member in several forums in other hardware- and software-related areas where I am knowledgeable, where I give freely of my knowledge, without judging or demanding that the posters go out and research because I’ve judged their questions to be too basic. And if I was to feel that way, I would just ignore their question and let others answer the issue. And it is not unusual to see times where one person no longer feels like answering and someone else steps in to provide support. I’ve always believed that this is the spirit that discussions forums are predicated on. Kind of like people standing around in the coffee room asking questions and sharing knowledge.


    Your answers are very helpful and it is clear that you put a lot of time into writing them, so I can see you would have an attachment to how people interact here. But everybody needs to learn at their own pace.

    Thanks



    • Edited by YoVincenzo Monday, July 9, 2012 3:44 PM
    Monday, July 9, 2012 3:35 PM
  • So back to my question:

    I am thinking now a div with 4 divs inside that. Might that be a way to go for this?
    (or if forum rules dictate, I will create another thread for this, not sure now).

    Edit: Actually I think I will take Scott's advice and create another thread. Never mind.





    • Edited by YoVincenzo Monday, July 9, 2012 4:10 PM
    Monday, July 9, 2012 3:53 PM
  • Did you read my last post? The link you just provided, first of all, has no gradient background. I thought you said you'd created it.

    There is a gradient. It is in the topNavigation div. That was the location I asked about. Please re-read my post on with that question.

    The page that is currently at that address is NOT the page that was there when I created my last post to you. I don't know when you changed it, but as of the time I retired last night, that address pointed to what appeared to be the base template, which had no gradient, anywhere. That's pretty cheesy of you, changing the playing field before your reply.

    With respect to the thread, it is true that "working with a template" covers a lot of ground, which speaks more to the vagueness of the subject than anything else, but I should have spoken of the thread's actual initial question, which concerned an image in the header, and which was answered. Then there came the question about the gradient, which was also answered. Then came the question about the four boxes... it was beginning to appear that this was going to be an endless thread, with you coming back with every change you wanted to make to the template, to get more instruction in how to do what you wanted to do, instead learning the principles that we use to formulate our answers to you.

    I don’t see that the question requires a step by step tutorial.

    The answer to that question, no, but that's not what I was referring to. Read again what I said:

    "...neither I nor anyone else is going to give you a step by step tutorial in how to build your page, element by element, which is what you're asking for."

    I was referring to the fact, apparent from your actions so far, that you seem to expect us to work with you down the page, from header to footer, providing you with step by step instructions in how to create the page you are after. Given the way the thread was progressing to this point, that is the impression that was given. Whatever...


    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.

    Monday, July 9, 2012 5:29 PM
  • I did not go back and change the playing field. The website was updated before the post, about 1 minute before actually. It's easy enough for you to confirm that by looking by looking at the update time of the page.

    I would expect that refreshing the page with F5 would have allowed you to see the update earlier, not that there is any way you could have known it at the time.

    But stuff like this happens all the time. It's an unfortunate side effect of communicating in a limited way like this. The coffee room conversations of the old days were much more concise. Sorry about the miscommunication.

    Monday, July 9, 2012 6:10 PM