almoplava1
New Member
Im creating a horizontal accordion and I'm having a problem with the width, left and top positions. What I want is the h3 tag to fill the entire height of the accordion after the transformation so I'm using the width to 100% but it messes up the accordion and the h3 tags are not next to each other there is a gap in between each tab. If someone knows to setup my elements to be aligned next each other and no gaps and the position of the top is alignment that would be great. You can use different elements if you want Im just using h3 after doing a tutorial here is my jsFiddlehtml:\[code\]<div class="accordian" data-type="horizontal"><h3 id="special_offers">Special Offers</h3><div></div><h3 id="new_products">New Products</h3><div></div><h3 id="reduced_to_clear">Reduced To Clear</h3><div></div><h3 id="coming_soon">Coming Soon</h3><div></div> \[/code\]css:\[code\]accordian {height:300px;}.accordian h3, .accordian div {display:block; float:left; position:relative}.accordian h3 {padding:6px}.accordian h3{-webkit-transform:rotate(-270deg);-moz-transform:rotate(-270deg);-ms-transform:rotate(-270deg);filter: progid
XImageTransform.Microsoft.BasicImage(rotation=1);}.accordian #special_offers {background:#C90;}.accordian #new_products {background:#C60; }.accordian #reduced_to_clear {background:#C30; }.accordian #coming_soon {background:#C00; }\[/code\]
XImageTransform.Microsoft.BasicImage(rotation=1);}.accordian #special_offers {background:#C90;}.accordian #new_products {background:#C60; }.accordian #reduced_to_clear {background:#C30; }.accordian #coming_soon {background:#C00; }\[/code\]