The Little Master: css

Showing posts with label css. Show all posts

Wednesday, August 22, 2012

Downloading a complete page from website

when working with css or js we often convenient to get the website page on our desktop. We generally endup saving as html, then saving each of the css and js files. I discovered an easier way to do the same.

This is supported in linux or cygwin (linux version on windows). Run this command

Command

wget -E -H -k -K -p http://www.something.com

Wednesday, February 9, 2011

container to accomodate the floating divs

Generally the containers around float divs dont streach to accomodate them. To fix them we have the below workarounds. You to add an extra element with clear: both to the container. Once it was in place the container contained a non-floating element, which means it stretches itself up to accomodate it

-OR-

div.container {

border: 1px solid black;

overflow: hidden;

width: 100%;

}

Wednesday, January 26, 2011

Accordion -prototype

Heres the prototype of the accordion where i demonstrate how the top div slowly closes down.

_______________________________________________________________________________

<html>
    <style>
        *{margin:4px;}
    </style>
    <script>
        function loaded(){
            var cont = document.getElementById("containerId");
            var e1 = document.getElementById("heading1");
            var e2 = document.getElementById("heading2");
            var e3 = document.getElementById("heading3");
            //h1= 2+e1.offsetHeight + e1.style.paddingTop + e1.style.marginTop;
            alert("moving up:; "+ e1.style.height);
            //e2.style.top=-h1;
            removeDiv(e1,9999);
        }
        function removeDiv(e,currheight){
            var newHeight = parseInt(e.offsetHeight/1.5);
            e.style.overflow='hidden';
            if(newHeight < currheight){
                e.style.height=newHeight;
            }else{
                e.style.display='none';
                return;
            }
            setTimeout(function(){removeDiv(e,newHeight)},50);
        }
        
    </script>
    <body onload="loaded()" >
    <div style="position:relative;display:auto; border:black 1px solid;overflow:auto;height:auto;"id="containerId">
        <div style="position:relative;border:red;padding:5;">
        top one heading    
        <div id="heading1" style="position:relative;border:purple 1px solid; top:2px;widht:100%;background:red;"> 
            <ul>
                <li>one </li>
                <li>one </li>
                <li>one </li>
            </ul>
        </div>
        </div>
        <div id="heading2" style="position:relative;border:purple 1px solid; top:2px;widht:100%;"> 
            <ul>
                <li>two </li>
                <li>two </li>
                <li>two </li>
                <li>two </li>
            </ul>
        </div>
        <div id="heading3" style="position:relative;border:purple 1px solid; top:2px;widht:100%;"> 
            <ul>
                <li>theree </li>
                <li>theree </li>
                <li>theree </li>
                <li>theree </li>
            </ul>
        </div>
    </div>
    </body>
</html>

_______________________________________________________________________________

So this is how it looks like when running…

first u get the alert. The top div is marked in red
on click of ok; the top div (with content one, one, .. ) slowly closes down
once the top div goes very small we make its display as none

Saturday, January 15, 2011

Absolute and relative measurements

In css there are many concepts that are confusing to me. So instead of juggling around with permutations and combinations evertime i hit the issue… i thought why not document them which can help me for future reference.

For absolutely positioned elements the right (or left) measures distance between the current elements right edge(or left edge) and its nearest positioned parents rightEdge(or left edge). While the relative positioning is measured w.r.t. its initial positioning. Heres the example

@google chrome

<html>
<head>
<style type="text/css">
.right
{
position:absolute;
inherit:false;
right:0px;
width:190px;
overflow:visible;

background-color:#b0e0e6;
}
</style>
</head>

<body>
<div style="position:absolute;width:50%;border:1px solid red;padding:10;overflow:overflow" >
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</div>
</body>
</html>

Both red and blue parts are absolute positioned
with right:10px; it measures 10px from the parents right edgs

The same code with position as relative gives the result

the element (in cyan color) moves to make the initial reference line 10px to its right giving the above position.
red –> absolute and blue parts –> relative position
with right:10px; it measures 10px from its initial position (thick-black) to left