Joomla! site syndication http://photoshoptutorials.org Thu, 09 Sep 2010 04:02:46 +0100 FeedCreator 1.7.2 http://photoshoptutorials.org/images/M_images/joomla_rss.png http://photoshoptutorials.org Joomla! site syndication http://photoshoptutorials.org/css-tutorials/css3-techniques.html Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today! CSS Tutorials - CSS Tutorials Wed, 10 Feb 2010 11:59:40 +0100 http://photoshoptutorials.org/dreamweaver-tutorials/dreamweaver-tutorials/dreamweaver-window-resizing.html Window resizing Dreamweaver 4 automatically prevents new Document windows from overlapping your panels and the Property inspector. When you create a new Document window, if its full size would overlap a panel or inspector, Dreamweaver makes the window smaller to avoid overlap. But sometimes you may want all of your Document windows to be exactly the same size, regardless of your panel layout. There are three ways to set your windows to the same size: use the Window Size pop-up menu in the status bar; hide the panels while creating a new window; or temporarily allow new windows to overlap panels. To set Document windows to a standard size: 1 If the size you want is already in the Window Size pop-up menu, skip to step 8. 2 Click in the Design view of the Document window. 3 Choose Edit Sizes from the Window Size pop-up menu (at the bottom of the Document window). (If the pop-up menu doesn't appear when you click it, the insertion point is probably in the Code view; click in the Design view and try again.) The Preferences dialog appears, with the Status Bar category selected. 4 Click the blank space below the last value in the Width column. 5 Enter Width and Height values for your standard size. To set only the Width or only the Height, simply leave one field empty. 6 Click in the Description field and enter descriptive text about the size you added. 7 Click OK to save the change and return to the Document window. 8 Immediately after creating a new Document window, choose your standard size from the Window Size pop-up menu. The window changes size to make the Design view the size that you specified. (If you're showing both Design view and Code view, the resulting window will be larger than you specified, because the Window Size dimensions apply only to Design view.) To hide the panels while you create a new window: 1 Press F4 or choose Window > Hide Panels to hide the panels. 2 Create a new Document window. 3 When you've created all the new windows you need, press F4 again (or choose Window > Show Panels) to make the panels appear. To temporarily allow overlap with panels: 1 Drag a Document window until it overlaps with at least one panel to the right and at least one panel below it. 2 Create new Document windows. As long as at least one Document window overlaps panels, new windows are also allowed to overlap panels. If none of your windows overlaps a panel, new windows are created smaller to avoid overlapping panels. Dreamweaver Tutorials - Dreamweaver Tutorials Tue, 17 Oct 2006 09:57:05 +0100 http://photoshoptutorials.org/css-tutorials/css-tutorials/block-vs.-inline-level-elements.html Nearly all HTML elements are either block or inline elements. The characteristics of block elements include: Always begin on a new lineHeight, line-height and top and bottom margins can be manipulatedWidth defaults to 100% of their containing element, unless a width is specified Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Inline elements on the other hand have the opposite characteristics: Begin on the same lineHeight, line-height and top and bottom margins can't be changedWidth is as long as the text/image and can't be manipulated Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>. To change an element's status you can use display: inline or display: block. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to: Have an inline element start on a new lineHave a block element start on the same lineControl the width of an inline element (particularly useful for navigation links)Manipulate the height of an inline elementSet a background colour as wide as the text for block elements, without having to specify a width CSS Tutorials - CSS Tutorials Tue, 17 Oct 2006 03:47:22 +0100 http://photoshoptutorials.org/css-tutorials/css-tutorials/css-tip-box-model-hack.html The box model hack (http://tantek.com/CSS/Examples/boxmodelhack.html)4 is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. A number of CSS-based solutions have been put forward to remedy this, so here's another one which we really like: padding: 2em; border: 1em solid green; width: 20em; width/**/:/**/ 14em; The first width command is read by all browsers; the second by all browsers except IE5.x on PC. Because the second command comes second it takes precedence over the first - any command that comes second will always override a preceding command. So, how does all this work? By placing empty comment tags (/**/) before the colons, IE5.0 will ignore the command. Likewise, by placing these empty comment tags after the colon, IE5.5 will ignore the command. By using these two rules in conjunction with each other, we can hide the command from all of IE5.x. CSS Tutorials - CSS Tutorials Tue, 17 Oct 2006 09:51:38 +0100 http://photoshoptutorials.org/css-tutorials/css-tutorials/css-minimum-width.html A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page. Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>: <body> <div id= container > Next we create our CSS commands, so as to create a minimum width of 600px: #container The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this. You might also want to combine this minimum width with a maximum width: #container CSS Tutorials - CSS Tutorials Tue, 17 Oct 2006 09:53:35 +0100