I created a select box using HTML and styled it using css:
#footer {
padding-bottom:60px;
position:absolute;
}
This disables the select box and makes it unclickable. But if I remove the "position:absolute" the select box works fine but it screws up my positioning. Does anyone have a solution for this?
EDIT: it works find when position:relative is used, but it's unclickable when position is fixed or absolute. I used for the HTML part.
These kind of issues almost always result from another element overlapping the textbox. To resolve the problem I usually use the inspector tool in firebug. When you click the text box it will select the invisible element instead which will give you a much better picture of what is happening.
That being said the usual fix is setting a higher z index as Simon pointed out.
It's difficult without knowing what other code may be effecting it. Try setting the z-index to high, or give us an example of the html aswell.
You've got something else wrong if the select is unclickable.
See this JS Fiddle: http://jsfiddle.net/SFUkR/1/
Absolutely positioning a select (or its parent container) does not make it disabled by default.
Related
I've tried this from so many angles but can't figure it out.
See my map here: http://defendiendovidas.org/test.html
I need the country names in to appear on top of everything else. z-index isn't helping, even though my span is position:absolute.
Any pointers to achieve this would be greatly appreciated!
P.S. if anyone has a suggestion for how to build this map better, I'd be keen to hear. Thing is, I want the fade-on-hover effect. But my images are overlapping and therefore as you can see with Brazil, the hover is kind of conflicting with nearby countries (images) that are positioned "on top" of Brazil. map/area is no good because it doesn't allow for area:hover...
Thanks!
The solution is to apply the opacity to the img and not to the entire li,
since opacity and z-index are somehow connected.
Also, since you've asked if anyone has a suggestion how to make this map better, well...
Your code was really messy and you've also used lis outside of a list for some reason, so I kind of changed a lot of the HTML too.
Here's the Fiddle: Link
Hope it helps :)
I am not able to see a full map here. You have mentioned it too. Well there is also no other span found!
The map is somehow cool. But if you want the images to ride over the image. You might use the position relative!
Have you tried that? You have an absolute, but absolute works on the div or container its relative too. If there is no container having position relative the main body tag is considered to be the one. So try giving this image a relative position. Then add the z-index and absolute position!
Try Position:relative or Position:absolute
Give z-index a shot too, z-index:50
Noormally you can select text with left click function
I work on this Site and am not able to select text in the top areas of the page.
What is wrong with the code?
HTML: link
CSS: link
The footer is on top of the text. Just remove position:absolute form #footer
EDIT:
I can't replicate your issues because my solution is working. Here you can see it
I right clicked the offending text in firefox and used the "inspect element" option, which helpfully tells me what element is sitting directly below the mouse.
Your #footer div is sitting ontop of the text, due to having position:absolute; set with no actual positioning.
If you remove the position:absolute; from #footer and reposition it properly, your problem should go away.
Related note:
I notice that the way you're handling positioning content on the page is a bit weird - you're using position:absolute for nearly everything?
It's outside of the scope of this answer but seriously consider moving away from this -- it's causing this problem and will probably give you a headache in future. That thing you're doing where the contents of your footer have massive margins to push them further down the page past the content? That's an unstable solution and a good sign that your layout has gone wrong somewhere.
This is a fairly simple layout and can be handled fine by basic flow control like floats...
The footer div blocks the text so only the upper part is unselectable. You might want to change your layout or structure of your html and css to avoid blocking the text.
Take a look at this:
Please see link below:
http://cssmenumaker.com/builder/111528
I am trying to figure it out. What I don't understand is how it works - I cannot fathom how the sub-menus remain hidden and don't interfere with the rest of the page.
Allow me to explain further - when I tried to make my own I had it in my mind that I would have to hide and show the submenus (I was using DIV tags thinking I was clever) but that when made visible they would then take their place in the DOM and move everything else out of the way (something I obviously wanted to avoid but don't understand entirely how to accomplish). When I tried to make mine using JS it didn't work as I wanted. I changed the 'display' and 'visibility' properties of the nested DIV tags (sub-menus) to 'none' and 'hidden' respectively until an onmouseover event and it just doesn't work correctly and I have no idea how to make something work like the example.
I am looking at the hover commands and cannot see how this makes the sub-menus invisible until hovered over. I can also only see the display:block command as the only reference to how they are displayed but do not understand how they don't move everything else out of the way when displayed.
Does this make any sense? Can anyone explain how the example works, what the DOM model looks like and how all the parts of the DOM are interacting with each other? W3C is not much help here.
My impression was that the DOM model is static and will display things in box fashion unless you add some complex z-index or some other method so what am I missing here? I would also prefer a pure CSS solution which is why I posted the example above, I want to understand all this much more than I currently do.
Much obliged to any help!
The answer is: position absolute.
Position absolute removes the elements from the static flow, thus not pushing away the other elements. To control the absolutely positioned elements, you can wrap them in a relative positioned element: the offset parent. This way, you can create blocks/menus/etc. with absolutely positioned elements within, in a normal flow.
For a brief explanation: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
The display none/block part is just hiding/showing the submenu's. If a parent got :hover, you can show the submenu with display: block.
Considering the attached image, I want each "cell" (so to speak) to have a DOM element over it so that it can be clicked, set a background and so on.
I tried making a table and with slight adjustments, made it work for Firefox. I opened other browsers and the fine tunning in Firefox did not apply to them.
How would you do this? There are 465 cells that need to be clickable and all superimposed over the cells in the image with as little error in positioning as possible.
EDIT:
Here's the JSFiddle: http://jsfiddle.net/Francisc/PUPHz/embedded/result/
This is how the table looks in various browsers:
http://89.45.196.35/~francisc/chrome.jpg
http://89.45.196.35/~francisc/firefox.jpg
http://89.45.196.35/~francisc/ie.jpg
Thank you.
Here is what I would do, it's messy but it could work. Make a single div fit over the top left and find out the best width and height (Guessing you know that from the table that you tried)
You will have to make the image go under the divs so I think you have to give it an overlay attribute or something like that (Can't remember what it's called) so with that in mind you have the class for each div to be width: XXpx height: XXpx float:left and that should be it. From there you can make the :hover class to make the background change and a selected class also if you need to.
Hope it helps
I have a dropdown that I'm looking to enlarge without effecting the text and ensuring the right hand down arrow remains at the full hieght of the element.
I've tried adding padding but this effects the right side:
Dropdown with padding http://hoctordesign.com/dropdown2.png
I've tired adding height but I can't vertically align the text:
Dropdown with height http://hoctordesign.com/dropdown.png
Anyone solved this before?
Thanks,
Denis
This is browser-dependent behaviour. Each browser applies css to form controls differently.
The best breakdown of what you can do (that I've come across) is at http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/. And the most relevant section is http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
In your case it would be better to use a custom element that acts like a select box.
Here is a nice one using jQuery
Select Box replacement