rounded corner menu item in css without CSS3! - javascript

I try to achieve the following output:
i want to achieve this with HTML and CSS. I do not want to use CSS3(as my client do not want me to!). I try the following code:
HTML:
<div class="menu">
<ul>
<li>registration</li>
<li>Contact</li>
<li>Sch's direc</li>
<li>faculty & staff</li>
<li>Campuses</li>
<li>History</li>
<li><a href="" >Mission</a><img src="images/right_menu.png" /></li>
<li style="margin:0;padding:0;"><img src="images/left_menu.png" /></li>
</ul>
</div>
CSS:
.menu ul{
list-style:none;
}
.menu li{
float:right;
background:url('images/menuBGrepX.png') repeat-x ;
margin-right:10px;
text-transform:uppercase;
}
.menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 2px;
float:left;
}
.menu li.selected{
background:#A07E4E;
}
.menu li:hover{
background:#A07E4E;
color:#313131;
}
As you can expect the background color of li is changing when some one hover over it but the left and right image which I use for give a rounded border feel, it remain same. Please help me. You can check temporary work here : http://www.examplecode.info/enam/pleasehelp/.Thanks in advance.

Use jQuery round corner plugin for cross browser round corners.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1

I'd love to know why your client asked you not to use CSS3 rounded corners? It sounds like a very short-sighted request. The only possible reason for specifying that is because certain browsers (IE6/7/8) do not support it.
In all other browsers, CSS border-radius is by far the best solution for rounded corners. All other solutions have major issues. There's a reason why the CSS3 solution is suddenly very popular, and it's because it solves all the problems that people were struggling with previously.
There are a number of solutions which allow CSS3 border-radius to be used by browsers which support it, and fall-back to Javascript for IE6/7/8. I would seriously recommend one of these solutions. The best one that I know of is CSS3Pie, but there are a number of others.

Is JavaScript allowed?
give all the elements an id, and add to the link an onMouseOver() and onMouseOut() event, where you call getElementById() on each of your borders and change them with a src="images/newimage.jpg".

In your css for hovered list element you must change the image too. For example :
.menu li:hover {
background:url('images/menuBGrepX_hover.png') repeat-x ;
color:#313131;
}
You can't change the color of the image only with CSS, you must change the image entirely.

Related

Pure CSS & JS drop down menu - onmouseover issue

I've written this code to create simple CSS and Javascript dropdown menu.
HTML:
<li>XYZ
<ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
CSS:
#rankSubMenu {
display: none;
position: absolute;
bottom: 10px;
left: 278px;
}
JS:
function showRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'block';
}
function hideRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'none';
}
Menu items have of course some height, background and other stuff to make them look like buttons. The problem is that, there is some empty space between this buttons (like a few pixels) and when user stops mouse cursor there, menu disappear (in fact menu always does that, unless you move your cursor real fast). I tried to define this whole area as div or try any other ideas that I thought about, but with no success. Any suggestions how can I solve this?
First off, welcome to the wonderful world of web development. Based on your use of inline styles, li as a top-level container, and attempted use of Javascript for a simple menu show/hide I can tell you're pretty new. No matter! Its a learning process, and web development is fun. :)
First, for what you want, you can do this via CSS only, and without the need for position:absolute in your menu items or anything crazy like that. Here is a working example of a cleaner menu display:
jsFiddle example
My recommendations for the learning process:
Get comfortable with external CSS sheets, use of inline styles is pretty ancient, and very difficult to maintain
Learn about the benefits of classes over IDs when styling; rarely (never?) do you need to use IDs for styling, and class is usually preferred because you can apply it to multiple elements
Get familiar with proper semantic markup; for example li should not be a top-level container, only the container of another ul if there is a sub list or something
Learn external JS event handlers; using inline onwhatever handlers in HTML is another pretty ancient method, and again makes maintenance very difficult
Best of luck!
CSS
.dropdown li{
float:left;
width: 240px;
position:relative;
}
.dropdown ol{
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than
display:none;) */
}
.dropdown li:hover ol{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
HTML
<ul class="dropdown">
<li>
<a href="#" >Your Link</a>
<ol>
<li> Your Link 1 </li>
<li> Your Link 2 </li>
</ol>
</li></ul>
What else would u need for this? Is there any reason to use javascript to create this?
Take a look at this Fiddle. Perhaps it's what you're looking for.
it's only using HTML and CSS.
#rankSubMenu is probably 0px high, try to add some height, also you can do this js free by using :hover
My guess would be set your anchor tags to display block. If an anchor tag is not a block it will ignore a few css properties, width and height being the two main ones, so your click is just the text.
another possible reason is that the submenu coming in is partially covering the link (check your inspector to see what area it's covering).
if you set the height to that of the original item with overflow hidden and then on hover set height to auto
HTML
<nav class="navigation">
<ul>
<li>Menu</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
CSS
.navigation {
height: 20px;
overflow: hidden;
}
.navigation {
height: auto;
}
no javascript needed

a:active not working on mobile device

my question is: Why this div(with class="menu_cent") not working the class .menu_cent:active, when I clicking on it on mobile devices, but on desktop its works.
<div class="m_10">
<div class="menu_cent">English</div>
</div>
.menu_cent
{background:#fff;font-family:Arial, Helvetica, sans-serif;word-wrap:break-word;min-height:16px;background:#FFF;border:1px solid #d9d9d9;padding:10px;line-height:1.3;text-align:center;font-size:16px;color:#888;font-weight:700;cursor:pointer}
.menu_cent:active
{background:#f1f1f1;font-family:Arial, Helvetica, sans-serif;word-wrap:break-word;min-height:16px;background:#FFF;border:1px solid #d9d9d9;padding:10px;line-height:1.3;text-align:center;font-size:16px;color:#888;font-weight:700;cursor:pointer}
I had tried to use
<div class="m_10">
<div onClick="style.backgroundColor='#f1f1f1';" class="menu_cent">English</div>
</div>
it works but it comes with delay.
Please help
If you want the link to be the target, you're putting the active pseudo class on the wrong element. Here's how you'd want to approach it:
a:active div.menu_cent{
property: blah;
}
Otherwise, you can set the div:active (I know this works in WebKit browsers, don't know about others), but generally you'll want the :active and :visited pseudo classes on anchor elements primarily.
ALSO you have your background set twice in that :active block. Which is partly why you're not seeing any change.

CSS link padding added via Javascript not working in IE

I tried searching for an answer first, but this seems to be an edge case.
I'm adding a class to a link via JavaScript (well jQuery actually but I don't think it matters in this case). The class adds an icon as a background image and some padding. The padding and background image fail to appear on certain links. The problem shows up in IE8, but surprisingly works fine in IE7. I can't test IE9/10. Works fine in Firefox.
I reduced the code down to a bare minimum and created a jsFiddle that illustrates the problem. http://jsfiddle.net/toxalot/fsdcu/
I'll try adding the code here.
<style type="text/css">
body { background-color: #fff }
a:hover { background-color: transparent; color: #c30 }
ul { padding-left: 40px }
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc }
</style>
<ul>
<li style="float: left"><a class="iconNewWindowLeave" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<ul>
<li style="float: left"><a class="linkExternal" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<script type="text/javascript">
$('.linkExternal').each(function() {
$(this).addClass('iconNewWindowLeave');
});
</script>
I've removed the image from the example and added a background color for illustration. In IE 8, the second link doesn't have right padding. Hovering over the link, adds the padding. If I remove the a:hover CSS, hovering doesn't correct the problem. If I remove the float, the problem goes away. If I remove any of the other CSS, the problem goes away.
So I've narrowed down the cause(s), but I don't know what to do about it. I don't want to remove or change the existing code. It's all required for the site layout. If possible, I'd like to add some CSS or JavaScript to fix it. It's a minor issue, but it's bugging me. I'm also curious as to whether or not the problem appears in newer versions of IE.
try to add : a display:inline-block; or display:block; to .iconNewWindowLeave
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc; display:inline-block; }
(not tested)
Whenever you have some floating containers on the page, always clear the parent container.
In your case add a style clear:left on the ul. That should work.
And in case you are using many float throughout your application, better add a clearfix class on the parent container.

Is there a way to have a div tag without having a line break, or is there an alternative?

In my website, in asp.net 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.
Basically, I have this in my footer:
Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888
And the only thing I want printed out is the phone number.
I use
<div class="noprint">whatever I want omitted when printing</div>
And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!
Update: My print.css stylesheet looks like this:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!
gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)
<ul class="footer">
<li class="no-print">KnowledgeBase</li>
...
<li>888-888-888</li>
<ul>
with a css like
.footer li {
list-style-type: none;
display: inline;
padding: 0 10px;
border-right: 1px solid black;
}
.footer li:last-child {
border-right: none;
}​
hope that helps
Use <span>.
However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.
use css
<div style="display:inline" class="noprint">whatever I want omitted when printing </div>
If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.
If you still want to use an extra div, I recommend using display:inline, but if you just want the whole footer to have both classes you can do that as well.
You can add multiple classes like this:
<span class='footer lower noprint'></span>
In CSS this would look like:
.footer.lower.noprint{ display:none; }
Alternatively, the 'noprint' class will also work without specifying all three classes.
Here's an example: http://jsfiddle.net/yKRyp/
well set the specific width and height of the div using CSS and apply float
<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>
a live example here
http://jsfiddle.net/AGWGs/
div is a block-type element, it is usually used as to group and contain block-type elements.
Using CSS, you can change the display type of any element, however.
In a quick example:
display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...
display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.
display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum compatibility.
P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.

rounded corners IE and background images

I have an item in my page thus:
<div class="rounded">
<h2>Heading Text</h2>
<ul>
<li>Summary link</li>
<li>Summary link</li>
<li>Summary link</li>
</ul>
<p>or... some text or whatever</p>
</div>
the styles associated with this block are:
.rounded{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url("10x10.50percentalpha_white.png") repeat scroll left top transparent;
height:270px;
overflow:hidden;
padding:0 0 5px;
}
.rounded h2{
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-right-radius:5px;
border-top-left-radius:5px;
background:url("wide_rl_fade.png") repeat-y scroll right top transparent;
color:#C4161C;
font-size:130%;
padding:10px 20px;
text-align:left;
text-transform:uppercase;
}
of course this works a treat in FF and safari (and opera).. but IE doesnt do anything (how i hate IE)
i have done a bit of searching around and found the DD_roundies solution..
http://www.filamentgroup.com/lab/achieving_rounded_corners_in_internet_explorer_for_jquery_ui_with_dd_roundi/
but sadly this just drops the backgrounds and thus renders the list and heading text with a transparent background - works fine when opacity or bg images are not used, but that doesnt suit my problem obviously...
does anyone know of a solution to this?
i could of course ditch the bg image, but this seemed to be the most reliable way to get the opacity working across browsers..
thanks
nat
The style you use for rounded corners is only recognised by Firefox and Webkit browsers. The only other solution you have really is the use of background images. There is a jQuery plugin I used that was quite nice but again, for Internet Explorer it just places images over the corners to achieve a rounded illusion. Here it is: http://jquery.malsup.com/corner/
EDIT: CSS3 will have a tag that achieves this, but it still is not supported by any current IE version: http://www.w3.org/TR/css3-background/#the-border-radius
Look up http://css3pie.com/ it uses attached behaviors to give IE some css3 capabilities.
not actually an answer.. dont shoot me but needed more chars than the comments would allow
thanks for the replys..
again though this does not seem to work with the backgrounds being alpha'd png's
which is a shame as that appeared to be just what i needed..
tried
.rounded{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url("10x10.50percentalpha_white.png") repeat scroll left top transparent;
height:270px;
overflow:hidden;
padding:0 0 5px;
behaviour: url(path/to/PIE.htc)
}
I am using an alpha'd background image as putting opcatiy or whatever on the div, then alphas the content too.. dont want that..
any other suggestions?
unless someone can explain a way to get the background nicely alpha'd without affecting the alphaness of the contained text/content.
with all the funding that M$ have why cant they get rounded corners working like everyoe else has.. eh?
tossers - always spend so much time getting things to work in IE that work fine everywhere else..

Categories

Resources