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>
Related
So my problem is I have an image that when I hover over it, the box shadow changes color. However, I also have some text on the image that changes when the image is clicked, and the problem is that the area the text is in is preventing my box shadow from taking effect. The shadow only works if I hover over a part of the image that isn't occupied by text. Is there any way to fix this? Also I just realized this will affect when I make a click function as the text may prevent me from clicking the image.
HTML:
//The next pickaxe price
<p id="picklvl">Upgrade Pickaxe $<span id="picklvlc">5000</span></p>
//My location for my img
<img id="buy2" src="img/buy2.png">
CSS:
// Text that displays price of next pickaxe
#picklvl {
z-index: 100;
position: absolute;
font-family: fantasy;
top: 52%;
left: 55px;
font-size: 15px;
width: 130px;
}
// Gives location + shadow to my buy2 image
#buy2 {
position: absolute;
top: 60%;
left: 13px;
box-shadow: 5px 5px 5px black;
border: 1px solid;
border-radius: 5px;
z-index: -1;
}
// When I hover over buy2, shadow changes color
#buy2:hover {
box-shadow: 5px 5px 5px #272727;
}
Your text is laid over your image, so it's normal browser behavior that the hover wouldn't work. Because the text and image are not inside each other but elements on the same level in the DOM, you can only hover one at a time.
A fix to also apply the effect when the text is hovered:
#buy2:hover,
#picklvl:hover ~ #buy2 {
box-shadow: 5px 5px 5px #272727;
}
Indicating arrow in a box disappears as soon as I add overflow:auto element to other div. Following is the code:
CSS:
<style>
.arrow_box {
position: relative;
background: #FFF;
box-shadow:0 0 5px rgba(0,0,0,0.4);
width:500px;
border:0px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 73%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #FFF;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #dadee0;
border-width: 18px;
margin-left: -18px;
}
#livecart{max-height:500px;overflow-y:auto;} //Without overflow it works fine
#inicart{top:0px;}
</style>
HTML:
<div class='inicart'>
<div id='livecart' class='arrow_box'>
...
...
...
</div>
</div>
Livecart div is shown on hover event & if its height crosses max-height element, scrollbar should come into picture, that's a necessity. But that in turn makes arrow disappears from the screen.
Any idea why this is happening? And any turnarounds for this particular problem?
Here's jsfiddle link
http://jsfiddle.net/nNJSy/2/
You can try removing overflow:auto from '#livecart' & see the arrow will appear.
The problem is that overflow:auto will make the element try to add scrollbars to accommodate any width/height that is not available in the width/height. Meaning anything outside of the visible area can be seen by scrolling.
The behavior however does not effect pseudo elements, thus scrollbars are not added to the parent.
In order for the pseudo element arrow to be seen, you must use overflow:visible on the parent, #livecart, like so
If you must have overflow:auto (say the element has content) then you need to make room for the arrow within the element by using padding, in this case adding padding-top:30px like so
To see the effect of each type of overflow, check this out
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.
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>
Is it possible to add padding before line-break? As in, making from this to this .
Current CSS code:
span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }
I had to add an extra margin-left:0; to make the two lines start at the same point.
This can be done with pure CSS. Create a solid box-shadow to the left and right of the highlight in the same color (and use margin to correct the spacing). For your case:
span.highlight {
background: #0058be;
color: #FFF;
box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
padding: 2px 0;
margin:0 5px;
}
It took some tryouts, but here it is: the single- and multi-line highlighter with additional padding.
HTML:
<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>
CSS:
h3 {
padding-left: 5px;
}
p {
background: #0058be;
position: relative;
padding: 0 5px;
line-height: 23px;
text-align: justify;
z-index: 0;
}
p span {
background: #fff;
padding: 2px 0 2px 5px;
position: relative;
left: -5px;
}
p em {
background-color: #0058be;
color: #fff;
padding: 2px 5px;
}
ins {
position: absolute;
width: 100%;
line-height: 23px;
height: 23px;
right: -5px;
bottom: 0;
background: #fff;
z-index: -1;
}
The trick is to style the whole paragraph with a blue background, and only put white background on top of that at the beginning and the end. Doing so assures blue background elsewhere...;)
Two main disadvantages:
The highlighted text has to start at the first line (but does not necessarily have to flow into a second),
The paragraph has to be aligned with justification.
Tested in Opera 11, Chrome 11, IE7, IE8, IE9, FF4 and Safari 5 with all DTD's.
See edit history for the previous less successful attempts.
You can achieve this using just box shadow, with no messy padding or margins.
The trick is to use box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
display: block will achieve part of what you want, but of course it will make the span a block element, and so you won't get the wrapping behaviour seen in your example.
Your screenshot holds the clue to what you need to try and do: you need to impose a margin to the left and right on your "normal" paragraph text, and then have the span disregard this (and include its padding), to achieve an "overhang" of your blue highlight when compared to the rest of your text. You can't do that with straight CSS on your span, because it covers two lines and obviously "left" and "right" only refer to the span, and not the individual pieces of text contained therein.
Straight CSS isn't the answer here. You might want to take a look at this question, which uses a jQuery filter to grab the first word in an entity, etc.:
jQuery first word selector
Maybe you can use this technique.
http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
The closest thing, if it really matters that much I'd say is to add display: inline-block;