|
CSS - Css Separator
Could somebody tell me... is there a way to make a
CSS - only separator? I have been playing around with this but can't figure out a few things. 1 - how do I make the separator so it is only a fraction of a pixel high? Even when I set the height:.3px it seems to always go back to what looks like 1px (or more). 2. - in this separator, i have several 10px blocks in the beginning that are different colors and then the final block is the final length of the separator. I seem to have worked this out but there is a space between the second to last DIV and the final DIV. Code: <div id="ruler"> <div id="left" style="height:.5px; float:left; width:10px; background-color:Green;"></div> <div id="right" style="background-color:Blue; width:10px; float:left;"></div> <div id="Div1" style="float:left; width:10px; background-color:Red;"></div> <div id="Div2" style="background-color:Yellow; width:10px; float:left;"></div> <div id="Div3" style="float:left; width:10px; background-color:Orange;"></div> <div id="Div4" style="background-color:#FFF3AC; width:10px; float:left;"></div> <div id="Div5" style="background-color:#FFF3AC; width:100%;"></div> <div style="clear:both;"></div> </div> Similar TutorialsUser CP | Games | Calendar | Members | FAQs | Sitemap | Support | You can see "|" this symbol in this website(please see top menu). How can I put this symbol using css? I can put only menus using css but if i want to put this "|" then What is the tag? Please kindly inofrm me. I am trying to create a separator bar that will act like a HTML <HR> If firefox it works like I want, but in IE it does not. In IE it only displays the width of the image file spacer.gif CSS: Code: .bar {
display: block;
position: absolute;
left: 50px;
right: 60px;
top: 280px;
height: 15px;
background-image: url(bar.gif);
}
HTML: Code: <div class="bar"><img src="spacer.gif"></div> Hi all, I'm quite new to CSS. I tried to design a top-navigation using yui 2.6 menu from markup. Things work fine. But I wanted to create a sperator to group the menubar items. So I added a new class in css like .yui-skin-sam .yuimenuitem-seperator{ _border-bottom:solid 1px #fff; background-color:#ddd; height:1px; } This works fine with Firefox not in IE...( IE as usual.... ) Anyone please suggest me the right way to use seperators in menubar items using YUI.. Best regards, Markish Hi there! I recently decided to start designing in Web 2.0 to the best of my ability... including appearance, organization, and all of that good stuff. However, I am running into a rather annoying problem. At the top of my website, I have a horizontally-aligned list for navigation. Unfortunately, as my code is... organized... Firefox (Not IE8-- gasp!) is treating my line breaks as an extra . As a result, the little separators aren't aligned correctly. HTML Code: Original - HTML Code <div id="bannerNav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <div id="bannerNav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> CSS Code: Original - CSS Code #bannerNav { background: #000 url('images/topNav.gif') repeat-x; border-bottom: 1px solid #FFF; font-size: 18px; color: #EEE; line-height: 40px; height: 40px; width: 100%; } #bannerNav ul { list-style: none; display: inline; } #bannerNav li { background: transparent url('images/topNavLinkSeparator.gif') no-repeat right; display: inline; } #bannerNav li a { padding: 5px 20px 5px 20px; }
Does my problem make any sense? Because an extra space is being added, all of my links are being shifted to the right one space's width, so separators aren't centered anymore. Any help would be greatly appreciated! Thanks! |
|||||||