Menu
After playing with CSS 3, I had the crazy idea to make an OS X-style dock with it (a DIV container with elements inside it, which, using the CSS :hover subclass, increase in size upon mouseover). However, I'm running into some strange effects when implementing it. So far, this is what I've tried:
<html>
<head>
<style>
body{
margin:0;
}
.dockHolder{
width:100%;
position:absolute;
text-align:center;
display:block;
bottom:0;
}
.dock{
margin-left:auto;
margin-right:auto;
bottom:0;
text-align:center;
}
.dockItem{
height:50%;
display:inline-block;
position:relative;
bottom:0;
vertical-align:bottom;
text-align:center;
transition-property:width, height;
-o-transition-property:width, height;
-moz-transition-property:width, height;
-webkit-transition-property:width, height;
transition-duration:.25s;
-o-transition-duration:.25s;
-moz-transition-duration:.25s;
-webkit-transition-duration:.25s;
transition-timing-function:linear;
-o-transition-timing-function:linear;
-moz-transition-timing-function:linear;
-webkit-transition-timing-function:linear;
}
.dockItem:hover{
height:100%;
width:auto;
}
</style>
</head>
<body>
<div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;">
<div class="dock" style="background-color:lightgray;">
<center>
<div class="dockItem" style="background-color:magenta;"><img height="100%" src="pony.png" /></div>
<div class="dockItem" style="background-color:magenta;"><img height="100%" src="bhs256.png" /></div>
</center>
</div>
</div>
</body>
</html>
My test page is at http://s.supuhstar.operaunite.com/s/content/testAnims.htm(died with Opera Unite) if you wanna see what I have so far.
Unexpected effects include:
dock element at the bottom of the dockHolder elementdockItem element not expanding width-wise along with its child imagedockItem and dock elements will not center inside the dockHolder container with CSS (tried margin:auto;, box-pack:center;, box-align:center;, etc.); only the <center> HTML tag worksdockItems are extremely wideIntended effects that are not present include:
dockItems stay within the dock element until resizing, at which time they increase proportionally to the size of the dockHolder element, but the dock element stays the same sizedock element is constantly only wide enough to contain all the dockItems within it, and never wider not shorter than the combined widths of all dockItems and their margins.Does anyone have a solution that will fix the unexpected effects andor implement the absent intended effects?
Below is the code of my final solution:
<!DOCTYPE html><html>
<head>
<style type='text/css'>
body{
margin:0;
}
.dockHolder {
position: fixed;
text-align: center;
bottom: 0;
left: 0;
right: 0;
height: 128px;
line-height: 128px;
}
.dock {
background:#CCCCCC;
background:
-o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
background:
-moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
background:
-webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
border: 1px solid gray;
max-width:100%;
vertical-align: bottom;
line-height: 1em;
padding: 0 8px;
border-radius: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dockItem {
display: inline;
height: 50%;
vertical-align: bottom;
transition-property:width, height;
-o-transition-property:width, height;
-ms-transition-property:width, height;
-moz-transition-property:width, height;
-webkit-transition-property:width, height;
transition-duration:.25s;
-o-transition-duration:.25s;
-ms-transition-duration:.25s;
-moz-transition-duration:.25s;
-webkit-transition-duration:.25s;
transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;
-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
height: 100%;
}
.dockItem:active {
vertical-align:top;
height:95%
}
</style>
</head>
<body>
<div class="dockHolder" style="height:128px;line-height:128px;">
<span class="dock">
<img class="dockItem" src="pony.png"/>
<img class="dockItem" src="bhs256.png"/>
<img class="dockItem" src="mcgrass.png"/>
</span>
</div>
</body>
</html>
Working example (might go out of date): http://admin.s.supuhstar.operaunite.com/s/content/testDock.html (died with Opera Unite)
816
To center your element use "margin : auto 0px auto 0px;". you should you a display:block; and float:left; than the display:inline-block; you should you a <ul> and <li> element to help you.
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.
<menu>: The Menu elementIt represents an unordered list of items (which are represented by <li> elements).
What is CSS? CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.
How's this?
HTML:
<div class="dockbg"></div>
<div class="dock">
<img src="foo.png">
<img src="bar.png">
</div>
CSS:
.dockbg {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 35px;
background: #bbb;
}
.dock {
position: fixed;
text-align: center;
bottom: 5px;
left: 0;
right: 0;
height: 100px;
line-height: 100px;
}
.dock img {
display: inline-block;
vertical-align: bottom;
height: 50%;
padding: 0 5px;
/* + your animation properties */
}
.dock img:hover {
height: 100%;
}
Live demo: http://jsfiddle.net/simevidas/QM7M7/3/show/
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
