I found a way to change the background color of a menu option upon hover. However, when you hover an option, it takes up some wide space that moves all the other options to the right, its sort of annoying, i want to maintain a consistent space, so if i hover, only the color should change, not the option moving to the right. Sort of the way facebook has its menu options.
Below is the code:
<div id="menu">
home
profile
account
settings
extra
logout
</div>
CSS:
div#menu {
margin-left: 630px;
margin-top:-20px;
}
option {
margin-left: 20px;
}
#option:hover{
background: #3F2327;
padding: 10px;
}
Remove padding: 10px;
Space around an element takes up space, so if you don't want space, don't add it. If you want it all the time, add it all the time and not just for :hover
Also, unrelated to your problem, but just good practises:
If you use a browser that doesn't support CSS, has it turned off, or isn't graphical you end up with home profile account settings extra logout — you have a list of links, use list markup. There is plenty of guidance on making it pretty.
An id must be unique in a document, only use it to identify a specific element. Use the class attribute if you want to state that a bunch of elements are all members of the same class.
Avoid using class and id names that are the same as HTML elements, it just makes code confusing
1) You are missing a # on "option"
2) Why are you padding on hover? That will cause a movement when you hover above it.
Related
I got two divs, and ive given the divs backgrounds.
They have exactly the same attributes/css.. But one div is fully clickable (the entire image inside the div area is clickable), the other one is only clickable here and there.. Any ideas?
http://romeon.net/deffrage
Its the two buttons
"Deffrage" "Josef"
its the deffrage button that is not working..
Your .backlava item is obstructing the link below it. You'll need to adjust the dimensions of this item. You might be able to simply remove the explicitly-declared height from the li. A quick test revealed that this fixed the problem, without affecting the layout (you should test further though if you decide to go that route).
In following code, change height from 53 to 3.
<li class="backLava" style="left: 9px; top: 0px; width: 66px; height: 53px; overflow: hidden;"><div class="leftLava"></div><div class="bottomLava"></div><div class="cornerLava"></div></li>
Both link for me. But one of them has the end tags in the wrong order (</span></div></a> where it should have been </a></span></div>).
And this CSS
.robin {position: relative;float: left;margin-right: 100px;}
applies to only one of them.
(And what's the point of the span without either a class or an id? That's a no-op, I'd say).
There seems to be Javascript setting the height of the backlava class to 53px instead of it's default of 16px. Remove whatever Javascript is doing that and you should be good.
I have a CMS that allows the user to add float: right; or float: left; to images they place in their rich text editor. I don't want then to also have to manually insert padding, so I was trying to find a way to include that by default.
I know how to do this with a class, but I'm curious if there's a way to specify either in the CSS or with a bit of jquery that, for instance, when an image has the float: left property, it also gets a padding:0 10px 10px 0 rendering.
Any suggestions would be appreciated.
Thanks
If you're to use CSS, the user either needs to designate a class that has both properties, or else input both properties (float and margin).
You could use jQuery, though and do it dynamically.
$("element").css("float") will return either left or right, if the element is indeed floated. You could put this into an if() statement and apply margin accordingly.
Of course, you'd want to make sure you're only running this logic on appropriate image elements, so as not to mess around with all of the other elements that might be floated on the page.
if ($('img.class').css('float') == 'left'){
$('img.class').css('padding', 0);
$('img.class').css('margin','10px 10px 0');
}
I have a select list, where some clients have entered insanely long options for them, which breaks the design. I'm wondering if there is a way to set a fixed width on the select widget, but still have the drop down menu it produces still be wide enough to display all of the option.
Since you don't specify what browser support you need, this may or may not be a solution. This works in most browsers IE9+
select {
width: 100%;
max-width: 150px;
}
Short and sweet. When expanded, the select will display the whole text (unless it exceeds the viewport!).
See the working example here.
You just need to apply width to your select box either inline or CSS. It will be as wide as you have specified but when clicked, it will show all options with whatever width.
I don't know if you can do it with css (browser independent), but here are 2 other solutions:
1. Instead of displaying "veeeeery looooooooooong teeeeeeeeext" you can display something like "veeeeery loooo...";
2. Build your select using divs and lists so when it is closed to have a specific width and when you press something like an arrow to display full width. (I am not sure you understand what I'm trying to say with this one....).
If the list you have (the entries in <select>) are user entered, and the user can enter, say 500 characters, they they definiteky will.
In this case, I would not go for a <select> list, but a custom list built with, say a <div>.
This is not difficult, all you need is
a div that contains the default
option,
a hidden div with all the options
When the user clicks the default option show the hidden div
On click of the items in the hidden div (that is now visible) make that the selected item in the first div
Perhaps there already jquery plugin for this. but i am not sure whether you are open to jquery, I am not a jquery expert anyway.
I know this comparitively more effort than having a select, but i think it is worth the effort. All the hacks - expand the div onmouseover, onclick etc do not look great, might still break your design, and depending on the amount of data the user can enter, would still not be effective.
In the custom list approach, you can wrap the elements, so that you are in complete control.
Add to the CSS something like this:
select {
border: 1px solid #838383;
border-style: outset;
font-weight: bold;
color: #3F3F3F;
max-width: 150px !important;
overflow: hidden;
}
option {
max-width: 120px !important;
overflow: hidden;
}
This works for me. Note there are no dots in front of the anchors.
Not sure if you're open to using jQuery at all but I usually use this method:
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
Is a bit choppy but looks better than cutting off the content
I have a semi-transparent PNG as a background image for a div that that I'm placing over some links. As a result, the links aren't clickable. Is there a way I can hover and click "through" the div that's on top? (BTW, to position to foreground div I'm using absolute positioning and z-index.)
Thanks!
Mike
Why not put the image in the BACKGROUND (you know, like the background-image property that they built for that reason)? The only way to do that is with some highly advanced scripting which would slow your page down, not worth it. You shouldn't be putting an image over your links.
One option would be to use :hover to bring the z-index of the link tags forward above the PNG.
div.container .links {
z-index:0;
}
div.container .background {
z-index:1;
}
div.container:hover .links {
z-index:2;
}
I haven't tested this but I imagine it will have the links behind the shadow when the container isn't hovering but will pull the links before the shadow when the container is hovering.
First, there shouldn't be any reason why you could not put the foreground transparency within the link itself, and thereby avoid the un-clickable problem. Let's take a simple example:
<img src="xxxx.jpg" alt="this link" />
With the new layer this then becomes:
<img src="xxxx.jpg" alt="this link" /><span class="button_overlay"></span>
(I've added class names to aid with coding illustration.)
The overlay would then be styled and positioned absolutely above the original link content. The overlay code piece is inline and follows the piece that belongs in the background, therefore it will naturally get layered above the prior code without extra coding.
The first thing to do is to apply some formatting properties to the anchor to keep the anchor inline but accept internal absolute-positioned elements. (The -moz- command is to support FireFox 2.)
.layered_button {
display: -moz-inline-block;
display: inline-block;
}
Then position your decorative semi-transparent layer over the button.
.button_overlay {
position: absolute;
left: 0px;
top: 0px;
width: XXpx;
height: XXpx;
background: url('xxxx.png') no-repeat 0px 0px;
_background-image: none;
}
The _background: property is a hack to remove the semi-transparent image from display on Internet Explorer 6 versions since there is an inherent problem with this browsers support of transparent PNG images. A regular GIF image could also be substituted if an alternate image is available for IE6 display.
One additional thing you should do is make sure all the content within the link provides the proper cursor interraction. (Some browsers, especially some Internet Explorer versions, do not provide expected cursor changes for markup within links.)
a:hover * {
cursor: pointer;
}
Your second option might be to use a JavaScript library to provide event handling beyond the basic HTML. The reason I suggest a JavaScript library is that most browsers still do not properly support CSS version 2 methods where you can apply the pseudo-class :hover to elements of the DOM other than anchors. The best way to approach this support for now is using libraries.
I particularly like jQuery and adding this hover property can be as easy as:
$("#button_block .layer_object").hover( // div layer hover action
function(){ }, // MouseOver
function(){ } // MouseOut
).click( // div layer clicked: go to address from original link
function(){ window.location = $("#button_block .layered_button").attr("href"); }
);
Alternately, you can make a click on the div layer act as a click on the link with:
$("#button_block .layer_object").click( // div click = anchor click
function(){ $("#button_block .layered_button").click(); }
);
[The reference to #button_block is assuming the two objects reside in the same wrapper with an ID of button_block, and .layer_object is the independent div placed over the link.]
this problem was solved here: Click through a DIV to underlying elements
I've been trying to develop a way to make rows of an ASP.NET GridView (or table in general) clickable, whilst still maintaining all the usual actions you'd associate with links - correct right-click context menu, middle-clickability to open in a new tab, etc.
My solution uses jQuery to find <a> tags within each row and expand that <a> tag to the size of the row, thus making it appear that the row is clickable. It all works fine in Firefox and Chrome, but IE gives priority to the the text in the table rather than the <a> tag, so you get a text selector cursor and can't click the link when you hover over the text. This simple example shows what i mean:
<style type="text/css">
.link {position: absolute; z-index: 100; top: 200px; border: 1px solid pink; width: 150px; height: 150px;}
.content {position: absolute; z-index: 0; top: 200px; border: 1px solid red; width: 150px; height: 150px;}
</style>
link here
<div class="content">
You can't click the link when you hover over this text in IE
</div>
This could be by design for accessibility, but if that was the case I'd expect other browsers to follow suit. Can anyone offer any suggestions as to how to avoid the issue?
Have you tried setting the padding of the a to fill the table row?
The tricky part with that is you'd have to do the math so that it didn't exceed the row. So something like:
$("a").css("padding-top", function() {
$(this).closest("tr").height - $(this).height;
});
and so forth, based on the position of the a to the table row.
My thinking is that maybe IE sees overlapping elements (as in positioned on top of one another) as a possible conflict and thus makes a decision to try to accommodate both ("well, the link is yay big, but the text outside of it really isn't a link, so let's treat it like normal text") etc, but that elements that overlap purely for style (which I think padding is considered) would not raise any alarms because, hey, it's just a visual thing!
Just thinking out loud, let me know if it works out.
Probably one of the issues where IE creates a new z-index stacking context where it shouldn't. Either you've got a positioned parent without a z-index (known IE bug), or maybe IE just does that for table cells anyway, since that introduces a new offsetParent.
The normal approach would be to put a link in every cell (containing only a nbsp if it's empty) and use ‘display: block’ to make the link fill the width of the cell.
why not just make the <a> display:block and add the other div inside of it?
Alternative approach: instead of making the link the size of the row, why not make the entire row clickable?
$('tr').click(function(){
$(this).find('a.link').click();
});
You may want to use the css cursor property to make the row appear clickable as well.
The text wont show-through if the element has a background-color or -image set.
try...
$("a", this).css("background-image", "url(/images/spacer.gif)");