css html menu dock

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>Plug-in CSS: Example 1</title>
<link rel='stylesheet' type='text/css' href='PC.css' />
<style type='text/css'>
topdockbar, .bottomdockbar {
    position:fixed;
    left:50%;
    margin-left:-159px;
    /* Set to (total width of reduced images) / 2 */
    /* + (actual width - reduced width) / 4 */
}
.topdockitem, .bottomdockitem {
    -moz-transition: all .2s;
    -webkit-transition:all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    vertical-align:top;
    width: 50px;
    /* Set to reduced image width */
    height:50px;
    /* Set to reduced image height */
}

.topdockitem:hover, .bottomdockitem:hover {
    width: 86px;
    /* Set to actual image width */
    height:86px;
    /* Set to actual image height */
}


</style>
</head>
<body>
<div class='topdockbar' style='text-align:center;'>
<img class='topdockitem' src='coremap.png'>
<img class='topdockitem' src='coremap.png'>
<img class='topdockitem' src='coremap.png'>
<img class='topdockitem' src='coremap.png'>
<img class='topdockitem' src='coremap.png'>
<img class='topdockitem' src='coremap.png'>
</div>

</body>
</html>

Published by

G3n1k

just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s