Most used values of the ‘display’ property in CSS July 7, 2009
Posted by minals in CSS Hacks Tips and Tricks.Tags: block, css, display property, display: inline-block; inline, HTML, HTML property, inline-block
add a comment
The display property defines how HTML elements should be displayed.
- display: block
The element will generate a block around it with line break before and after the element.
- display: inline
The element will generate an inline box around it, which will be in line with rest of the content.
- display: inline-block
The element will generate a block box positioned as an inline box.
- display : none
The element will not generate any box; the element will not be displayed at all.
- display: inline-table
The element will generate a table like box positioned as an inline box.
- display: list-item
The element is displayed as a list item. The list is an unordered list and hence preceded by a bullet mark.IE5 on Mac displays the list as ordered.
- display: run-in
The element will generate a block box if it is followed by any box other than block box. It will generate an inline box if followed by a fixed and absolutely positioned block box.
- display: inherit
The element inherits its value from its parent element.
Recalculating Hyperlinks in Microsoft Expression Web 2 July 4, 2009
Posted by minals in Expression Web Tips and Tricks.Tags: Expression Web 2, Expression Web Tips and Tricks, Microsoft, recalculate hyperlinks, tricks
add a comment
What does recalculating hyperlinks do?
The Recalculate Hyperlinks command checks and repairs all the pointers in your website within Expression Web. In other words it synchronizes the website metadata which maintains the cross-page links.
When should I recalculate hyperlinks?
It will be a best practice, to recalculate hyperlinks before you each publish or FTP of your website. Expression Web then won’t have to spend time in locating the files during publishing resulting in faster process and low risk of timeout during publishing.
How do I use Recalculate Hyperlinks command?
- Open your website.
- Go to Site menu > choose Recalculate Hyperlinks.
- The Recalculate Hyperlinks dialog box gives a description of actions it would take.
- Click Yes.
Expression Web may take several minutes to complete the process.
Salon Logo July 1, 2009
Posted by minals in Beauty and Salons.Tags: beauty clinic, beauty parlour, salon
add a comment
This logo is suitable for salons and beauty parlours.
Salon Cut Logo
Classification of elements in CSS June 29, 2009
Posted by minals in CSS Hacks Tips and Tricks.Tags: css, CSS 2.1, CSS elements, elements, HTML, XHTML
add a comment
A document is structured by it elements. The HTML elements that we commonly know are p, div, table, headings, span and many more. In CSS (2.1) each element has its own box that contains the element’s content. Hence these elements are broadly classified as:
- Replaced and Non-replaced elements
- Block-level and Inline elements
This classification is made on the basis of their nature of presentation.
1. Replaced elements:
Replaced elements are those where the content of the element is replaced with some content external to that document. For example, the ‘img’ element has no content of its own. It takes the path to the file that needs to be displayed in the box created by the element.
2. Non-replaced elements:
All other elements are non-replaced elements. For instance, the ‘p’ (paragraph) element;
<p>Some text </p>
Other non-replaced elements are div, span, headings, lists, tables, etc.
3. Block-level elements:
As the name suggests create a box for their content. It creates a space of its own and adds breaks before and after its box. Examples of Block level elements are ‘p’ and ‘div’.
Lists are also block-level elements. But unlike other block elements, lists have their own set of presentation properties in addition to those inherited from block-level elements. These properties include indentation and bullets (for unordered lists) and numbers (for ordered lists).
4. Inline-level elements:
Inline elements spawn an element box within the line of text and do not break the flow of the line. In other words they do not break from rest of the display. The most used inline element is ‘span’. Other examples are ‘a’, ‘strong’.
Dev Curry Logo and Website Design June 28, 2009
Posted by minals in Software Company Logos.Tags: company logo, professional logo, software logo
add a comment
We have created the logo for DevCurry (www.devcurry.com)
The site has also been revamped by Saffron Stroke. Visit www.devcurry.com
Disable the ActiveX warning on your web page in Microsoft Expression Web June 23, 2009
Posted by minals in Expression Web Tips and Tricks.Tags: activex control, ActiveX, warning, disable ActiveX warning, IE
add a comment
If you have ActiveX controls, Java, JavaScript, ASP or such other scripts running on your web page and you want to disable the warning that they pops up, do either of the following:
- In Microsoft Expression Web, go to the Site menu > Site Settings > Preview tab. Check the option ‘Use Microsoft Expression Development Server: For all web pages.
- In the browser go to Tools > Internet Options > Advanced tab > Choose Allow active content to run in files on My Computer/ Allow active content to run locally.
- In the browser go to Tools > Internet Options > Security tab and set the custom level. Read the questions before you check any of them. This could be risky.
Testing your page in various resolutions within Microsoft Expression Web 2 June 20, 2009
Posted by minals in Expression Web Tips and Tricks.Tags: Expression Web, Expression Web 2, Expression Web Tips and Tricks, Microsoft, page size, screen resolution
add a comment
While designing a web page, a designer needs to remember that his viewers will be using different browsers with different resolutions. So while creating the page, he must check the appearance of the page in different screen resolutions. Well but it is a pain to repeatedly change the screen resolutions to check how your page would look in different screen resolutions. Expression Web has this feature of ‘Page size’ which allows you to do this while you are creating the page without having to change the actual screen resolution.
In View menu, select Page Size and then select a page size from the list. The page size will now applied to your current page, and you can check how your page will appear in the browser with that resolution.
Unitless Line Heights in CSS June 16, 2009
Posted by minals in CSS Hacks Tips and Tricks.Tags: css, em, ex, HTML, line height, unit less line height, unitless line height
2 comments
One of my fellow designers asked me the other day, what are unitless line-heights and how do they work. And I remembered what Eric Meyer’s post on ‘Unitless line-heights’. I was new to designing then and used the old methods of specifying line height in pixels or percentages. Well that was until I came across that post. Then I tried it and found it was a genius option as the output would not be affected by browsers. This article explains how line-height can be unitless. Let us first understand the different values line-height property can take.
The line-height property refers to the distance between the baselines of lines of text. In other words it is the vertical space between lines of text. The image below would help you understand the property in a better way.
Line height could be specified using absolute or relative values.
Absolute values such as pixels (px), points (pt), picas (pc), percentage (%), inches (in), centimeters (cm) and millimeters (mm). Relative values could be em and ex. Line height defined in px, pt, pc, in, cm and mm set a fixed distance between the lines. % on the other hand sets the distance as a % of the current font-size. For example,
<p style=”font-size: 20px; line-height: 100 %;”> Some Text</p> will set the line-height equal to its font-size 20px.
Where ‘em’ is defined to be the value of font-size given, ‘ex’ refers to the height of the lowercase x in the font used. For more details on ‘em and ex’ read Difference between ‘em’ and ‘ex’ units
If a line-height is defined without a unit, that a ‘Unitless’ height. Simple, isn’t it. See this example;
<p style=”font-size: 20px; line-height: 1 ;”> Some Text</p>
The value for line-height will be interpreted as it current font size. It is calculated by multiplying the current font-size with the numerical value of line-height. So the line height would now be 20px. Yes yes I know what your next question is; what is the difference between the percentage and unitless value since their result is the same. Consider this example:
body { font-size: 20px; line-height: 100%;}
p { font-size: 15px; }
small { font-size: 10px}
<body>
<p>This is a para with <small> text </small></p>
</body>
The line-height for body is 100% of 20px = 20px. This is interpreted as line-height: 20px. This computed value is inherited by <p> and <small>. Hence the line-height for all three elements would be same. And now consider following example:
body { font-size: 20px; line-height: 1;}
p { font-size: 15px; }
small { font-size: 10px}
<body>
<p>This is a para with <small> text </small></p>
</body>
In this case the line-height computed for <body> is 20px, but the line-height value that is inherited is 1 and not the computed value. Hence when the value 1 is inherited by <p> the line-height for paragraph is 15px and for <small> will be 10px.
2 Books you must have if you want to develop professional websites using Microsoft Expression Web June 13, 2009
Posted by minals in Expression Web Tips and Tricks.Tags: Expression Web, Microsoft, Expression Web 2, HTML, XHTML, books, best books for Expression Web, top books for Expression Web
add a comment
Microsoft Expression Web 2 Step by Step (Step By Step (Microsoft)) by Chris Leeds
The book has easy steps, hands-on exercises and practice files. It is a step by step guide to beginners and intermediate users. Learn at your own pace and create professional web sites with advanced design techniques and tools to incorporate XML, XHTML, ASP.NET, Silverlight, Media and much more into your website.
Special Edition Using Microsoft Expression Web 2 by Jim Cheshire
As the cover states “The ONLY EW2 book you need” it is indeed one of the best books you could have. The book is comprehensive of basic features and powerful tools including CSS tools of Expression Web 2 and advanced features like ASP.NET and PHP development.
Create scrollable area using CSS in Microsoft Expression Web 2 June 9, 2009
Posted by minals in Expression Web Tips and Tricks.Tags: css, DHTML, Expression, Expression Suite, Expression Web, Expression Web 2, HTML, Microsoft, scroll, scrollbar, scrolling text, tips, tricks, web site, website
add a comment
A scrollable area is where content can be presented and can be scrolled through. When you have a lot of content to be presented in a particular section, it is beneficial to add a scrollable area, without occupying much space on the page and keeping it organized. You can always add a textarea or use iframe tags to do the same. But through HTML and CSS you can do the same for any page element.
This is done by using the CSS property – overflow. The overflow property takes any of the following values as its input:
- overflow: auto – This will create a horizontal and/or vertical scrollbars only when needed, i.e. when the text exceeds the display area of the element.
- overflow: scroll – This will create horizontal and vertical scrollbars, even if the text inside the element fits into its display area. The scrollbars will always reside.
- overflow: visible – This will cause the element area to expand to make space for the content.
- overflow: hidden – This will force the block to only show the text that fits the in it. Rest of the content will be hidden and would not be visible.
Let us create a scrollable area into a <div>as shown in the image below:
Follow these steps:
- In the Design View, drag the <div> from the Toolbox and drop onto the page. Else in the Code View, manually type the <div></div> tags.
- Then enter your content into the div.
- In the Apply/Manage Styles task pane, click New Style… to launch the New Style dialog box.
- In the New Style dialog box, name the selector as ‘scroll’ and choose following properties:
.scroll {
font-family: “Courier New”, Courier, monospace;
font-size: 14px;
color: #FFFFFF;
background-color: #000000;
border: 1px solid #4A4A4A;
padding: 5px;
overflow: auto;
}
See image below for more details.
