none
gradient in master.dwt of a template RRS feed

  • Question


  • Hi

    I used EW to build a site using the Small Business2 template. I was able to change the logo with my own but how can I apply gradient color to the masthead div at the top of the master.dwt file?

    I know how to use ED to make the slice I want, is that the way to do it?

    thx

    • Edited by Samjesse Friday, May 22, 2009 11:26 AM
    Friday, May 22, 2009 11:07 AM

All replies

  • You can create a gradient using css filters but this will only work in IE. The better way is to create a backgound image with the gradient you need and use this.

    Ian
    MS MVP Expression

    http://www.ew-resource.co.uk
    http://www.fp-resource.co.uk


    Ian Haynes
    Friday, May 22, 2009 11:41 AM
  • You can create a gradient using css filters but this will only work in IE. The better way is to create a backgound image with the gradient you need and use this.

    Ian
    MS MVP Expression

    http://www.ew-resource.co.uk
    http://www.fp-resource.co.uk


    Ian Haynes


    I was able to create a slice in ED and used it, but how can I repeat it across the whole width of the page? I remember in one of the videos that it is better to use repeat than to make a big image.
    and if I use repeat, I want the logo on the top.

    thx
    Friday, May 22, 2009 5:57 PM
  • Look at the style options for background.  You'll see, in addition to backgroung-image, where you'll tell EW where your image slice is, there is background-repeat, where you can tell it to repeat in the x or y direction. If left blank, the default is to repeat both across and down.
    Friday, May 22, 2009 6:42 PM
  • How can I keep the footer at the bottom of the screen? I am making sure that content of any page does not need scrolling down. i.e. every thing is displayed with out needing to scroll.

    Friday, May 22, 2009 7:45 PM
  • Samjesse--

    On what size screen are you making sure that content doesn't scroll off the bottom? If someone visits your site with an 800x600 monitor I bet it scrolls off the bottom. Or--if someone visits with the browser not maximized I bet it also scrolls off the bottom of the window. Or--if someone visits with the zoom set to enlarge the site or with the text enlarged or with more toolbars turned on than you have or...

    You get the point. You have NO control over how your site is viewed. The bottom of the screen to you isn't the bottom of the screen to another person. It's possible to make the footer sit at the bottom, but it's more trouble than it's worth (which is why nobody does it). It is complicated by the fact that different browsers react differently to different CSS commands and if you do it with javascript, people may visit with javascript turned off.

    Remember--somebody may visit your site with the viewport set to anything they want; you can't control that. And the footer ain't gonna be at the bottom af all windows, no matter how much you want it to be.

    But if you want to experiment, take a look at http://www.webmasterworld.com/forum83/4353.htm or http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
    Friday, May 22, 2009 8:18 PM
  • As Bill points out, you don't control the screen size of your visitor's browser.  The usual practice, and it makes perfect sense to the viewer, is just to let the footer be at the bottom of the content - however long that content is.  You can keep your pages reasonably short to make sure there's not a whole lot of scrolling, but you can't assume, at all, that no one will have to scroll.  (Scrolling up and down is still easy to read.  Scrolling side-to-side is the real killer.)
    Friday, May 22, 2009 8:43 PM
  • How can I keep the footer at the bottom of the screen? I am making sure that content of any page does not need scrolling down. i.e. every thing is displayed with out needing to scroll.

    What Bill said, with the additional note that with netbooks becoming much more prevalent it is even less likely that your content will fit within the viewport without scrolling. The most popular netbooks I've checked out have a total screen width of a full 1024 pixels, but a height of only 600 pixels. Figure in the taskbar, the browser chrome (i.e. top title bar, menubar, toolbars, bottom status bar, bottom scrollbar) and you're sure not leaving yourself a lot of room for the content squeezed between your proposed always-visible footer and the top chrome. Probably 300-400 vertical pixels, and that's about it.

    Remember, the Web is not print, and you have precisely zero control over how your visitors choose to configure their browsers. Unless you plan to be the only visitor to your site, you should not be designing the site to suit your display, but rather concentrating on providing the flexibility to have your pages work no matter how the visitor has configured his browser.

    cheers,
    scott
    • Edited by paladyn Friday, May 22, 2009 11:01 PM
    Friday, May 22, 2009 8:43 PM
  • thanks, I never thought of that.

    I was watching some videos and noticed that I have dwt instead of a master page in the template site I am modifying to suit. since I gained some familiarity with master pages due to the video, is it easy to change the dwt to a master page so that I can apply what I learn(ed)?
    is there another video which teaches about dwt pages?
    the reason is that I want to make the div#footer always under the div#page_content but the problem now is the footer gets under the photo on the right if the column in the left does not have enough text to take the room till the footer is pushed down enough.

    thx

    ps. I am still trying to find a way to publich the page online. please give me more time.
    Friday, May 22, 2009 10:03 PM
  • Did I miss a link to the page?

    Typically columns are made by floating one or more divs. If you want a footer to clear the divs use the clearing element clear: both; to make the footer clear all columns.
    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    Friday, May 22, 2009 10:22 PM
  • Keeping the footer at the bottom of the page can be done fairly easily with css.

    See http://ryanfait.com/sticky-footer/


    Ian
    MS MVP Expression

    http://www.ew-resource.co.uk
    http://www.fp-resource.co.uk


    Ian Haynes
    Friday, May 22, 2009 10:43 PM
  • Master pages would be for asp.net sites.  Are you using asp.net?  If not, stick with your DWT.
    Friday, May 22, 2009 10:46 PM
  • Did I miss a link to the page?

    Typically columns are made by floating one or more divs. If you want a footer to clear the divs use the clearing element clear: both; to make the footer clear all columns.
    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes

    Modify Style > Layout > Clear: both did not fix it. here


    I had to remove some text from the left column in order to demonistrate the problem in the link, after I uploaded the problamatic page, I went back to Ctl-Z to undo and get the text back in but I lost it. how can that be? does the uploading cancel the undo?

    thx
    Friday, May 22, 2009 11:56 PM
  • Your right column is positioned using absolute (also termed a layer) in the page, (although it's set to float: left in the Layout.css--those are in conflict, but the absolute wins because it's closer to the right column than the float:left in the Layout.css). That removes it from the flow of the page, so the footer doesn't know it's there and feels free to go up until it hits something (the bottom of your left column).

    You have some odd margining, which may be an attempt to try to force things into place. Since you are using an EW template, open a new one and copy only the stuff you know is good and start fresh.

    And quickly:
    Your 2 columns should both be floated left (as in the original template),
    The page probably shouldn't be as wide as the monitor--that makes reading difficult
    You have a margin set at 2% and that's going to cause all kinds of havoc on different size viewports
    There is a right margin of 350px on your left column, which isn't needed (but may explain why you used absolute to position the right column)

    Fix the absolute and the footer will start to behave.
    Saturday, May 23, 2009 1:10 AM
  • what is float and absolute, can some one point to a video which explain them?
    I did not change any settings in the style of the columns of the original template. and the Layout > float are set to none.
    when I change them to left, that does not fix the problem.
    I would like to understand the concept first if I can see a tutorial or a video. thx
    Saturday, May 23, 2009 2:58 AM
  • You may have changed them without knowing it. If you clicked on one of the DIVs in the Design Pane and tried to move it, EW automatically changed it to absolute positioning. Don't ever try to move stuff in the design Pane.

    Look in the top post in this forum. There are links to resources there. You should probably get a good orientation in CSS in general, because it seems that you may be experimenting trying to get things to work. W3Schools (link in first post) has good tutorials. Make sure you understand how style sheets work and the concept of cascading first. You'll be lost otherwise.

    I opened your page in EW and got rid of the absolute and everything worked as it should--the footer snapped right back in place. But there are lots of other problems in the code that need to be fixed.
    Saturday, May 23, 2009 3:37 AM
  • what is float and absolute, can some one point to a video which explain them?
    I did not change any settings in the style of the columns of the original template. and the Layout > float are set to none.
    when I change them to left, that does not fix the problem.
    I would like to understand the concept first if I can see a tutorial or a video. thx
    Samjesse, it's really about time that you got yourself a clue. No offense old son, but with the one you're holding now even Perry Mason couldn't get a conviction. You need to stop worrying about trying to build a site and put it on hold until you've done a little studying. Building a modern, standards compliant and cross-browser compatible site is not something you go into without first building at least a basic foundation of understanding of html and css, which you clearly do not yet have.

    Do yourself a favor, and start out with the free w3schools tutorials on html and css. Go here http://www.w3schools.com/htmL/ and begin at the beginning, and be sure to always take advantage of the "Try It Yourself" feature to work with the principles involved until you feel comfortable with each. Then go here http://www.w3schools.com/css/ and do the same with the css tutorials.

    No, it isn't as flashy or quick as isolated video tutorials on particular aspects of these subjects. But those only give you a superficial knowledge of fragmented bits of the technology, and that is not what you need. You need a fundamental grasp of the basic structure of a page, how that structure is established by markup source order, and how it may be modified by css. You need to comprehend the fundamental containership relation of elements in order to truly understand how css works, how the cascade and descendancy determine which rules apply to what elements. You don't necessarily have to grok the fullness; that will come with time and experience. But you do need to at least grasp the basic nature of the elements that you will be working with if you are to be successful. Just a suggestion... ;-)

    cheers,
    scott

    Saturday, May 23, 2009 4:06 AM
  • If you now have differences from the original template, then, yes, you made changes.  Perhaps what you mean to say is that you dont' understand how you made the changes.

    A very common problem for those starting off is that they drag/resize things in Design View.  That's one way to end up with an absolutely positioned element without intending to, and without understanding the consequences.

    One thing you should focus on is using the CSS Properties pane, to the left, to investigate what styles are applied to an element, and where they come from.   It's a very easy to use, very powerful tool that lets you answer many questions about "why does it look that way, and what did I change".
    Saturday, May 23, 2009 6:43 AM
  • thanks for the advise, I will do my best in w3schools.
    Saturday, May 23, 2009 6:59 AM
  • <html >
    <body >
    <h1> Mountain trip</h1>
    <img border="10" src=".../images/repco.JPG" width="300" height="300" />
    </body>

    </html>

    I am doing the w3school study, I can see the border but not the image. what did I do wrong? I tried with out the "..."
    the file is under the directory which has the images folder. so I "rightly" went to the parent "..." then the folder images. why it did not open the image?

    thx
    Saturday, May 23, 2009 12:10 PM
  • Right click on the image placeholder in Expression Web and select Picture Properties. Then use the browse button to put the image on your page. Expression Web will manage the path. Make sure that the image is inside you local web before you start.
    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    Saturday, May 23, 2009 4:18 PM
  • I am trying to apply what I am learning to my site. on the top banner of the default page here I want to place the Repco logo on the left, and the contact details on the right and use the middle for some other things later. is the following the correct to do this?

        <div id="masthead">
           
            <div><img align="top" alt="repco authorised service logo" height="110" src="images/repco.jpg" width="150" /></div>
            <div>company name</div>
            <div>office (000) 000-0000<br /> fax (000) 000-0000<br />
            <a href="mailto:support@phdautomotive.com.au?subject=web%20inquiry"; style="color:aqua  ">support@phdautomotive</a>
            </div>
           
        </div>

    and then to the the CSS properties window and play around with the div alignment?

    I am guessing that my question should be "can I create a style and apply it to a certain nested div only"?
    Saturday, May 23, 2009 8:11 PM
  • align is deprecated old html and you shouldn't be using it in Expression Web with an xhtml doctype.

    You also don't need everythig  to be in a div.

    <div id="masthead">
    <img  alt="repco authorised service logo" height="110" src="images/repco.jpg" width="150"  style="float:left"/>
    <p style="text-align: right;:>office (000) 000-0000<br />
            fax (000) 000-0000<br />
            <a href="mailto:support@phdautomotive.com.au?subject=web%20inquiry"; style="color:aqua">support@phdautomotive</a></p>



    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    Saturday, May 23, 2009 8:25 PM
  • And just in case you weren't aware, mailto: links are spambot magnets. There are bots that do nothing but cruise the Web looking for something in this format:

    <a href="mailto:support@phdautomotive.com.au

    The address is added to the "known good" list and you can easily find your contact address swamped with offers for male enhancements, strange and wonderful cheap meds, mortgage refi offers, etc. Use a contact form with CAPTCHA enabled instead.

    cheers,
    scott
    Saturday, May 23, 2009 9:01 PM
  • align is deprecated old html and you shouldn't be using it in Expression Web with an xhtml doctype.

    You also don't need everythig  to be in a div.

    <div id="masthead">
    <img  alt="repco authorised service logo" height="110" src="images/repco.jpg" width="150"  style="float:left"/>
    <p style="text-align: right;:>office (000) 000-0000<br />
            fax (000) 000-0000<br />
            <a href="mailto:support@phdautomotive.com.au?subject=web%20inquiry"; style="color:aqua">support@phdautomotive</a></p>



    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes

    would this allow me to use the middle "between the logo on the left and the text on the right" for things like images appearing and disappearing at a n time intervals? later when I learn how to do this particular task?

    Saturday, May 23, 2009 10:01 PM
  • For "things in the middle" you would need to put a float right on the p element and assign it a width since floats require widths and a paragraph by default is 100% of the avialable space.

    What you had wouldn't allow you anything "in the middle" either.
    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    Saturday, May 23, 2009 11:03 PM
  • I am enjoying w3schools very much. the best part is I get to apply what I learn to my site on the fly.

    my feedback form here needs a bit of polishing up.

    How do I align all the text boxes to the left of the first one from the top making sure the labels are the same width?
    How can I move the label "comments" to the top of the textarea?

    Do I need table and cellpadding for that?

    thx
    Sunday, May 24, 2009 3:36 AM
  • Here you go:

       <form action="html_form_submit.asp" method="get" name="input" style="margin-top:15px;">
        Name: <input name="name" type="text" style="margin-left:31px;" /> <br />
        Email: <input name="email" type="text" style="margin-left:32px;" /><br />
        Subject: <input name="subject" type="text" style="margin-left:20px;" /><br /><br />
        Comments:<br />
        <textarea cols="50" rows="15"></textarea> <br /><br />
        <input type="submit" value="Submit" style="margin-left:307px;" />
       </form>

    Bear in mind that these margins on the inputs will only work for that label text at that size. I considered using the "label... for" html elements and assigning a width, but found somewhat to my surprise that those elements have no width property and will not accept CSS styling for width, so it appears that margins on the inputs are pretty much it.

    OTOH, forms with label/field pairs are perfectly legitimate applications for tables, so you could just set up a two-column, three-row table for those fields and use the cell width to line the fields and labels up. Although tables are frowned upon for ordinary page layout, there are applications where they are quite legitimate, and sometimes the easiest way to accomplish an objective. This is one of them.  ;-)

    cheers,
    scott
    Sunday, May 24, 2009 4:22 AM
  • is there a way in EW where my code can be auto indented according to some set or rules, it is all over the place and hard to follow the logic?

    is it OK to have the footer here up that high vs. its location in other pages like in the feedback page? thx
    Sunday, May 24, 2009 4:54 AM
  • Right-click in code view and select "Reformat HTML."

    I don't see any problem in particular with the footer location. I do see a slight problem in that it vanishes when the menubar is moused over. Might want to look into that... ;-)

    cheers,
    scott
    Sunday, May 24, 2009 5:05 AM
  • Right-click in code view and select "Reformat HTML."

    I don't see any problem in particular with the footer location. I do see a slight problem in that it vanishes when the menubar is moused over. Might want to look into that... ;-)

    cheers,
    scott


    Vanishes? it does not do that with me? "firfox", and another  thing, how come I do not see the logo at the top left coroner but see it when I open in in my PC?
    Sunday, May 24, 2009 6:34 AM
  • I have having both text lines in black,

    <html >
    <head ><style type="text/css" >
    h1 (color: red)
    h3 (color: blue)

    </style></head>

    <body >
    <h1> this is header 1</h1>
    <h3> this is header 3</h3>
    </body>
    </html>

    but the tutorial is having them in the correct colors.
    what am I doing wrong?
    Sunday, May 24, 2009 10:48 AM
  • First: PLEASE stop optimizing the HTML! It's impossible to read easily. Just leave it alone--use Reformat to clean up the outline, but give us a break here.

    2. Your right column is still positioned using absolute, so it's still a layer, completely out of the flow of the site, and the left column has a pointless right margin of 350px.

    C. The footer disappears in IE7. I don't know what the clip: command is used for in the footer--that's something virtually nobody uses. I don't know why you have it there, but it isn't going to work because it has to be applied to absolutely positioned elements. It may or may not be causing teh disappearing act in IE.

    D. The logo doesn't show because (as the error message tells you), it's not on the server in the images folder. Your code calls for "repco.jpg". The file in your images folder is "repco.JPG". There is no "repco.jpg", because your server is case sensitive. You have all sorts of different capitalizations used in there--standardize on ONE. And remove all of the spaces in your file names while you are at it. They'll cause problems too.

    5. The navigation menu hops when you hover over it because the hover command has teh text turning bold (which is wider). That's annoying.

    6. I have no idea what you are asking in the last question (The only thing I can think of is that inline styles are overriding teh style sheet)

    You're having a hard time fixing one thing because the problems are caused by multiple things. Here's an idea (I assume that you are doing these steps as you work through W3C trainings)...each time you want to work on a new training, start in a fresh web template. That way, any mistakes you make will be apparent, and will not be the result of a different error buggering up the new work you're doing. Then, save each new template with its single project and start the next fresh. You can then go back to all of them and look at what you did and the code it generated. What you have now, with all the kludges, just makes you chase your tail needlessly.

    Sunday, May 24, 2009 2:36 PM
  • Vanishes? it does not do that with me? "firfox", and another  thing, how come I do not see the logo at the top left coroner but see it when I open in in my PC?
    Always_test_in_MULTIPLE_browsers. Different rendering engines do just that—render differently. Currently, three(five) browsers will cover about 98% of the share in the wild—Firefox, Safari (which almost all of your Mac visitors will use), and IE (three versions, each of which renders differently).

    As to your image problem, Bill has already explained that issue. As it happens, I just addressed this naming issue in another thread. See my two posts toward the end of this thread

    http://social.expression.microsoft.com/Forums/en-US/web/thread/73eef86d-e7fa-4bca-93c8-5e471595016b

    One of them concerns adopting a consistent, case-safe naming convention, the second advises doing the renaming within the EW interface, and explains why.

    cheers,
    scott
    Sunday, May 24, 2009 5:06 PM
  • You're having a hard time fixing one thing because the problems are caused by multiple things. Here's an idea (I assume that you are doing these steps as you work through W3C trainings)...each time you want to work on a new training, start in a fresh web template. That way, any mistakes you make will be apparent, and will not be the result of a different error buggering up the new work you're doing. Then, save each new template with its single project and start the next fresh. You can then go back to all of them and look at what you did and the code it generated. What you have now, with all the kludges, just makes you chase your tail needlessly.

    I'm quoting Bill above but I'm talking to you, Samjesse. If you recall the post in which I advised you to take the w3schools training, which, BTW, I commend you for doing, I also said to put the Web site on hold and leave it be until you attained a grasp of the fundamentals. That does NOT mean to continue with the site and try to apply piecemeal the bits that you are learning, as indicated here:

    "I am enjoying w3schools very much. the best part is I get to apply what I learn to my site on the fly."
    It doesn't work that way. First, just because you use a correct construct in a given position doesn't mean that it necessarily fits or will work in that position in the overall page markup. Plus, you've got all of the garbage that existed already when you started learning. Second, the knowledge itself is a gestalt, a framework, a complete package. Learning to use isolated bits does not prepare you to integrate those bits into a complete design.

    Put the site aside. Just forget about it for now. Open a new empty html page in EW to test each of the w3schools exercises (only worry about what is between the body tags) in several browsers. These are scratchpad pages, just as you might use scratch paper while solving simultaneous trigonometry equations. If you wish, create an additional single page in which you keep the example code for all the exercises done until that point, kind of as a summary. In any event, wait until you get a grasp of the basics before you start trying to apply them to a production site.

    cheers,
    scott
    Sunday, May 24, 2009 5:28 PM
  • clip is to tell what part of the image content you want cut off if the container isn't big enough to hold it. One use for it is to "flickerless" rollovers where the rollover states are in the same image and the "clip" tells which part of the image to show in each state.
    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    Sunday, May 24, 2009 6:27 PM
  • points well taken, thank you.
    Sunday, May 24, 2009 8:03 PM