For some reason my login textbox is not clickable in the main area, only on the bottom-border. I looked at other topics on this issue and people have been advised to check for transparent overlapping elements, I checked and I don't see any - also tried messing with a higher z-index but that also did not work. Would love some input!
.input_large {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border: 1px solid #929292;
padding:5px;
width:259px;
background-color:#f6f6f6;
}
this is the CSS. The problem is also viewable here: click
Thanks in Advance!
The span#status is overlapping the input. If you reduce the height of the span it allows the input to be clicked.
#status {
border-radius: 11px;
height: 50px; /*Height reduced*/
left: 0;
margin-top: -100px;
padding-top: 15px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
width: 100%;
z-index: 0;
}
You could also not position this element absolutely, which will allow the input to be clicked. I'm not sure the reasoning behind this element being position:absolute.
The <span id=status> element is in the way. It is not visible (opacity: 0) and blocks the Username control. Instead of using opacity: 0, you can use visibility: hidden, but it seems like you could just tweak the height and positioning of the element so that it fills up the white space above the inputs instead.
Related
I have code blocks on my website that look like this:
This pre block has a child button, as shown below.
I am applying the following CSS to the button element:
pre[class*="language-"] button {
position: absolute;
top: 5px;
right: 5px;
font-size: 0.9rem;
padding: 0.15rem;
border: ridge 1px #7b7b7c;
border-radius: 5px;
text-shadow: #c4c4c4 0 0 2px;
}
code[class*="language-"] button:hover {
cursor: pointer;
background-color: #bcbabb;
}
However, the button appears to be located top: 5px; right: 5px; of the HTML document instead of the pre (ignore the toggle).
Image
I removed the positioning from the button, and it now appears kinda correctly (at least somewhat in the right place) like so:
Image
I can't figure it out why the CSS isn't correctly positioning it...
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
MDN - CSS - Position - Absolute
Add position:relative to pre so that the button can be absolutely positioned inside the pre
pre[class*="language-"] button {
position: absolute;
top: 5px;
right: 5px;
font-size: 0.9rem;
padding: 0.15rem;
border: ridge 1px #7b7b7c;
border-radius: 5px;
text-shadow: #c4c4c4 0 0 2px;
}
code[class*="language-"] button:hover {
cursor: pointer;
background-color: #bcbabb;
}
pre {
position: relative;
}
<pre class="language-js">
<code class="language-js">
some code
</code>
<button>Copy</button>
</pre>
I have a div that includes contact information at the top left of the website. I want the top of the background to hide behind the blue header, but I want the email link to underline when I hover over it. By using z-index, I can get the email link to underline but the top of the background does not go behind the header. I can also get the background to go behind the header but then the email link doesn't underline when I hover. I can't get both to work at the same time. My website link is http://www.michaelgray.com/hometest.html. Can someone help me solve this problem? Thanks.
My contact info code is;
.contactinformation {
display: block;
position: absolute;
background-color: lightblue;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid gray;
z-index: -100;
font-weight: normal;
font-size: 135%;
color: darkblue;
padding: 10px;
margin-left: 75px;
box-shadow: 0px 0px 10px 0px black;
}
My header code is;
.header {
background-color: #00aeef;
z-index: 2;
box-shadow: 0px 0px 10px 0px black;
}
Right now you have your .contactinformation z-index set to -100 which causes is it to fall behind the main content. What you need to do is set it to something higher than the body content, but lower than the header.
For .header add position:relative; (which is necessary for z-index to have an effect) and for .contactinformation change the z-index to 1. You could also just remove z-index from .contactinformation completely.
So my cursor is still the default one even though I've changed it to pointer. As I was taking screenshots to post here I noticed if I hovered on the link and hit CMD it would change to a pointer but it would remain like that everywhere on the page unless I hit CMD again. My second problem is turning off the default shadow on an text input field. Ive tried box-shadow: none; but it didn't work. Im on a mac using safari 9.0.3Default shadow on input element
form {
width: 100%;
input[type=text]{
border-radius: 0.5em;
height: 1.5vw;
font-size: $fntSize;
width: 12.7%;
position: absolute;
top: 10.35vw;
left: 68.3vw;
box-shadow: none;
cursor: text;
}
input[type=image]{
position: absolute;
top: 10.8vw;
left: 80.1vw;
height: 0.8vw;
cursor: pointer;
Solving the issue with the cursor would be a lot easier with a jsfiddle that replicates the error on your end.
In terms of the default styling on the input, that's actually a border style not a box-shadow. The input defaults to border-style: inset so you just need to set your desired properties in its place. E.g. border: 1px solid #ccc or border-style: solid at a minimum.
I have a code like this
<div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel">1B 100E</span></div>
I also have CSS for pinlabel
.pinlabel{
display: none;
position: absolute;
background-color: #3774d5;
height: 16px;
width: 200px;
color: white;
top: 0px;
left: 1px;
font-size: 10px !important;
border-radius: 10px;
border: white 2px solid;}
.maptimize_marker_0:hover span.pinlabel {display:block;}
But I cant get the Hover state work. If to Force hover state in developer tool in chrome everything works fine, but not working when mouse is over... What am I doing wrong? Also I want to put span Under the div, but the span is always on top and covers the div background picture... Please help!
I'm not sure what your problem is, on http://jsfiddle.net/abrunet/Bb9T3/, I copy paste your code and the hover is working..
Last, your span does not have a z-index specified. You might chose one, lower than the divs one and an other higher for the hover case.
You should also try to separate your style in a different sheet to keep your code clean.
Let me know if I misunderstood your question.
I am currently working on my share buttons and I am trying to make them act like the share buttons on YouTube do, when a:hovered a span elemental appears with a text "Facebook/Twitter/RSS" etc.
The span element width should be auto since "Facebook" and "RSS" contains a different amount of letters, and I don't want to set a fixed width.
I want the span element to appear in the "middle" of it's current element, check the youtube share buttom for a hint.
I have come this far, see: http://jsfiddle.net/Kz2n2/
try this:
<span title="share">share</span>
css:
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 100%;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
working jsfiddle:
demo
With jQuery UI Tooltip you can make tooltips for your social icons.
Check out the following example, here is the jQuery UI Tooltip implemented.
$('.tooltip').tooltip();
The title tag on your <a href='#'>` is used as the text for your tooltip.
#<span>RSS.</span>