html - How to CSS two vertical cylinders -
i want
how these css?
update
how align cylinders on same bottom, , how add caption below them?
you have split cylinder image in 3 parts: top, middle (which repeated), , bottom. this:
http://img218.imageshack.us/img218/8668/tlchargement.png
call them top.png, middle.png, , bottom.png, example.
then need 3 html elements, 1 each part:
<div class="cylinder top"></div> <div class="cylinder middle" style="height:300px"></div> <div class="cylinder bottom"></div>
and css:
.cylinder { width: <width of cylinder image>px; } .cylinder.top { background-image:url('top.png') no-repeat; height: <height of top image>px; } .cylinder.middle { background-image:url('middle.png') repeat-y; /* repeat vertically */ } .cylinder.bottom { background-image:url('bottom.png') no-repeat; height: <height of bottom image>px; }
to change height or cylinder, have modify the style="height:300px"
on middle element.
this solution work in browser, ie6.
Comments
Post a Comment