Creative Technocrayts

Fixing header at the top even though the page scrolls We might have come across few websites were we notice that the header is fixed even though the page is scrolled.  One of the familiar site which uses that is Quora  http://www.quora.com . I tried the simliar mockup of quora feed design using html & css. To fix the header at top, CSS positioning property is used as   position:fixed; Fixed positioning is relative to the containing viewport of the page. No matter, the page is scrolled element will be positioned at the same position. header{     position: fixed;     top:0;     left:0;     width: 100%;     min-height: 50px;     border-top: 2px solid #b92b27;     border-bottom: 2px solid #ddd; } Github link: Github_page Subscribe to Creative Technocrayts and be a part of growing community. Mockup Image:

As we have gone through few css selectors in the CSS Selectors-Part I we will continue to discuss some more now. Pseudo class selectors When we want to style anchor elements when they are hovered or visited or linked For eg, a:link{ color: red; } Visited link a:visited{ color: purple; } X:checked This selector will target a user interface element when it is checked and apply the styles. For eg when the checkbox and radio button is checked. For eg, X:checked{ box-shadow: 5px 5px #dbdbdb; } X:hover Hover pseudo selector is used to apply CSS styles when the anchor tag is hovered. a:hover{ color: #000; background:#fff; border: 1px solid #000; } Attributes selectors Styling elements based on the attributes the tags have. a[title] a[title]{ color:blue; } a[href] This selector will apply the style for anchor tags having title attribute. a[href="http://gmail.com"] { color: #1f6053; } X:after / X:be

Using CSS selectors Hope the previous article on Understanding html hierarchy   would have been useful to all. This article will help you to write CSS in a better way. CSS selectors are used to write styles more efficient and plays a major role in re usability and maintainability of the code.  Read further to know what are all the CSS selectors available for use.

             When you are new to web development and have just started dirtying your hands with HTML code it is very important to understand the html hierarchy to proceed further.

This article deals with text overflow property of CSS and more emphasis is on ellipsis values over the other values. When the content overflows the container box, it has to be either accommodated in any way or clipped out of container box and should be represented to the user that overflowed content is clipped. It can be shown like visible overflow, clipped, ellipsis or custom string. Text overflow can be applied only for block level container elements as it makes sense only when the word/s being long to fit into the container. To apply text overflow we need to apply overflow :  hidden or scroll or auto property. Overflow: clip is the default value. text-overflow:  clip; This specification clips the content at the limit of the container area. So the truncation may happen at the middle of the character. Inorder to avoid that we need to add an empty string value (‘’). Text-overflow : ellipsis; It is the property wherein three consecutive dots are used to represent a cli

Using Image Sprites in CSS In many cases, we may have to create websites with many bigger images may be a  photography  website or a tourism website. We may also use images for changing them on  hover and on visited. Eventually using images in a website may generate more HTTP  request. Moreover it may also take more time to load. In such scenarios we may use Image  sprites.

Class and id selectors are commonly used in CSS selectors. This article shows the usage of both the selectors and its significance.

Onbeforeunload function in javascript When you have filled up a form in a web page and if you  close the page before submitting it You may get a message " Are you sure to leave this page?" Such customized messages are examples of window events onbeforeunload

HTTP stands for Hyper Text Transfer Protocol. HTTP is an application protocol for distributed and collaborative information systems. HTTP is the foundation of data communication for the World Wide Web.