Posts

Showing posts from January, 2018

How to display a div on another div hover event?

Image
How to display a div on another div hover event? On a CSS hover event, we can change another div's styles. The another div can be either child or siblings. If a div has to be displayed only upon hover, 1) When the child div is inside parent div 2) When both the divs are siblings Read CSS Selectors For displaying div in hover, use :hover selectors. Following link demonstrates the displaying child when parent is hovered. https://jsfiddle.net/CreativeTechnocrayts/grtw44wd/9/ When displaying sibling div, ~ selector is used. (General sibling selector) When displaying an adjacent sibling , + selector is used (Adjacent sibling selector) We can directly select the element by using class or id names. Follow our FB page @CreativeTechnocrayts Subscribe to Creative Technocrayts and be a part of growing community.

Why the container element is not taking the actual height when having floated children?

Image
In frequent case, we may notice that the container element will not grow as per the height of the children. This article deals with the fixes for the solution. The  sample issue is reproduced here for demonstration. https://jsfiddle.net/CreativeTechnocrayts/b1qfp9rz/2/

Points to check before launching website

For anyone who is delivering websites with deadly deadline; there are many chances to miss a few points. To overcome the lag it is better to have a checklist to go through before the launch. When many developers are contributing to the project, it is better to brainstorm and prepare a list to go through at the end. The list may be drawn based on the scope of the project whether the site / application is repsonsive, accessible or print support. File Structuring 1. Supporting files in proper folders (img, css, js, downloads) Maintaining proper project folder structure helps to organize easily and stick to a proper workflow which will avoid conflicts in a team. Header 2. Use a correct Doctype preferably latest version. ( !DOCTYPE html ) You can read here for more information 3. Include Favicons Favicons is a quick identity to our websites. Read on how to implement favicons to our websites. 4. Viewport tag with user-scalable attribute for responsive websites. Viewpo