DigiMantra » css http://www.digimantra.com Technology tips for all Fri, 16 Jul 2010 06:28:42 +0000 en hourly 1 http://wordpress.org/?v=3.0 Alternative to overflow:hidden for wrapping divs http://www.digimantra.com/technology/css/alternative-to-overflowhidden-for-wrapping-divs/ http://www.digimantra.com/technology/css/alternative-to-overflowhidden-for-wrapping-divs/#comments Thu, 04 Feb 2010 19:24:47 +0000 Sachin Khosla http://www.digimantra.com/?p=2331
  • Simple tabs using Javascript and CSS
  • What’s difference between display: none and visibility: hidden?
  • Rounded corners in firefox and safari using css3
    • ]]>     I bet, you might have struggle a lot to get this simple solution if you are here via google search. There are instances when two divs in parallel have dynamic content and it becomes difficult to keep their height equal. One of the hack is using overflow:hidden, which might not be valid in some cases and some browser might completely ignore this css style. So in this post I am going to show you how you can have two or more dynamic content changing divs of equal height in parallel.

    I am sharing the simple HTML + CSS code with you and a live demo can be seen here http://digimantra.com/resources/equal_div.html .

    <style>
 
  #example1 {border: 1px solid red;display: knone;}
  #example1  .inner1 {float: left;width: 50%;border-right: 4px solid #000;}
 
  #example2 {border: 1px solid orange;margin-top: 10px;}
  #example2  .inner1 {float: left;width: 50%;border-right: 4px solid #000;}
  #example2 .clear{clear: both;}</style>
 
<h2><font color="#ff8000">Example of collapsing/wrapping divs when given floats</font></h2>
 
<div id="example1">
  <div class="inner1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
 
  <div class="inner2">
    <div>MY text should be here in ROW 1</div>
  </div>
</div>
 
<h2 style="margin: 10px 0px; clear: both"><font color="#ff8000">Example of using clear:both to have divs of equal height</font></h2>
 
<div id="example2">
  <div class="inner1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
 
  <div class="inner2">
    <div>MY text should be here in ROW 1</div>
 
    <div class="clear"></div>
  </div>
</div>

    So you have to use the clear property of CSS to avoid wrapping or collapsing of the divs as show in the above example. This is very useful property and can be used on various part of a website.

    Hope that helps.

    Stay Digified !!

    Sachin Khosla

    Related posts:

    1. Simple tabs using Javascript and CSS
    2. What’s difference between display: none and visibility: hidden?
    3. Rounded corners in firefox and safari using css3

    ]]>     http://www.digimantra.com/technology/css/alternative-to-overflowhidden-for-wrapping-divs/feed/ 0     Create fixed side buttons for feedback etc http://www.digimantra.com/technology/css/create-fixed-side-buttons-feedback/ http://www.digimantra.com/technology/css/create-fixed-side-buttons-feedback/#comments Sat, 15 Aug 2009 18:25:04 +0000 Sachin Khosla http://www.digimantra.com/?p=1604
  • Create rounded corner buttons in photoshop using gradient
  • Create Horizontal Menu in WordPress
  • Opacity in CSS3 using rgba
    • ]]>     Regular visitors of Digimantra might have noticed that recently we introduced “Suggest a post” button on the left side of the webpage. Some one anonymously sent a request to write a post on how to create these sort of fixed buttons on the website. This is very simple, yet look very nice tagged along the site.

    So let us start by creating those rounded corner images. You can read this post on how to create gradient buttons ,so as to make your own in the photoshop.If you do not want to create your own image, you can use the one I created.

    suggest post Create fixed side buttons for feedback etc

    Did you notice we have this image with similar text but their background color is different. This is where we are going to use these colors for the mouseover effect. I have also given a 1px difference in the text position so as to give a little shift when mouse hovers over the button. You might have noticed that.

    Now the HTML and CSS to achieve this is as follows  :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
      *{margin:0px;padding:0px;}
      #suggestPost
      {
        background:transparent url(suggest-post.png) no-repeat scroll 0px 0px;
        height:170px;
        left:0;
        position:fixed;
        top:150px;
        width:40px;
      }
      div#suggestPost:hover
      {
        background-position:-41px 0px;
      }
      #suggestPost a
      {
        display:block;
        height:170px;
        width:40px;
      }
    </style>
  </head>
  <body>
    <div id="suggestPost"><a href="#" ></a></div>
  </body>
</html>

    Some facts about the above lines of code

    • You can position this by changing the value of top:150px. This changes the position of the button from top of the browser.
    • The CSS property position:fixed; make this button sticky no matter even if the user scrolls it up or down.
    • The hover effect is the result of the  pseudo CSS property :hover which we have used in div#suggestPost:hover and we have changed the background-position of the image, which gives the effect.
    • Do not forget to add a valid DOCTYPE in the HTML file, otherwise Internet Explorer is clever enough to behave erroneous.

    Hope you like this post.

    Stay Digified!!
    Sachin Khosla.

    Related posts:

    1. Create rounded corner buttons in photoshop using gradient
    2. Create Horizontal Menu in WordPress
    3. Opacity in CSS3 using rgba

    ]]>     http://www.digimantra.com/technology/css/create-fixed-side-buttons-feedback/feed/ 11     Rounded corners in firefox and safari using css3 http://www.digimantra.com/technology/rounded-corners-with-firefox-and-safari-using-css3/ http://www.digimantra.com/technology/rounded-corners-with-firefox-and-safari-using-css3/#comments Thu, 09 Jul 2009 20:56:15 +0000 Sachin Khosla http://www.digimantra.com/?p=1165
  • Opacity in CSS3 using rgba
  • Create rounded corner buttons in photoshop using gradient
  • How to Install Unavailable Firefox 3.5 Addons
    • ]]>     Rounded corners have always been tricky for web developers. If they do not challenge us technically, they load network as you have to download Images to create rounded corners for an element. An example of the rounded corner using an image would be Digimantra’s header (for sometime atleast it will remain).But with the invent of CSS3 and browsers getting more and more powerful rounded corners are also bundled in the new webkits.

    WordPress’s Admin Panel is one good example for the rounded corners . But you might have noticed these rounded corners disappear as soon as you open the Admin Panel in internet explorer. Apparently IE denies to support those nifty rounded corners and hence we have to write CSS in such a way so that the UI does breaks completely when page gets rendered on IE. Let me now show you an example of the rounded corner using border-radius property of CSS3.

    Should work in Mozilla firefox

    Should work in chrome & safari

    Yeah it is just few lines of code, and yet it is amazingly beautiful. You can make lot wonderful stuff with these new CSS3 tags. But one think which you to take care is about the IE ‘s compatibility. Here is the code, which will render the above rounded corner div. Just paste this in an html file and open it in Firefox, safari etc and it should work.

    <div style=" background-color: #6699CC;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border: 1px solid #fff;color:#fff;padding: 10px;width:250px;" >
<h2>Hey There !! Digimantra </h2>
</div>

    You can change the radius of the rounded corners as per your requirement. So this is how simpler its going to be and just cause we have IE so we have complicated things. Anyways Lets make a better web by actively contributing.

    Stay Digified !!
    Sachin Khosla

    Related posts:

    1. Opacity in CSS3 using rgba
    2. Create rounded corner buttons in photoshop using gradient
    3. How to Install Unavailable Firefox 3.5 Addons

    ]]>     http://www.digimantra.com/technology/rounded-corners-with-firefox-and-safari-using-css3/feed/ 5     What’s difference between display: none and visibility: hidden? http://www.digimantra.com/technology/difference-between-display-visibility/ http://www.digimantra.com/technology/difference-between-display-visibility/#comments Wed, 05 Nov 2008 06:31:34 +0000 Sachin Khosla http://realin.co.in/?p=139
  • Add javascript function using css class
  • Hide/show div,elements with javascript
  • Adding a class to an element using javascript
    • ]]>     just when you tread into the world of dhtml or javascript, you can require the display property of CSS more than expected. So it becomes necessary to clearly understand some of the facts behind this powerful language. Here is the difference between the visibility and display property of an element.

    visibility: hidden hides the element, but it still takes up space in the layout.

    display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

    cheers !!

    Realin !

    Related posts:

    1. Add javascript function using css class
    2. Hide/show div,elements with javascript
    3. Adding a class to an element using javascript

    ]]>     http://www.digimantra.com/technology/difference-between-display-visibility/feed/ 2